/* Fundament basis: structuurgedrag zonder esthetiek. Kleur, type en compositie komen uit het projecttheme. */

/* Toegankelijkheidsvloer: zichtbare focus, altijd. Het projecttheme mag de vorm herstylen, nooit verwijderen. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* Secties: een ritme via custom properties; het projecttheme stemt de waarden. */
.f-sectie {
  padding-block: var(--wp--custom--sectie--padding-blok);
}

/* Motion is opt-in: zonder JS (body mist .f-motion-klaar), met reduced motion of met de
   kill switch (body[data-motion="uit"]) is alles gewoon zichtbaar. Nooit content verstoppen
   achter een animatie die misschien niet vuurt. */
@media (prefers-reduced-motion: no-preference) {
  body.f-motion-klaar:not([data-motion="uit"]) [data-reveal] {
    opacity: 0;
    transform: translateY(14px);
    transition:
      opacity var(--wp--custom--motion--duur-reveal, 500ms) var(--wp--custom--motion--easing, ease-out),
      transform var(--wp--custom--motion--duur-reveal, 500ms) var(--wp--custom--motion--easing, ease-out);
  }

  body.f-motion-klaar:not([data-motion="uit"]) [data-reveal].is-zichtbaar {
    opacity: 1;
    transform: none;
  }
}

/* Voor screenreaders, onzichtbaar op het scherm. */
.scherm-alleen {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---- aw-blokken: structuurmechanica (esthetiek komt uit het projecttheme) ---- */

/* Tekstband */
.aw-marquee { overflow: hidden; }
.aw-marquee .marquee-spoor { display: flex; white-space: nowrap; width: max-content; }
.aw-marquee .marquee-spoor span { padding-right: 0.4em; }
@media (prefers-reduced-motion: no-preference) {
  body:not([data-motion="uit"]) .aw-marquee .marquee-spoor {
    animation: aw-marquee var(--wp--custom--motion--marquee-duur, 30s) linear infinite;
  }
}
@keyframes aw-marquee { to { transform: translateX(-50%); } }

/* Carrousel */
.aw-carrousel .spoor {
  display: flex;
  gap: var(--wp--custom--layout--elementgap, 12px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: 6px;
}
.aw-carrousel .spoor::-webkit-scrollbar { display: none; }
.aw-carrousel .spoor > * { flex: 0 0 min(560px, 86%); scroll-snap-align: start; }
body.f-motion-klaar .aw-carrousel.aw-klaar .spoor > * { opacity: 0.4; transition: opacity 0.4s ease; }
body.f-motion-klaar .aw-carrousel.aw-klaar .spoor > .aan { opacity: 1; }
.aw-carrousel .besturing { display: flex; align-items: center; gap: 20px; margin-top: 24px; }
.aw-carrousel .pijlen { display: flex; gap: 8px; }
.aw-carrousel .besturing button { width: 44px; height: 44px; border-radius: 999px; border: 1px solid currentColor; background: transparent; font: inherit; cursor: pointer; }
.aw-carrousel .segmenten { display: flex; gap: 6px; flex: 1; max-width: 420px; }
.aw-carrousel .segmenten span { height: 2px; flex: 1; background: currentColor; opacity: 0.25; }
.aw-carrousel .segmenten span.aan { opacity: 1; }

/* Scrollverhaal: fallback = gestapelde panelen; met motion (vh-actief) sticky viewport */
.aw-scrollverhaal { position: relative; }
.aw-scrollverhaal .vh-paneel { position: relative; min-height: 560px; display: grid; align-items: center; overflow: hidden; }
.aw-scrollverhaal .vh-menu { display: none; }
body.f-motion-klaar:not([data-motion="uit"]) .aw-scrollverhaal.vh-actief { height: 380vh; }
body.f-motion-klaar:not([data-motion="uit"]) .aw-scrollverhaal.vh-actief .plak { position: sticky; top: 0; height: 100vh; overflow: hidden; }
body.f-motion-klaar:not([data-motion="uit"]) .aw-scrollverhaal.vh-actief .vh-paneel { position: absolute; inset: 0; min-height: 0; opacity: 0; transition: opacity 0.6s ease; }
body.f-motion-klaar:not([data-motion="uit"]) .aw-scrollverhaal.vh-actief .vh-paneel.aan { opacity: 1; }
body.f-motion-klaar:not([data-motion="uit"]) .aw-scrollverhaal.vh-actief .vh-menu { display: block; position: absolute; right: 24px; top: 50%; transform: translateY(-50%); z-index: 3; text-align: right; }
.aw-scrollverhaal .vh-menu ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.aw-scrollverhaal .vh-menu li { display: flex; justify-content: flex-end; align-items: baseline; gap: 14px; opacity: 0.45; cursor: pointer; transition: opacity 0.3s; }
.aw-scrollverhaal .vh-menu li.aan { opacity: 1; }
@media (max-width: 900px) { body.f-motion-klaar:not([data-motion="uit"]) .aw-scrollverhaal.vh-actief .vh-menu { display: none; } }

/* Voor/na */
.aw-voorna .voorna-vlak { position: relative; --stand: 50%; }
.aw-voorna img { display: block; width: 100%; height: auto; }
.aw-voorna .voorna-na { position: absolute; inset: 0; height: 100%; object-fit: cover; clip-path: inset(0 0 0 var(--stand)); }
.aw-voorna .voorna-schuif { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; }
.aw-voorna .voorna-schuif:focus-visible { opacity: 1; }
.aw-voorna .voorna-labels { display: flex; justify-content: space-between; margin-top: 8px; }