/* ═══════════════════════════════════════════════════════════════════
   NAVIGATION — Main nav, sub-topbar (mobile), theme/lang pickers
═══════════════════════════════════════════════════════════════════ */

nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  height: 68px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 20px;
  background: rgba(14,15,12,0.88);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
}

.nav-left { display: flex; align-items: center; gap: 20px; }

/* ── Logo ── */
.nav-logo { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.nav-logo-icon {
  width: 48px; height: 48px;
  background: var(--surface3);
  border: 1.5px solid var(--border2);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px;
  box-shadow: 0 0 12px var(--glow-color);
  transition: box-shadow 0.3s, border-color 0.3s;
}
.nav-logo:hover .nav-logo-icon { border-color: var(--primary); box-shadow: 0 0 20px var(--glow-color); }
.nav-logo-text {
  font-family: var(--font-head);
  font-size: 18px; font-weight: 700;
  letter-spacing: 3px; text-transform: uppercase;
  color: var(--primary);
}

/* ── Theme picker pill ── */
.theme-picker {
  display: flex; align-items: center; gap: 2px;
  background: var(--surface2);
  border: 1px solid var(--border2);
  border-radius: 8px;
  padding: 3px;
}
.theme-btn {
  font-family: var(--font-mono); font-size: 10px; font-weight: 500;
  letter-spacing: 1px; text-transform: uppercase;
  color: var(--text-mute);
  background: transparent; border: none; border-radius: 6px;
  padding: 6px 10px; cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s;
}
.theme-btn:hover { color: var(--text); background: var(--surface3); }
.theme-btn.active { color: var(--bg); background: var(--primary); font-weight: 600; }

/* ── Language picker ── */
.lang-picker {
  display: flex; align-items: center; gap: 2px;
  background: var(--surface2);
  border: 1px solid var(--border2);
  border-radius: 8px;
  padding: 3px;
}
.lang-btn {
  font-family: var(--font-mono); font-size: 10px; font-weight: 500;
  letter-spacing: 0.5px; text-transform: uppercase;
  color: var(--text-mute);
  background: transparent; border: none; border-radius: 6px;
  padding: 6px 10px; cursor: pointer;
  transition: all 0.2s;
}
.lang-btn:hover { color: var(--text); background: var(--surface3); }
.lang-btn.active { color: var(--bg); background: var(--primary); font-weight: 600; }

/* ── Nav links ── */
.nav-links { display: flex; align-items: center; gap: 28px; list-style: none; }
.nav-links a {
  font-family: var(--font-body); font-size: 13px; font-weight: 500;
  letter-spacing: 1px; text-transform: uppercase;
  color: var(--text-dim); text-decoration: none;
}
.nav-links a:hover { color: var(--primary); }

/* ── CTA button ── */
.nav-cta {
  font-family: var(--font-body); font-size: 12px; font-weight: 600;
  letter-spacing: 2px; text-transform: uppercase;
  color: var(--bg) !important;
  background: var(--primary); padding: 9px 18px;
  border-radius: 4px; text-decoration: none;
  border: none; cursor: pointer;
}
.nav-cta:hover { filter: brightness(1.1); transform: translateY(-1px); }

/* ── Sub-topbar (mobile-only theme chooser) ── */
#sub-topbar {
  display: none;
  position: fixed; top: 68px; left: 0; right: 0; z-index: 199;
  height: 46px;
  background: rgba(14,15,12,0.95);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  align-items: center; justify-content: center;
  gap: 8px;
  padding: 0 16px;
}
#sub-topbar .theme-btn { font-size: 11px; padding: 7px 14px; }