/* Shared site navigation — WMO Digitaal.
   Follows the house pattern used by SocMediaManager (AppNav) and Accounting
   (base.html): destinations grouped by the job you came to do, every item
   carrying a one-line description, and a slide-in drawer with a scrim on
   mobile. A flat row of links wrapped and told nobody which pages belonged
   together — the same problem those two had already solved.

   Namespaced (.sitenav, .navtoggle, .skiplink) so it can sit alongside the
   inline CSS that index.html and trust.html still carry.

   Requirements (Besluit digitale toegankelijkheid → EN 301 549 → WCAG 2.1 AA):
     2.4.1  Bypass blocks      — skip link to <main>
     1.3.1  Info/relationships — <nav> + nested <ul>/<li>
     3.2.3  Consistent nav     — same items, same order, every page
     4.1.2  Name/role/value    — aria-expanded + aria-controls
     2.4.7  Focus visible      — 4px outline, never removed
     2.5.5  Target size        — 44px minimum, 48px in the drawer
     1.4.10 Reflow             — usable at 320px, no horizontal scroll
     2.4.8  Location           — aria-current="page"

   Groups open on hover AND focus-within, so the desktop menu works with the
   script absent; JS only adds click-toggle and the drawer. */

/* --- skip link --- */
.skiplink{
  position:absolute; left:8px; top:-100px; z-index:1300;
  background:#fff; color:#0C5A70; border:3px solid #164E63; border-radius:10px;
  padding:12px 20px; font:600 1rem "Lexend","Segoe UI",sans-serif; text-decoration:none;
  min-height:44px; display:inline-flex; align-items:center; transition:top .12s ease-out;
}
.skiplink:focus{ top:8px; }
@media (prefers-reduced-motion: reduce){ .skiplink{ transition:none; } }

[id]{ scroll-margin-top:96px; }

/* --- shared --- */
.sitenav ul{ list-style:none; margin:0; padding:0; }
.sitenav a, .navgroup > button{
  display:flex; align-items:center; gap:6px; min-height:44px;
  padding:9px 13px; border-radius:9px; text-decoration:none;
  color:#123B4A; font:1rem/1.3 "Source Sans 3","Segoe UI",sans-serif;
  background:none; border:0; cursor:pointer; white-space:nowrap;
}
.sitenav a:hover, .navgroup > button:hover{ background:#DFF1F6; }
.sitenav a[aria-current="page"]{
  background:#DFF1F6; color:#0C4A5E; font-weight:600;
  text-decoration:underline; text-underline-offset:4px; text-decoration-thickness:2px;
}
.navgroup > button[data-active="true"]{ color:#0C4A5E; font-weight:600; }
.sitenav a:focus-visible, .navgroup > button:focus-visible,
.navtoggle:focus-visible, .skiplink:focus-visible{ outline:4px solid #164E63; outline-offset:2px; }
.navgroup > button svg{ transition:transform .15s ease-out; flex:none; }
.navgroup[data-open="true"] > button svg{ transform:rotate(180deg); }
@media (prefers-reduced-motion: reduce){ .navgroup > button svg{ transition:none; } }

/* An item is a title plus a line telling you what it is — the house pattern.
   Someone deciding between "Zo werkt het" and "Wat is de Wmo?" should not have
   to click to find out which is which. */
.navpanel b{ display:block; font-weight:600; color:#0f1c33; }
.navpanel span{ display:block; font-size:0.875rem; color:#51648a; line-height:1.4; white-space:normal; }
.navpanel a{ display:block; padding:10px 12px; border-radius:8px; }

/* --- desktop (bar + dropdown panels) --- */
@media (min-width:1024px){
  .navtoggle{ display:none; }
  .sitenav{ display:flex !important; align-items:center; gap:2px; margin-left:auto; }
  .sitenav > ul{ display:flex; align-items:center; gap:2px; }
  .navgroup{ position:relative; }
  .navpanel{
    position:absolute; left:0; top:100%; z-index:1000; width:20rem;
    background:#fff; border:1.5px solid #D3E4E9; border-radius:12px;
    padding:6px; box-shadow:0 12px 28px rgba(16,49,107,.16);
    display:none;
  }
  /* :hover and :focus-within mean the panel opens without JavaScript. */
  .navgroup:hover > .navpanel,
  .navgroup:focus-within > .navpanel,
  .navgroup[data-open="true"] > .navpanel{ display:block; }
  .sitenav .util{ display:none; } /* utility lives in the footer on desktop */
}

/* --- mobile (hamburger + right-hand drawer) --- */
.navtoggle{
  display:inline-flex; align-items:center; gap:9px; margin-left:auto;
  min-height:44px; min-width:44px; padding:9px 16px;
  border:2px solid #0E7490; border-radius:999px; background:#fff; color:#0C5A70;
  font:600 1rem "Lexend","Segoe UI",sans-serif; cursor:pointer;
}
.navtoggle .bars{ width:20px; height:14px; position:relative; display:inline-block; }
.navtoggle .bars i{ position:absolute; left:0; right:0; height:2.5px; background:currentColor; border-radius:2px; }
.navtoggle .bars i:nth-child(1){ top:0; }
.navtoggle .bars i:nth-child(2){ top:5.75px; }
.navtoggle .bars i:nth-child(3){ bottom:0; }
.navtoggle[aria-expanded="true"] .bars i:nth-child(1){ top:5.75px; transform:rotate(45deg); }
.navtoggle[aria-expanded="true"] .bars i:nth-child(2){ opacity:0; }
.navtoggle[aria-expanded="true"] .bars i:nth-child(3){ bottom:5.75px; transform:rotate(-45deg); }

.navscrim{ display:none; position:fixed; inset:0; background:rgba(4,12,28,.5); z-index:1100; }
.navscrim.on{ display:block; }

@media (max-width:1023px){
  .sitenav{
    position:fixed; top:0; right:0; bottom:0; width:min(24rem,100vw); z-index:1200;
    background:#fff; overflow-y:auto; padding:0 0 24px;
    transform:translateX(100%); transition:transform .25s cubic-bezier(.25,.46,.45,.94);
    box-shadow:-8px 0 28px rgba(4,12,28,.18);
  }
  .sitenav[data-open="true"]{ transform:translateX(0); }
  @media (prefers-reduced-motion: reduce){ .sitenav{ transition:none; } }

  .navdrawer-head{
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    padding:14px 18px; border-bottom:1px solid #D3E4E9; position:sticky; top:0; background:#fff;
  }
  .navdrawer-head strong{ font:600 1.125rem "Lexend","Segoe UI",sans-serif; color:#123B4A; }
  .navclose{
    width:44px; height:44px; border-radius:50%; border:2px solid #D3E4E9;
    background:#fff; color:#0C5A70; font-size:1.25rem; cursor:pointer;
  }
  .navclose:focus-visible{ outline:4px solid #164E63; outline-offset:2px; }

  .sitenav > ul > li{ border-bottom:1px solid #E8F1F4; }
  .sitenav a, .navgroup > button{
    min-height:48px; padding:13px 18px; border-radius:0; width:100%;
    justify-content:space-between; font-size:1.0625rem;
  }
  /* Accordion, not a flyout: a panel over a panel on a phone loses people. */
  .navpanel{ display:none; background:#F6FBFC; padding:4px 0 8px; }
  .navgroup[data-open="true"] > .navpanel{ display:block; }
  .navpanel a{ padding:11px 18px 11px 30px; border-radius:0; }
  .navpanel span{ font-size:0.9375rem; }
  .sitenav .util a{ color:#3A5762; }
}

/* No script: the drawer cannot open, so show the whole thing inline instead of
   leaving a button that does nothing. */
@media (max-width:1023px){
  .no-js .sitenav{ position:static; width:auto; transform:none; box-shadow:none; }
  .no-js .navpanel{ display:block; }
  .no-js .navtoggle, .no-js .navdrawer-head{ display:none; }
}