/* === Shared Compact (Hamburger) Menu — Full-Screen Overlay on Mobile === */
.nav-toggle{
  display:none; align-items:center; justify-content:center;
  width:42px; height:42px; border-radius:10px; border:1px solid rgba(11,42,63,.12);
  background:#fff; cursor:pointer;
  flex-direction:column; gap:5px;
  position:relative; z-index:1001; /* keep above overlay so it can close */
}
.nav-toggle .bar{width:22px; height:2.5px; background:var(--teal); border-radius:2px}
header.open .nav-toggle{background:rgba(27,121,165,.10)}

/* Optional: animate into an “X” when open */
header.open .nav-toggle .bar:nth-child(1){transform:translateY(7px) rotate(45deg); transform-origin:center; transition:transform .2s ease}
header.open .nav-toggle .bar:nth-child(2){opacity:0; transition:opacity .2s ease}
header.open .nav-toggle .bar:nth-child(3){transform:translateY(-7px) rotate(-45deg); transform-origin:center; transition:transform .2s ease}

.menu > li{position:relative}
.submenu{display:none; position:absolute; top:100%; left:0; min-width:220px; padding:8px; background:#fff;
  border:1px solid rgba(11,42,63,.08); border-radius:12px; box-shadow:0 10px 30px rgba(11,42,63,.12); z-index:1000}
.menu > li:hover > .submenu{display:block}
.menu > li.open > .submenu{display:block}

@media (max-width:860px){
  .nav{flex-wrap:nowrap}
  .brand{flex:1 1 auto}
  .nav-toggle{display:inline-flex; margin-left:8px}

  /* Full-screen overlay panel */
  .menu{
    display:none;
  }
  header.open .menu{
    display:flex;
    position:fixed;
    inset:0;
    background:#ffffff;
    z-index:1000; /* over header */
    flex-direction:column;
    align-items:stretch;
    gap:0;
    padding:84px 20px 28px; /* give room for brand/close button area */
    overflow:auto;
    animation:navFade .18s ease;
  }
  @keyframes navFade { from { opacity:0 } to { opacity:1 } }

  /* Optional dimmed backdrop (behind content but within same layer) */
  header.open .menu::before{
    content:"";
    position:fixed; inset:0;
    background:rgba(11,42,63,.04);
    pointer-events:none;
  }

  .menu > li{width:100%}
  .menu a, .menu button{
    width:100%; text-align:left; padding:14px 12px; border-radius:10px; font-size:18px;
  }
  .menu a:hover, .menu button:hover{background:rgba(27,121,165,.08)}

  /* Submenus stack inline for touch */
  .submenu{
    position:static !important;
    display:block !important;
    margin:0 !important;
    border-left:4px solid rgba(11,42,63,.06);
    border-right:0; border-top:0; border-bottom:0;
    box-shadow:none;
    padding:0 0 0 8px;
  }
  .submenu a{padding:10px 12px}
}

/* Lock background scroll when nav is open */
body.nav-open{ overflow:hidden }

/* === Override: ensure full-viewport overlay === */
@media (max-width:860px){
  body.nav-open #primary-menu{
    display:flex !important;
    position:fixed !important;
    top:0; left:0; right:0; bottom:0;
    width:100vw; height:100vh;
    margin:0;
    padding:96px 24px 32px; /* space for header region */
    background:#ffffff;
    z-index:9999 !important;
    flex-direction:column; align-items:stretch; gap:0;
    overflow:auto;
  }
  /* Optional dim layer */
  body.nav-open #primary-menu::before{
    content:"";
    position:fixed; inset:0;
    background:rgba(11,42,63,.04);
    pointer-events:none;
  }
}