/* The public header — shared by every indexable page.
 *
 * ⛔ LOADED AFTER each page's own styles, on purpose. Three families of page
 * exist: the article pages share article.css, and index/pricing/changelog/
 * terms/privacy each carry their own inline <style>. They already agreed about
 * `nav` and `.nav-in`; what they did NOT agree about was whether a nav existed
 * at all. This file supplies only what the header needs and leaves each page's
 * own width and background alone.
 *
 * Written to be additive: no element selectors beyond the ones the header owns.
 */

/* terms.html and privacy.html had the responsive rules for this and never had
 * the base rule, because their markup had lost the .nav-links div entirely. */
.nav-links { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.nav-links a { color: var(--text-dim); font-size: 14px; font-weight: 500; text-decoration: none; }
.nav-links a:hover { color: var(--text); }
.nav-links a[aria-current="page"] { color: var(--text); }

/* ── the Guides menu ───────────────────────────────────────────────────────
 * A <details> element, not a hover menu: hover does not exist on a touchscreen,
 * and this opens on tap and on Enter with no JavaScript at all. If the CSS
 * never loads it degrades to a working disclosure widget rather than to a
 * broken one.
 */
.nav-drop { position: relative; display: inline-block; }
.nav-drop > summary {
  color: var(--text-dim); font-size: 14px; font-weight: 500;
  cursor: pointer; list-style: none; user-select: none; white-space: nowrap;
}
.nav-drop > summary::-webkit-details-marker { display: none; }
.nav-drop > summary::after { content: " \25be"; opacity: 0.7; }
.nav-drop > summary:hover, .nav-drop[open] > summary { color: var(--text); }

.nd-panel {
  position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%);
  min-width: 280px; max-width: 92vw; z-index: 60;
  background: var(--bg2, #151a20);
  border: 1px solid var(--border); border-radius: 10px;
  padding: 8px; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
  display: flex; flex-direction: column;
  max-height: min(70vh, 560px); overflow-y: auto;
}
.nd-panel a {
  display: block; padding: 8px 10px; border-radius: 6px;
  font-size: 14px; line-height: 1.35; color: var(--text);
}
.nd-panel a:hover { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--text); }
.nd-sec {
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-dim); padding: 12px 10px 4px;
}
.nd-sec:first-child { padding-top: 4px; }
.nd-all {
  margin-top: 6px; border-top: 1px solid var(--border);
  padding-top: 10px !important; color: var(--accent) !important; font-weight: 600;
}

@media (max-width: 820px) {
  .nav-links { margin-left: 0; flex-wrap: wrap; justify-content: center; gap: 6px; }
  .nav-links a:not(.btn) { padding: 6px 9px; font-size: 13px; }
}

/* ⚠ On a phone the panel stops being a dropdown and becomes part of the page.
 * A floating panel anchored to a wrapped nav item lands wherever the wrap put
 * it, frequently off the side of the screen. Letting it flow keeps every guide
 * reachable with a thumb. */
@media (max-width: 640px) {
  .nav-drop { position: static; }
  .nd-panel {
    position: static; transform: none; width: 100%; min-width: 0;
    margin-top: 8px; box-shadow: none; max-height: none;
  }
  /* Same-page anchors are dropped on a phone; real pages never are. */
  .nav-links a[href^="#"] { display: none; }
}