/* ============================================================
   Global navigation — polymorphic 3-tab bar
   Fades in after NAV_DELAY_MS (nav.js) with page-matched
   border colour, text colour, and font family / weight / style.
   ============================================================ */

#global-nav {
  position: fixed;
  top: 0.75rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  display: flex;
  gap: 0.5rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s ease;
  white-space: nowrap;
}

#global-nav.nav--visible {
  opacity: 1;
  pointer-events: auto;
}

.nav-tab {
  display: flex;
  align-items: center;
  padding: 0.38rem 1.2rem;
  text-decoration: none;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--nav-text, rgba(255, 255, 255, 0.45));
  background: transparent;
  font-family: var(--nav-font, 'Inter', sans-serif);
  font-weight: 555;
  font-style: normal;
  transition:
    color      0.6s ease,
    background 0.3s ease;
}

/* Vertical dividers between items within a group */
.nav-group > * + * {
  border-left: 1px solid var(--nav-border, rgba(255, 255, 255, 0.3));
}

/* .nav-group--secondary — gap comes from #global-nav's flex gap; reserved for future Patrons styling */

/* Active tab */
.nav-tab[aria-current="page"] {
  color: var(--nav-active, rgba(255, 255, 255, 0.9));
  background: var(--nav-active-bg, rgba(255, 255, 255, 0.05));
}

/* Hover on inactive tabs */
.nav-tab:not([aria-current="page"]):hover {
  color: var(--nav-hover, rgba(255, 255, 255, 0.7));
  background: var(--nav-hover-bg, rgba(255, 255, 255, 0.03));
  transition: color 0.2s ease, background 0.2s ease;
}


/* ── Why / index.html ─────────────────────────────────────── */

body.page--why {
  --nav-bg:        #7B2FBE;
  --nav-border:    #7B2FBE;
  --nav-text:      rgba(255, 255, 255, 0.65);
  --nav-active:    #ffffff;
  --nav-active-bg: rgba(255, 255, 255, 0.12);
  --nav-hover:     rgba(255, 255, 255, 0.9);
  --nav-hover-bg:  rgba(255, 255, 255, 0.08);
  --nav-font:      'Playfair Display', serif;
}


/* ── MathStar / mathstar.html — tracks act CSS variables ─── */
/* --act-border, --act-text, --act-font, --act-weight, --act-style
   are already set on body[data-act] in mathstar.css and cascade here. */

body.page--mathstar {
  --nav-bg:        var(--act-text);
  --nav-border:    var(--act-text);
  --nav-text:      color-mix(in srgb, var(--act-bg) 75%, transparent);
  --nav-active:    var(--act-bg);
  --nav-active-bg: rgba(0, 0, 0, 0.08);
  --nav-hover:     var(--act-bg);
  --nav-hover-bg:  rgba(0, 0, 0, 0.05);
}

/* Font shifts with the act (terminal → italic serif → bold serif) */
body.page--mathstar .nav-tab,
body.page--mathstar .nav-dropdown-item {
  font-family: var(--act-font, 'Courier New', monospace);
  font-weight: var(--act-weight, 400);
  font-style:  var(--act-style, normal);
}


/* ── Adventures / adventures.html ────────────────────────── */

body.page--adventures {
  --nav-bg:        rgba(8, 8, 12, 0.75);
  --nav-border:    rgba(255, 255, 255, 0.12);
  --nav-text:      rgba(255, 255, 255, 0.55);
  --nav-active:    #ffffff;
  --nav-active-bg: rgba(255, 255, 255, 0.08);
  --nav-hover:     rgba(255, 255, 255, 0.85);
  --nav-hover-bg:  rgba(255, 255, 255, 0.04);
  --nav-font:      'Inter', sans-serif;
}

/* Hide the per-page header — global nav handles navigation */
body.page--adventures #adv-header {
  display: none;
}

/* Push tiles down so they clear the nav, and recalculate row height to
   account for the 56px CTA bar sitting above the 52px dot nav (108px total). */
body.page--adventures {
  --header-h: 3.5rem;
  --row-h: calc((100vh - 3.5rem - 108px - 32px - 20px) / 3);
}

body.page--adventures #rows-viewport {
  bottom: 108px;
}

@media (max-width: 600px) {
  body.page--adventures {
    --row-h: calc((100vh - 3.5rem - 108px - 28px - 10px) / 2);
  }
}

/* Push hero flex-center downward so the logo clears the nav */
body.page--why #beat-hero {
  padding-top: 5rem;
}


/* ── Lightning Sheets ─────────────────────────────────────── */

/* Hide nav on the generate/topic-select beat so it doesn't compete with the controls */
body.page--lightning-sheets[data-beat="2"] #global-nav {
  opacity: 0;
  pointer-events: none;
}

body.page--lightning-sheets {
  --nav-bg:        rgba(10, 20, 40, 0.80);
  --nav-border:    rgba(100, 160, 255, 0.25);
  --nav-text:      rgba(200, 220, 255, 0.55);
  --nav-active:    #ffffff;
  --nav-active-bg: rgba(100, 160, 255, 0.12);
  --nav-hover:     rgba(200, 220, 255, 0.9);
  --nav-hover-bg:  rgba(100, 160, 255, 0.08);
  --nav-font:      'Nunito', sans-serif;
}


/* ── Math Knockouts ───────────────────────────────────────── */

body.page--knockouts {
  --nav-bg:        rgba(0, 0, 20, 0.80);
  --nav-border:    rgba(160, 120, 255, 0.30);
  --nav-text:      rgba(200, 180, 255, 0.55);
  --nav-active:    #ffffff;
  --nav-active-bg: rgba(160, 120, 255, 0.15);
  --nav-hover:     rgba(200, 180, 255, 0.9);
  --nav-hover-bg:  rgba(160, 120, 255, 0.08);
  --nav-font:      'Orbitron', sans-serif;
}


/* ── Nav groups ──────────────────────────────────────────── */

.nav-group {
  display: flex;
  align-items: stretch;
  background-color: var(--nav-bg, transparent);
  border: 1px solid var(--nav-border, rgba(255, 255, 255, 0.3));
  transition: border-color 0.6s ease, background-color 0.6s ease;
}


/* ── Dropdown ────────────────────────────────────────────── */

.nav-dropdown {
  position: relative;
  display: flex;
  align-items: stretch;
}

/* Reset <button> to look and behave like a .nav-tab */
.nav-tab--dropdown {
  display: flex;
  align-items: center;
  gap: 0.3em;
  appearance: none;
  -webkit-appearance: none;
  border: none;
  cursor: pointer;
}

/* Subtle caret; rotates when open */
.nav-caret {
  font-size: 0.58rem;
  opacity: 0.65;
  display: inline-block;
  transition: transform 0.18s ease;
}

.nav-dropdown.is-open .nav-caret {
  transform: rotate(180deg);
}

/* When the dropdown is open, treat the trigger as "active" */
.nav-dropdown.is-open .nav-tab--dropdown {
  color: var(--nav-active, rgba(255, 255, 255, 0.9));
  background: var(--nav-active-bg, rgba(255, 255, 255, 0.05));
}

/* Panel */
.nav-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 11rem;
  list-style: none;
  padding: 0.3rem 0;
  background: var(--nav-bg, rgba(0, 0, 0, 0.92));
  border: 1px solid var(--nav-border, rgba(255, 255, 255, 0.3));
  z-index: 10000;

  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.nav-dropdown.is-open .nav-dropdown-menu {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

/* Items inside the panel — same typographic scale as nav-tabs */
.nav-dropdown-item {
  display: block;
  padding: 0.45rem 1.2rem;
  text-decoration: none;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--nav-text, rgba(255, 255, 255, 0.45));
  font-family: var(--nav-font, 'Inter', sans-serif);
  font-weight: 555;
  white-space: nowrap;
  transition: color 0.2s ease, background 0.2s ease;
}

.nav-dropdown-item + .nav-dropdown-item {
  border-top: 1px solid var(--nav-border, rgba(255, 255, 255, 0.12));
}

.nav-dropdown-item:hover,
.nav-dropdown-item:focus {
  color: var(--nav-hover, rgba(255, 255, 255, 0.9));
  background: var(--nav-hover-bg, rgba(255, 255, 255, 0.05));
  outline: none;
}


/* ── Mobile — compress horizontal padding at narrow widths ── */

@media (max-width: 480px) {
  .nav-tab,
  .nav-tab--dropdown { padding: 0.38rem 0.75rem; }

  /* Anchor dropdown to the right edge on small screens so it doesn't clip */
  .nav-dropdown-menu { left: auto; right: 0; }
}


/* ── Print ──────────────────────────────────────────────── */

@media print {
  #global-nav { display: none; }
}


/* ── Reduced motion ─────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  #global-nav,
  .nav-group,
  .nav-tab,
  .nav-tab--dropdown,
  .nav-caret,
  .nav-dropdown-menu,
  .nav-dropdown-item { transition: none; }
}