:root{ --page-w: min(1200px, 92vw); }
body.center-all > header, body.center-all > main, body.center-all > footer { display:block; width:100%; max-width: var(--page-w); margin-inline:auto !important; box-sizing:border-box; }

header { position: relative; z-index: 40; }

/* Desktop flyout */
.th-item .th-fly{
  position:absolute; left:0; top:calc(100% + .5rem);
  display:none; z-index:999;
  min-width:16rem; padding:.5rem; border-radius:.75rem;
  background:linear-gradient(180deg, rgba(241,245,249,.98) 0%, rgba(226,232,240,.98) 100%);
  border:1px solid rgba(15,23,42,.12);
  box-shadow:0 20px 45px rgba(2,6,23,.15); backdrop-filter:saturate(1.15) blur(6px);
  pointer-events:auto;
  -webkit-transform: translateZ(0); transform: translateZ(0);
}
@media (prefers-color-scheme: dark){
  .th-item .th-fly{ background:linear-gradient(180deg, rgba(15,23,42,.98) 0%, rgba(2,6,23,.98) 100%); border-color:rgba(255,255,255,.12); box-shadow:0 22px 55px rgba(0,0,0,.45); }
}

/* Hover-gap bridges */
.th-item .dropdown-toggle{ position: relative; }
.th-item .dropdown-toggle::after{ content:""; position:absolute; left:0; right:0; bottom:-10px; height:10px; }
.th-item .th-fly::before{ content:""; position:absolute; left:0; right:0; top:-10px; height:10px; }

/* Show strategies */
.th-item[data-open="true"] > .th-fly { display:block; }
.th-item > .dropdown-toggle[aria-expanded="true"] + .th-fly { display:block; }
.th-item:focus-within > .th-fly { display:block; }
@media (hover:hover){ .th-item:hover > .th-fly{ display:block; } }

/* Links */
.th-fly a{ display:block; padding:.5rem .625rem; border-radius:.65rem; color:inherit; }
.th-fly a:hover{ background:rgba(15,23,42,.08); }
@media (prefers-color-scheme: dark){ .th-fly a:hover{ background:rgba(255,255,255,.08); } }

/* Mobile drawer base */
#mobile-nav-wrap [data-panel]{ background:#fff; color:#0f172a; }
@media (prefers-color-scheme: dark){ #mobile-nav-wrap [data-panel]{ background:#0b1220; color:#e2e8f0; } }

/* --- Subtle emphasis for desktop flyouts --- */
.th-item .th-fly{
  background:#ffffff;                    /* pure white base */
  border:1px solid rgba(15,23,42,.12);   /* subtle border */
  box-shadow:
    0 6px 18px rgba(2,6,23,.08),
    0 2px 6px rgba(2,6,23,.06);          /* soft shadow */
  outline: 1px solid rgba(99,102,241,.08); /* faint indigo ring for separation */
  backdrop-filter: saturate(1.05) blur(4px);
}

/* Dark mode counterpart */
@media (prefers-color-scheme: dark){
  .th-item .th-fly{
    background: #0b1220;                 /* deep slate */
    border-color: rgba(255,255,255,.10);
    box-shadow:
      0 10px 30px rgba(0,0,0,.35),
      0 2px 6px rgba(0,0,0,.25);
    outline: 1px solid rgba(99,102,241,.20); /* slightly stronger ring in dark */
  }
}

/* Menu item spacing and hover feedback */
.th-fly .group-title{
  padding:.45rem .65rem .25rem;
  font-size:.78rem;
  letter-spacing:.02em;
  color:rgba(15,23,42,.6);
  text-transform:uppercase;
}
@media (prefers-color-scheme: dark){
  .th-fly .group-title{ color:rgba(255,255,255,.65); }
}

.th-fly a{
  display:block;
  padding:.55rem .65rem;
  border-radius:.6rem;
  transition: background-color .15s ease, transform .06s ease;
}
.th-fly a:hover{
  background: rgba(99,102,241,.08);      /* indigo tint */
  transform: translateY(-1px);
}
@media (prefers-color-scheme: dark){
  .th-fly a:hover{ background: rgba(99,102,241,.18); }
}

/* Optional: small separator if a flyout has sections */
.th-fly hr{
  border:0;
  height:1px;
  background: linear-gradient(90deg, transparent, rgba(2,6,23,.12), transparent);
  margin:.25rem .25rem;
}
@media (prefers-color-scheme: dark){
  .th-fly hr{ background: linear-gradient(90deg, transparent, rgba(255,255,255,.15), transparent); }
}

.th-nav .dropdown-toggle:hover{
  background: rgba(99,102,241,.06);
}
@media (prefers-color-scheme: dark){
  .th-nav .dropdown-toggle:hover{ background: rgba(99,102,241,.14); }
}
/* === LIGHT-ONLY NAV OVERRIDES (force light even if OS is dark) === */

/* Desktop flyouts */
.th-item .th-fly{
  background:#ffffff !important;
  color:#0f172a !important;
  border:1px solid rgba(15,23,42,.12) !important;
  box-shadow:
    0 6px 18px rgba(2,6,23,.08),
    0 2px 6px rgba(2,6,23,.06) !important;
  outline: 1px solid rgba(99,102,241,.08) !important; /* subtle ring */
}

/* Menu items */
.th-fly a{
  color:inherit !important;
}
.th-fly a:hover,
.th-fly a:focus-visible{
  background: rgba(99,102,241,.08) !important;
  text-decoration: none;
  outline: none;
}

/* Optional group title + separators */
.th-fly .group-title{
  color: rgba(15,23,42,.65) !important;
}
.th-fly hr{
  background: linear-gradient(90deg, transparent, rgba(2,6,23,.12), transparent) !important;
}

/* Top-level toggle hover cue (light tint only) */
.th-nav .dropdown-toggle:hover{
  background: rgba(99,102,241,.06) !important;
}

/* Mobile drawer (panel + text) */
#mobile-nav-wrap [data-panel]{
  background:#ffffff !important;
  color:#0f172a !important;
  border-left: 1px solid rgba(15,23,42,.08);
}

/* Mobile accordion buttons and links */
#mobile-nav-wrap [data-acc]{
  background: #fff !important;
  color:#0f172a !important;
  border-color: rgba(15,23,42,.12) !important;
}
#mobile-nav-wrap [data-acc]:hover{
  background: rgba(99,102,241,.06) !important;
}
#mobile-nav-wrap [data-acc-panel] a:hover,
#mobile-nav-wrap [data-acc-panel] a:focus-visible{
  background: rgba(99,102,241,.08) !important;
}

/* Clear any dark-mode media queries that might still flip colors */
@media (prefers-color-scheme: dark){
  .th-item .th-fly,
  #mobile-nav-wrap [data-panel],
  #mobile-nav-wrap [data-acc]{
    background:#ffffff !important;
    color:#0f172a !important;
    border-color: rgba(15,23,42,.12) !important;
    box-shadow:
      0 6px 18px rgba(2,6,23,.08),
      0 2px 6px rgba(2,6,23,.06) !important;
    outline: 1px solid rgba(99,102,241,.08) !important;
  }
}