/* kaas-menu.css — stijl van het inplugbare hoofdmenu (kaas-menu.js). Zelfde ziel als het
   vitrine-menu (kelder-fond, opkomst per regel, goud-hover) maar mét transparantie: de
   pagina schemert erdoorheen (Soffia, 02-09: "meer pro, beetje transparantie, leven"). */
.sm-menu{position:fixed;inset:0;z-index:90;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:clamp(20px,4vh,40px);padding:max(64px,8vh) 6vw 30px;overflow-y:auto;scrollbar-width:none;
  background:rgba(13,12,10,.72);backdrop-filter:blur(10px) saturate(1.15);-webkit-backdrop-filter:blur(10px) saturate(1.15);
  opacity:0;visibility:hidden;transition:opacity .4s ease,visibility .4s}
.sm-menu::-webkit-scrollbar{display:none}
/* de generieke open-knop: elke pagina kan [data-menu-open] + .sm-knop gebruiken —
   hij erft de typografie van zijn plek en brengt enkel de hamburger-lijntjes mee */
.sm-knop{display:inline-flex;align-items:center;gap:9px;background:none;border:0;cursor:pointer;
  color:inherit;font:inherit;letter-spacing:inherit;text-transform:inherit;padding:0}
.sm-knop .sm-lijnen{display:flex;flex-direction:column;gap:4px}
.sm-knop .sm-lijnen i{display:block;width:17px;height:2px;background:currentColor;border-radius:2px}
.sm-menu.open{opacity:1;visibility:visible}
/* het kelder-fond: zacht zichtbaar, met een trage adem-zoom zoals op de vitrine */
.sm-fond{position:absolute;inset:0;pointer-events:none;background:url("beeld/sfeer-kelder.jpg") center/cover no-repeat;
  opacity:0;transform:scale(1.06);transition:opacity 1s ease,transform 6s ease}
.sm-menu.open .sm-fond{opacity:.18;transform:scale(1)}
.sm-fond::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 45%,rgba(13,12,10,.15) 0%,rgba(13,12,10,.7) 62%,rgba(13,12,10,.92) 100%)}
.sm-dicht{position:fixed;top:16px;right:20px;width:44px;height:44px;border-radius:50%;border:0;z-index:2;
  background:none;color:#f7f3ea;font-size:27px;line-height:1;cursor:pointer;transition:background .25s,color .25s}
.sm-dicht:hover{background:rgba(255,255,255,.07);color:#c9a227}
.sm-kolommen{position:relative;display:flex;gap:min(9vw,110px);flex-wrap:wrap;justify-content:center}
.sm-kicker{font-size:10px;letter-spacing:.42em;text-transform:uppercase;color:#c9a227;margin-bottom:14px;text-align:center;
  opacity:0;transform:translateY(10px);transition:opacity .5s .1s,transform .5s .1s}
.sm-menu.open .sm-kicker{opacity:.9;transform:none}
.sm-nieuw{display:inline-block;margin-right:10px;padding:3px 10px;border-radius:99px;background:#c9a227;color:#0d0c0a;
  font-size:9px;letter-spacing:.16em;font-weight:600}
.sm-groep ul{list-style:none;margin:0;padding:0;text-align:center}
.sm-groep a{display:inline-block;font-family:Oswald,sans-serif;font-weight:600;text-transform:uppercase;
  font-size:clamp(25px,4vw,44px);line-height:1.15;color:#fff;text-decoration:none;padding:.16em 4px;letter-spacing:.04em;
  transform:translateY(22px);opacity:0;
  transition:transform .5s ease,opacity .5s ease,color .25s,letter-spacing .3s;transition-delay:calc(var(--i,1) * .07s + .05s)}
.sm-menu.open .sm-groep a{transform:translateY(0);opacity:1}
.sm-groep a:hover,.sm-groep a:focus-visible{color:#e0b34e;letter-spacing:.09em;outline:none}
/* het thuisbaken (Soffia, 02-09): twee gouden vonkjes die traag om een punt draaien
   naast "Mijn proefboek" — beweging trekt het oog (de Doom-les), maar op keldertempo */
.sm-draai{display:inline-block;position:relative;width:20px;height:20px;vertical-align:baseline;margin-left:6px}
.sm-draai i{position:absolute;inset:0;font-style:normal;font-size:12px;line-height:20px;text-align:center;color:#e0b34e;
  animation:sm-baan 4.5s linear infinite;text-shadow:0 0 8px rgba(224,179,78,.6)}
.sm-draai i:nth-child(2){font-size:8px;opacity:.75;animation-delay:-2.25s}
@keyframes sm-baan{from{transform:rotate(0deg) translateX(9px) rotate(0deg)}to{transform:rotate(360deg) translateX(9px) rotate(-360deg)}}
@media(prefers-reduced-motion:reduce){.sm-draai i{animation:none}.sm-draai i:nth-child(2){display:none}}
/* "je bent hier": het elegante dunne lijntje (Soffia, 02-09) */
.sm-groep a.sm-hier{position:relative}
.sm-groep a.sm-hier::after{content:"";position:absolute;left:8px;right:8px;bottom:6px;height:1px;background:#c9a227;opacity:.9}
.sm-voet{position:relative;font-size:11.5px;letter-spacing:.06em;color:rgba(247,243,234,.55);text-align:center;
  opacity:0;transition:opacity .6s .3s}
.sm-menu.open .sm-voet{opacity:1}
.sm-voet{max-width:560px;line-height:1.7}
.sm-voet a{color:#c9a227;text-decoration:none}
.sm-biblio{position:relative;margin:14px auto 0;padding-top:12px;max-width:560px;text-align:center;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  border-top:1px solid rgba(247,243,234,.12);opacity:0;transition:opacity .6s .6s}
.sm-menu.open .sm-biblio{opacity:1}
.sm-biblio a{color:rgba(201,162,39,.85);text-decoration:none}
.sm-biblio a:hover{color:#e0b34e}
@media(max-width:620px){
  .sm-menu{justify-content:flex-start;padding-top:76px;gap:22px}
  .sm-kolommen{gap:26px;flex-direction:column}
  .sm-groep a{font-size:clamp(24px,7vw,30px)}
}
@media(prefers-reduced-motion:reduce){.sm-menu,.sm-fond,.sm-kicker,.sm-groep a,.sm-voet,.sm-biblio{transition:none;transform:none}}

/* het Kaasgeheim apart gezet in de kolom (Soffia, 08-09): extra lucht erboven
   mét een fijn gouden lijntje als drempel — zelfde grootte als de rest */
.sm-menu li.sm-apart{margin-top:30px;position:relative}
.sm-menu li.sm-apart::before{content:"";position:absolute;top:-15px;left:50%;
  transform:translateX(-50%);width:52px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(201,162,39,.75),transparent)}
.sm-menu li.sm-apart a{color:#c9a227}

/* het aanmeldblok (13-09) — spiegelt .menu-account van de vitrine */
.sm-account{margin-top:18px;padding-top:16px;border-top:1px solid rgba(255,255,255,.12);text-align:center;opacity:0;transform:translateY(8px);transition:opacity .5s .35s,transform .5s .35s}
.sm-menu.open .sm-account{opacity:1;transform:none}
.sm-account .sm-kicker{margin-bottom:10px;opacity:.9;transform:none}
.sm-account p{margin:0 0 10px;font-family:"Open Sans",sans-serif;font-size:13px;line-height:1.5;color:rgba(255,255,255,.8);letter-spacing:0;text-transform:none}
.sm-account .sm-uitleg{max-width:340px;margin:0 auto 12px;color:rgba(255,255,255,.62);font-size:12.5px}
.sm-account .sm-google{min-height:44px;display:flex;justify-content:center}
.sm-account .sm-google>div{margin:0 auto}
.sm-account .sm-fout{color:#ff8a7a}
.sm-afmelden{font-family:Oswald,sans-serif;font-size:12px;letter-spacing:.14em;text-transform:uppercase;padding:8px 18px;background:none;color:#c9a227;border:1px solid rgba(201,162,39,.6);border-radius:999px;cursor:pointer}