/* ==========================================================================
   A5 Systems — custom styles (supplements Tailwind CDN utilities)
   ========================================================================== */

:root {
  --navy-900: #0d0d0d; /* near-black — header, footer, text on accent */
  --navy-800: #0d0d0d; /* near-black — page background */
  --navy-700: #1a1a1a; /* charcoal — section variation */
  --navy-600: #2b2b2b; /* charcoal — card surfaces */
  --accent: #d97730;   /* burnt orange */
  --accent-light: #e89555;
  --accent-dim: #a1521c;
  --text-muted: #b3b3b3;
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--navy-800);
  -webkit-font-smoothing: antialiased;
}

/* Ambient glow behind hero / section headers ------------------------------ */
.glow-bg {
  position: relative;
  isolation: isolate;
}
.glow-bg::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -20%;
  left: 50%;
  width: min(900px, 120%);
  height: 520px;
  transform: translateX(-50%);
  background: radial-gradient(
    ellipse at center,
    rgba(217, 119, 48, 0.2) 0%,
    rgba(217, 119, 48, 0.07) 40%,
    transparent 70%
  );
  pointer-events: none;
}

/* Subtle grid texture ----------------------------------------------------- */
.grid-texture {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
  background-size: 32px 32px;
}

/* Cards ------------------------------------------------------------------- */
.card {
  background-color: rgba(43, 43, 43, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.07);
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.card:hover {
  transform: translateY(-4px);
  border-color: rgba(217, 119, 48, 0.5);
  box-shadow: 0 18px 40px -20px rgba(217, 119, 48, 0.45);
}

/* Nav --------------------------------------------------------------------- */
.nav-link {
  position: relative;
  color: var(--text-muted);
  transition: color 0.2s ease;
}
.nav-link:hover {
  color: #ffffff;
}
.nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  height: 2px;
  width: 0;
  background-color: var(--accent);
  transition: width 0.25s ease;
}
.nav-link:hover::after,
.nav-link[aria-current="page"]::after {
  width: 100%;
}
.nav-link[aria-current="page"] {
  color: #ffffff;
}

/* Mobile menu animation --------------------------------------------------- */
#mobile-menu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}
#mobile-menu.open {
  max-height: 22rem;
}

/* Forms ------------------------------------------------------------------- */
.field {
  background-color: rgba(13, 13, 13, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #ffffff;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.field::placeholder {
  color: #8f8f8f;
}
.field:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(217, 119, 48, 0.22);
}

/* Focus visibility for keyboard users ------------------------------------- */
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 0;
}

/* Sharp corners site-wide — buttons, cards, fields, inputs ---------------- */
button,
input,
textarea,
select,
.card,
.field {
  border-radius: 0;
}

/* Placeholder image blocks ------------------------------------------------ */
.placeholder-visual {
  background:
    linear-gradient(135deg, rgba(217, 119, 48, 0.26), rgba(217, 119, 48, 0) 60%),
    linear-gradient(315deg, rgba(232, 149, 85, 0.18), rgba(13, 13, 13, 0) 55%),
    var(--navy-600);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Reduced motion ---------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .card,
  .nav-link::after,
  #mobile-menu {
    transition: none;
  }
}