/*
  Header / mobile-nav pattern — sticky header with a horizontal nav
  that collapses, below the nav breakpoint, into a real labeled
  hamburger <button>.

  Why the hamburger MUST be a real <button> with aria-label: the
  source project's audit found the mobile menu toggle built as a
  plain <div>/<span> with click handling bolted on — invisible to
  keyboard users (not focusable, not activatable with Enter/Space)
  and with no accessible name announced by screen readers at all.
  A <button aria-label="..."> fixes both problems for free; there is
  no good reason to build a custom toggle out of a non-interactive
  element. Pair this file with nav.js for the minimal state wiring
  (aria-expanded, open class, body scroll lock).
*/

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--color-surface-dark);
  color: var(--color-text-inverse);
  box-shadow: var(--shadow-md);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  min-height: 80px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  color: var(--color-text-inverse);
  font-weight: 900;
}

.site-nav__list {
  display: flex;
  gap: var(--space-5);
  align-items: center;
  list-style: none;
}

.site-nav__link {
  position: relative;
  display: inline-block;
  color: var(--color-text-inverse);
  font-size: var(--font-small);
  font-weight: 700;
  white-space: nowrap;
}

/* Animated underline gives hover AND focus the same visible
   treatment — don't rely on color-change alone for either state. */
.site-nav__link::after {
  position: absolute;
  right: 0;
  bottom: -0.4em;
  left: 0;
  height: 2px;
  background: var(--color-brand-primary-onDark);
  opacity: 0;
  transform: scaleX(0.7);
  transition: opacity 160ms ease, transform 160ms ease;
  content: "";
}

.site-nav__link:hover::after,
.site-nav__link:focus-visible::after,
.site-nav__link.is-active::after {
  opacity: 1;
  transform: scaleX(1);
}

.site-header__actions {
  display: flex;
  gap: var(--space-3);
  align-items: center;
}

/* Hamburger toggle button. Required attributes in markup:
   <button type="button" class="nav-toggle" aria-label="Toggle navigation"
           aria-expanded="false" aria-controls="site-nav">
     <span class="nav-toggle__icon"></span>
   </button>
   aria-expanded is flipped true/false by nav.js on every click — it
   must reflect real state, not be hardcoded. */
.nav-toggle {
  display: none;
  width: 46px;
  height: 44px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-text-inverse);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text-inverse);
  cursor: pointer;
}

.nav-toggle__icon,
.nav-toggle__icon::before,
.nav-toggle__icon::after {
  display: block;
  width: 22px;
  height: 2px;
  background: currentColor;
  content: "";
}

.nav-toggle__icon {
  position: relative;
}

.nav-toggle__icon::before,
.nav-toggle__icon::after {
  position: absolute;
  left: 0;
  transition: transform 160ms ease, top 160ms ease;
}

.nav-toggle__icon::before {
  top: -7px;
}

.nav-toggle__icon::after {
  top: 7px;
}

/* Open-state "X" transform, driven purely by the aria-expanded
   attribute nav.js sets — no separate "is-open" class needed on the
   button itself. */
.nav-toggle[aria-expanded="true"] .nav-toggle__icon {
  background: transparent;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__icon::before {
  top: 0;
  transform: rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__icon::after {
  top: 0;
  transform: rotate(-45deg);
}

@media (max-width: 900px) {
  .nav-toggle {
    display: inline-flex;
  }

  .site-nav {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    display: none;
    padding: var(--space-2) 0 var(--space-4);
    background: var(--color-surface-dark);
    border-top: 1px solid rgba(255, 255, 255, 0.12);
  }

  .site-nav.is-open {
    display: block;
  }

  .site-nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .site-nav__link {
    display: block;
    padding: var(--space-3) var(--space-4);
  }

  .site-header__actions .btn {
    display: none;
  }
}

/* Applied to <body> by nav.js while the mobile menu is open, so the
   page behind an overlaid menu can't be scrolled — a real gap the
   source project's audit flagged (menu open, background still
   scrolled underneath it). */
body.nav-open {
  overflow: hidden;
}