/* forum-surface.css — scoped, safe header skin for forum pages only */
:root { --forumTopbarBg:#0b1020; } /* deep navy to match home hero */

/* Dark header skin only when the page wrapper has .forum-surface */
.forum-surface header.topbar{
  background: var(--forumTopbarBg) !important;
  color:#fff !important;
  border-bottom:1px solid rgba(255,255,255,.12) !important;
  position: relative;
  z-index: 1000;
}

/* remove any white “card” behind the header container */
.forum-surface .topbar .container{
  background:transparent !important;
  box-shadow:none !important;
  border:0 !important;
}

/* ensure the header’s own foreground var is white */
.forum-surface .topbar { --topbar-fg:#fff; }

/* make header nav links white and readable on the dark bar */
.forum-surface .topbar .nav .nav-link{
  color:#fff !important;
}
.forum-surface .topbar .nav .nav-link:hover,
.forum-surface .topbar .nav .nav-link:focus{
  color:#e6f0ff !important;
  text-decoration: underline;
}

/* Desktop: show the main nav; let global layout styles do the rest */
@media (min-width:769px){
  .forum-surface .topbar .nav-toggle{ display:none !important; }
  .forum-surface .topbar .main-nav{
    display:flex !important;
    align-items:center;
    gap:1rem;
  }
}

/* Mobile: respect the checkbox toggle */
@media (max-width:768px){
  .forum-surface .topbar .nav-toggle{ display:inline-flex !important; }
  .forum-surface #navToggle:not(:checked) ~ .main-nav{ display:none !important; }
  .forum-surface #navToggle:checked ~ .main-nav{ display:block !important; }
  .forum-surface .topbar .nav .nav-link:not(.nav-link--cta){
    display:block; padding:10px 12px; border-radius:8px;
  }
}

/* Keep Login/Logout as readable white pill on the dark bar */
.forum-surface .topbar .nav .nav-link--cta{
  background:#ffffff !important;
  color:#0b1020 !important;
  box-shadow: 0 1px 0 rgba(0,0,0,.04), inset 0 0 0 1px rgba(0,0,0,.08) !important;
}
.forum-surface .topbar .nav .nav-link--cta:hover,
.forum-surface .topbar .nav .nav-link--cta:focus{
  text-decoration: underline;
}


/* ---- Forum header visibility fix ---- */
.forum-surface.theme-hero-dark .topbar{
  --topbar-fg:#fff;           /* force white text tokens */
  background:#0b1020;         /* keep dark header consistent */
  position:relative;
  z-index:1000;               /* stay above page content */
}

/* Brand + normal links = white on dark */
.forum-surface.theme-hero-dark .topbar .brand,
.forum-surface.theme-hero-dark .topbar .site-name,
.forum-surface.theme-hero-dark .topbar .main-nav a:not(.nav-link--cta),
.forum-surface.theme-hero-dark .topbar .nav a:not(.nav-link--cta){
  color:#ffffff !important;
}

/* CTA pills (Login / Logout) = white pill, dark text */
.forum-surface.theme-hero-dark .topbar .main-nav .nav-link--cta,
.forum-surface.theme-hero-dark .topbar .nav .nav-link--cta{
  background:#ffffff !important;
  color:#0b1020 !important;
  border:1px solid rgba(0,0,0,.12) !important;
  box-shadow:0 1px 0 rgba(0,0,0,.04), inset 0 0 0 1px rgba(0,0,0,.08) !important;
}

.forum-surface.theme-hero-dark .topbar .main-nav a,
.forum-surface.theme-hero-dark .topbar .nav a{
  position:relative; z-index:2; /* belt & suspenders vs overlap */
}

/* --- Full-bleed header background for forum pages --- */
.forum-surface.theme-hero-dark header.topbar{
  background:#0b1020 !important;
  color:#fff !important;
  position:relative;
  z-index:1000;

  /* Full-bleed trick: extend background beyond any max-width container */
  box-shadow: 0 0 0 100vmax #0b1020;
  clip-path: inset(0 -100vmax);
}

/* keep link tokens white just in case */
.forum-surface.theme-hero-dark .topbar{ --topbar-fg:#fff; }

/* --- Mobile full-bleed + visibility for forum header --- */
@media (max-width: 768px){
  /* Keep the top bar itself full-bleed on small screens */
  .forum-surface.theme-hero-dark header.topbar{
    background:#0b1020 !important;
    box-shadow: 0 0 0 100vmax #0b1020;
    clip-path: inset(0 -100vmax);
    z-index:1000;
  }

  /* When the hamburger opens, make the dropdown panel readably dark and full-bleed too */
  .forum-surface.theme-hero-dark .topbar .main-nav{
    background:#0b1020 !important;
    box-shadow: 0 0 0 100vmax #0b1020;
    clip-path: inset(0 -100vmax);
    padding: 8px 16px 12px;   /* breathing room for taps */
  }

  /* Ensure link contrast inside the dropdown */
  .forum-surface.theme-hero-dark .topbar .main-nav a:not(.nav-link--cta){
    color:#ffffff !important;
  }
  .forum-surface.theme-hero-dark .topbar .main-nav .nav-link--cta{
    background:#ffffff !important;
    color:#0b1020 !important;
    border:1px solid rgba(0,0,0,.12) !important;
    box-shadow:0 1px 0 rgba(0,0,0,.04), inset 0 0 0 1px rgba(0,0,0,.08) !important;
  }
}


/* --- Mobile hamburger + dropdown fix (matches your header markup) --- */
@media (max-width: 768px){
  /* Ensure the hamburger button shows on mobile */
  .forum-surface.theme-hero-dark .topbar .nav-toggle{
    display:inline-flex !important;
    align-items:center; justify-content:center;
    margin-left:auto; width:44px; height:44px;
    border-radius:10px; border:1px solid rgba(255,255,255,.25);
    background:transparent; cursor:pointer; padding:0;
    z-index:1001;
  }

  /* Draw the three bars for .nav-toggle__icon */
  .forum-surface.theme-hero-dark .topbar .nav-toggle__icon{
    position:relative; width:22px; height:2px; background:#fff; border-radius:2px;
  }
  .forum-surface.theme-hero-dark .topbar .nav-toggle__icon::before,
  .forum-surface.theme-hero-dark .topbar .nav-toggle__icon::after{
    content:""; position:absolute; left:0; width:22px; height:2px; background:#fff; border-radius:2px;
  }
  .forum-surface.theme-hero-dark .topbar .nav-toggle__icon::before{ top:-6px; }
  .forum-surface.theme-hero-dark .topbar .nav-toggle__icon::after{ top:6px; }

  /* Hide the 'Menu' text visually but keep it for screen readers */
  .forum-surface.theme-hero-dark .topbar .nav-toggle__text{
    position:absolute !important; width:1px; height:1px; overflow:hidden;
    clip:rect(1px,1px,1px,1px); white-space:nowrap;
  }

  /* Closed by default; open when the checkbox is checked */
  .forum-surface .topbar #navToggle:not(:checked) ~ .main-nav{ display:none !important; }
  .forum-surface .topbar #navToggle:checked ~ .main-nav{
    display:block !important;
    background:#0b1020;                   /* dark dropdown */
    box-shadow:0 0 0 100vmax #0b1020;     /* full-bleed */
    clip-path: inset(0 -100vmax);
    padding:8px 16px 12px;
  }

  /* Readable links inside the dropdown */
  .forum-surface.theme-hero-dark .topbar .main-nav a:not(.nav-link--cta){
    color:#fff !important; display:block; padding:10px 12px; border-radius:8px;
  }
  .forum-surface.theme-hero-dark .topbar .main-nav .nav-link--cta{
    background:#fff !important; color:#0b1020 !important;
    border:1px solid rgba(0,0,0,.12) !important;
    box-shadow:0 1px 0 rgba(0,0,0,.04), inset 0 0 0 1px rgba(0,0,0,.08) !important;
  }
}

/* Desktop keeps toggle hidden, nav visible */
@media (min-width:769px){
  .forum-surface .topbar .nav-toggle{ display:none !important; }
  .forum-surface .topbar .main-nav{ display:flex !important; align-items:center; gap:1rem; }
}


/* === Mobile nav: show hamburger clearly + open dropdown === */
@media (max-width: 768px){

  /* Keep the header and its inner container from clipping children */
  .forum-surface .topbar{ position: relative; z-index: 1000; overflow: visible; }
  .forum-surface .topbar .container{ position: relative; overflow: visible; }

  /* Make the hamburger visible and aligned to the right */
  .forum-surface.theme-hero-dark .topbar .nav-toggle{
    display:inline-flex !important;
    align-items:center; justify-content:center;
    width:44px; height:44px; margin-left:auto;
    border-radius:10px; border:1px solid rgba(255,255,255,.25);
    background:transparent; cursor:pointer; padding:0;
    z-index:1001;
  }
  /* Draw the three bars */
  .forum-surface.theme-hero-dark .topbar .nav-toggle__icon{
    position:relative; width:22px; height:2px; background:#fff; border-radius:2px;
  }
  .forum-surface.theme-hero-dark .topbar .nav-toggle__icon::before,
  .forum-surface.theme-hero-dark .topbar .nav-toggle__icon::after{
    content:""; position:absolute; left:0; width:22px; height:2px; background:#fff; border-radius:2px;
  }
  .forum-surface.theme-hero-dark .topbar .nav-toggle__icon::before{ top:-6px; }
  .forum-surface.theme-hero-dark .topbar .nav-toggle__icon::after{ top:6px; }

  /* Dropdown panel positioning (absolute under the bar, full-bleed paint) */
  .forum-surface .topbar .main-nav{
    position: absolute;
    top: 100%; left: 0; right: 0;
    margin-top: 8px;
    background:#0b1020 !important;
    border-radius:12px;
    padding: 8px 16px 12px;
    box-shadow: 0 8px 24px rgba(0,0,0,.25), 0 0 0 100vmax #0b1020;
    clip-path: inset(0 -100vmax);  /* extend dark bg to viewport edges */
  }

  /* Hide by default; reveal when the checkbox is checked.
     (matches your actual markup: input#navToggle + label + nav.main-nav) */
  .forum-surface .topbar #navToggle:not(:checked) + label + .main-nav{ display:none !important; }
  .forum-surface .topbar #navToggle:checked + label + .main-nav{ display:block !important; }

  /* Readable links inside dropdown */
  .forum-surface.theme-hero-dark .topbar .main-nav a:not(.nav-link--cta){
    color:#fff !important; display:block; padding:10px 12px; border-radius:8px;
  }
  .forum-surface.theme-hero-dark .topbar .main-nav .nav-link--cta{
    background:#fff !important; color:#0b1020 !important;
    border:1px solid rgba(0,0,0,.12) !important;
    box-shadow:0 1px 0 rgba(0,0,0,.04), inset 0 0 0 1px rgba(0,0,0,.08) !important;
  }
}

/* Desktop stays the same */
@media (min-width: 769px){
  .forum-surface .topbar .nav-toggle{ display:none !important; }
  .forum-surface .topbar .main-nav{ display:flex !important; align-items:center; gap:1rem; position:static; box-shadow:none; clip-path:none; }
}

/* --- Mobile header fix: keep hamburger inside, make dropdown open --- */
@media (max-width: 768px){
  /* 1) Let the brand and toggle share one line without clipping */
  .forum-surface .topbar .container{
    display:flex; align-items:center; gap:12px;
    overflow:visible; /* no clipping */
  }
  .forum-surface .topbar .site-logo{ flex:1 1 auto; min-width:0; }
  .forum-surface .topbar .site-name{
    display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .forum-surface .topbar .nav-toggle{
    order:2; margin-left:8px; display:inline-flex !important;
  }
  .forum-surface .topbar .main-nav{ order:3; }

  /* 2) Use general-sibling so the checkbox reliably opens the nav */
  .forum-surface .topbar #navToggle:not(:checked) ~ .main-nav{ display:none !important; }
  .forum-surface .topbar #navToggle:checked ~ .main-nav{
    display:block !important;
    position:absolute; top:100%; left:0; right:0; margin-top:8px;
    background:#0b1020 !important; border-radius:12px; padding:8px 16px 12px;
    box-shadow:0 8px 24px rgba(0,0,0,.25), 0 0 0 100vmax #0b1020;
    clip-path: inset(0 -100vmax);
    z-index:1001;
  }

  /* Readability inside dropdown */
  .forum-surface.theme-hero-dark .topbar .main-nav a:not(.nav-link--cta){
    color:#fff !important; display:block; padding:10px 12px; border-radius:8px;
  }
  .forum-surface.theme-hero-dark .topbar .main-nav .nav-link--cta{
    background:#fff !important; color:#0b1020 !important;
    border:1px solid rgba(0,0,0,.12) !important;
    box-shadow:0 1px 0 rgba(0,0,0,.04), inset 0 0 0 1px rgba(0,0,0,.08) !important;
  }
}

/* === FINAL mobile toggle bind: checkbox + label + nav === */
@media (max-width: 768px){
  /* Keep header from clipping the icon or dropdown */
  .forum-surface .topbar,
  .forum-surface .topbar .container{ position:relative; overflow:visible; z-index:1000; }

  /* Default: hide the menu on mobile */
  .forum-surface.theme-hero-dark header.topbar .container > nav.main-nav{
    display:none !important;
  }

  /* Open: when #navToggle is checked, show the dropdown (match exact DOM order) */
  .forum-surface.theme-hero-dark header.topbar .container > #navToggle:checked + label.nav-toggle + nav.main-nav{
    display:block !important;

    /* position + full-bleed panel */
    position:absolute; top:100%; left:0; right:0; margin-top:8px;
    background:#0b1020 !important; border-radius:12px; padding:8px 16px 12px;
    box-shadow:0 8px 24px rgba(0,0,0,.25), 0 0 0 100vmax #0b1020;
    clip-path:inset(0 -100vmax);
    z-index:1001;
  }

  /* Make sure the hamburger sits inside the row (no clipping) */
  .forum-surface .topbar .container{ display:flex; align-items:center; gap:12px; }
  .forum-surface .topbar .site-logo{ flex:1 1 auto; min-width:0; }
  .forum-surface .topbar .site-name{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .forum-surface .topbar .nav-toggle{ display:inline-flex !important; margin-left:8px; }

  /* Readable links in the dropdown */
  .forum-surface.theme-hero-dark .topbar .main-nav a:not(.nav-link--cta){
    color:#fff !important; display:block; padding:10px 12px; border-radius:8px;
  }
  .forum-surface.theme-hero-dark .topbar .main-nav .nav-link--cta{
    background:#fff !important; color:#0b1020 !important;
    border:1px solid rgba(0,0,0,.12) !important;
    box-shadow:0 1px 0 rgba(0,0,0,.04), inset 0 0 0 1px rgba(0,0,0,.08) !important;
  }
}


/* --- Mobile nav: open when the container has .nav-open --- */
@media (max-width: 768px){
  /* Baseline: keep mobile nav hidden */
  .forum-surface.theme-hero-dark header.topbar .container > nav.main-nav{
    display:none !important;
  }

  /* Open state controlled by JS toggler (class on the same container) */
  .forum-surface.theme-hero-dark header.topbar .container.nav-open > nav.main-nav{
    display:block !important;
    position:absolute; top:100%; left:0; right:0; margin-top:8px;
    background:#0b1020 !important; border-radius:12px; padding:8px 16px 12px;
    box-shadow:0 8px 24px rgba(0,0,0,.25), 0 0 0 100vmax #0b1020;
    clip-path: inset(0 -100vmax);
    z-index:1001;
  }
}

/* --- Mobile nav: open when the container has .nav-open --- */
@media (max-width: 768px){
  /* Baseline: keep mobile nav hidden */
  .forum-surface.theme-hero-dark header.topbar .container > nav.main-nav{
    display:none !important;
  }

  /* Open state */
  .forum-surface.theme-hero-dark header.topbar .container.nav-open > nav.main-nav{
    display:block !important;
    position:absolute; top:100%; left:0; right:0; margin-top:8px;
    background:#0b1020 !important; border-radius:12px; padding:8px 16px 12px;
    box-shadow:0 8px 24px rgba(0,0,0,.25), 0 0 0 100vmax #0b1020;
    clip-path: inset(0 -100vmax);
    z-index:1001;
  }
}


/* === Forum action buttons: Live Chat + Explore map === */
:root{
  --cta-accent: #7b5cff;            /* violet accent */
  --cta-accent-rgb: 123, 92, 255;
  --ink-900: #0b1020;               /* deep navy used in header */
}

/* keep the actions row tidy */
.forum-surface .forum-actions{
  display:flex; justify-content:flex-end; align-items:center;
  gap:10px; max-width:1100px; margin:8px auto 14px;
}

/* shared button look */
.forum-surface .live-chat-button,
.forum-surface .map-cta{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 12px; border-radius:999px;
  font-weight:600; letter-spacing:.01em; line-height:1;
  text-decoration:none; white-space:nowrap;
  transition:transform .15s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease, border-color .2s ease;
}

/* Live Chat: crisp white pill with subtle depth + online pulse dot */
.forum-surface .live-chat-button{
  background:linear-gradient(180deg,#fff,#f7f9ff);
  color:var(--ink-900);
  border:1px solid rgba(11,16,32,.12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75), 0 6px 14px rgba(11,16,32,.08);
  position:relative;
}
.forum-surface .live-chat-button::after{
  content:""; width:8px; height:8px; border-radius:50%;
  background:#22c55e;            /* online green */
  margin-left:2px;
  box-shadow:0 0 0 6px rgba(34,197,94,.25);
}
@media (prefers-reduced-motion:no-preference){
  .forum-surface .live-chat-button::after{
    animation:pulse 1.8s cubic-bezier(.22,1,.36,1) infinite;
  }
  @keyframes pulse{
    0%{ box-shadow:0 0 0 0 rgba(34,197,94,.38); }
    70%{ box-shadow:0 0 0 10px rgba(34,197,94,0); }
    100%{ box-shadow:0 0 0 0 rgba(34,197,94,0); }
  }
}

/* Map CTA: soft “ghost” violet with icon */
.forum-surface .map-cta{
  color:rgb(var(--cta-accent-rgb));
  background:rgba(var(--cta-accent-rgb),.08);
  border:1px solid rgba(var(--cta-accent-rgb),.30);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75), 0 3px 10px rgba(11,16,32,.06);
}
.forum-surface .map-cta__icon{ width:18px; height:18px; flex:0 0 18px; }
.forum-surface .map-cta__text{ display:inline-block; }

/* small size tag already in your HTML */
.forum-surface .map-cta--xs{ font-size:.9rem; padding:7px 10px; }

/* hover / active / focus states (both buttons) */
.forum-surface .live-chat-button:hover,
.forum-surface .map-cta:hover{
  transform:translateY(-1px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75), 0 10px 20px rgba(11,16,32,.12);
  background-color:rgba(var(--cta-accent-rgb),.10);
}
.forum-surface .live-chat-button:active,
.forum-surface .map-cta:active{
  transform:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75), 0 3px 8px rgba(11,16,32,.18);
}
.forum-surface .live-chat-button:focus-visible,
.forum-surface .map-cta:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px rgba(var(--cta-accent-rgb),.35), 0 6px 14px rgba(11,16,32,.08);
}

/* Optional: nudge the old <p> wrapper so it doesn't add extra space */
.forum-surface p > .live-chat-button{ margin-left:0; }