/* Landing-page nav styles — mirrors homepage (#navbar id-based).
   Intentionally does NOT set hover colors/underlines: aurora.js handles those,
   so hover effects stay identical to the homepage. */
:root{
  --ink:#F4F1EA;--ink-dim:#8A8799;--ink-mute:#4A4758;
  --line:rgba(244,241,234,0.08);--line-strong:rgba(244,241,234,0.16);
  --green:#4ADE80;
}

nav#navbar{position:fixed;top:0;left:0;right:0;z-index:50;padding:1.25rem 3rem;display:flex;align-items:center;justify-content:space-between;backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);background:rgba(10,10,18,0.6);border-bottom:1px solid var(--line)}
nav#navbar .logo{display:flex;align-items:center;gap:0.6rem;font-family:'Fraunces',serif;font-size:1.4rem;font-weight:600;letter-spacing:-0.02em;text-decoration:none;color:var(--ink)}
nav#navbar .logo em{font-style:italic;font-weight:400}
nav#navbar .logo span{color:var(--ink)}

nav#navbar .nav-links{display:flex;gap:2.5rem;list-style:none;align-items:center;margin:0;padding:0}
nav#navbar .nav-links a{color:#F8F6F0;text-decoration:none;font-size:0.9rem;font-weight:400;position:relative}

nav#navbar .nav-right{display:flex;gap:0.6rem;align-items:center}
nav#navbar .nav-cta{padding:0.6rem 1.4rem;background:var(--ink);color:#0A0A12;border-radius:100px;font-size:0.82rem;font-weight:500;text-decoration:none;letter-spacing:-0.01em}
nav#navbar .menu-toggle{display:none;background:none;border:1px solid var(--line-strong);color:var(--ink);font-size:1.2rem;padding:0.4rem 0.7rem;border-radius:8px;cursor:pointer}
nav#navbar .mob-cta{display:none;list-style:none}

/* ── Dropdown arrow (matches homepage) ──
   Explicit property resets below override style.css `.nav-links a::after`
   (which sets position:absolute, transform:scaleX(0), background:accent, w:100%, h:2px
   for the nav-link underline effect). Without these resets, the triangle is invisible
   because cascade keeps scaleX(0) and position:absolute from the earlier rule. */
.nav-dropdown{position:relative;display:flex;align-items:center}
.nav-dropdown>a{display:flex;align-items:center;gap:4px}
.nav-dropdown>a::after{
  content:"" !important;
  display:inline-block !important;
  position:static !important;
  transform:none !important;
  width:0 !important;
  height:0 !important;
  background:transparent !important;
  bottom:auto !important;
  left:auto !important;
  top:auto !important;
  border-left:4px solid transparent;
  border-right:4px solid transparent;
  border-top:4px solid currentColor;
  border-bottom:0;
  border-radius:0;
  margin-left:2px;
  transition:transform 0.3s;
  pointer-events:none;
}
.nav-dropdown:hover>a::after,
.nav-dropdown.dd-open>a::after{transform:rotate(180deg) !important}
/* Don't let style.css's `.nav-links a:hover::after{transform:translateX(-50%) scaleX(1)}` reappear on hover */

/* ── Dropdown menu (hidden by default) ── */
.nav-dropdown-menu{position:absolute;top:calc(100% + 12px);left:50%;transform:translateX(-50%) translateY(8px);min-width:320px;background:rgba(13,13,20,0.98);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,0.08);border-radius:14px;padding:8px;opacity:0;visibility:hidden;transition:opacity 0.25s ease,transform 0.25s ease,visibility 0.25s;z-index:999;box-shadow:0 20px 60px rgba(0,0,0,0.5),0 0 0 1px rgba(255,77,106,0.06);pointer-events:none;list-style:none;margin:0}
/* Invisible hover bridge — covers the 12px gap between trigger and menu
   so moving the cursor from the trigger to the menu items doesn't break :hover. */
.nav-dropdown-menu::before{content:"";position:absolute;top:-14px;left:0;right:0;height:14px;background:transparent}
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu,
.nav-dropdown.dd-open .nav-dropdown-menu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);pointer-events:auto}
.nav-dropdown-menu li{margin:0}
.nav-dropdown-menu li a{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:10px;font-size:0.82rem !important;color:#F8F6F0 !important;font-weight:400 !important;text-decoration:none !important;white-space:nowrap}
.nav-dropdown-menu li a .dd-num{font-family:"Geist",-apple-system,sans-serif;font-size:0.95rem;color:#F4F1EA;min-width:28px;font-weight:700;letter-spacing:0;font-variant-numeric:tabular-nums}
.nav-dropdown-menu.two-col{display:grid !important;grid-template-columns:1fr 1fr;grid-template-rows:repeat(7, auto);grid-auto-flow:column;min-width:520px;gap:0;left:50%;transform:translateX(-50%) translateY(8px)}
.nav-dropdown:hover .nav-dropdown-menu.two-col,
.nav-dropdown.dd-open .nav-dropdown-menu.two-col{transform:translateX(-50%) translateY(0)}

/* ── Light theme ── */
html.light-theme nav#navbar{background:rgba(245,245,247,0.85) !important;border-bottom-color:rgba(0,0,0,0.06) !important}
html.light-theme nav#navbar .logo,html.light-theme nav#navbar .logo span{color:#1A1A2E !important}
html.light-theme nav#navbar .nav-links a{color:#5A5A6E !important}
html.light-theme nav#navbar .nav-cta{background:#1A1A2E !important;color:#F5F5F7 !important}
html.light-theme nav#navbar .menu-toggle{color:#1A1A2E !important;border-color:rgba(0,0,0,0.12) !important}
html.light-theme .nav-dropdown-menu{background:rgba(245,245,247,0.98) !important;border-color:rgba(0,0,0,0.08) !important;box-shadow:0 20px 60px rgba(0,0,0,0.12) !important}
html.light-theme .nav-dropdown-menu li a{color:#111111 !important}
html.light-theme .nav-dropdown-menu li a .dd-num{color:#0A0A12 !important}

/* ── Mobile ── */
@media(max-width:900px){
  nav#navbar{padding:1rem 1.5rem}
  nav#navbar .nav-links,nav#navbar .nav-right{display:none}
  nav#navbar .menu-toggle{display:block}
  nav#navbar.open .nav-links{display:flex;flex-direction:column;position:absolute;top:calc(100% + 8px);right:16px;left:auto;width:240px;max-height:calc(100vh - 80px);overflow-y:auto;background:rgba(10,10,18,0.97);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-radius:16px;border:1px solid rgba(255,255,255,0.08);padding:8px;gap:2px;box-shadow:0 16px 48px rgba(0,0,0,0.5);z-index:200}
  nav#navbar.open .nav-links li{list-style:none}
  nav#navbar.open .nav-links li a,nav#navbar.open .nav-links a{padding:10px 14px;border-radius:10px;font-size:0.88rem;display:block;color:rgba(255,255,255,0.75);font-weight:400;text-decoration:none}
  nav#navbar.open .nav-right{display:none}
  nav#navbar .mob-cta{display:list-item}
  .nav-dropdown>a::after{display:none}
  .nav-dropdown-menu{position:static;transform:none !important;min-width:0;background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;border:none;border-radius:0;padding:0 0 0 8px;opacity:1;visibility:visible;pointer-events:auto;box-shadow:none;max-height:0;overflow:hidden;transition:max-height 0.3s ease;display:block !important;grid-template-columns:none !important}
  .nav-dropdown.dd-open .nav-dropdown-menu{max-height:600px}
  html.light-theme .nav-dropdown-menu{background:transparent !important;border:none !important;box-shadow:none !important}
}

/* Offset for fixed nav so article content isn't hidden */
body{padding-top:72px}
@media(max-width:900px){body{padding-top:62px}}