/* =============================================================
   AKU WORLD · nav-tabs.css  (2026-09-28)
   The site-wide tab nav + burger menu, self-contained so pages that
   carry an older copy of styles.css (/activities, /books) get the
   same menu. Load AFTER styles.css. Colors that pages theme (burger
   line color) use :where() so each page's own rule still wins.
   The burger + menu markup is injected by app.js (module 15), or by
   pyra.js on pages whose app.js copy predates it.
   ============================================================= */

/* burger button */
.nav__burger{ display:none; width:44px; height:44px; margin-left:2px; padding:0;
  background:transparent; border:0; cursor:pointer; flex-direction:column;
  align-items:center; justify-content:center; gap:5px; }
.nav__burger i{ display:block; width:22px; height:2px; transition:transform .25s var(--ease), opacity .2s; }
:where(.nav__burger) i{ background:var(--ink); }
.nav.is-open .nav__burger i:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav.is-open .nav__burger i:nth-child(2){ opacity:0; }
.nav.is-open .nav__burger i:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* dropdown menu: solid paper (a blur inside the nav's blur let the page show through) */
.nav__menu{ position:absolute; top:100%; left:0; right:0; z-index:99;
  display:flex; flex-direction:column; gap:2px; padding:10px var(--gut) 28px;
  background:var(--paper); -webkit-backdrop-filter:none; backdrop-filter:none;
  border-bottom:1px solid var(--line); box-shadow:var(--shadow-card); }
.nav__menu[hidden]{ display:none; }
.nav__menu a{ font-family:var(--mono); font-size:13px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-2); padding:13px 2px; text-decoration:none; }
.nav__menu a:hover{ color:var(--blue); }
.nav__menu a[aria-current="page"]{ color:var(--blue); }
.nav__menu .nav__menu-cta{ align-self:flex-start; margin:14px 0 6px;
  border:1px solid var(--blue); color:var(--blue); border-radius:2px;
  padding:11px 16px; font-family:var(--mono); font-size:13px;
  letter-spacing:.14em; text-transform:uppercase; text-decoration:none;
  transition:background var(--dur-fast),color var(--dur-fast); }
.nav__menu .nav__menu-cta::before{ content:"[\00a0"; opacity:.55; }
.nav__menu .nav__menu-cta::after{ content:"\00a0]"; opacity:.55; }
.nav__menu .nav__menu-cta:hover{ background:var(--blue); color:#fff; }

/* tabs: all of them on wide screens, folded into the burger at 900px and below */
.nav--tabs .nav__links{ gap:clamp(14px,1.6vw,26px); }
.nav--tabs .nav__links a.nav__hide{ position:relative; white-space:nowrap; }
.nav--tabs .nav__links a[aria-current="page"]{ color:#DDF046; }
.nav--tabs .nav__links a[aria-current="page"]::after{ content:""; position:absolute; left:0; right:0; bottom:-9px; height:2px;
  background:#DDF046; box-shadow:0 0 8px rgba(221,240,70,.6); }
@media (max-width:900px){
  .nav--tabs .nav__links a.nav__hide{ display:none; }
  .nav--tabs .nav__burger{ display:flex; }
}
@media (max-width:760px){
  .nav__burger{ display:flex; }
  .nav__links a.nav__hide{ display:none; }
  .nav__links .nav__cta{ display:none; }   /* Pre-order lives in the menu + the sticky launch bar */
}

/* /books (body.jp): its hero sits BELOW the nav, so the white nav text had no dark
   backdrop. A solid night bar reads cleanly and runs straight into the hero. */
.jp .nav{ background:#05060D; border-bottom-color:rgba(255,255,255,.08); }

/* cream nav pages (/activities = body.fz): lime on cream is unreadable, use ibra blue */
.fz .nav--tabs .nav__links a[aria-current="page"]{ color:var(--blue); }
.fz .nav--tabs .nav__links a[aria-current="page"]::after{ background:var(--blue); box-shadow:none; }
/* the logo is a 64x18 image: give it a real 44px tap area */
.nav--tabs .nav__logo{ display:inline-flex; align-items:center; min-height:44px; }