/* v42: submenu onder "Ons werk". Mobiel menu: subitems altijd zichtbaar. Vanaf 1024px: uitklappen bij hover, focus of tik op het pijltje. */
.ok-nav-werk{display:flex;flex-wrap:wrap;align-items:center;gap:0 2px}
.ok-nav-werk-knop{display:none;background:transparent;border:0;padding:6px;margin:0;color:inherit;cursor:pointer;line-height:0;min-width:36px;min-height:36px;align-items:center;justify-content:center}
.ok-nav-werk-knop svg{width:20px;height:20px;transition:transform .2s}
.ok-nav-werk-menu{list-style:none;margin:2px 0 0;padding:0 0 0 14px;width:100%;border-left:2px solid #e3bf73}
.ok-nav-werk-menu a{display:block;padding:7px 0;font-size:15px;color:#000;text-decoration:none}
@media (min-width:1024px){
  .ok-nav-werk{position:relative;flex-wrap:nowrap}
  .ok-nav-werk-knop{display:inline-flex;color:#fff}
  .ok-nav-werk-menu{position:absolute;right:0;top:100%;width:250px;margin:0;padding:8px 0;border:0;background:#fff;border-radius:8px;box-shadow:0 20px 40px -10px rgba(0,0,0,.35);
    opacity:0;visibility:hidden;transform:translateY(16px);transition:opacity .25s,transform .25s,visibility .25s;z-index:60}
  .ok-nav-werk:hover .ok-nav-werk-menu,.ok-nav-werk:focus-within .ok-nav-werk-menu,.ok-nav-werk.open .ok-nav-werk-menu{opacity:1;visibility:visible;transform:translateY(4px)}
  .ok-nav-werk.open .ok-nav-werk-knop svg,.ok-nav-werk:hover .ok-nav-werk-knop svg{transform:rotate(180deg)}
  .ok-nav-werk-menu a{padding:8px 16px;font-size:19px}
  .ok-nav-werk-menu a:hover,.ok-nav-werk-menu a:focus-visible{background:#f5f5f5}
}
@media (prefers-reduced-motion:reduce){.ok-nav-werk-menu,.ok-nav-werk-knop svg{transition:none}}
/* Het verborgen mobiele menu (right:-999px) maakte de pagina breder dan het scherm, waardoor telefoons uitzoomden. */
@media (max-width:1023px){#navbar:not(.active) nav{display:none}}

/* v46: mobiel menu opnieuw opgebouwd. De blur op de header maakte het vaste menupaneel maar 72px hoog,
   waardoor de items doorzichtig over de pagina vielen. Nu: volledig paneel, Diensten en Ons werk klappen uit. */
@media (max-width:1023px){
  #navbar.active>div{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
  #navbar.active nav{position:fixed!important;top:0!important;bottom:0!important;right:0!important;left:auto!important;width:min(340px,88vw)!important;height:100vh!important;height:100dvh!important;
    overflow-y:auto;overscroll-behavior:contain;background:#123c35!important;padding:76px 22px 32px!important;box-shadow:-24px 0 60px rgba(0,0,0,.35)}
  #navbar nav>button.close{left:auto!important;right:18px!important;top:18px!important;width:42px!important;height:42px!important;border-radius:50%;background:rgba(255,255,255,.1)!important;border:1px solid rgba(255,255,255,.18)}
  #navbar nav>button.close svg path{fill:#fff!important}
  #navbar nav>ul{gap:0!important;padding-top:0!important}
  #navbar nav>ul>li{border-bottom:1px solid rgba(255,255,255,.12);padding:4px 0}
  #navbar nav>ul>li>a{color:#fff!important;font-size:19px!important;padding:12px 0!important;display:flex!important;align-items:center;width:100%}
  /* Diensten */
  #navbar nav li.group\/nav>div{display:none!important;position:static!important;visibility:visible!important;opacity:1!important;height:auto!important;transform:none!important;box-shadow:none!important;background:transparent!important}
  #navbar nav li.group\/nav.ok-open>div{display:block!important}
  #navbar nav li.group\/nav>a svg{margin-left:auto;transition:transform .2s}
  #navbar nav li.group\/nav.ok-open>a svg{transform:rotate(180deg)}
  #navbar nav li.group\/nav>div>ul,.ok-nav-werk-menu{background:transparent!important;border-radius:0!important;margin:0 0 10px!important;padding:2px 0 2px 14px!important;border-left:2px solid #e3bf73!important}
  #navbar nav li.group\/nav>div>ul a,.ok-nav-werk-menu a{color:#d8e4df!important;font-size:16px!important;padding:9px 0!important;background:transparent!important;display:block}
  #navbar nav li.group\/nav>div>ul a:hover,.ok-nav-werk-menu a:hover{color:#fff!important}
  /* Ons werk */
  .ok-nav-werk{flex-wrap:wrap}
  .ok-nav-werk>a{width:auto!important;flex:1}
  .ok-nav-werk-knop{display:inline-flex!important;color:#fff;min-width:44px;min-height:44px;justify-content:flex-end!important;padding:6px 2px 6px 6px!important}
  .ok-nav-werk-menu{display:none}
  .ok-nav-werk.open .ok-nav-werk-menu{display:block}
  .ok-nav-werk.open .ok-nav-werk-knop svg{transform:rotate(180deg)}
  html.ok-menu-open,html.ok-menu-open body{overflow:hidden}
}

/* v51: mobiel menu ook halverwege de pagina. Twee oorzaken: (1) body.overflow-hidden maakte de body een eigen
   scrollcontainer, waardoor de plakkende header naar de top van de pagina sprong; (2) de blur uit retouch-v34
   (#navbar>div:first-child) maakte het vaste menupaneel relatief aan die header. Beide uitgezet zolang het menu open is. */
@media (max-width:1023px){
  html.ok-menu-open body{overflow:visible!important}
  html #navbar.active>div:first-child{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
}

/* v51: socials in de footer met pictogram */
.ok23-socials a{display:inline-flex;align-items:center;gap:8px}
.ok23-socials svg{width:18px;height:18px;flex:none}