/* Header (Light page) — dark topbar on desktop, white mobile sheet
   ---------------------------------------------------------------- */

/* TOKENS */
:root{
  /* Topbar (desktop) */
  --topbar-bg: #0b1020;        /* dark bar */
  --topbar-fg: #ffffff;
  --topbar-link: #ffffff;      /* logo + desktop links */
  --topbar-link-hover: #dbe8ff;/* subtle lighten on hover */
  --topbar-shadow: none;

  /* Mobile menu sheet */
  --menu-bg: #ffffff;          /* white panel */
  --menu-link: #0f172a;        /* dark text */
  --menu-link-hover: #0a58ff;  /* blue on hover only */
}

body.no-scroll{ overflow:hidden; }

/* WRAPPER */
.topbar{
  background:var(--topbar-bg);
  color:var(--topbar-fg);
  box-shadow:var(--topbar-shadow);
  position:sticky; top:0; z-index:1000;
}
.topbar .container{
  max-width:1200px; margin:0 auto;
  padding:18px 24px;
  display:flex; align-items:center; gap:16px;
  position:relative;
}

/* BRAND */
.topbar .site-logo{
  text-decoration:none;
  color:var(--topbar-link) !important; /* beat global anchor styles */
}
.site-name{ font-weight:800; letter-spacing:.2px; font-size:clamp(18px,2.2vw,24px); }
.tm{ font-size:.6em; vertical-align:super; margin-left:.1em; opacity:.9; }

/* HAMBURGER */
.hamburger{
  margin-left:auto;
  display:inline-flex; width:40px; height:40px;
  border:1px solid rgba(255,255,255,.25);
  background:transparent; border-radius:10px;
  align-items:center; justify-content:center; cursor:pointer;
}
.hamburger .bar{
  width:22px; height:2px; background:var(--topbar-link); display:block;
}
.hamburger .bar + .bar{ margin-top:6px; }

/* MOBILE NAV (default <768px) */
.nav{
  display:none;
  position:absolute; top:100%; left:0; right:0; margin-top:8px;
  background:var(--menu-bg);
  border-radius:12px; padding:8px 16px 12px;
  box-shadow:0 8px 24px rgba(0,0,0,.25);
  z-index:10010;                     /* <-- above backdrop */
}
.nav.is-open{ display:block; }

/* Backdrop sits under the sheet */
.menu-backdrop{
  position:fixed; inset:0; background:rgba(0,0,0,.35);
  z-index:10000;                     /* <-- just below .nav */
}
.menu-backdrop[hidden]{ display:none !important; }

/* All links/buttons inside the mobile sheet are DARK and visible */
.topbar .nav a,
.topbar .nav .nav-link,
.topbar .nav button.nav-link{
  color:var(--menu-link) !important;
  opacity:1 !important;
  text-decoration:none; font-weight:600;
  padding:10px 12px; border-radius:8px; display:block;
}
.topbar .nav a:hover,
.topbar .nav .nav-link:hover{
  color:var(--menu-link-hover) !important;
  text-decoration:underline; text-underline-offset:3px;
}
.topbar .nav .nav-link.is-active{ color:var(--menu-link) !important; }

/* CTA pills (match for <a> and <button>) */
.topbar .nav .nav-link--cta,
.topbar .nav button.nav-link--cta{
  -webkit-appearance:none; appearance:none;
  background:#fff; color:#0b1020 !important;
  border:1px solid rgba(0,0,0,.12);
  padding:10px 12px; border-radius:999px;
  font-weight:700; line-height:1.2; display:inline-block;
}
.topbar .nav .nav-link--cta:hover,
.topbar .nav button.nav-link--cta:hover{
  text-decoration:none; box-shadow:0 2px 0 rgba(0,0,0,.06);
}

/* DESKTOP (>=768px) */
@media (min-width:768px){
  .hamburger{ display:none; }

  .nav{
    display:block; position:static; margin:0;
    background:transparent; box-shadow:none; padding:0;
    z-index:auto;
  }

  /* Desktop links live in dark topbar: keep them WHITE, not blue */
  .topbar .nav a,
  .topbar .nav .nav-link{
    color:var(--topbar-link) !important;
    padding:8px 10px; display:inline-block;
  }
  .topbar .nav a:hover,
  .topbar .nav .nav-link:hover{
    color:var(--topbar-link-hover) !important;
    text-decoration:underline; text-underline-offset:3px;
  }
  .topbar .nav .nav-link.is-active{
    color:var(--topbar-link) !important;
    text-decoration:none;
  }
}

/* OPTIONAL: over-hero variant */
.topbar--over-hero{
  position:absolute; top:0; left:0; right:0;
  background:transparent; box-shadow:none;
}


/* --- Hard pin mobile menu link colors --- */
header.topbar #site-nav a,
header.topbar #site-nav .nav-link,
header.topbar #site-nav button.nav-link{
  color: var(--menu-link) !important;               /* black on white sheet */
  -webkit-text-fill-color: var(--menu-link) !important; /* iOS/WebKit edge */
  opacity: 1 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
}

/* visited/active too */
header.topbar #site-nav a:visited{ color: var(--menu-link) !important; }
header.topbar #site-nav .nav-link.is-active{ color: var(--menu-link) !important; }

/* Desktop: keep links white in the dark topbar */
@media (min-width:768px){
  header.topbar #site-nav a,
  header.topbar #site-nav .nav-link,
  header.topbar #site-nav button.nav-link{
    color: var(--topbar-link) !important;
  }
  header.topbar #site-nav a:hover,
  header.topbar #site-nav .nav-link:hover,
  header.topbar #site-nav .nav-link.is-active{
    color: var(--topbar-link-hover) !important;
    text-decoration: underline;
    text-underline-offset: 3px;
  }
}

/* ===== MOBILE (<=767px): force dark links inside the white sheet ===== */
@media (max-width: 767.98px){
  header.topbar #site-nav a,
  header.topbar #site-nav .nav-link,
  header.topbar #site-nav button.nav-link{
    color: var(--menu-link) !important;
    -webkit-text-fill-color: var(--menu-link) !important;
    opacity: 1 !important; filter: none !important; mix-blend-mode: normal !important;
    text-decoration: none; font-weight: 600; padding: 10px 12px; border-radius: 8px; display: block;
  }
  header.topbar #site-nav a:hover,
  header.topbar #site-nav .nav-link:hover{
    color: var(--menu-link-hover) !important;
    text-decoration: underline; text-underline-offset: 3px;
  }
  header.topbar #site-nav .nav-link.is-active{ color: var(--menu-link) !important; }
}

/* ===== DESKTOP (>=768px): force WHITE links in the dark topbar ===== */
@media (min-width: 768px){
  /* kill any opacity/blend tricks that might leak from other CSS */
  header.topbar #site-nav{ opacity: 1 !important; }
  header.topbar #site-nav *{ mix-blend-mode: normal !important; filter: none !important; }

  header.topbar #site-nav a,
  header.topbar #site-nav .nav-link,
  header.topbar #site-nav button.nav-link{
    color: var(--topbar-link) !important;                 /* WHITE */
    -webkit-text-fill-color: var(--topbar-link) !important;
    padding: 8px 10px; display: inline-block;
  }
  header.topbar #site-nav a:hover,
  header.topbar #site-nav .nav-link:hover{
    color: var(--topbar-link-hover) !important;           /* soft light-blue */
    text-decoration: underline; text-underline-offset: 3px;
  }
  header.topbar #site-nav .nav-link.is-active{
    color: var(--topbar-link) !important;                 /* keep active = white */
    text-decoration: none;
  }
}

/* === Desktop CTA fix: keep pill text BLACK on the dark bar === */
@media (min-width: 768px){
  header.topbar #site-nav .nav-link--cta,
  header.topbar #site-nav button.nav-link--cta{
    color: #0b1020 !important;                 /* black text in pill */
    -webkit-text-fill-color: #0b1020 !important;
    background: #fff;                          /* keep white pill */
    border: 1px solid rgba(0,0,0,.12);
  }
}

/* Mobile CTA pills should NOT stretch full-width */
@media (max-width: 767.98px){
  header.topbar #site-nav .nav-link--cta,
  header.topbar #site-nav button.nav-link--cta{
    display: inline-block;           /* override the generic block rule */
    width: auto;
    margin: 6px 0;
    padding: 10px 14px;
    border-radius: 999px;
    background: #fff;
    color: #0b1020 !important;
    -webkit-text-fill-color: #0b1020 !important;
    border: 1px solid rgba(0,0,0,.12);
    box-shadow: 0 1px 0 rgba(0,0,0,.05);
  }
}

/* Nicer hamburger + animated close */
.hamburger{
  position: relative;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 12px;
  width: 40px; height: 40px;
  display: inline-block;
  touch-action: manipulation;
}
.hamburger .bar{
  position: absolute; left: 50%;
  width: 22px; height: 2px;
  background: var(--topbar-link);
  border-radius: 2px;
  transform: translateX(-50%);
  transition: transform .18s ease, opacity .18s ease, top .18s ease;
}
.hamburger .bar:nth-child(1){ top: 12px; }
.hamburger .bar:nth-child(2){ top: 19px; }
.hamburger .bar:nth-child(3){ top: 26px; }

/* Turn into an "X" when menu is open */
.hamburger[aria-expanded="true"] .bar:nth-child(1){
  top: 19px; transform: translateX(-50%) rotate(45deg);
}
.hamburger[aria-expanded="true"] .bar:nth-child(2){
  opacity: 0;
}
.hamburger[aria-expanded="true"] .bar:nth-child(3){
  top: 19px; transform: translateX(-50%) rotate(-45deg);
}

/* Hide hamburger on desktop */
@media (min-width: 768px){
  header.topbar .hamburger{ display: none !important; }
}


/* Ensure menu sheet sits above the grey backdrop */
header.topbar{ z-index: 10020 !important; }   /* header + sheet on top */
header.topbar .nav{ z-index: 10021 !important; }  /* (extra safety) */
header.topbar .menu-backdrop{ z-index: 10000 !important; } /* backdrop below */

/* Backdrop is visual-only; don't intercept taps */
header.topbar .menu-backdrop{ pointer-events: none !important; }

/* Remove gray wash on mobile menu */
@media (max-width: 767.98px){
  header.topbar .menu-backdrop { background: transparent !important; }
}

/* Mobile: nav must be hidden unless opened */
@media (max-width: 767.98px){
  header.topbar #site-nav{                 /* closed state */
    display: none !important;
  }
  header.topbar #site-nav.is-open{         /* open state */
    display: block !important;
  }
}

/* CTA pills: keep text black inside the white pill on all sizes */
header.topbar #site-nav .nav-link--cta,
header.topbar #site-nav button.nav-link--cta{
  color: #0b1020 !important;
  -webkit-text-fill-color: #0b1020 !important;
}

/* Homepage / hero-dark: keep CTA pill readable on desktop */
@media (min-width: 768px){
  body.hero-dark header.topbar #site-nav .nav-link--cta,
  body.hero-dark header.topbar #site-nav button.nav-link--cta{
    color: #0f172a !important;
    -webkit-text-fill-color: #0f172a !important;
    background: #fff !important;
    border: 1px solid rgba(0,0,0,.12);
  }
  body.hero-dark header.topbar #site-nav .nav-link--cta:hover,
  body.hero-dark header.topbar #site-nav button.nav-link--cta:hover{
    background: #fff !important;
    text-decoration: none;
    box-shadow: 0 2px 0 rgba(0,0,0,.06);
  }
}



/* --- Brand/Moniker: always render white on the dark topbar --- */
/* Covers text, links, and inline SVG logos; defeats page-level overrides. */
header.topbar .site-logo,
header.topbar .brand,
header.topbar .logo,
header.topbar .site-logo *,
header.topbar .brand *,
header.topbar .logo *{
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;   /* iOS/WebKit */
  mix-blend-mode: normal !important;
  filter: none !important;
  opacity: 1 !important;
}

/* If the mark is an SVG, make sure strokes/fills are white too */
header.topbar .site-logo svg,
header.topbar .brand svg,
header.topbar .logo svg,
header.topbar .site-logo svg *,
header.topbar .brand svg *,
header.topbar .logo svg *{
  fill: #fff !important;
  stroke: #fff !important;
}

/* Bulletproof for visited state */
header.topbar .site-logo a:link,
header.topbar .site-logo a:visited,
header.topbar .brand a:link,
header.topbar .brand a:visited,
header.topbar .logo a:link,
header.topbar .logo a:visited{
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}


/* --- Header typography lock (consistent across all pages) --- */
header.topbar{
  font-family: var(--ui-font, Inter, system-ui, -apple-system, "Segoe UI",
                   Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Brand / moniker weight + tracking */
header.topbar .site-logo{
  font-weight: 800;
  letter-spacing: .2px;
  /* if you're using Inter variable, this makes weight bulletproof */
  font-variation-settings: "wght" 800;
}

/* Primary nav link weight (same as forum index) */
header.topbar #site-nav .nav-link{
  font-weight: 700;
  font-variation-settings: "wght" 700;
}

/* CTA pills keep same weight as other links for legibility */
header.topbar #site-nav .nav-link--cta{
  font-weight: 700;
  font-variation-settings: "wght" 700;
}

/* If any page tries to down-weight anchors, defeat it */
header.topbar .site-logo a,
header.topbar #site-nav a{
  font-weight: inherit !important;
}

/* Desktop hover: underline-only for normal nav links */
@media (hover:hover) and (pointer:fine) {
  /* remove pill treatment on hover for non-CTA links */
  header.topbar #site-nav .nav-link:not(.nav-link--cta) {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
  }

  header.topbar #site-nav .nav-link:not(.nav-link--cta):hover,
  header.topbar #site-nav .nav-link:not(.nav-link--cta):focus-visible {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    color: var(--topbar-link, #fff) !important;

    /* underline style */
    text-decoration: underline;
    text-decoration-thickness: .12em;
    text-underline-offset: .18em; /* ~3px */
  }
}

/* Keep CTA pills behaving like pills on hover */
header.topbar #site-nav .nav-link--cta:hover,
header.topbar #site-nav .nav-link--cta:focus-visible {
  /* whatever your existing CTA hover is; these two lines ensure pill stays a pill */
  background: #fff !important;
  color: #0f172a !important;
}

/* Ensure header items actually hide when the painter toggles them */
header.topbar [hidden] { display: none !important; }