/*! 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. */

nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  background: color-mix(in srgb, var(--bg) 80%, transparent);
  border-bottom: 1px solid var(--border);
}

nav .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  /* The header must NOT inherit the page's content width. Pages set .container
     to their own text measure — 560px on help, 640px on tiers, 720px on the
     legal pages — and at those widths the links wrap onto three lines and
     collide with the brand. The header spans the viewport regardless. */
  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 .container { padding: 0 16px; }

  .nav-links.open {
display: flex;
flex-direction: column;
position: absolute;
top: 64px;
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);
  }
}