/* ---------------- Header nav: grouped dropdowns (used with nav.js) ----------------
   Each category is <div class="nav-group"><button class="nav-group-btn" aria-expanded>…</button><div class="nav-menu">links</div></div>.
   nav.js opens and closes them (click / tap, hover with a mouse, Escape, a click outside). Wide screens show a
   dropdown panel; inside the mobile menu (≤1100px, matching style.css) the category expands in place. */

.nav-group{position:relative}
.nav-group-btn{
  display:inline-flex;align-items:center;gap:6px;
  font:inherit;font-weight:700;font-size:.92rem;color:var(--navy);white-space:nowrap;
  background:none;border:0;border-radius:8px;padding:10px 9px;cursor:pointer;
}
.nav-group-btn::after{
  content:"";width:7px;height:7px;margin-top:-4px;flex:none;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);
  transition:transform .15s;
}
.nav-group-btn[aria-expanded="true"]::after{transform:rotate(-135deg);margin-top:3px}
.nav-group-btn:hover,.nav-group-btn[aria-expanded="true"],.nav-group-btn[aria-current]{background:var(--off-white);color:var(--nsw-medium-blue)}
.nav-group-btn:focus-visible{outline:3px solid var(--nsw-medium-blue);outline-offset:1px}

.nav-menu{
  display:none;position:absolute;top:calc(100% + 6px);left:0;z-index:120;min-width:220px;
  flex-direction:column;padding:8px;background:var(--white);
  border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow, 0 12px 30px rgba(0,0,0,.12));
}
/* Bridge the 6px gap so the pointer can move from the button into the panel without closing it. */
.nav-menu::before{content:"";position:absolute;left:0;right:0;top:-8px;height:8px}
.nav-group-btn[aria-expanded="true"] + .nav-menu{display:flex}
nav.main-nav .nav-menu a{padding:10px 12px;font-weight:700}
nav.main-nav .nav-menu a[aria-current="page"]{background:var(--off-white);color:var(--nsw-medium-blue)}
/* Without nav.js the buttons can't toggle, so fall back to hover / keyboard focus. */
nav.main-nav:not(.nav-js) .nav-group:hover .nav-menu,
nav.main-nav:not(.nav-js) .nav-group:focus-within .nav-menu{display:flex}

@media (max-width:1100px){
  nav.main-nav{max-height:calc(100vh - 80px);overflow-y:auto}
  .nav-group{border-bottom:1px solid var(--line)}
  .nav-group-btn{display:flex;width:100%;justify-content:space-between;padding:12px 6px;border-radius:0;font-size:1rem}
  .nav-group-btn:hover,.nav-group-btn[aria-expanded="true"],.nav-group-btn[aria-current]{background:none}
  .nav-menu,.nav-menu::before{position:static;min-width:0;box-shadow:none;border:0;border-radius:0;padding:0 0 8px 14px;content:none}
  nav.main-nav .nav-menu a{padding:10px 6px;border-bottom:0;border-radius:8px}
  nav.main-nav:not(.nav-js) .nav-group .nav-menu{display:flex}
  nav.main-nav .nav-cta{margin-top:12px;text-align:center}
}