/* Shared hamburger menu styles (scoped under body.site-hamburger-open and #site-hamburger) */
:root {
  --hamburger-bg: #0078b4;
  --hamburger-foreground: #ffffff;
  --hamburger-width: 280px;
}

.site-hamburger__toggle {
  position: fixed;
  top: 10px;
  left: 12px;
  width: 44px;
  height: 44px;
  background: transparent;
  border: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 1100;
}
.site-hamburger__icon {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--hamburger-foreground);
  position: relative;
}
.site-hamburger__icon::before,
.site-hamburger__icon::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--hamburger-foreground);
  transition: transform .22s ease, top .22s ease, opacity .22s ease;
}
.site-hamburger__icon::before { top: -6px; }
.site-hamburger__icon::after  { top: 6px; }

/* Open state (animate into an X) */
body.site-hamburger-open .site-hamburger__icon { background: transparent; }
body.site-hamburger-open .site-hamburger__icon::before { transform: translateY(6px) rotate(45deg); }
body.site-hamburger-open .site-hamburger__icon::after  { transform: translateY(-6px) rotate(-45deg); }

/* When the panel is open hide the fixed toggle so only the panel's close button is visible */
body.site-hamburger-open .site-hamburger__toggle {
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
}

/* Ensure hamburger icon is reset to bars by default (avoid accidental X) */
.site-hamburger__icon,
.site-hamburger__icon::before,
.site-hamburger__icon::after {
  transform: none !important;
  opacity: 1 !important;
}

/* Close button hidden until panel opens to avoid stray X appearing */
.site-hamburger__close {
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
}
body.site-hamburger-open #site-hamburger .site-hamburger__close {
  opacity: 1;
  pointer-events: auto;
}

#site-hamburger {
  position: fixed;
  top: 0;
  left: calc(-1 * var(--hamburger-width));
  width: var(--hamburger-width);
  height: 100vh;
  background: var(--hamburger-bg);
  color: var(--hamburger-foreground);
  padding: 64px 16px 16px;
  box-shadow: 2px 0 18px rgba(0,0,0,0.28);
  transition: left .28s cubic-bezier(.2,.9,.2,1);
  z-index: 1050;
  overflow-y: auto;
}
body.site-hamburger-open #site-hamburger { left: 0; }

.site-hamburger__panel-inner { max-width: 100%; }
.site-hamburger__list { list-style: none; padding: 0; margin: 0; }
.site-hamburger__list li { margin: .5rem 0; }
.site-hamburger__list a { color: var(--hamburger-foreground); text-decoration: none; font-weight: 600; display: block; padding: .35rem 0; }
.site-hamburger__list a:focus { outline: 3px solid rgba(255,255,255,.18); outline-offset: 3px; }

.site-hamburger__close { position: absolute; top: 12px; right: 12px; background: transparent; border: 0; color: var(--hamburger-foreground); font-size: 20px; }

.visually-hidden { position: absolute !important; height: 1px; width: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; }

/* No per-section positioning overrides — toggle is fixed in the viewport top-left */

/* Page-specific tweak: DoDE has a taller banner; nudge the toggle down/up as needed */
.dode .site-hamburger__toggle {
  top: 0 !important; /* force to the very top for DoDE pages */
  left: 10px !important;
  z-index: 2000 !important;
}

/* DoDE-specific: make the off-canvas panel red to match DoDE branding */
.dode #site-hamburger {
  background: #b31b1b; /* deep red */
  color: #fff;
}

.dode #site-hamburger .site-hamburger__list a { color: #fff; }

/* GlobalTrust: match the page logo's accent (uses --brand / --teal) */
.globaltrust #site-hamburger {
  background: conic-gradient(from 210deg, var(--brand), var(--teal), var(--brand));
  color: #fff;
}
.globaltrust #site-hamburger .site-hamburger__list a { color: #fff; }

/* Make the collapsed three-line hamburger icon match the GlobalTrust brand color */
.globaltrust .site-hamburger__icon,
.globaltrust .site-hamburger__icon::before,
.globaltrust .site-hamburger__icon::after {
  background: var(--brand) !important;
}

/* LoneGrid: very subtle, low-contrast hamburger for dark theme */
.lonegrid #site-hamburger {
  /* Use LoneGrid's opaque panel color so the menu background is solid when open */
  background: var(--panel, #0c121b);
  color: rgba(215,227,238,.95);
  border: 1px solid rgba(170,195,214,.06);
  box-shadow: none;
  backdrop-filter: none;
}

/* Make the LoneGrid menu panel fully opaque so the close X is visible */
.lonegrid #site-hamburger { opacity: 1; }
.lonegrid #site-hamburger .site-hamburger__list a { color: rgba(215,227,238,.86); }
.lonegrid .site-hamburger__icon,
.lonegrid .site-hamburger__icon::before,
.lonegrid .site-hamburger__icon::after {
  background: rgba(215,227,238,.72) !important;
}

/* Nudge the toggle up so the three-line icon sits inside LoneGrid's header */
.lonegrid .site-hamburger__toggle {
  top: 6px !important;
  left: 12px !important;
}

/* Make the close-X clearly visible on LoneGrid pages (dark circular button, higher z-index) */
.lonegrid #site-hamburger .site-hamburger__close {
  background: rgba(0,0,0,0.60);
  color: #fff;
  padding: 8px 10px;
  border-radius: 999px;
  font-size: 18px;
  line-height: 1;
  box-shadow: 0 6px 18px rgba(0,0,0,.45);
  border: 0;
  right: 12px;
  top: 12px;
  z-index: 2020;
  pointer-events: auto;
}

/* Ensure the close button sits above other page content when panel opens */
#site-hamburger .site-hamburger__close { z-index: 2000; }

/* Rangers page: use ranger gold + cyan accents, solid dark panel */
.rangers #site-hamburger {
  background: linear-gradient(180deg, var(--nlt-matte, #0a0a0a), #0b0b0b);
  color: var(--ranger-gold);
  border: 1px solid rgba(212,175,55,.12);
  box-shadow: 0 18px 45px rgba(0,0,0,.7);
}
.rangers #site-hamburger .site-hamburger__list a { color: var(--ranger-gold); }
.rangers #site-hamburger .site-hamburger__list a:focus { outline-color: rgba(0,242,255,.18); }

/* Make the three-line icon match the ranger gold */
.rangers .site-hamburger__icon,
.rangers .site-hamburger__icon::before,
.rangers .site-hamburger__icon::after {
  background: var(--ranger-gold) !important;
}

/* Close button: gold circular with dark X for visibility */
.rangers #site-hamburger .site-hamburger__close {
  background: var(--ranger-gold);
  color: #000;
  padding: 8px 10px;
  border-radius: 999px;
  font-size: 18px;
  box-shadow: 0 8px 20px rgba(0,0,0,.5);
  border: 0;
  right: 12px;
  top: 12px;
}

/* SPNS (Austin Metro): light, bright badges — use sky/violet accents */
.spns #site-hamburger {
  background: linear-gradient(135deg, var(--violet, #6c63ff), var(--sky, #00f0ff));
  color: var(--ink, #0b1b2a);
  border: 1px solid rgba(11,27,42,.06);
  box-shadow: 0 18px 40px rgba(11,27,42,.08);
}
.spns #site-hamburger .site-hamburger__list a { color: var(--ink); }

/* Closed icon uses sky color for consistency with site accent */
.spns .site-hamburger__icon,
.spns .site-hamburger__icon::before,
.spns .site-hamburger__icon::after {
  background: var(--sky) !important;
}

/* Close button: violet circular with white X for contrast */
.spns #site-hamburger .site-hamburger__close {
  background: var(--violet);
  color: #fff;
  padding: 8px 10px;
  border-radius: 999px;
  font-size: 18px;
  box-shadow: 0 8px 20px rgba(108,99,255,.18);
  border: 0;
  right: 12px;
  top: 12px;
}

/* SPNS: brand image inside the panel */
.spns #site-hamburger .site-hamburger__brand {
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom: 12px;
}
.spns #site-hamburger .site-hamburger__brand-img{
  width:48px;
  height:32px;
  object-fit:cover;
  border-radius:6px;
  border:1px solid rgba(11,27,42,.06);
  box-shadow:0 8px 20px rgba(11,27,42,.06);
}
.spns #site-hamburger .site-hamburger__brand-text{
  font-weight:700;
  color:#fff; /* ensure high contrast over the gradient panel */
  font-size: .95rem;
  text-shadow: 0 1px 0 rgba(0,0,0,.35);
}

/* NLT index page: match the site's background and text tokens */
body[data-page="nlt"] #site-hamburger {
  background: var(--bg); /* use the site's background color */
  color: var(--text);
  border: 1px solid var(--border);
  box-shadow: 0 18px 45px rgba(0,0,0,.65);
}
body[data-page="nlt"] #site-hamburger .site-hamburger__list a { color: var(--text); }
body[data-page="nlt"] #site-hamburger .site-hamburger__close { color: var(--text); }
/* keep the closed icon visible — use the main accent for the three-line bars */
body[data-page="nlt"] .site-hamburger__icon,
body[data-page="nlt"] .site-hamburger__icon::before,
body[data-page="nlt"] .site-hamburger__icon::after {
  background: var(--accent) !important;
}

/* Founders page: match the site's background and text tokens for a seamless panel */
body[data-page="founders"] #site-hamburger {
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  box-shadow: 0 18px 45px rgba(0,0,0,.65);
}
body[data-page="founders"] #site-hamburger .site-hamburger__list a { color: var(--text); }
body[data-page="founders"] #site-hamburger .site-hamburger__close { color: var(--text); }
body[data-page="founders"] .site-hamburger__icon,
body[data-page="founders"] .site-hamburger__icon::before,
body[data-page="founders"] .site-hamburger__icon::after {
  background: var(--accent) !important;
}