/* ==========================================================================
   METRIX LAB - header.css
   Section: Header / Nav (page order 1).
   Glassmorphism sticky bar + mobile slide/fade overlay menu.
   Behavior (.is-open / .is-scrolled / aria) is owned by foundation nav.js;
   this file only styles the markup it emits. All rules scoped to #site-header.
   ========================================================================== */

/* ---- Sticky glass bar ---------------------------------------------------- */
#site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-header);
  min-height: var(--header-height);
  display: flex;
  align-items: center;
  /* CRITICAL: do NOT put backdrop-filter/filter/transform on #site-header.
     Any of those make it the containing block for position:fixed descendants,
     which trapped the full-screen .nav__menu overlay inside the one-bar-tall
     header box - its links then overflowed onto the page with no background
     behind them. The glass blur lives on ::before (not an ancestor of the
     menu in the containing-block sense) so the overlay can fill the viewport. */
}

/* Glass bar background - a pseudo-element carries the blur so #site-header
   stays filter-free and never becomes the fixed menu's containing block. */
#site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: rgba(8, 8, 8, 0.55);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  backdrop-filter: blur(16px) saturate(150%);
  border-bottom: 1px solid var(--border-color-soft);
  transition:
    background-color var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out);
}

/* Scrolled: denser charcoal glass + subtle depth (nav.js toggles .is-scrolled). */
#site-header.is-scrolled::before {
  background-color: rgba(10, 10, 10, 0.82);
  border-bottom-color: var(--border-color);
  box-shadow: var(--shadow-md);
}

#site-header .site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  width: 100%;
  min-height: var(--header-height);
}

/* ---- Brand / logo -------------------------------------------------------- */
#site-header .site-header__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  text-decoration: none;
  color: var(--color-text);
  flex: none;
  z-index: calc(var(--z-overlay) + 1); /* sit ABOVE the open overlay so the bar stays visible */
  transition: opacity var(--dur-fast) var(--ease-out);
}
#site-header .site-header__brand:hover { opacity: 0.92; }

#site-header .site-header__logo {
  width: 40px;
  height: 40px;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 0 12px rgba(234, 88, 12, 0.45));
}

#site-header .site-header__wordmark {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: clamp(1.15rem, 1rem + 0.6vw, 1.4rem);
  letter-spacing: var(--tracking-tight);
  line-height: 1;
  color: var(--color-text);
  white-space: nowrap;
}
#site-header .site-header__wordmark-accent {
  color: var(--color-accent);
}

/* ---- Hamburger toggle (mobile-first: visible) ---------------------------- */
#site-header .nav__toggle {
  position: relative;
  /* Must outrank .nav__menu (also --z-overlay). With equal z-index the menu,
     being later in the DOM, painted over the toggle and ate the tap - so the
     X could never be clicked to close. +1 keeps the toggle tappable while open. */
  z-index: calc(var(--z-overlay) + 1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  flex: none;
  background: transparent;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  cursor: pointer;
  transition:
    border-color var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out),
    background-color var(--dur-base) var(--ease-out);
}
#site-header .nav__toggle:hover {
  border-color: var(--color-accent);
  box-shadow: var(--glow-orange-sm);
  background-color: var(--color-accent-tint);
}

#site-header .nav__toggle-box {
  position: relative;
  display: block;
  width: 20px;
  height: 14px;
}
#site-header .nav__toggle-bar {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: var(--radius-pill);
  background-color: currentColor;
  transition:
    transform var(--dur-base) var(--ease-out),
    opacity var(--dur-fast) var(--ease-out),
    top var(--dur-base) var(--ease-out);
}
#site-header .nav__toggle-bar:nth-child(1) { top: 0; }
#site-header .nav__toggle-bar:nth-child(2) { top: 6px; }
#site-header .nav__toggle-bar:nth-child(3) { top: 12px; }

/* Open: morph hamburger into an X (nav.js adds .is-open on #site-header) */
#site-header.is-open .nav__toggle {
  border-color: var(--color-accent);
  color: var(--color-accent);
}
#site-header.is-open .nav__toggle-bar:nth-child(1) {
  top: 6px;
  transform: rotate(45deg);
}
#site-header.is-open .nav__toggle-bar:nth-child(2) {
  opacity: 0;
}
#site-header.is-open .nav__toggle-bar:nth-child(3) {
  top: 6px;
  transform: rotate(-45deg);
}

/* ---- Mobile menu overlay (glass, slide + fade in) ------------------------ */
#site-header .nav__menu {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: var(--space-2xl);
  padding: calc(var(--header-height) + var(--space-2xl)) var(--container-pad) var(--space-3xl);
  /* Fully OPAQUE panel. backdrop-filter is unreliable across mobile browsers and
     0.9 alpha let the hero text bleed through - so use an opaque dark gradient
     instead of relying on the blur (also cheaper to paint). */
  background-color: #0a0a0a;
  background-image: linear-gradient(180deg, #141414 0%, #050505 100%);
  /* hidden at rest: fade out + slide down, no pointer/focus capture */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-12px);
  pointer-events: none;
  transition:
    opacity var(--dur-base) var(--ease-out),
    transform var(--dur-slow) var(--ease-out),
    visibility 0s linear var(--dur-base);
}
#site-header.is-open .nav__menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
  transition:
    opacity var(--dur-base) var(--ease-out),
    transform var(--dur-slow) var(--ease-out),
    visibility 0s;
}

#site-header .nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

#site-header .nav__item {
  /* staggered entrance of links when the overlay opens */
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity var(--dur-base) var(--ease-out),
    transform var(--dur-slow) var(--ease-out);
}
#site-header.is-open .nav__item {
  opacity: 1;
  transform: translateY(0);
}
#site-header.is-open .nav__item:nth-child(1) { transition-delay: 60ms; }
#site-header.is-open .nav__item:nth-child(2) { transition-delay: 120ms; }
#site-header.is-open .nav__item:nth-child(3) { transition-delay: 180ms; }
#site-header.is-open .nav__item:nth-child(4) { transition-delay: 240ms; }

#site-header .nav__link {
  position: relative;
  display: inline-block;
  font-family: var(--font-heading);
  font-size: var(--fs-h3);
  font-weight: 500;
  letter-spacing: var(--tracking-tight);
  color: var(--color-text);
  text-decoration: none;
  padding: var(--space-2xs) 0;
  transition: color var(--dur-base) var(--ease-out);
}
/* animated underline / hover + active = orange */
#site-header .nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 2px;
  border-radius: var(--radius-pill);
  background: var(--gradient-accent-h);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-base) var(--ease-out);
}
#site-header .nav__link:hover,
#site-header .nav__link:focus-visible,
#site-header .nav__link[aria-current="page"] {
  color: var(--color-accent);
}
#site-header .nav__link:hover::after,
#site-header .nav__link:focus-visible::after,
#site-header .nav__link[aria-current="page"]::after {
  transform: scaleX(1);
}

#site-header .nav__cta {
  align-self: flex-start;
  margin-top: var(--space-sm);
  /* entrance after the links */
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity var(--dur-base) var(--ease-out),
    transform var(--dur-slow) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out),
    background-position var(--dur-base) var(--ease-out);
}
#site-header.is-open .nav__cta {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 300ms;
}

/* ==========================================================================
   DESKTOP (>= 880px) - inline nav, hide hamburger + overlay treatment
   Switch point raised from 768px: at 768-820px the full inline row (brand +
   5 links + "Start Your Project" CTA) overflowed and clipped the CTA off the
   right edge. Below 880px the mobile overlay + hamburger is used instead.
   (Keep js/nav.js DESKTOP_BP in sync with this value.)
   ========================================================================== */
@media (min-width: 880px) {
  #site-header .nav__toggle {
    display: none;
  }

  #site-header .nav__menu {
    position: static;
    inset: auto;
    z-index: auto;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-xl);
    padding: 0;
    background: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    /* always visible on desktop, regardless of .is-open */
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
    transition: none;
  }

  #site-header .nav__list {
    flex-direction: row;
    align-items: center;
    gap: var(--space-lg);
  }

  #site-header .nav__item {
    /* no entrance animation on desktop */
    opacity: 1;
    transform: none;
    transition: none;
  }
  #site-header.is-open .nav__item { transition-delay: 0s; }

  #site-header .nav__link {
    font-family: var(--font-body);
    font-size: var(--fs-sm);
    font-weight: 500;
    letter-spacing: 0.01em;
    color: var(--color-text-muted);
    padding: var(--space-2xs) 0;
  }
  #site-header .nav__link:hover,
  #site-header .nav__link:focus-visible,
  #site-header .nav__link[aria-current="page"] {
    color: var(--color-accent);
  }

  #site-header .nav__cta {
    align-self: center;
    margin-top: 0;
    margin-left: var(--space-sm);
    opacity: 1;
    transform: none;
    transition:
      transform var(--dur-base) var(--ease-out),
      box-shadow var(--dur-base) var(--ease-out),
      background-position var(--dur-base) var(--ease-out);
  }
  #site-header.is-open .nav__cta { transition-delay: 0s; }
}

@media (min-width: 1024px) {
  #site-header .nav__list { gap: var(--space-xl); }
}

/* ==========================================================================
   REDUCED MOTION - keep content visible, drop transforms/entrance motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  #site-header,
  #site-header .nav__menu,
  #site-header .nav__item,
  #site-header .nav__cta,
  #site-header .nav__link::after,
  #site-header .nav__toggle-bar {
    transition: none !important;
  }
  #site-header.is-open .nav__menu,
  #site-header.is-open .nav__item,
  #site-header.is-open .nav__cta {
    transform: none;
  }
  #site-header .nav__item,
  #site-header .nav__cta {
    opacity: 1;
  }
}