/* Uitklapmenu in de kopbalk */
.heeft-sub{position:relative}
.sub-knop{display:flex;align-items:center;gap:5px;padding:10px 14px;border:0;border-radius:999px;background:none;color:#233f50;font:inherit;font-weight:500;font-size:.86rem;cursor:pointer}
.sub-knop svg{width:13px;height:13px;transition:transform .15s}
.sub-knop:hover{background:#f0f8fc}
.heeft-sub:has([aria-current="page"])>.sub-knop{color:#377c9d}
.submenu{position:absolute;top:100%;left:0;min-width:230px;margin:0;padding:8px;list-style:none;background:#fff;border:1px solid #d9e9f1;border-radius:14px;box-shadow:0 18px 40px -18px rgba(23,50,70,.35);opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity .15s,transform .15s,visibility .15s}
.heeft-sub::after{content:"";position:absolute;left:0;right:0;top:100%;height:10px}
.submenu{margin-top:6px}
.menu .submenu a{display:block;padding:10px 12px;border-radius:9px;white-space:nowrap;border:0}
.menu .submenu a:hover{background:#f0f8fc}
.heeft-sub.open>.submenu{opacity:1;visibility:visible;transform:none}
.heeft-sub.open>.sub-knop svg{transform:rotate(180deg)}
@media(hover:hover) and (min-width:861px){
  .heeft-sub:hover>.submenu{opacity:1;visibility:visible;transform:none}
  .heeft-sub:hover>.sub-knop svg{transform:rotate(180deg)}
  .heeft-sub:not(.open):not(:hover)>.submenu{transition:none}
}
@media(max-width:860px){
  .site-header .wrap.nav>nav{position:absolute;width:0;height:0}
  .heeft-sub{position:static}
  .heeft-sub::after{display:none}
  .sub-knop{width:100%;min-height:50px;justify-content:space-between;padding:14px 6px;border-bottom:1px solid #d9e9f1;border-radius:0;font-size:1rem}
  .sub-knop:hover{background:none}
  .sub-knop svg{width:18px;height:18px;transition:transform .22s ease}
  .submenu{position:static;min-width:0;max-height:0;margin:0;padding:0;overflow:hidden;background:#f6fafc;border:0;border-radius:0;box-shadow:none;opacity:1;visibility:hidden;transform:none;transition:max-height .24s ease,visibility .24s}
  .heeft-sub.open>.submenu{max-height:360px}
  .menu .submenu a{padding:13px 6px 13px 18px;border-radius:0;white-space:normal;font-size:.95rem}
  .menu .submenu li:last-child a{border-bottom:1px solid #d9e9f1}
}
@media(max-width:860px) and (prefers-reduced-motion:reduce){.submenu,.sub-knop svg{transition:none}}
