/* Menu van vanessenonline.com: één kop voor alle publieke pagina's.
   Opmaak staat los van de paginastijlen (eigen vo-klassen en vaste kleuren), zodat elke pagina er hetzelfde uitziet.
   Markup komt uit functions/_lib/menu.js (node tools/menu.mjs). */
@font-face{font-family:"Norwester";src:url(/fonts/norwester.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url(/fonts/barlow-condensed-500.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Barlow";src:url(/fonts/barlow-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Barlow";src:url(/fonts/barlow-500.woff2) format("woff2");font-weight:500;font-display:swap}

.vo-kop,.vo-mnav{
  --vo-nacht:#121109; --vo-lijn:#2D2B23; --vo-tekst:#F1EFE4; --vo-zacht:#B9B6A8; --vo-stil:#8C897B; --vo-geel:#FBFF4A; --vo-op-geel:#17160F;
  --vo-max:1180px; --vo-gutter:clamp(16px,4vw,48px); --vo-h:68px;
  --vo-body:"Barlow",system-ui,-apple-system,"Segoe UI",sans-serif;
  --vo-cond:"Barlow Condensed","Arial Narrow",sans-serif;
  --vo-titel:"Norwester","Barlow Condensed","Arial Narrow",sans-serif;
}
html{scroll-padding-top:calc(68px + env(safe-area-inset-top,0px) + 12px)}
html:has(.vo-kop.met-sub){scroll-padding-top:calc(112px + env(safe-area-inset-top,0px) + 12px)}

.vo-kop{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;margin:0;background:color-mix(in srgb,#121109 95%,transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:1px solid var(--vo-lijn);color:var(--vo-tekst);font:400 1rem/1.4 var(--vo-body)}
.vo-kop .vo-rij{box-sizing:border-box;max-width:var(--vo-max);margin-inline:auto;padding-inline:var(--vo-gutter);display:flex;align-items:center;gap:24px;min-height:var(--vo-h)}
.vo-kop a{color:inherit}
.vo-kop :focus-visible,.vo-mnav :focus-visible{outline:3px solid var(--vo-geel);outline-offset:3px;border-radius:2px}

.vo-logo{display:block;flex:none;line-height:0}
.vo-logo img{display:block;height:26px;width:auto}

/* Hoofdmenu */
.vo-kop nav.vo-hoofd{display:flex;align-items:center;gap:22px;margin:0 0 0 auto;padding:0}
.vo-kop .vo-hoofd a{position:relative;display:inline-flex;align-items:center;min-height:var(--vo-h);text-decoration:none;font:400 .95rem/1 var(--vo-body);color:var(--vo-zacht);box-shadow:none;white-space:nowrap;transition:color .15s}
.vo-kop .vo-hoofd a:hover{color:#fff}
.vo-kop .vo-hoofd a[aria-current]{color:#fff}
.vo-kop .vo-hoofd a[aria-current]::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--vo-geel)}
.vo-kop .vo-hoofd a:focus-visible{outline-offset:-3px}

/* Knop rechts */
.vo-cta{display:inline-flex;align-items:center;justify-content:center;gap:.5em;flex:none;font:500 .95rem/1 var(--vo-body);text-decoration:none;padding:.85em 1.15em;border:1.5px solid var(--vo-geel);background:var(--vo-geel);color:var(--vo-op-geel)!important;border-radius:3px;white-space:nowrap;transition:background .15s,border-color .15s}
.vo-cta:hover{background:#fff;border-color:#fff}
.vo-cta .kort{display:none}

/* Submenu: tweede rij, alleen bij een onderdeel met meerdere pagina's */
.vo-kop nav.vo-sub{display:block;margin:0;padding:0;border-top:1px solid var(--vo-lijn)}
.vo-kop .vo-sub .vo-rij{justify-content:flex-start;gap:0 30px;min-height:44px;overflow-x:auto;scrollbar-width:none;white-space:nowrap}
.vo-kop .vo-sub .vo-rij::-webkit-scrollbar{display:none}
.vo-sub-naam{font:400 .78rem/1 var(--vo-titel);letter-spacing:.08em;text-transform:uppercase;color:var(--vo-geel);box-sizing:border-box;min-width:96px;padding-right:22px;border-right:1px solid var(--vo-lijn);align-self:stretch;display:flex;align-items:center;flex:none}
.vo-kop .vo-sub a{position:relative;display:inline-flex;align-items:center;min-height:44px;flex:none;text-decoration:none;font:500 1rem/1 var(--vo-cond);letter-spacing:.01em;color:#A5A293;box-shadow:none;transition:color .15s}
.vo-kop .vo-sub a:hover{color:#fff}
.vo-kop .vo-sub a[aria-current]{color:var(--vo-tekst)}
.vo-kop .vo-sub a[aria-current]::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--vo-geel)}
.vo-kop .vo-sub a:focus-visible{outline-offset:-3px}

/* Menuknop (mobiel) */
.vo-menuknop{display:none;align-items:center;justify-content:center;gap:8px;min-width:44px;height:44px;padding:0 12px;margin:0;background:transparent;color:var(--vo-tekst);border:1.5px solid #5A5849;border-radius:3px;font:500 .9rem/1 var(--vo-cond);letter-spacing:.08em;text-transform:uppercase;cursor:pointer;flex:none}
.vo-menuknop:hover,.vo-menuknop[aria-expanded="true"]{border-color:var(--vo-geel);color:var(--vo-geel)}
.vo-menuknop .streep{position:relative;width:18px;height:12px}
.vo-menuknop .streep i{position:absolute;left:0;right:0;height:2px;background:currentColor;transition:transform .25s,opacity .2s,top .25s}
.vo-menuknop .streep i:nth-child(1){top:0}.vo-menuknop .streep i:nth-child(2){top:5px}.vo-menuknop .streep i:nth-child(3){top:10px}
.vo-menuknop[aria-expanded="true"] .streep i:nth-child(1){top:5px;transform:rotate(45deg)}
.vo-menuknop[aria-expanded="true"] .streep i:nth-child(2){opacity:0}
.vo-menuknop[aria-expanded="true"] .streep i:nth-child(3){top:5px;transform:rotate(-45deg)}
.vo-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Mobiel menu: paneel over het scherm onder de kop */
.vo-mnav{position:fixed;inset:calc(var(--vo-h) + env(safe-area-inset-top,0px)) 0 0 0;z-index:49;box-sizing:border-box;background:var(--vo-nacht);color:var(--vo-tekst);overflow-y:auto;overscroll-behavior:contain;padding:8px var(--vo-gutter) calc(28px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .2s,transform .25s,visibility 0s .25s;font:400 1rem/1.4 var(--vo-body)}
.vo-mnav.open{opacity:1;visibility:visible;transform:none;transition:opacity .2s,transform .25s}
.vo-mnav nav{display:block;margin:0}
.vo-mnav ol{list-style:none;margin:0;padding:0;counter-reset:vo}
.vo-mnav ol>li{border-bottom:1px solid var(--vo-lijn)}
.vo-mnav ol>li>a{display:flex;align-items:baseline;gap:14px;padding:16px 0;text-decoration:none;font:400 clamp(1.7rem,7.5vw,2.3rem)/1 var(--vo-titel);letter-spacing:.01em;text-transform:uppercase;color:var(--vo-tekst)}
.vo-mnav ol>li>a::before{counter-increment:vo;content:"0" counter(vo);font:500 .8rem/1 var(--vo-cond);letter-spacing:.1em;color:var(--vo-stil);min-width:22px}
.vo-mnav ol>li>a::after{content:"→";margin-left:auto;font:400 1.3rem/1 var(--vo-body);color:#5A5849;transition:transform .2s,color .2s}
.vo-mnav ol>li>a:hover::after,.vo-mnav a[aria-current]::after{color:var(--vo-geel)}
.vo-mnav a[aria-current]{color:var(--vo-geel)!important}
.vo-mnav ul{list-style:none;margin:-6px 0 0;padding:0 0 14px 36px;display:grid;gap:2px}
.vo-mnav ul a{display:flex;align-items:center;min-height:40px;text-decoration:none;font:500 1.1rem/1 var(--vo-cond);color:var(--vo-zacht)}
.vo-mnav ul a:hover{color:#fff}
.vo-mcta{margin-top:auto;padding-top:28px;display:grid;gap:14px}
.vo-mcta .vo-cta{padding:1.05em 1.2em;font-size:1rem}
.vo-mmeta{display:flex;flex-wrap:wrap;gap:6px 20px;font-size:.95rem;color:var(--vo-zacht)}
.vo-mmeta a{color:inherit;text-underline-offset:3px}
body.vo-menu-open{overflow:hidden}
body.vo-menu-open .vo-kop nav.vo-sub{display:none}

/* Breedtes: eerst korter knoplabel, dan menuknop */
@media (max-width:1220px){.vo-kop .vo-rij{gap:20px}.vo-kop nav.vo-hoofd{gap:18px}.vo-cta .lang{display:none}.vo-cta .kort{display:inline}}
@media (max-width:1060px){
  .vo-js .vo-kop nav.vo-hoofd{display:none}
  .vo-js .vo-menuknop{display:inline-flex}
  .vo-kop .vo-rij{gap:12px}
  .vo-kop .vo-rij>.vo-cta{margin-left:auto}
  /* Zonder JavaScript: menu als scrollbare rij onder het logo */
  html:not(.vo-js) .vo-kop>.vo-rij{flex-wrap:wrap;padding-block:10px 0}
  html:not(.vo-js) .vo-kop nav.vo-hoofd{order:3;width:100%;margin:0;overflow-x:auto}
}
@media (min-width:1061px){.vo-mnav{display:none}}
@media (max-width:420px){
  .vo-logo img{height:20px}
  .vo-kop .vo-rij>.vo-cta{padding:.7em .8em;font-size:.85rem}
  .vo-kop .vo-rij>.vo-cta span[aria-hidden]{display:none}
  .vo-menuknop .lbl{display:none}
  .vo-kop .vo-sub .vo-rij{gap:0 20px}
  .vo-sub-naam{min-width:0;padding-right:14px}
  .vo-kop .vo-sub a{font-size:.95rem}
}
@media (prefers-reduced-motion:reduce){.vo-kop *,.vo-mnav,.vo-mnav *{transition:none!important}}
@media print{.vo-kop,.vo-mnav{display:none!important}}