/* ==========================================================
   Kai Mana — Navigation Contract (M2A.1, refined M2A.5)
   --------------------------------------------------
   This file defines the SHARED navigation interface for the
   Kai Mana site.

   M2A.5 NOTE: The full-screen overlay menu (legacy) was replaced
   with a slide-in drawer matching the proven song-page drawer
   experience. Tokens, state machine, classes, and a11y are
   unchanged. Only `.km-menu` and its children were visually
   transformed. See NOTES-nav.md for the rationale.

   See:  kai-mana/_shared/NOTES-nav.md
         docs/KAI-MANA-V2-DESIGN-SPEC.md §5 (Navigation behaviour)
         docs/KAI-MANA-V2-DESIGN-SPEC.md §13 (Component Manifest)

   First consumer: M2A.2 (kai-mana/index.html home page).
   ========================================================== */

/* ==========================================================
   1. NAV TOKENS
   Spacing, color, motion. Anything that names a nav concept.
   These are READ-ONLY here — values are inherited from the
   site-wide tokens (base.css / tokens.css) in later milestones.
   For M2A.1 we declare the full local set so the contract is
   self-contained.
   ========================================================== */

:root {
  /* Spacing tokens (nav-specific — site-wide tokens win when tokens.css lands) */
  --nav-pad-x:           24px;
  --nav-pad-y:           14px;
  --nav-pad-x-mobile:    18px;
  --nav-pad-y-mobile:    12px;

  /* Header height — used by anchor scrolling and skip-link math */
  --nav-header-h:        64px;
  --nav-header-h-mobile: 56px;

  /* Breakpoint tokens — pages should query these, not magic numbers */
  --nav-bp-mobile:       820px;   /* below: hamburger; above: nav strip */
  --nav-reveal-y:        80px;    /* scroll-Y where discoverable state engages (§5) */

  /* Surface tokens (km-foam, km-text etc. come from tokens.css in M2C/M5) */
  --nav-bg-immersive:    transparent;
  --nav-bg-discoverable: rgba(11, 31, 42, 0.78);  /* km-ocean-deep @ 78% */
  --nav-border:          rgba(246, 227, 197, 0.16);  /* km-line */
  --nav-ink:             #f6e3c5;  /* km-text */
  --nav-ink-muted:       rgba(246, 227, 197, 0.72);  /* km-text-muted */
  --nav-accent:          #7dd3c7;  /* km-foam — links, focus, active */

  /* Motion tokens (aligned with §9 three-tier motion scale) */
  /* M3: animation tokens resolve to shared animation.css */
  --nav-ease:            var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1));
  --nav-dur-fast:        var(--dur-fast, 160ms);  /* micro: hover, focus, button press */
  --nav-dur-med:         var(--dur-med,  320ms);  /* standard: state transitions, menu open */
  --nav-dur-slow:        var(--dur-slow, 600ms);  /* cinematic: not used in nav today */

  /* Type tokens */
  --nav-logo-size:       22px;       /* wordmark */
  --nav-logo-mark-size:  24px;       /* emoji mark */
  --nav-link-size:       14px;       /* strip + menu links */
  --nav-letter-spacing:  0.4px;
  --nav-text-transform:  uppercase;

  /* Touch target (a11y — §10) */
  --nav-tap-target:      44px;       /* min hit area for menu button */

  /* z-index (stack order: nav > overlay > page) */
  --nav-z:               200;        /* spec §5 */
  --nav-overlay-z:       190;        /* full-screen menu overlay */

  /* Focus ring (a11y — §10: never remove, 2px km-foam ring, 3px offset) */
  --nav-focus-ring:      2px solid var(--nav-accent);
  --nav-focus-offset:    3px;

  /* M2A.5: drawer geometry (slides in from the left, never takes over the screen) */
  --nav-menu-w-min:      220px;
  --nav-menu-w-max:      280px;
  --nav-menu-pad-x:      1.5rem;
  --nav-menu-pad-top:    4.5rem;   /* room for the close button */
  --nav-menu-shadow:     4px 0 24px rgba(0, 0, 0, 0.45);
}

/* ==========================================================
   2. STATE SYSTEM
   The header is the same DOM element throughout, but its visual
   state changes based on scroll position. Implementation lives in
   kai-mana/_shared/js/nav.js (M2A.2).

   Contract:
     data-km-nav-state="immersive"      → at top of page (Y < --nav-reveal-y)
                                            transparent bg, no nav strip
     data-km-nav-state="discoverable"   → scrolled (Y >= --nav-reveal-y)
                                            bg + blur, nav strip visible (desktop)
   ========================================================== */

.km-header {
  position: sticky;
  top: 0;
  z-index: var(--nav-z);
  width: 100%;
  background: var(--nav-bg-immersive);
  border-bottom: 1px solid transparent;
  transition:
    background var(--nav-dur-med) var(--nav-ease),
    border-color var(--nav-dur-med) var(--nav-ease);
}

.km-header[data-km-nav-state="discoverable"] {
  background: var(--nav-bg-discoverable);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom-color: var(--nav-border);
}

/* ==========================================================
   3. HEADER SHELL
   ========================================================== */

.km-header-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--nav-pad-y) var(--nav-pad-x);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5, 24px);
  min-height: var(--nav-header-h);
}

/* ==========================================================
   4. LOGO
   ========================================================== */

.km-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--nav-ink);
  font-family: var(--font-display, 'Cormorant Garamond', Georgia, serif);
  font-weight: 600;
  font-size: var(--nav-logo-size);
  text-decoration: none;
  letter-spacing: 0.5px;
}
.km-logo:hover,
.km-logo:focus-visible {
  opacity: 0.92;
  text-decoration: none;
}
.km-mark {
  font-size: var(--nav-logo-mark-size);
  line-height: 1;
  filter: drop-shadow(0 0 12px rgba(233, 196, 106, 0.5));
}
.km-wordmark { letter-spacing: 0.5px; }

/* ==========================================================
   5. NAV STRIP (desktop only — hidden on mobile per §5)
   Four primary destinations only:
     Music · Story · About · Media
   Active page is shown by a km-foam underline + km-sunrise
   glyph in the variant hook (§5 "Active link indication").
   ========================================================== */

.km-nav-strip {
  display: flex;
  gap: var(--sp-6, 32px);
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.km-nav-strip a {
  color: var(--nav-ink-muted);
  font-family: var(--font-body, 'Work Sans', system-ui, sans-serif);
  font-size: var(--nav-link-size);
  font-weight: 500;
  letter-spacing: var(--nav-letter-spacing);
  text-transform: var(--nav-text-transform);
  text-decoration: none;
  padding: 6px 0;
  border-bottom: 1px solid transparent;
  transition:
    color var(--nav-dur-fast) var(--nav-ease),
    border-color var(--nav-dur-fast) var(--nav-ease);
}
.km-nav-strip a:hover,
.km-nav-strip a:focus-visible {
  color: var(--nav-accent);
  border-bottom-color: var(--nav-accent);
  text-decoration: none;
}

/* Active page indicator (current page in the strip) */
.km-nav-strip a[aria-current="page"],
.km-nav-strip a.is-current {
  color: var(--nav-accent);
  border-bottom-color: var(--nav-accent);
}

/* Strip is hidden when immersive (top of page) AND on mobile */
.km-header[data-km-nav-state="immersive"] .km-nav-strip {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}
.km-header[data-km-nav-state="discoverable"] .km-nav-strip {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transition:
    opacity var(--nav-dur-med) var(--nav-ease),
    visibility var(--nav-dur-med);
}

/* ==========================================================
   6. MENU TRIGGER (hamburger — visible on mobile, always-tap on desktop)
   ========================================================== */

.km-menu-btn {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
  width: var(--nav-tap-target);
  height: var(--nav-tap-target);
  padding: 0;
  background: transparent;
  border: 1px solid var(--nav-border);
  border-radius: 10px;
  color: var(--nav-ink);
  cursor: pointer;
  transition:
    border-color var(--nav-dur-fast) var(--nav-ease),
    background var(--nav-dur-fast) var(--nav-ease);
}
.km-menu-btn:hover,
.km-menu-btn:focus-visible {
  border-color: var(--nav-accent);
  background: rgba(125, 211, 199, 0.08);
  outline: var(--nav-focus-ring);
  outline-offset: var(--nav-focus-offset);
}

.km-menu-btn__bars {
  display: block;
  width: 18px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition:
    transform var(--nav-dur-med) var(--nav-ease),
    opacity var(--nav-dur-fast) var(--nav-ease);
}

/* Animated "X" state when menu is open */
.km-menu-btn[aria-expanded="true"] .km-menu-btn__bars:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}
.km-menu-btn[aria-expanded="true"] .km-menu-btn__bars:nth-child(2) {
  opacity: 0;
}
.km-menu-btn[aria-expanded="true"] .km-menu-btn__bars:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

/* Visually-hidden label for screen readers (used in markup) */
.km-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================
   7. MENU (slide-in drawer — M2A.5)
   --------------------------------------------------
   M2A.1–M2A.4 used a full-screen overlay menu. M2A.5 refined the
   visual implementation to a side drawer (slides in from the left),
   preserving the proven song-page drawer experience users liked.
   Same DOM contract, same JS state machine, same a11y.

   Lives in <nav id="km-menu">. Toggled by nav.js by toggling the
   [hidden] attribute and a data-km-menu-state="open" attribute.
   ========================================================== */

.km-menu {
  /* Off-screen by default — no layout shift, no scrollbar jitter */
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: var(--nav-menu-w-min);
  max-width: var(--nav-menu-w-max);
  z-index: var(--nav-overlay-z);
  padding: var(--nav-menu-pad-top) var(--nav-menu-pad-x) 2.5rem;
  background: var(--nav-bg-discoverable);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-right: 1px solid var(--nav-border);
  box-shadow: var(--nav-menu-shadow);

  /* Slide-in animation: transform only, GPU-accelerated */
  transform: translateX(-100%);
  transition: transform var(--nav-dur-med) var(--nav-ease);
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* [hidden] is the a11y-correct "remove from a11y tree" toggle.
   UA stylesheets honor this, but we add an explicit rule so the
   drawer stays truly invisible even if a stylesheet override
   (or a test harness without UA styles) lands later. */
.km-menu[hidden] {
  display: none;
}

.km-menu[data-km-menu-state="open"] {
  transform: translateX(0);
}

/* ==========================================================
   7a. OPTIONAL TRACK SECTION (song pages only)
   --------------------------------------------------
   Hidden by default. Pages that have a track list (song pages)
   populate <section class="km-menu__track-section"> with HTML
   injected by context-sidebar.js (M2A.5 Option A). Non-song
   pages simply omit the section, so no track nav ever appears.

   This is the slot pattern: one component, conditional content.
   ========================================================== */

.km-menu__track-section {
  margin-top: var(--sp-6, 32px);
  padding-top: var(--sp-5, 24px);
  border-top: 1px solid var(--nav-border);
}

.km-menu__track-section[hidden],
.km-menu__track-section:empty {
  display: none;
}

.km-menu__track-heading {
  font-family: var(--font-body, 'Work Sans', system-ui, sans-serif);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--nav-ink-muted);
  margin: 0 0 0.85rem;
}

.km-menu__track-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.km-menu__track-list a {
  display: block;
  font-family: var(--font-body, 'Work Sans', system-ui, sans-serif);
  font-size: 0.95rem;
  font-weight: 400;
  line-height: 1.35;
  color: var(--nav-ink);
  text-decoration: none;
  padding: 0.25rem 0;
  transition: color var(--nav-dur-fast) var(--nav-ease);
}
.km-menu__track-list a:hover,
.km-menu__track-list a:focus-visible {
  color: var(--nav-accent);
}
.km-menu__track-list a[aria-current="true"] {
  color: var(--nav-accent);
  border-left: 2px solid var(--nav-accent);
  padding-left: 0.6rem;
  margin-left: -0.6rem;
}

.km-menu__track-back {
  display: inline-block;
  margin-top: 0.85rem;
  font-family: var(--font-body, 'Work Sans', system-ui, sans-serif);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  color: var(--nav-ink-muted);
  text-decoration: none;
}
.km-menu__track-back:hover { color: var(--nav-accent); }

.km-menu__header {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
  margin-bottom: var(--sp-4, 16px);
}

.km-menu__list {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4, 16px);
}
.km-menu__list a {
  display: block;
  font-family: var(--font-body, 'Work Sans', system-ui, sans-serif);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--nav-ink);
  text-decoration: none;
  padding: 0.4rem 0;
  transition: color var(--nav-dur-fast) var(--nav-ease);
}
.km-menu__list a:hover,
.km-menu__list a:focus-visible {
  color: var(--nav-accent);
}
.km-menu__list a[aria-current="page"],
.km-menu__list a.is-current {
  color: var(--nav-accent);
}

.km-menu__footer {
  display: flex;
  justify-content: flex-start;
  gap: var(--sp-4, 16px);
  font-family: var(--font-body, 'Work Sans', system-ui, sans-serif);
  font-size: 0.78rem;
  color: var(--nav-ink-muted);
  margin-top: var(--sp-5, 24px);
  padding-top: var(--sp-4, 16px);
  border-top: 1px solid var(--nav-border);
}
.km-menu__footer a {
  color: var(--nav-ink-muted);
  text-decoration: none;
}
.km-menu__footer a:hover { color: var(--nav-accent); }

/* ==========================================================
   8. SKIP LINK (a11y — §10)
   First focusable element on every page. Hidden until focused.
   ========================================================== */

.km-skip {
  position: absolute;
  left: var(--sp-2, 8px);
  top: var(--sp-2, 8px);
  padding: var(--sp-2, 8px) var(--sp-3, 12px);
  background: var(--nav-accent);
  color: var(--km-text-inverse, #0b1f2a);
  font-family: var(--font-body, 'Work Sans', system-ui, sans-serif);
  font-weight: 500;
  border-radius: var(--r-sm, 6px);
  text-decoration: none;
  z-index: calc(var(--nav-z) + 1);
  transform: translateY(-200%);
  transition: transform var(--nav-dur-fast) var(--nav-ease);
}
.km-skip:focus,
.km-skip:focus-visible {
  transform: translateY(0);
  outline: var(--nav-focus-ring);
  outline-offset: var(--nav-focus-offset);
}

/* ==========================================================
   9. RESPONSIVE BREAKPOINTS
   --nav-bp-mobile (820px):
     mobile (≤ 820px)  → hamburger is the only nav affordance
     desktop (> 820px) → strip is shown in discoverable state
   ========================================================== */

@media (max-width: 820px) {
  .km-header-inner {
    padding: var(--nav-pad-y-mobile) var(--nav-pad-x-mobile);
    min-height: var(--nav-header-h-mobile);
  }
  /* Strip is never shown on mobile — discoverability comes from the full-screen menu */
  .km-nav-strip { display: none; }
}

@media (min-width: 821px) {
  /* Strip is hidden when immersive (handled by state attribute above) */
  /* Hamburger stays accessible — desktop can also tap it for the full menu */
  .km-menu-btn { display: inline-flex; }
}

/* ==========================================================
   10. REDUCED MOTION (a11y — §9 mandatory block)
   ========================================================== */

@media (prefers-reduced-motion: reduce) {
  .km-header,
  .km-header-inner,
  .km-menu-btn,
  .km-menu-btn__bars,
  .km-nav-strip a,
  .km-skip,
  .km-menu {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* ==========================================================
   11. PROVENANCE / CONTRACT STABILITY
   --------------------------------------------------
   Component name: Header
   Contract version: M2A.1 (2026-08-08)
   Spec reference:  KAI-MANA-V2-DESIGN-SPEC.md §5, §13 (Header row)
   First consumer:  M2A.2 (kai-mana/index.html home)
   Rollback target: v1.0-m1.5-typography-locked
   ========================================================== */