/*! site-nav.css — the ONE definition of the site header.
Every page includes this; nothing defines nav styling inline any more.
The headers had drifted into four different link sets plus two pages with
no nav at all, which is what this file exists to prevent. */

:root { --nav-height: 64px; }

html {
  scroll-padding-top: calc(var(--nav-height) + 16px);
}

/* The nav is position:fixed, so main must clear it. Loaded after page inline
   styles and only sets padding-top so bottom/side padding stay per-page. */
body > main {
  padding-top: calc(var(--nav-height) + 56px);
}

nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}

nav .nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--nav-height);
  /* Intentionally NOT .container — pages reuse that class for their own
     text measure (560px on help, 640px on tiers, 720px on legal pages) and
     a shared name caused the header to shrink and wrap onto three lines. */
  max-width: 1200px;
  width: 100%;
  margin-inline: auto;
  padding-inline: 24px;
  box-sizing: border-box;
}

/* Link labels are two and three words; let the row scroll or the mobile menu
   take over rather than breaking words mid-label. */
.nav-links a { white-space: nowrap; }

.nav-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--gold);
}

.nav-brand svg { flex-shrink: 0; }

.nav-links { display: flex; align-items: center; gap: 28px; }

.nav-links a {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-dim);
}

.nav-links a:hover { color: var(--gold); opacity: 1; }

.nav-links a.btn-github{ color: #000; opacity: 1; }


.mobile-toggle {
  display: none;
  background: none;
  border: none;
  color: var(--text);
  cursor: pointer;
  padding: 4px;
}

/* ---- THEME SELECTOR ---- */

.theme-selector {
  position: relative;
}

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 140px;
  padding: 6px 14px;
  background: var(--gold-glow);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--gold);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  letter-spacing: 0.04em;
}

.theme-toggle:hover {
  border-color: var(--gold-dim);
}

.theme-toggle svg {
  width: 12px;
  height: 12px;
  transition: transform 0.2s;
}

.theme-selector.open .theme-toggle svg {
  transform: rotate(180deg);
}

.theme-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 180px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 6px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.2s, transform 0.2s, visibility 0.2s;
  z-index: 200;
}

.theme-selector.open .theme-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.theme-dropdown button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 14px;
  background: none;
  border: none;
  border-radius: 7px;
  color: var(--text-dim);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.78rem;
  font-weight: 500;
  cursor: pointer;
}

.theme-dropdown button:hover {
  background: var(--gold-glow);
  color: var(--text);
}

.theme-dropdown button.active {
  color: var(--gold);
}

.theme-dropdown button .swatch {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid currentColor;
  flex-shrink: 0;
}

.theme-dropdown button[data-theme="vt100"] .swatch {
  background: #d4a853;
}

.theme-dropdown button[data-theme="miami"] .swatch {
  background: #00e5ff;
}

/* ---- HERO CROSSFADE ---- */

@media (max-width: 768px) {
  .nav-links { display: none; }
  .mobile-toggle { display: block; }

  nav .nav-inner { padding: 0 16px; }

  .nav-links.open {
display: flex;
flex-direction: column;
position: absolute;
top: var(--nav-height);
left: 0;
right: 0;
background: color-mix(in srgb, var(--bg) 97%, transparent);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
padding: 20px 24px;
gap: 16px;
border-bottom: 1px solid var(--border);
  }
}