/* ─────────────────────────────────────────────────────────────
   Shared header navigation
   Loaded after each page's inline styles so the rules below win.
   Structure: .nav > .navitem (+ .has-sub > .subtoggle + .submenu)
   ───────────────────────────────────────────────────────────── */

/* Keep the seven-item header on one line on smaller desktops. */
@media (min-width:1101px) and (max-width:1280px){
  .masthead .wrap{gap:20px;}
  .nav{gap:18px;font-size:14px;}
  .brand img{height:42px;}
}

/* ── Menu button (hidden on desktop) ─────────────────────── */
.navtoggle{
  display:none;align-items:center;justify-content:center;
  width:44px;height:44px;padding:0;margin-left:12px;
  background:transparent;border:1px solid var(--rule-navy);
  color:#fff;cursor:pointer;
}
.navtoggle-bars{position:relative;display:block;width:20px;height:2px;background:currentColor;transition:background .18s;}
.navtoggle-bars::before,.navtoggle-bars::after{
  content:"";position:absolute;left:0;width:100%;height:2px;background:currentColor;
  transition:transform .18s;
}
.navtoggle-bars::before{top:-6px;}
.navtoggle-bars::after{top:6px;}
.navtoggle[aria-expanded="true"] .navtoggle-bars{background:transparent;}
.navtoggle[aria-expanded="true"] .navtoggle-bars::before{transform:translateY(6px) rotate(45deg);}
.navtoggle[aria-expanded="true"] .navtoggle-bars::after{transform:translateY(-6px) rotate(-45deg);}

/* ── Second-level navigation ─────────────────────────────── */
.navitem{position:relative;display:flex;align-items:center;}
.subtoggle{
  display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:30px;margin-left:1px;padding:0;
  background:transparent;border:0;color:var(--on-navy-2);cursor:pointer;
  transition:color .15s;
}
.subtoggle svg{width:9px;height:6px;display:block;transition:transform .18s;}
.subtoggle:hover,.has-sub.open .subtoggle{color:#fff;}
.has-sub.open .subtoggle svg{transform:rotate(180deg);}
.submenu{
  position:absolute;top:100%;left:50%;transform:translateX(-50%);
  display:none;min-width:232px;padding:9px 0;z-index:60;
  background:#fff;color:var(--navy);
  border:1px solid var(--line);
  box-shadow:0 18px 44px rgba(14,21,36,.22);
}
.has-sub.open > .submenu{display:block;}
.submenu a{
  display:block;padding:9px 18px;color:var(--navy);
  font-size:14px;line-height:1.45;text-decoration:none;
  border-bottom:0;white-space:nowrap;
}
.submenu a:hover,.submenu a:focus-visible{background:var(--paper);color:var(--red-ink,var(--red));}
.submenu.mega{
  width:min(640px, calc(100vw - 48px));
  padding:18px 20px 12px;
  grid-template-columns:1.08fr .92fr;
  gap:0 26px;
}
.has-sub.open > .submenu.mega{display:grid;}
.mega .mcol{display:flex;flex-direction:column;min-width:0;}
.mega .colhead{
  margin:0;padding:0 18px 7px;
  font-family:var(--f-mono);font-size:10.5px;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);
}
.mega .mcol a{padding:7px 18px;font-size:13.8px;white-space:normal;}
.mega .mega-all{
  grid-column:1/-1;margin-top:12px;padding:11px 18px 5px;
  border-top:1px solid var(--line);
  font-family:var(--f-mono);font-size:12px;letter-spacing:.03em;
  color:var(--red-ink,var(--red));
}
.mega .mega-all:hover{background:transparent;color:var(--red);}

/* Anchor targets clear the sticky header. */
section[id],.pcard,.eqgroup[id],.cat[id]{scroll-margin-top:calc(86px + env(safe-area-inset-top, 0px));}

/* ── Mobile: collapse into the hamburger / accordion ─────── */
@media (max-width:1100px){
  .masthead .wrap{gap:8px 12px;}
  .brand{order:1;}
  .brand img{height:38px;}
  .lang{order:2;margin-left:auto;}
  .navtoggle{order:3;display:inline-flex;}
  .nav{
    order:4;display:none;width:100%;margin-left:0;gap:0;
    font-size:15px;border-top:1px solid var(--rule-navy);margin-top:4px;
  }
  .nav.open{display:block;max-height:calc(100vh - 170px);max-height:calc(100dvh - 170px);overflow-y:auto;overscroll-behavior:contain;}
  .navitem{display:block;min-height:0;}
  .navitem > a{
    display:block;width:calc(100% - 46px);padding-block:11px;
    border-bottom:1px solid var(--rule-navy);
  }
  .navitem > a[aria-current]{border-bottom-color:var(--red);}
  .subtoggle{
    position:absolute;right:0;top:0;width:44px;height:46px;margin:0;
    border-bottom:1px solid var(--rule-navy);
  }
  .subtoggle svg{width:10px;height:7px;}
  .submenu{
    position:static;transform:none;display:none;width:auto;min-width:0;
    padding:0 0 6px 14px;background:transparent;border:0;box-shadow:none;
  }
  .has-sub.open > .submenu,
  .has-sub.open > .submenu.mega{display:block;}
  .submenu a{
    width:100%;padding:9px 12px;color:var(--on-navy-2);
    font-size:14px;border-bottom:1px solid rgba(255,255,255,.07);
    white-space:normal;
  }
  .submenu a:hover{background:transparent;color:#fff;}
  .mega .colhead{color:rgba(255,255,255,.45);padding:10px 12px 4px;}
  .mega .mcol a{padding:8px 12px;font-size:13.5px;}
  .mega .mega-all{
    margin-top:6px;padding:10px 12px;border-top:1px solid var(--rule-navy);
    color:var(--blue);
  }
  .mega .mega-all:hover{color:#fff;}
  section[id],.pcard,.eqgroup[id],.cat[id]{scroll-margin-top:calc(74px + env(safe-area-inset-top, 0px));}
}
@media (max-width:620px){
  .nav.open{
    max-height:calc(100vh - 230px);
    max-height:calc(100dvh - 230px);
  }
}