/* Dark primary nav (DESIGN.md § Recurring parts): dark bar, a green dot on the wordmark,
   links at 75% white, active item white with a 2px orange-rule underline. */
.site-header {
  background: var(--color-nav-bg);
}

/* Home page / 404 only: header floats transparent over the hero cover photo instead of taking
   its own row — .hero (hero.css) supplies the negative top margin that lets it reach y:0 under
   this. The link treatment below is identical either way; only the bar background differs. */
.has-hero .site-header {
  position: absolute;
  inset-inline: 0;
  top: 0;
  z-index: var(--z-header);
  /* Not a bar — a short dark fade at the very top of the photo so the white wordmark and nav
     links keep contrast over bright/light parts of the cover image. */
  background: linear-gradient(to bottom, rgba(22, 32, 28, 0.5), rgba(22, 32, 28, 0));
}

.has-hero.js-nav-ready .nav-toggle {
  background: rgba(22, 32, 28, 0.35);
}

.has-hero.js-nav-ready .nav-toggle__bar,
.has-hero.js-nav-ready .nav-toggle__bar::before,
.has-hero.js-nav-ready .nav-toggle__bar::after {
  background: var(--color-nav-link-active);
}

/* Below 768px the open list is a dark drop-down sheet (see the .js-nav-ready block further
   down) that reads as an extension of the nav bar — so the links keep the same treatment as
   the desktop inline nav: 75% white, active item white with the 2px orange-rule underline. */
@media (max-width: 767.98px) {
  .js-nav-ready .site-nav__list .site-nav__item a {
    display: flex;
    align-items: center;
    min-height: 44px;
    color: var(--color-nav-link);
  }

  /* Underline the text only, not the full panel width — a full-bleed rule under "Regions" reads
     as a section header for the items beneath it. Same 2px orange as the desktop nav. */
  .js-nav-ready .site-nav__list .site-nav__item a[aria-current="page"] {
    color: var(--color-nav-link-active);
    font-weight: 500;
    text-decoration: underline;
    text-decoration-color: var(--color-accent-rule);
    text-decoration-thickness: 2px;
    text-underline-offset: 5px;
  }

  /* Keep the wordmark legible above the dark sheet when it's open. */
  .site-header:has(.site-nav__list.is-open) .site-header__logo {
    position: relative;
    z-index: calc(var(--z-header) + 2);
  }
}

.site-header__inner {
  /* +2×space-4 so the content inside the inner padding lands at exactly --content-max-width,
     flush with the page sections below (.home-regions / .region-page), which cap at that width
     inside .page's own space-4 padding. */
  max-width: calc(var(--content-max-width) + 2 * var(--space-4));
  margin-inline: auto;
  padding: var(--space-4);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
}

.site-header__logo {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-weight: 600;
  font-size: 17px;
  letter-spacing: -0.02em;
  color: var(--color-nav-link-active);
  text-decoration: none;
}

/* DESIGN.md: the wordmark has no hover state, unchanged from rest. Without this, the
   global html a:hover (base.css) would still darken it toward in-site-link green on hover, since
   that rule outranks a plain .site-header__logo on specificity alone. */
.site-header__logo:hover {
  color: var(--color-nav-link-active);
}

.site-header__mark {
  flex: 0 0 19px;
  width: 19px;
  height: 19px;
}

/*
 * The burger toggle only does anything once nav.js runs, so it stays out of the DOM's visible
 * flow until then — otherwise it renders as a dead button. nav.js adds `.js-nav-ready` to
 * <body> and takes over collapsing `.site-nav__list` behind it below the ~768px breakpoint.
 * Without JS, `.site-nav__list` is always visible at every width (the rules below the
 * `.js-nav-ready` block) — that's the progressive-enhancement fallback, not a broken state.
 */
.nav-toggle {
  display: none;
}

.site-nav__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  width: 100%;
}

.site-nav__item a {
  display: block;
  padding: var(--space-2) 0;
  text-decoration: none;
  font-size: 15px;
  color: var(--color-nav-link);
}

.site-nav__item a[aria-current="page"] {
  color: var(--color-nav-link-active);
  font-weight: 500;
}

/* Same "more emphasis on hover" rule as the rest of the site (base.css), just inverted: this is
   white-on-dark, so hover brightens (75% white → full white, the same shade the active/current
   page already uses) instead of darkening. */
.site-nav__item a:hover {
  color: var(--color-nav-link-active);
}

@media (min-width: 768px) {
  .site-nav__list {
    flex-direction: row;
    width: auto;
    gap: 28px;
  }

  .site-nav__item a {
    padding: var(--space-1) 0;
  }

  /* Active item: white with a 2px orange underline (DESIGN.md). Scoped to the desktop inline
     nav — in the mobile drawer the active link is just dark text (media block above). */
  .site-nav__item a[aria-current="page"] {
    padding-bottom: 2px;
    border-bottom: 2px solid var(--color-accent-rule);
  }
}

/* No border, no background, no border-radius — deliberately not styled as a button. It's meant
   to read as a bare icon (hamburger closed, X open), not a chip/button around one. */
.js-nav-ready .nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  margin-left: auto;
  /* Pulls it in from .site-header__inner's space-4 (16px) edge padding toward the actual
     screen edge — this button only ever shows below 768px (hidden at 768px+ further down),
     so no breakpoint-scoping needed here. */
  margin-right: calc(var(--space-3) * -1);
  border: none;
  background: transparent;
  cursor: pointer;
  /* Stays above both the backdrop and the drawer (see further down) so it's always visible
     and clickable in the same corner — closed as a burger, open as its X morph below. */
  position: relative;
  z-index: calc(var(--z-header) + 2);
}

/* Closed burger sits on the dark nav bar (or the hero photo) — white bars. When open, the
   X sits over the light slide-out panel, so its two bars flip back to dark (further down). */
.js-nav-ready .nav-toggle__bar,
.js-nav-ready .nav-toggle__bar::before,
.js-nav-ready .nav-toggle__bar::after {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--color-nav-link-active);
  transition: transform 0.2s ease, opacity 0.2s ease, top 0.2s ease;
}

.js-nav-ready .nav-toggle__bar {
  position: relative;
}

.js-nav-ready .nav-toggle__bar::before,
.js-nav-ready .nav-toggle__bar::after {
  content: "";
  position: absolute;
  left: 0;
}

.js-nav-ready .nav-toggle__bar::before {
  top: -6px;
}

.js-nav-ready .nav-toggle__bar::after {
  top: 6px;
}

/* Burger → X morph: the middle bar fades out, the other two rotate into place on top of it.
   Keyed off aria-expanded (nav.js sets it), not .is-open, so it stays in sync with the button
   itself rather than the drawer's own class. */
.js-nav-ready .nav-toggle[aria-expanded="true"] .nav-toggle__bar {
  background: transparent;
}

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

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

.has-hero.js-nav-ready .nav-toggle[aria-expanded="true"] {
  /* Once the panel covers the photo, the translucent hero scrim on the closed button
     (background rgba() above) is no longer needed — bare, like the base X. */
  background: transparent;
}

/* Open X sits over the dark drop-down sheet on every page — white bars, matching the nav bar. */
.js-nav-ready .nav-toggle[aria-expanded="true"] .nav-toggle__bar::before,
.js-nav-ready .nav-toggle[aria-expanded="true"] .nav-toggle__bar::after {
  background: var(--color-nav-link-active);
}

/* Below 768px the open list is a fixed, full-width sheet that drops down from the top edge of
   the viewport — not a flex sibling of the logo/toggle — so the toggle button never shares a
   line with it or gets pushed around by its content width (it stays fixed in the corner,
   morphing to an X above, while the sheet slides down from off-screen independently). Sized to
   its own content (just 3 links) rather than the full viewport height — a full-height drawer
   reads as excessive for this few items — with a max-height/overflow-y safety net in case the
   nav ever grows. Edge-to-edge (left/right/top flush with the viewport), so no border-radius —
   only the bottom edge floats, marked by the box-shadow instead of a border.
   It's always in the DOM at `display: flex` so the slide transition on `transform` can run;
   closed state uses `visibility: hidden` (not `display: none`) so it's out of the a11y tree
   and untabbable without losing the animation.
   No `transition` here by default — see .nav-animate below for why. */
.js-nav-ready .site-nav__list {
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: auto;
  max-height: 100dvh;
  margin: 0;
  gap: 0;
  /* Top padding matches .site-header__inner's own (var(--space-3)) so "Home" lands on the same
     line as the toggle/X sitting in the corner above it, instead of a whole button-height gap
     pushing the list down below it. */
  /* Top padding clears the nav bar, so the links start just below it and the sheet reads as
     the bar dropping down. */
  padding: 64px var(--space-4) var(--space-4);
  background: var(--color-nav-bg);
  box-shadow: 0 10px 24px rgba(22, 32, 28, 0.35);
  z-index: calc(var(--z-header) + 1);
  overflow-y: auto;
  transform: translateY(-100%);
  visibility: hidden;
}

.js-nav-ready .site-nav__list.is-open {
  transform: translateY(0);
  visibility: visible;
}

/* The slide transition is opt-in, not a standing property of .site-nav__list — nav.js adds this
   class for ~350ms around every real open/close click, and only then. Any *other* style
   recalculation that changes the list's transform (crossing the 768px breakpoint by resizing a
   window, or a browser/devtools mobile-emulation toggle recomputing the viewport) would, if the
   transition were declared unconditionally, still animate it per the CSS Transitions spec —
   the browser doesn't distinguish "user clicked" from "viewport changed" when deciding whether
   to animate a property change, it just animates whatever `transition` says to. A resize
   listener that suppressed transitions after the fact (an earlier version of this) still let a
   flash through on some viewport changes, since it reacts to an event that can lag behind the
   style recalc/paint it's trying to prevent. Scoping the transition to only exist while this
   class is present sidesteps that race entirely: it's just never armed except right when we
   want it.
   Opening and closing need *different* transition lists, not just different end states: closing
   delays the `visibility: hidden` flip until the slide-out finishes (`visibility 0s linear
   0.3s`), so the panel stays visible/interactive throughout instead of vanishing mid-slide.
   Applying that same delay to opening (a bug from an earlier version of this rule — one shared
   transition list for both directions) delayed `visibility: visible` by 0.3s too, so the panel
   sat invisible for the entire slide while its transform animated underneath, then snapped
   visible already in its final position — reading as two disconnected beats (backdrop, then a
   pause, then the panel just appearing) instead of one smooth slide. */
.js-nav-ready .site-nav__list.nav-animate {
  transition: transform 0.2s ease;
}

.js-nav-ready .site-nav__list.nav-animate:not(.is-open) {
  transition: transform 0.2s ease, visibility 0s linear 0.2s;
}

/* Dims the page behind the drawer and gives a click target to close it; nav.js toggles
   .is-open (and .nav-animate around a real toggle) alongside the panel. Not part of the no-JS
   fallback — visibility:hidden + opacity:0 leave it inert and invisible until nav.js opens it. */
.nav-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(22, 32, 28, 0.45);
  z-index: var(--z-header);
  opacity: 0;
  visibility: hidden;
}

/* Fades on the same 0.2s ease curve as the panel slide, and only while .nav-animate is armed —
   so a viewport-driven recalc snaps instead of animating (same reasoning as the panel). The
   close direction delays visibility:hidden until the fade finishes so the dim doesn't vanish
   mid-slide. */
.nav-backdrop.nav-animate {
  transition: opacity 0.2s ease;
}

.nav-backdrop.nav-animate:not(.is-open) {
  transition: opacity 0.2s ease, visibility 0s linear 0.2s;
}

.nav-backdrop.is-open {
  opacity: 1;
  visibility: visible;
}

@media (min-width: 768px) {
  .js-nav-ready .nav-toggle {
    display: none;
  }

  .js-nav-ready .site-nav__list,
  .js-nav-ready .site-nav__list.is-open {
    display: flex;
    flex-direction: row;
    position: static;
    width: auto;
    height: auto;
    max-height: none;
    overflow-y: visible;
    padding: 0;
    gap: var(--space-5);
    background: transparent;
    box-shadow: none;
    transform: none;
    visibility: visible;
    transition: none;
  }

  .nav-backdrop {
    display: none;
  }
}