/* v75: v62 (knoppen, schermformaten, kopbalk) + Diensten-uitklapmenu zonder witte hoekjes. */

/* Knoppengroepen: altijd ruimte ertussen, nooit scheef onder elkaar */
.okv-extra p:has(> .okv-cta){display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.okv-extra .okv-cta,.okv-extra .okv-cta.outline{margin:0!important;display:inline-flex;align-items:center;justify-content:center;text-align:center;line-height:1.35}
.ok-hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:24px}
@media (max-width:520px){
  .okv-extra p:has(> .okv-cta) > .okv-cta,.ok-hero-actions > a{flex:1 1 100%}
}

/* Menuknop op telefoon/tablet: groter aanraakvlak (44 px), zelfde plek */
#burger-menu-button{width:44px;height:44px;margin:-10px -10px -10px 0}

/* Ultrabrede schermen (3440×1440 curved, 5120×1440, 4K op 100 %): alles iets groter,
   zodat tekst en knoppen niet verloren gaan in een smalle kolom. Gewone schermen ongewijzigd. */
@media (min-width:3200px) and (min-height:1350px){html{zoom:1.35}}
@media (min-width:3600px) and (min-height:2000px){html{zoom:1.6}}

/* Kopbalk flikkerde bij een klein beetje scrollen (desktop): na 8 px scrollen werd hij 10 px lager,
   de browser schoof de pagina daardoor terug onder de 8 px, waarna hij weer groeide — een lus.
   Nu blijft de hoogte gelijk; alleen schaduw en randje verschijnen na het scrollen. */
@media (min-width:1024px){html.okr-scrolled body #navbar>div:first-child{padding-top:16px!important;padding-bottom:16px!important}}
#navbar{overflow-anchor:none}

/* v75: Diensten-uitklapmenu (desktop) had witte hoekjes. De buitenste laag was wit met 8 px ronding,
   de groene lijst erin 12 px — de witte hoeken staken erachter uit en de schaduw zat op een strook van 40 px.
   Nu: buitenste laag doorzichtig, schaduw op de groene lijst (zelfde als het menu "Ons werk"). */
@media (min-width:1024px){
  #navbar nav li.group\/nav>div{background:transparent!important;box-shadow:none!important;border-radius:12px!important}
  #navbar nav li.group\/nav>div>ul{box-shadow:0 20px 40px -10px rgba(0,0,0,.35)}
  /* Beide menu's openen iets lager, zodat het gouden streepje onder "Diensten"/"Ons werk" zichtbaar blijft.
     De tussenruimte telt mee als menu (padding resp. onzichtbare brug), zodat het niet dichtklapt. */
  #navbar nav li.group\/nav>div{padding-top:12px}
  .ok-nav-werk-menu{margin-top:8px!important}
  .ok-nav-werk-menu::before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px}
}