/* ==========================================================================
   navigation.css — primary + mobile navigation
   --------------------------------------------------------------------------
   Milestone 2 · Global header shell

   Spec: Phase 2 §0.3 (Global Header nav) · Phase 5 §3.3 (DesktopNavigation),
   §3.4 (MobileNavigation)

   Desktop nav ≥1024px; below that the hamburger appears and the mobile
   overlay nav exists in the HTML. Both are non-functional shell markup:
   no JS toggles, no dropdowns/mega-menus. The navigation module opens the
   panels in a later milestone.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Desktop navigation — visible ≥1024px (Phase 5 §3.3)
   -------------------------------------------------------------------------- */
.primary-nav {
  display: none;
}

@media (min-width: 1024px) {
  .primary-nav {
    display: block;
  }
}

.primary-nav__list {
  display: flex;
  align-items: center;
  gap: var(--space-24);
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-min);
  padding-inline: var(--space-4);
  font-family: var(--font-heading);
  font-size: var(--text-button-current);
  font-weight: var(--weight-semibold);
  line-height: var(--lh-button);
  color: var(--color-heading);
  text-decoration: none;
}

.nav-link:hover,
.nav-link:focus-visible {
  color: var(--color-primary);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 8px;
}

.nav-link[aria-current="page"] {
  color: var(--color-primary);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 8px;
  text-decoration-color: var(--color-brand-yellow);
}

/* --------------------------------------------------------------------------
   Hamburger button — visible <1024px. Inert (non-functional) shell.
   -------------------------------------------------------------------------- */
.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--touch-min);
  height: var(--touch-min);
  color: var(--color-heading);
}

.nav-toggle:hover,
.nav-toggle:focus-visible {
  color: var(--color-primary);
}

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

.nav-toggle__icon {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
}

/* --------------------------------------------------------------------------
   Mobile navigation overlay — Phase 5 §3.4. Structure only; hidden until the
   navigation module enables it. Rows 56px; CTA full width.
   -------------------------------------------------------------------------- */
.mobile-nav {
  display: none;
}

.mobile-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mobile-nav__link {
  display: flex;
  align-items: center;
  min-height: 56px;
  font-family: var(--font-heading);
  font-size: var(--text-h5-current);
  font-weight: var(--weight-semibold);
  line-height: var(--lh-h5);
  color: var(--color-heading);
  text-decoration: none;
  border-bottom: 1px solid var(--color-border);
}

.mobile-nav__link:hover,
.mobile-nav__link:focus-visible {
  color: var(--color-primary);
}

.mobile-nav__link[aria-current="page"] {
  color: var(--color-primary);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
  text-decoration-color: var(--color-brand-yellow);
}

.mobile-nav__contact {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mobile-nav__contact-link {
  display: flex;
  align-items: center;
  min-height: var(--touch-min);
  font-size: var(--text-small-current);
  color: var(--color-body);
  text-decoration: none;
}

.mobile-nav__contact-link:hover,
.mobile-nav__contact-link:focus-visible {
  color: var(--color-primary);
}

/* --------------------------------------------------------------------------
   Open state (Phase 5 §3.4 MobileNavigation · Phase 6 §11 state classes) —
   applied by JS (main.js), styled here. Reveals the existing shell markup
   in-flow inside the sticky header; the full-screen overlay + slide-in
   animation variant is deferred to the Astro navigation milestone.
   -------------------------------------------------------------------------- */
.mobile-nav.is-open {
  display: block;
}