/* ══════════════════════════════════════════════════════════════════════
   retheme-nav.css — brings the v3 retheme nav bar to pages whose BODY is
   still on the old design. Load it AFTER shared.css so it overrides the old
   nav via source order.

   Isolation: every token here is nav-scoped and prefixed --rn-* (distinct
   from both shared.css and the retheme token names), and only nav selectors
   are styled. It never touches the old-design body, footer, modals, or any
   page component — only the top <nav>.

   Mirrors the inline nav on index.html / courses.html / course-overview.html
   / pricing.html (64px, transparent+blur, hairline, Switzer, brand button).
   If that nav recipe changes, update it here too.
   ══════════════════════════════════════════════════════════════════════ */
@import url('fonts/fonts.css');

:root {
  --rn-nav-bg: rgba(255, 255, 255, 0.72);
  --rn-text-strong: #14102B;
  --rn-text-muted: #9490AE;
  --rn-text-body: #3D3660;
  --rn-hairline: rgba(20, 16, 43, 0.08);
  --rn-hairline-strong: rgba(20, 16, 43, 0.16);
  --rn-brand: #7A5CFF;
  --rn-brand-hover: #6243E8;
  --rn-radius-btn: 10px;
}
html:not(.light) {
  --rn-nav-bg: rgba(14, 10, 34, 0.72);
  --rn-text-strong: #F4F2FA;
  --rn-text-muted: rgba(255, 255, 255, 0.56);
  --rn-text-body: rgba(255, 255, 255, 0.74);
  --rn-hairline: rgba(255, 255, 255, 0.10);
  --rn-hairline-strong: rgba(255, 255, 255, 0.18);
  --rn-brand: #8B6FFF;
  --rn-brand-hover: #9E86FF;
}

/* Base nav — override only the props the retheme nav changes; position,
   padding, z-index, flex layout stay inherited from shared.css (same as the
   inline retheme pages, which also rely on shared.css for those). */
nav {
  background: transparent;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--rn-hairline);
  height: 64px;
  font-family: 'Switzer', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  transition: border-color 220ms ease, background 220ms ease;
}
nav.scrolled { border-bottom-color: var(--rn-hairline-strong); }
@media (min-width: 769px) {
  .nav-links { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
}
.nav-logo { color: var(--rn-text-strong); font-weight: 500; letter-spacing: -0.01em; font-size: 15px; gap: 0.35em; }
.nav-logo:hover { text-decoration: none; }
.nav-logo-img { height: 1.2em; width: auto; transform: none; }
.nav-links a { color: var(--rn-text-muted); font-weight: 500; font-size: 14px; transition: color 150ms ease; }
.nav-links a:hover, .nav-links a.nav-active { color: var(--rn-text-strong); }
.nav-actions .btn-ghost {
  background: none; border: none; font-family: inherit; font-size: 14px; font-weight: 500;
  color: var(--rn-text-body); cursor: pointer; padding: 8px 12px; transition: color 150ms ease;
}
.nav-actions .btn-ghost:hover { color: var(--rn-text-strong); }
.nav-actions .btn-primary {
  background: var(--rn-brand); color: #fff; border: none;
  font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
  padding: 10px 18px; border-radius: var(--rn-radius-btn); transition: background 150ms ease;
}
.nav-actions .btn-primary:hover { background: var(--rn-brand-hover); }

/* Theme-aware neutralizer — shared.css scopes its nav theming under
   `html.light nav …` (specificity 0,1,1), which out-specifies a plain
   `nav {}`. Re-assert at matching specificity; wins on source order since
   this sheet loads after shared.css. NAV ONLY. */
html.light nav, html:not(.light) nav { background: transparent; border-bottom-color: var(--rn-hairline); }
html.light nav.scrolled, html:not(.light) nav.scrolled { background: var(--rn-nav-bg); border-bottom-color: var(--rn-hairline-strong); }
html.light .nav-logo, html:not(.light) .nav-logo { color: var(--rn-text-strong); }
html.light .nav-links a, html:not(.light) .nav-links a { color: var(--rn-text-muted); }
html.light .nav-links a:hover, html.light .nav-links a.nav-active,
html:not(.light) .nav-links a:hover, html:not(.light) .nav-links a.nav-active { color: var(--rn-text-strong); }
html.light .nav-actions .btn-ghost, html:not(.light) .nav-actions .btn-ghost { color: var(--rn-text-body); }
html.light .nav-actions .btn-ghost:hover, html:not(.light) .nav-actions .btn-ghost:hover { color: var(--rn-text-strong); }
html.light .nav-actions .btn-primary, html:not(.light) .nav-actions .btn-primary { background: var(--rn-brand); color: #fff; }
html.light .nav-actions .btn-primary:hover, html:not(.light) .nav-actions .btn-primary:hover { background: var(--rn-brand-hover); }