/* Header dropdown menu (built into each page by tools/nav/build_nav.py).
   Desktop: uppercase labels that open panels on hover, click or keyboard,
   in the style of the Nova AI Ops header. Phone: fold-out groups in the menu. */
.nav-links.nd { gap: 4px; }
.nd-item { position: relative; }
.nd-top, .nd-plain {
  display: inline-flex; align-items: center; gap: 5px; padding: 10px 10px; border: 0; background: none; cursor: pointer;
  font: 700 0.78rem/1 var(--font-body, Inter, system-ui, sans-serif); letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--text-muted); text-decoration: none; white-space: nowrap; border-radius: 8px; transition: color 0.15s ease, background 0.15s ease;
}
.nav-links.nd a.nd-plain { font: 700 0.78rem/1 var(--font-body, Inter, system-ui, sans-serif); letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-muted); }
.nav-links.nd a.nd-plain:hover, .nav-links.nd a.nd-plain[aria-current="page"] { color: var(--text); }
.nav-links.nd a.nd-plain::after { display: none; }
.nd-top:hover, .nd-plain:hover, .nd-item.is-open > .nd-top, .nd-item.is-current > .nd-top, .nd-plain[aria-current="page"] { color: var(--text); }
.nd-item.is-open > .nd-top { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.nd-chev { width: 11px; height: 11px; transition: transform 0.2s ease; }
.nd-item.is-open .nd-chev { transform: rotate(180deg); }
.nd-panel {
  position: absolute; top: calc(100% + 10px); left: 50%; z-index: 600; min-width: 300px;
  display: flex; gap: 22px; padding: 18px 18px 14px; flex-wrap: wrap;
  background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 16px;
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.55), 0 0 0 1px color-mix(in srgb, var(--accent) 10%, transparent);
  opacity: 0; visibility: hidden; transform: translate(calc(-50% + var(--nd-shift, 0px)), 6px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
}
/* an invisible bridge so the panel stays open while the pointer moves down to it */
.nd-panel::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.nd-item.is-open > .nd-panel {
  opacity: 1; visibility: visible; transform: translate(calc(-50% + var(--nd-shift, 0px)), 0); transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s;
}
.nd-col { display: flex; flex-direction: column; gap: 2px; min-width: 290px; }
.nd-col.nd-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 8px; min-width: 460px; }
.nd-col.nd-two .nd-head { grid-column: 1 / -1; }
.nd-head { margin: 0 6px 8px; font: 700 0.68rem/1 var(--font-body, Inter, system-ui, sans-serif); letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-2); }
.nav-links.nd .nd-link {
  display: flex; align-items: center; gap: 12px; padding: 8px 8px; border-radius: 10px;
  color: var(--text); text-decoration: none; font-size: 0.9rem; white-space: normal; transition: background 0.15s ease;
}
.nav-links.nd .nd-link::after { display: none; }
.nav-links.nd .nd-link:hover, .nav-links.nd .nd-link:focus-visible { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.nav-links.nd .nd-link[aria-current="page"] { background: color-mix(in srgb, var(--accent) 16%, transparent); }
.nd-ic {
  flex-shrink: 0; width: 34px; height: 34px; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-size: 1.05rem;
  background: color-mix(in srgb, var(--accent) 14%, var(--surface)); border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
}
.nd-compact .nd-ic { width: 28px; height: 28px; font-size: 0.9rem; border-radius: 8px; }
.nd-tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.nd-tx strong { font-weight: 600; font-size: 0.9rem; line-height: 1.25; }
.nd-tx span { font-size: 0.78rem; color: var(--text-muted); line-height: 1.3; }
/* launch.js marks locked pages; in the panels the "Soon" pill can show */
.nav-links.nd .nd-panel .taa-link-pill { display: inline-block; }
.nd-langs { flex-basis: 100%; margin: 6px 6px 0; padding-top: 10px; border-top: 1px solid var(--border); font-size: 0.8rem; color: var(--text-muted); display: flex; flex-wrap: wrap; gap: 6px 12px; }
.nav-links.nd .nd-langs a { color: var(--text); font-weight: 600; font-size: 0.8rem; }
.nav-links.nd .nd-langs a::after { display: none; }

/* Phone menu: one fold-out group per dropdown */
.mobile-panel .mp-group > summary {
  list-style: none; cursor: pointer; padding: 12px 6px; border-radius: 8px; display: flex; justify-content: space-between; align-items: center;
  font: 700 0.86rem/1.2 var(--font-body, Inter, system-ui, sans-serif); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text);
}
.mobile-panel .mp-group > summary::-webkit-details-marker { display: none; }
.mobile-panel .mp-group > summary::after { content: "+"; font-size: 1.2rem; color: var(--text-muted); }
.mobile-panel .mp-group[open] > summary::after { content: "\2212"; }
.mobile-panel .mp-group > summary:hover { background: var(--surface); }
.mobile-panel .mp-links { display: flex; flex-direction: column; padding: 0 0 8px 8px; }
.mobile-panel .mp-links a { padding: 9px 6px; font-size: 0.94rem; color: var(--text-muted); }
.mobile-panel .mp-links a[aria-current="page"] { color: var(--accent-2); }
.mobile-panel.open { max-height: calc(100vh - 72px); overflow-y: auto; }

@media (prefers-reduced-motion: reduce) { .nd-panel, .nd-chev { transition: none; } }

/* Header giving button: "🤍 Support the Free Class" (to the Sponsor page, red with a white heart) replaces Register
   Free once the Sponsor page is launched. Until then launch.js keeps it hidden,
   except in the founder's preview. */
.nav-coffee[hidden], .mp-coffee[hidden] { display: none !important; }
.nav-actions:has(.nav-coffee:not([hidden])) .nav-reg { display: none; }
.mobile-panel:has(.mp-coffee:not([hidden])) .mp-reg { display: none; }
.nav-coffee { border-radius: 0 !important; gap: 6px; background: linear-gradient(135deg, #dc2626, #b91c1c) !important; color: #fff !important; box-shadow: 0 10px 28px -12px rgba(220, 38, 38, 0.75) !important; }
.nav-coffee:hover { box-shadow: 0 14px 32px -12px rgba(220, 38, 38, 0.9) !important; }
.nav-coffee-short { display: none; }
@media (max-width: 420px) { .nav-coffee-long { display: none; } .nav-coffee-short { display: inline; } }