/* ============================================================
   MENUBALK: vast tegen de bovenkant, over de volle breedte.
   Zelfde principe als de Kyokushin-site: een paar woorden in de
   balk, en daaronder een strook over de hele breedte die
   openrolt zodra je over een woord gaat. Wat erachter ligt gaat
   in een waas, zodat je oog bij het menu blijft.
   De inhoud van de stroken staat in menu-strook.js.
   Terugdraaien: haal de link naar dit bestand en het script
   menu-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:68px;border-radius:0;gap:1.2rem;
  padding:0 max(5%,calc((100% - 1200px) / 2));
  box-shadow:none;transition:box-shadow var(--t-mid) var(--ease)}
.nav-shell.shrink .nav{box-shadow:0 18px 40px -30px rgba(0,0,0,.55)}
.nav-shell .nav::before{
  border:0;border-radius:0;border-bottom:1px solid var(--line);
  background:var(--nav-bg);background-size:auto;
  -webkit-backdrop-filter:saturate(160%) blur(22px);backdrop-filter:saturate(160%) blur(22px)}
.nav-shell .nav:hover::before{background-position:0 0}
/* een dunne koperen 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%,var(--koper-lijn) 30%,var(--accent) 50%,var(--koper-lijn) 70%,transparent 96%);
  opacity:.55}

@media (min-width:901px){
  .nav-shell .nav .nav-links{gap:.15rem}
  .nav-shell .nav .nav-links > li > a:not(.nav-cta):not(.nav-inlog){border-radius:8px;padding:.62rem .85rem}
  .nav-shell .nav .nav-links > li > a[data-strook]{display:inline-flex;align-items:center;gap:.4rem}
  .nav-shell .nav .nav-links > li > a[data-strook]::before{
    content:"";order:2;width:.36rem;height:.36rem;margin-top:-.18rem;
    border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
    transform:rotate(45deg);opacity:.55;transition:transform var(--t-snel) var(--ease),opacity var(--t-snel)}
  .nav-shell .nav .nav-links > li > a[data-strook].aan{
    background-color:var(--koper-vlak);color:var(--text-1);
    box-shadow:inset 0 1px 0 var(--nav-knop-glans),inset 0 0 0 1px var(--koper-lijn)}
  .nav-shell .nav .nav-links > li > a[data-strook].aan::before{transform:rotate(225deg);margin-top:.2rem;opacity:.9}
}

/* ---------- de strook ---------- */
.ms-paneel{
  position:absolute;top:100%;left:0;right:0;z-index:1000;overflow:hidden;
  background:var(--menu-vlak);border-bottom:1px solid var(--line);
  box-shadow:0 30px 60px -36px rgba(0,0,0,.65);
  clip-path:inset(0 0 100% 0);opacity:0;pointer-events:none;
  transition:clip-path .44s var(--ease),opacity .2s linear}
.ms-paneel[hidden]{display:none}
html.ms-uit .ms-paneel{clip-path:inset(0 0 0 0);opacity:1;pointer-events:auto}

/* het licht in de strook: koper links, blauw rechts, zacht en stil */
.ms-licht{position:absolute;inset:-40% -4% -30%;z-index:0;pointer-events:none;filter:blur(16px);
  background:
    radial-gradient(46% 90% at 6% 30%,var(--koper-gloed) 0%,transparent 70%),
    radial-gradient(50% 96% at 96% 70%,rgba(127,176,214,.16) 0%,transparent 70%)}
[data-theme="light"] .ms-licht{opacity:.55}

.ms-in{position:relative;z-index:1;width:min(1200px,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}
.ms-kop{font-size:.6rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--text-3);
  margin-bottom:1.1rem}
.ms-groot,.ms-klein{list-style:none;margin:0;padding:0}
.ms-groot{display:grid;gap:.55rem}
.ms-groot a{display:inline-flex;align-items:baseline;gap:.7rem;text-decoration:none;color:var(--text-1);
  font-family:'Inter',sans-serif;font-weight:600;font-size:clamp(1.3rem,1.9vw,1.6rem);
  line-height:1.25;letter-spacing:-.02em;transition:color .16s}
.ms-groot a small{font-family:'Inter',sans-serif;font-size:.72rem;font-weight:300;letter-spacing:0;color:var(--text-3)}
.ms-groot a:hover,.ms-groot a:focus-visible{color:var(--accent);outline:none}
.ms-klein{display:grid;gap:.7rem}
.ms-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}
.ms-klein a:hover,.ms-klein a:focus-visible{color:var(--text-1);outline:none}
.ms-klein a span{color:var(--accent);font-size:.75rem}

/* rechts een kaart met de belangrijkste actie van dit onderdeel */
.ms-kaart{display:block;padding:1.3rem 1.35rem 1.4rem;border-radius:16px;text-decoration:none;
  background:linear-gradient(150deg,var(--koper-vlak),transparent 80%),var(--vlak-zacht);
  border:1px solid var(--koper-lijn);transition:transform .25s var(--ease),border-color .25s}
.ms-kaart:hover,.ms-kaart:focus-visible{transform:translateY(-2px);border-color:var(--accent);outline:none}
.ms-kaart b{display:block;font-family:'Inter',sans-serif;font-weight:600;font-size:1.12rem;letter-spacing:-.01em;
  line-height:1.2;color:var(--text-1)}
.ms-kaart p{margin:.5rem 0 1rem;font-size:.84rem;font-weight:300;line-height:1.55;color:var(--text-2)}
.ms-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 ---------- */
.ms-waas{position:fixed;inset:0;z-index:999;opacity:0;pointer-events:none;
  background:rgba(6,14,24,.32);
  -webkit-backdrop-filter:blur(14px) saturate(1.1);backdrop-filter:blur(14px) saturate(1.1);
  transition:opacity .34s var(--ease)}
[data-theme="light"] .ms-waas{background:rgba(240,236,228,.35)}
.ms-waas[hidden]{display:none}
html.ms-uit .ms-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:60px;padding:0 5%}
  .ms-paneel,.ms-waas{display:none!important}
}
@media (max-width:1100px) and (min-width:901px){
  .ms-in{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}
  .ms-kaart{display:none}
}
@media (prefers-reduced-motion:reduce){
  .ms-paneel,.ms-waas{transition:opacity .01s linear}
  .ms-paneel,html.ms-uit .ms-paneel{clip-path:none}
}
@media print{.ms-paneel,.ms-waas{display:none!important}}