:root{
  --brand-blue:#034EA2;
  --nav-text:#0f2f62;
  --panel-bg:#ffffff;
  --panel-border: rgba(0,0,0,.08);
  --shadow: 0 18px 55px rgba(3,78,162,0.16);
}

/* =========================================================
   STICKY (SITE-WIDE)
   Make the INCLUDE MOUNT sticky, not the injected header node.
   This guarantees stickiness across all pages using #siteHeader.
   ========================================================= */
#siteHeader{
  position: sticky;
  top: 0;
  z-index: 5000;
}

/* Optional: prevent horizontal quirks that can affect sticky layouts */
html, body{
  overflow-x: visible;
}

/* Header-only reset */
.topbar, .topbar *{ box-sizing:border-box; }
.topbar a{ color:inherit; text-decoration:none; }
.topbar a:hover{ text-decoration:none; }
.topbar a:visited{ text-decoration:none; }
.topbar button{ font:inherit; }

/* ===== HEADER SHELL ===== */
.topbar{
  /* IMPORTANT: sticky is handled by #siteHeader now */
  position: relative;

  backdrop-filter:saturate(160%) blur(10px);
  background:rgba(255,255,255,.75);
  border-bottom:1px solid rgba(0,0,0,.06);
  overflow:visible;
}

/* Desktop container */
.topbar .topbar-inner{
  max-width:1100px;
  margin:0 auto;
  padding:14px 18px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
}

/* Brand */
.topbar .brand{
  display:flex;
  gap:10px;
  align-items:center;
  font-family:Montserrat,Inter,sans-serif;
  font-weight:800;
  letter-spacing:-0.02em;
  white-space:nowrap;
  font-size:18px;
  line-height:1;
  color:var(--brand-blue) !important;
}
.topbar .brand span{ color:var(--brand-blue) !important; }
.topbar .brand img{ width:28px; height:28px; object-fit:contain; }

/* ===== DESKTOP NAV ===== */
.topbar .nav-desktop{
  display:flex;
  align-items:center;
  gap:18px;
  font-weight:700;
  font-size:14px;
  color:var(--nav-text);
  white-space:nowrap;
}

.topbar .nav-desktop .nav-link{
  background:transparent;
  border:0;
  color:inherit;
  padding:8px 10px;
  border-radius:10px;
  cursor:pointer;
  line-height:1;
}

.topbar .nav-desktop .nav-link:hover{
  background:rgba(3,78,162,.08);
}

/* Desktop dropdown via <details> */
.topbar .nav-dd{
  position:relative;
}
.topbar .nav-dd > summary{
  list-style:none;
}
.topbar .nav-dd > summary::-webkit-details-marker{ display:none; }
.topbar .nav-dd-menu{
  position:absolute;
  top:42px;
  right:0;
  min-width:220px;
  background:#fff;
  border:1px solid rgba(0,0,0,0.08);
  border-radius:14px;
  box-shadow:var(--shadow);
  padding:8px;
  display:none;
  z-index:5200;
}
.topbar .nav-dd[open] .nav-dd-menu{ display:block; }

.topbar .nav-dd-menu a{
  display:block;
  padding:10px 10px;
  border-radius:10px;
  font-weight:700;
  color:var(--nav-text);
}
.topbar .nav-dd-menu a:hover{ background:rgba(3,78,162,0.08); }

/* Caret */
.topbar .caret{
  width:10px;
  height:10px;
  display:inline-block;
  border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;
  transform:rotate(45deg);
  margin-left:6px;
  margin-top:-2px;
  opacity:.7;
}

/* ===== HAMBURGER TOGGLE ===== */
.topbar .nav-toggle{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

.topbar .nav-toggle-btn{
  display:none; /* desktop hidden */
  width:44px;
  height:44px;
  border-radius:14px;
  border:1px solid rgba(0,0,0,.10);
  background:rgba(255,255,255,.9);
  box-shadow:0 8px 20px rgba(0,0,0,.06);
  align-items:center;
  justify-content:center;
  cursor:pointer;
  user-select:none;
}

.topbar .nav-toggle-icon{
  width:20px;
  height:2px;
  background:var(--nav-text);
  position:relative;
  border-radius:2px;
}
.topbar .nav-toggle-icon::before,
.topbar .nav-toggle-icon::after{
  content:"";
  position:absolute;
  left:0;
  width:20px;
  height:2px;
  background:var(--nav-text);
  border-radius:2px;
}
.topbar .nav-toggle-icon::before{ top:-6px; }
.topbar .nav-toggle-icon::after{ top:6px; }

/* X state */
.topbar .nav-toggle:checked ~ .topbar-inner .nav-toggle-icon{
  background:transparent;
}
.topbar .nav-toggle:checked ~ .topbar-inner .nav-toggle-icon::before{
  top:0;
  transform:rotate(45deg);
}
.topbar .nav-toggle:checked ~ .topbar-inner .nav-toggle-icon::after{
  top:0;
  transform:rotate(-45deg);
}

.sr-only{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;
  border:0!important;
}

/* ===== MOBILE PANEL (drill-down) ===== */
.topbar .nav-mobile{
  display:none; /* desktop hidden */
}

@media (max-width: 900px){
  .topbar .nav-desktop{ gap:8px; flex-wrap:wrap; justify-content:flex-end; }
}

@media (max-width: 620px){

  /* Mobile header row */
  .topbar .topbar-inner{
    max-width:100%;
    width:100%;
    margin:0;
    padding-left:calc(env(safe-area-inset-left) + 14px);
    padding-right:calc(env(safe-area-inset-right) + 14px);
    padding-top:12px;
    padding-bottom:12px;
  }

  /* Hamburger visible */
  .topbar .nav-toggle-btn{ display:flex; }

  /* Desktop nav hidden on mobile */
  .topbar .nav-desktop{ display:none; }

  /* Mobile nav panel hidden until checked */
  .topbar .nav-mobile{
    display:block;
    max-height:0;
    overflow:hidden;
    transition:max-height .25s ease;
    border-top:1px solid rgba(0,0,0,.06);
    background:rgba(255,255,255,.85);
  }

  /* Checkbox controls panel */
  .topbar .nav-toggle:checked ~ .nav-mobile{
    max-height:80vh;
    overflow:auto;
  }

  .topbar .m-panel{
    padding:14px;
    padding-left:calc(env(safe-area-inset-left) + 14px);
    padding-right:calc(env(safe-area-inset-right) + 14px);
  }

  /* Views (JS will toggle [hidden]) */
  .topbar .m-view[hidden]{ display:none !important; }
  .topbar .m-view{ display:block; }

  /* Menu items */
  .topbar .m-item,
  .topbar .m-back{
    display:flex;
    align-items:center;
    justify-content:space-between;
    width:100%;
    padding:14px 14px;
    margin:0 0 10px;
    background:var(--panel-bg);
    border:1px solid var(--panel-border);
    border-radius:18px;
    box-shadow:0 10px 26px rgba(0,0,0,.04);
    font-weight:800;
    color:var(--nav-text);
    font-size:18px;
  }

  .topbar .m-item:active,
  .topbar .m-back:active{
    transform:translateY(1px);
  }

  .topbar .m-next .m-arrow{
    width:10px;
    height:10px;
    border-right:2px solid currentColor;
    border-bottom:2px solid currentColor;
    transform:rotate(-45deg);
    opacity:.6;
    margin-left:10px;
  }

  .topbar .m-back{
    justify-content:flex-start;
    gap:10px;
  }
  .topbar .m-back::before{
    content:"";
    width:10px;
    height:10px;
    border-left:2px solid currentColor;
    border-bottom:2px solid currentColor;
    transform:rotate(45deg);
    opacity:.6;
  }
}