/* ============================================================
   MENUBALK: vast tegen de bovenkant, over de volle breedte.
   Zelfde principe als op ekkebusvisuals.nl: ga je over een
   menuwoord, dan rolt eronder een strook open over de hele
   breedte en vervaagt de pagina erachter. In Yoshua's eigen
   donkerrood, met Instrument Serif voor de grote links.
   De inhoud van de stroken staat in yv-strook.js.
   Terugdraaien: haal de link naar dit bestand en het script
   yv-strook.js weg uit de pagina's.
   ============================================================ */

/* ---------- de balk ---------- */
.nav-shell,.nav-shell.shrink{padding:0}
.nav-shell .nav{
  width:100%;max-width:none;height:70px;border-radius:0;border:0;gap:1.2rem;
  padding:0 max(5%,calc((100% - 1180px) / 2));
  box-shadow:none;transition:box-shadow .4s var(--ease)}
.nav-shell.shrink .nav{box-shadow:0 18px 40px -30px rgba(var(--shadow-rgb),.8)}
.nav-shell .nav::before{border-radius:0;border-bottom:1px solid var(--line)}
/* een dunne rode glans langs de onderrand, de enige versiering */
.nav-shell .nav::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;z-index:0;pointer-events:none;
  background:linear-gradient(90deg,transparent 4%,rgba(177,18,38,.45) 30%,var(--red-bright) 50%,rgba(177,18,38,.45) 70%,transparent 96%);
  opacity:.55}

@media (min-width:901px){
  /* het kleine lijstje onder Diensten maakt plaats voor de strook */
  .nav-drop-wrap:not(.nav-boek-wrap) .nav-drop{display:none!important}
  .nav-shell .nav .nav-links > li > [data-strook]{border-radius:8px}
  .nav-shell .nav .nav-links > li > a[data-strook]{gap:.4rem}
  .nav-shell .nav .nav-links > li > a[data-strook]::before{
    content:"";order:2;width:.32rem;height:.32rem;margin-top:-.16rem;
    border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
    transform:rotate(45deg);opacity:.55;transition:transform .2s var(--ease),opacity .2s}
  .nav-shell .nav .nav-links > li > [data-strook].aan{color:var(--text-1);background:rgba(var(--tint),.07)}
  .nav-shell .nav .nav-links > li > [data-strook].aan::after{transform:scaleX(1)}
  .nav-shell .nav .nav-links > li > a[data-strook].aan::before{transform:rotate(225deg);margin-top:.2rem;opacity:.9}
  .nav-shell .nav .nav-links > li > button[data-strook].aan svg{transform:rotate(180deg)}
}

/* ---------- de strook ---------- */
.ys-paneel{
  position:absolute;top:100%;left:0;right:0;z-index:1000;overflow:hidden;
  background:linear-gradient(165deg,rgba(24,9,13,.97),rgba(10,5,7,.99));
  border-bottom:1px solid var(--line);
  box-shadow:0 30px 60px -36px rgba(var(--shadow-rgb),.9);
  clip-path:inset(0 0 100% 0);opacity:0;pointer-events:none;
  transition:clip-path .44s var(--ease),opacity .2s linear}
:root[data-theme="light"] .ys-paneel{background:linear-gradient(165deg,rgba(255,255,255,.97),rgba(249,244,244,.99))}
.ys-paneel[hidden]{display:none}
html.ys-uit .ys-paneel{clip-path:inset(0 0 0 0);opacity:1;pointer-events:auto}

/* het licht in de strook: rood links, zacht en stil */
.ys-licht{position:absolute;inset:-40% -4% -30%;z-index:0;pointer-events:none;filter:blur(16px);
  background:
    radial-gradient(46% 90% at 6% 30%,rgba(177,18,38,.32) 0%,transparent 70%),
    radial-gradient(50% 96% at 96% 70%,rgba(255,107,125,.10) 0%,transparent 70%)}
:root[data-theme="light"] .ys-licht{opacity:.45}

.ys-in{position:relative;z-index:1;width:min(1180px,90%);margin-inline:auto;
  display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) minmax(0,.9fr);
  gap:clamp(28px,4.5vw,72px);padding:clamp(30px,3.2vw,44px) 0 clamp(36px,4vw,52px);align-items:start}
.ys-kop{font-size:.6rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--text-3);
  margin-bottom:1.1rem}
.ys-groot,.ys-klein{list-style:none;margin:0;padding:0}
.ys-groot{display:grid;gap:.45rem}
.ys-groot a{display:inline-flex;align-items:baseline;gap:.7rem;text-decoration:none;color:var(--text-1);
  font-family:'Instrument Serif',Georgia,serif;font-weight:400;font-size:clamp(1.7rem,2.5vw,2.2rem);
  line-height:1.15;letter-spacing:.005em;transition:color .16s}
.ys-groot a i{font-family:inherit;font-style:normal;font-size:.62rem;font-weight:800;letter-spacing:.1em;
  color:var(--accent);font-family:'Inter',system-ui,sans-serif;transform:translateY(-.55em)}
.ys-groot a:hover,.ys-groot a:focus-visible{color:var(--accent);outline:none}
.ys-klein{display:grid;gap:.7rem}
.ys-klein a{display:inline-flex;align-items:center;gap:.45rem;font-size:.86rem;font-weight:500;
  color:var(--text-2);text-decoration:none;transition:color .16s}
.ys-klein a:hover,.ys-klein a:focus-visible{color:var(--text-1);outline:none}
.ys-klein a span{color:var(--accent);font-size:.75rem}

/* rechts een kaart met de belangrijkste actie van dit onderdeel */
.ys-kaart{display:block;padding:1.3rem 1.35rem 1.4rem;border-radius:16px;text-decoration:none;
  background:linear-gradient(150deg,rgba(177,18,38,.16),transparent 80%),rgba(var(--tint),.04);
  border:1px solid rgba(225,29,53,.28);transition:transform .25s var(--ease),border-color .25s}
.ys-kaart:hover,.ys-kaart:focus-visible{transform:translateY(-2px);border-color:var(--red-bright);outline:none}
.ys-kaart b{display:block;font-family:'Instrument Serif',Georgia,serif;font-weight:400;font-size:1.55rem;
  line-height:1.15;color:var(--text-1)}
.ys-kaart p{margin:.5rem 0 1rem;font-size:.84rem;font-weight:300;line-height:1.55;color:var(--text-2)}
.ys-kaart i{font-style:normal;font-size:.62rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent)}

/* ---------- het waas achter de strook ---------- */
.ys-waas{position:fixed;inset:0;z-index:999;opacity:0;pointer-events:none;
  background:rgba(8,4,5,.34);
  -webkit-backdrop-filter:blur(14px) saturate(1.1);backdrop-filter:blur(14px) saturate(1.1);
  transition:opacity .34s var(--ease)}
:root[data-theme="light"] .ys-waas{background:rgba(250,245,245,.35)}
.ys-waas[hidden]{display:none}
html.ys-uit .ys-waas{opacity:1;pointer-events:auto}

/* ---------- smal scherm: de balk blijft vol, het menu blijft het volle scherm ---------- */
@media (max-width:900px){
  .nav-shell .nav{height:62px;padding:0 5%}
  .ys-paneel,.ys-waas{display:none!important}
}
@media (max-width:1100px) and (min-width:901px){
  .ys-in{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}
  .ys-kaart{display:none}
}
@media (prefers-reduced-motion:reduce){
  .ys-paneel,.ys-waas{transition:opacity .01s linear}
  .ys-paneel,html.ys-uit .ys-paneel{clip-path:none}
}
@media print{.ys-paneel,.ys-waas{display:none!important}}