/* uitklapmenu's in de header (alle pagina's, ook de homepage). Desktop: hover of klik op het pijltje. Mobiel: subpagina's ingesprongen in het menupaneel */
.dd{position:relative;display:flex;align-items:center;gap:2px}
.dd-btn,button.dd-top{background:none;border:0;color:inherit;font:inherit;cursor:pointer;padding:0;display:inline-flex;align-items:center}
.dd-btn{width:26px;height:30px;justify-content:center;border-radius:8px;margin-right:-6px}
button.dd-top{gap:6px;font-weight:500;font-size:16px;letter-spacing:-.005em;padding:6px 0;background:linear-gradient(currentColor,currentColor) 0 100%/0 1.5px no-repeat;transition:background-size .3s}
.dd-chev{width:10px;height:10px;transition:transform .25s ease;flex:none}
.dd.open .dd-chev{transform:rotate(180deg)}
.dd.is-current > a.dd-top,.dd.is-current > button.dd-top{background-size:100% 1.5px}
.dd .dd-menu{position:absolute;left:50%;top:100%;z-index:80;padding-top:14px;transform:translate(-50%,-4px);opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .18s ease .1s,transform .18s ease .1s,visibility 0s linear .28s}
.dd.open .dd-menu{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0);transition-delay:0s}
@media (hover:hover) and (pointer:fine){
  .dd:hover .dd-menu{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0);transition-delay:0s}
  .dd:hover .dd-chev{transform:rotate(180deg)}
  .dd:hover > button.dd-top{background-size:100% 1.5px}
}
.dd .dd-menu ul.dd-card{display:block;min-width:220px;margin:0;padding:8px;list-style:none;background:#fff;color:#2B40F5;border-radius:18px;
  box-shadow:0 30px 60px -20px rgba(20,30,130,.38),0 0 0 1px rgba(43,64,245,.1)}
.dd .dd-menu ul.dd-card li{display:block}
.dd .dd-menu ul.dd-card a{display:block;white-space:nowrap;padding:11px 14px;border-radius:11px;font-weight:600;font-size:15.5px;line-height:1.25;text-decoration:none;color:#2B40F5;background:none;transition:background-color .15s}
.dd .dd-menu ul.dd-card a:hover,.dd .dd-menu ul.dd-card a:focus-visible{background:rgba(43,64,245,.08);background-size:auto}
.dd .dd-menu ul.dd-card a[aria-current="page"]{background:rgba(43,64,245,.1)}
.dd .dd-menu ul.dd-card a:focus-visible{outline:2px solid #2B40F5;outline-offset:-2px}

/* mobiel paneel: de hoofditems blijven staan, een plusje klapt de subpagina's uit; past het niet, dan scrollt het paneel */
.menu-panel,.sh-panel{max-height:calc(100svh - 96px);overflow-y:auto;overscroll-behavior:contain;--mp-line:rgba(255,255,255,.22)}
.site-head.is-light .menu-panel,.sh-panel{--mp-line:rgba(43,64,245,.12)}
.menu-panel .mp-g,.sh-panel .mp-g{display:flex;align-items:center;border-bottom:1px solid var(--mp-line)}
.menu-panel .mp-g a,.sh-panel .mp-g a{flex:1;border-bottom:0}
.mp-tg{flex:none;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;margin-right:-10px;background:none;border:0;color:inherit;cursor:pointer;border-radius:12px}
.mp-tg.mp-row{flex:1;width:auto;height:auto;margin-right:-10px;padding:13px 10px 13px 0;justify-content:space-between;font:inherit;font-weight:600;font-size:19px;text-align:left}
.mp-plus{position:relative;width:14px;height:14px;flex:none}
.mp-row .mp-plus{margin-right:5px}
.mp-plus::before,.mp-plus::after{content:"";position:absolute;left:0;top:50%;width:14px;height:2px;margin-top:-1px;border-radius:2px;background:currentColor;transition:transform .25s ease}
.mp-plus::after{transform:rotate(90deg)}
.mp-tg[aria-expanded="true"] .mp-plus::after{transform:rotate(0deg)}
.menu-panel .mp-sub,.sh-panel .mp-sub{display:none;padding:4px 0 10px 14px;border-bottom:1px solid var(--mp-line)}
.menu-panel .mp-sub.open,.sh-panel .mp-sub.open{display:block}
.menu-panel .mp-sub a,.sh-panel .mp-sub a{font-weight:500;font-size:16px;padding:8px 0;border-bottom:0}
.nav > ul,.sh-links{align-items:center}

/* taalschakelaar: op desktop de huidige taal als laatste item in de menubalk (klik = wisselen), op mobiel klein NL | EN rechtsboven in het menu */
.lang-li{display:flex;align-items:center;padding-left:clamp(10px,1.2vw,18px);border-left:1.5px solid currentColor;border-left-color:color-mix(in srgb,currentColor 35%,transparent)}
.mp-lang{display:flex;justify-content:flex-end;align-items:center;gap:2px;margin:-2px -6px 2px 0;font-size:14px;font-weight:500;letter-spacing:.02em;line-height:1}
.mp-lang .lang-cur{font-weight:700;padding:10px 6px}
.mp-lang .mp-sep{opacity:.5;padding:0 2px}
.menu-panel .mp-lang a,.sh-panel .mp-lang a{display:inline-block;border:0;padding:10px 6px;font-size:14px;font-weight:500;text-decoration:none}

/* agentknop: direct na de taalwissel een link naar de markdown-versie van deze pagina, voor AI-agents (build.py vult href="#agent-md" in).
   Desktop: dezelfde navlink als de taalwissel, het label iets kleiner. Vanaf 1240px "Voor agents"; smaller past alleen het korte "MD" in monoletter.
   Mobiel: links in de rij van NL | EN, zodat de menu-items eronder niet verschuiven */
.agent-li{display:flex;align-items:center}
.agent-sw .agent-full{font-size:14px;letter-spacing:.02em}
.agent-sw .agent-short{display:none;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13px;font-weight:600;letter-spacing:.04em}
@media (max-width:1239px){.agent-li .agent-full{display:none}.agent-li .agent-short{display:inline}}
/* 1080 tot 1140px is de balk het krapst: iets minder lucht tussen de items, zodat niets op twee regels valt */
@media (min-width:1080px) and (max-width:1139px){nav.nav,nav.sh-nav{gap:16px}nav.nav > ul,nav.sh-nav > .sh-links{gap:clamp(18px,2vw,38px)}}
.menu-panel .mp-agent,.sh-panel .mp-agent{position:absolute;left:18px;top:8px;display:inline-block;border:0;padding:10px 0;font-size:14px;font-weight:500;letter-spacing:.02em;line-height:1;text-decoration:none}

/* sectorpagina's horen bij "AI per sector" (aria-current="true"): hetzelfde accent als de huidige pagina */
.dd .dd-menu ul.dd-card a[aria-current="true"]{background:rgba(43,64,245,.1)}
.menu-panel .mp-sub a[aria-current="true"]{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1.5px}

/* "AI-enabled werken" in twee groepen met een kopje (akkoord Luciano, 10 nov 2026) */
.dd .dd-menu ul.dd-card.dd-cols{display:grid;grid-template-columns:auto auto;column-gap:6px}
.dd .dd-menu ul.dd-card.dd-cols > li.dd-col + li.dd-col{border-left:1px solid rgba(43,64,245,.12);padding-left:6px}
.dd .dd-menu ul.dd-card.dd-cols ul{display:block;list-style:none;margin:0;padding:0}
.dd .dd-menu ul.dd-card.dd-cols ul li{display:block;margin:0}
.dd .dd-menu .dd-h{display:block;white-space:nowrap;padding:10px 14px 6px;font-size:12.5px;font-weight:600;line-height:1.2;letter-spacing:.06em;text-transform:uppercase;color:#5563EC}
.menu-panel .mp-sub .mp-h,.sh-panel .mp-sub .mp-h{display:block;padding:12px 0 2px;font-size:12px;font-weight:600;line-height:1.2;letter-spacing:.06em;text-transform:uppercase;color:#D2D7FF}
.menu-panel .mp-sub .mp-grp:first-child .mp-h,.sh-panel .mp-sub .mp-grp:first-child .mp-h{padding-top:6px}
.site-head.is-light .menu-panel .mp-sub .mp-h,.sh-panel .mp-sub .mp-h{color:#5563EC}

/* tikvlakken minstens 44 px hoog op telefoon (final check 10 nov). De extra hoogte zit in padding met een even grote negatieve marge,
   dus de opmaak van het menu verschuift niet. Submenuregels van 40 naar 44 px. */
.menu-panel .mp-lang a,.sh-panel .mp-lang a{padding:15px 8px;margin:-5px -2px}
.menu-panel .mp-agent,.sh-panel .mp-agent{padding:15px 0;top:3px}
.menu-panel .mp-sub a,.sh-panel .mp-sub a{padding:10px 0;line-height:1.5}
