/*
Theme Name: Mooov by Elise Farrazijn
Author: Emiel Dewulf
Author URI: https://emieldewulf.be
Description: Thema voor Mooov by Elise Farrazijn
Version: 1.0
Text Domain: mooov
Requires at least: 5.0
Tested up to: 6.6
Requires PHP: 7.4
License: Proprietary
*/

/* Ankers landen onder de vaste header (ook de rijen in een scrollspy-lijst en tussentitels in een tekst) */
section[id],
li[id],
.content h2[id] {
    scroll-margin-top: 8rem;
}

/* Scrollspy (main.js, [data-spy]): de link van het blok in beeld */
.spy__link[aria-current="true"] { color: var(--white); }
.spy__link--licht[aria-current="true"] { color: var(--primary); }   /* op een licht paneel, bv. de inhoudstafel van page.php */

/* Scroll naar boven (zichtbaar na 400px scrollen, zie main.js) */
.scrollToTop {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
}

.scrollToTop.is-visible {
    opacity: 1;
    visibility: visible;
}

/* Homepage-hero: foto tot 6px van de rand, ook onderaan (front-page.php) */
.hero {
    --hero-inset: 6px;
    min-height: calc(100svh - 2 * var(--hero-inset));
    margin: var(--hero-inset) var(--hero-inset) 0;
    border-radius: 20px;
    isolation: isolate;
}

/* Inhoud lijnt uit met de header, ondanks de inset */
.hero > .section { padding-inline: calc(var(--section-x) - var(--hero-inset)); }

/* Hero die blijft staan (foto én tekst) terwijl de volgende sectie erover schuift. Die sectie heeft
   een achtergrond en position: relative (bv. .panel). Zet hero + sectie samen in een div: daar blijft
   hij binnen. Hoger dan het scherm? Dan blijft hij staan met de onderkant in beeld (--hero-h zet main.js). */
.hero--sticky {
    position: sticky;
    top: min(var(--hero-inset), 100svh - var(--hero-h, 0px) - var(--hero-inset));
}

/* Hero van een subpagina (bv. page-kinesitherapie.php): iets lager */
.hero--page { min-height: max(36rem, 82svh); }

/* Iets hogere hero, bv. een blogartikel */
.hero--hoog { min-height: max(36rem, 92svh); }

/* Slider: dezelfde afgeronde hoeken als de hero, ook als de foto blijft staan (ed-animation.js) */
.hero__slider {
    overflow: hidden;
    border-radius: inherit;
}

/* Slider (main.js): foto's vloeien in elkaar over met een trage zoom */
.hero__slide {
    opacity: 0;
    scale: 1.06;
    transition: opacity 1.2s cubic-bezier(0.4, 0, 0.2, 1), scale 7s linear;
}

.hero__slide.is-active {
    opacity: 1;
    scale: 1;
}

/* Houdt de witte tekst (en de header) leesbaar op lichtere foto's */
.hero__overlay {
    background-image:
        linear-gradient(to bottom, color-mix(in srgb, var(--dark) 40%, transparent), transparent 25%),
        linear-gradient(to top, color-mix(in srgb, var(--dark) 70%, transparent), color-mix(in srgb, var(--dark) 20%, transparent) 55%, transparent 80%);
}

/* Streepjes-navigatie (hero-slider, aanbod-kaarten): het actieve wordt breder en wit.
   Hoogte (= klikvlak) via utilities, bv. h--24. Met .is-timing vult het zich tot de volgende stap. */
.dash {
    position: relative;
    width: 20px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    transition: width 0.4s cubic-bezier(0.625, 0.05, 0, 1);
}

.dash::before,
.dash::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
}

.dash::before { background-color: color-mix(in srgb, var(--muted) 30%, transparent); }

.dash::after {
    background-color: var(--white);
    transform: scaleX(0);
    transform-origin: left;
}

.dash.is-active { width: 30px; }
.dash.is-active::after { transform: scaleX(1); }
.dash.is-timing::after { animation: dash-fill var(--hero-interval, 6s) linear; }

@keyframes dash-fill {
    from { transform: scaleX(0); }
}

/* Oranje bolletje voor labels, bv. "• Ons aanbod" */
.dot {
    flex: none;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background-color: var(--primary);
}

/* Homepage: aanbod-kaarten die op elkaar stapelen (front-page.php, ed-animation.js).
   Elke kaart blijft gecentreerd staan; de volgende schuift erover. */
.stack {
    --stack-card-h: min(38.125rem, 100svh - 12rem);                 /* 610px uit Figma */
    --stack-top: max(8rem, (100svh - var(--stack-card-h)) / 2);      /* niet onder de header */
}

/* Extra ruimte na de laatste kaart: die blijft staan terwijl het volgende paneel erover schuift
   (een element en geen padding, want sticky plakt niet in de padding).
   50svh = hoe ver het paneel erover schuift (zie .panel--overlap), 8rem = witruimte vooraf */
.stack::after {
    content: "";
    display: block;
    height: calc(50svh + 8rem);
}

/* Geen grid: in een grid plakt een sticky kaart enkel binnen zijn eigen rij */
.stack__card {
    position: sticky;
    top: var(--stack-top);
    width: min(100% - 10rem, 68rem);                                 /* 1088px, met plaats voor streepjes en "Scroll" */
    height: var(--stack-card-h);
    margin-inline: auto;
    transform-origin: 50% 100%;
}

.stack__card + .stack__card { margin-top: 4rem; }

/* Streepjes links en "Scroll" rechts blijven ter hoogte van het midden van de kaart */
.stack__side {
    position: sticky;
    top: calc(var(--stack-top) + var(--stack-card-h) / 2);
    transform: translateY(-50%);
}

@media (max-width: 1024px) {
    .stack__card { width: 100%; }
}

/* Donker verloop onderaan een foto, zodat witte tekst erop leesbaar is */
.shade { background-image: linear-gradient(to bottom, transparent 35%, color-mix(in srgb, var(--black) 65%, transparent)); }

/* Paneel: 6px van de rand met afgeronde hoeken; de inhoud lijnt uit met de header.
   relative: ligt altijd boven de sectie ervoor, ook als die (of de foto erin) beweegt.
   overflow: clip (geen hidden): knipt de hoeken af zonder scrollcontainer te worden, zodat sticky erin werkt */
.panel {
    --panel-inset: 6px;
    position: relative;
    margin-inline: var(--panel-inset);
    border-radius: 20px;
    overflow: clip;
}

.panel > .section { padding-inline: calc(var(--section-x) - var(--panel-inset)); }

/* Schuift over het einde van de vorige sectie (de laatste aanbod-kaart, zie .stack) */
.panel--overlap { margin-top: calc(-50svh - var(--section-y)); }

/* Valt over de afgeronde onderrand van een .hero--page en schuift er bij het scrollen over */
.panel--lift { margin-top: -1.25rem; }

/* Slider met kaarten (front-page.php, main.js): de actieve kaart staat in het midden,
   de eerste en laatste ook, dankzij de ruimte links en rechts */
.carousel { container-type: inline-size; }

.carousel__track {
    --slide-w: min(50.75rem, 100cqi - 3rem);                        /* 812px uit Figma */
    padding-inline: calc((100cqi - var(--slide-w)) / 2);
    overflow-x: auto;
    overflow-y: hidden;                                              /* anders vangt de track het muiswiel op als iets net te hoog is */
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
}

.carousel__track::-webkit-scrollbar { display: none; }

/* Muis/trackpad: niet zelf scrollen (een schuine veeg bleef in de slider hangen), enkel via pijltjes en streepjes.
   Op touchtoestellen blijft swipen werken. */
@media (hover: hover) and (pointer: fine) {
    .carousel__track { overflow-x: hidden; }
}

.carousel__card {
    flex: none;
    width: var(--slide-w);
    scroll-snap-align: center;
}

/* Variant: de kaarten starten op de linkerrand van de wrapper (bv. blog) */
.carousel__track--start {
    --slide-w: min(33.5rem, 100cqi - 4rem);                         /* 536px uit Figma */
    --track-edge: max(var(--section-x), (100cqi - var(--wrapper-max)) / 2);
    padding-inline: var(--track-edge);
    scroll-padding-inline: var(--track-edge);
}

.carousel__track--start .carousel__card { scroll-snap-align: start; }

/* Variant: op desktop vier kaarten naast elkaar binnen de wrapper (bv. het team op de contactpagina) */
@media (min-width: 1025px) {
    .carousel__track--vier { --slide-w: calc((100cqi - 2 * var(--track-edge) - 3rem) / 4); }
}

/* Fotostroom (front-page.php): foto's schuiven eindeloos van rechts naar links, elk met een
   eigen grootte en snelheid (groot = dichtbij = sneller). Posities en maten komen uit Figma
   (1728 × 1000) en schalen mee: --w/--h = grootte, --y = hoogte, --p0 = startpunt (0–1), --dur = seconden. */
.drift {
    container-type: inline-size;
    position: relative;
    height: clamp(34rem, 57.87vw, 62.5rem);                         /* 1000px op 1728px breed */
    overflow: hidden;
}

.drift__item {
    position: absolute;
    top: calc(var(--y) / 1000 * 100%);
    left: 0;
    width: clamp(var(--w) * 0.55px, var(--w) / 1728 * 100cqw, var(--w) * 1px);
    aspect-ratio: var(--w) / var(--h);
    animation: drift calc(var(--dur) * 1s) linear infinite;
    animation-delay: calc(var(--p0) * var(--dur) * -1s);
}

@keyframes drift {
    from { translate: 100cqw 0; }
    to { translate: -100% 0; }
}

/* Verminder beweging: stilstaan op de plek uit Figma (overschrijft de algemene regel in tailwind-css.css) */
@media (prefers-reduced-motion: reduce) {
    .drift__item {
        animation-duration: calc(var(--dur) * 1s) !important;
        animation-iteration-count: infinite !important;
        animation-play-state: paused;
    }
}

/* Avatars: ronde portretten die overlappen. De uitsnede komt uit Figma:
   --fx/--fy = punt in de foto (meestal het gezicht) dat in het midden komt, --zoom = 1 is net vullend. */
.avatar + .avatar { margin-left: -0.75rem; }

.avatar img {
    position: absolute;
    top: 50%;
    left: 50%;
    width: calc(var(--zoom, 1) * 100%);
    max-width: none;
    height: auto;
    translate: calc(var(--fx, 50%) * -1) calc(var(--fy, 50%) * -1);
}

/* Hover: de buren schuiven opzij, het portret groeit en de naam verschijnt erboven */
.avatar { --avatar-ease: cubic-bezier(0.2, 0.7, 0.2, 1); }

.avatar,
.avatar__foto { transition: translate 0.5s var(--avatar-ease), scale 0.5s var(--avatar-ease); }

.avatar__tip {
    position: absolute;
    bottom: calc(100% + 0.75rem);
    left: 50%;
    translate: -50% 0.375rem;
    opacity: 0;
    white-space: nowrap;
    pointer-events: none;
    transition: opacity 0.2s ease, translate 0.4s var(--avatar-ease);
}

.avatar__tip::after {                                                /* pijltje onder de tooltip */
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    width: 0.5rem;
    height: 0.5rem;
    background: inherit;
    translate: -50% -50%;
    rotate: 45deg;
}

/* Hover met de muis of focus met het toetsenbord (op touch gaat een tik meteen naar de detailpagina) */
@media (hover: hover) {
    .avatar:hover { z-index: 1; }
    .avatar:hover .avatar__foto { scale: 1.12; }
    .avatar:has(~ .avatar:hover) { translate: -0.5rem 0; }           /* alles links ervan */
    .avatar:hover ~ .avatar { translate: 1rem 0; }                    /* alles rechts ervan */
    .avatar:hover .avatar__tip { opacity: 1; translate: -50% 0; }
}

.avatar:focus-visible { z-index: 1; outline: none; }
.avatar:focus-visible .avatar__foto { scale: 1.12; outline: 2px solid var(--primary); outline-offset: 2px; }
.avatar:has(~ .avatar:focus-visible) { translate: -0.5rem 0; }
.avatar:focus-visible ~ .avatar { translate: 1rem 0; }
.avatar:focus-visible .avatar__tip { opacity: 1; translate: -50% 0; }

/* Teamkaarten in een waaier (initFlickCards in ed-animation.js): alle kaarten op dezelfde plek,
   het script zet ze uiteen. De stip van de actieve kaart is oranje. */
.flick {
    display: grid;
    place-items: center;
    cursor: grab;
    user-select: none;
}

.flick[data-flick-dragging] { cursor: grabbing; }
.flick > * { grid-area: 1 / 1; }
.flick__card { width: min(22.5rem, 70vw); }
.flick__card img { pointer-events: none; }
.flick__dot { background-color: var(--white); transition: background-color 0.3s ease; }
[data-flick-status="active"] .flick__dot { background-color: var(--primary); }

/* Veelgestelde vragen (<details class="faq">): geen standaardpijltje; open = oranje nummer en pijl naar boven.
   Vloeiend open en dicht in browsers die het kunnen (interpolate-size). */
.faq summary { list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq__icon { transition: rotate 0.4s cubic-bezier(0.2, 0.7, 0.2, 1), color 0.2s ease; }
.faq[open] .faq__icon { rotate: 180deg; color: var(--primary); }
.faq[open] .faq__nr { color: var(--primary); }

@supports (interpolate-size: allow-keywords) {
    .faq { interpolate-size: allow-keywords; }
    .faq::details-content { height: 0; overflow: clip; transition: height 0.5s cubic-bezier(0.2, 0.7, 0.2, 1), content-visibility 0.5s allow-discrete; }
    .faq[open]::details-content { height: auto; }
}

/* Zwevende balk onderaan een specialisatie (main.js): schuift in beeld na de hero, weg bij de footer.
   De tab van de sectie in beeld is wit (scrollspy). */
[data-float-nav] {
    translate: 0 calc(100% + 1rem);
    transition: translate 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}

[data-float-nav].is-visible { translate: 0 0; }
.spy__tab[aria-current="true"] { background-color: var(--white); color: var(--primary); }

/* Streepjes op een lichte achtergrond */
.dash--dark::before { background-color: color-mix(in srgb, var(--dark) 12%, transparent); }
.dash--dark::after { background-color: var(--dark); }

/* De diagonale pijl (icons/arrow-*.svg) horizontaal draaien */
.icon--right { rotate: 45deg; }
.icon--left { rotate: -135deg; }

/* Knoppen: alleen de animatie, layout en kleur via utilities.
   <a class="btn ..."><span class="btn__label"><span>Tekst</span></span><span class="btn__icon"><img …></span></a>
   --btn-fill = kleur die bij hover van onderen opvult (standaard 20% donkerder). */
.btn {
    --btn-ease: cubic-bezier(0.625, 0.05, 0, 1);
    position: relative;
    isolation: isolate;
    overflow: hidden;
    transition: scale 0.15s ease-out;
}

.btn::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-color: var(--btn-fill, color-mix(in srgb, var(--black) 20%, transparent));
    border-radius: 50% 50% 0 0 / 100% 100% 0 0;
    transform: translateY(101%);
    transition: transform 0.6s var(--btn-ease), border-radius 0.6s var(--btn-ease);
}

/* Tekst rolt omhoog: de kopie is een text-shadow 1.5em lager */
.btn__label {
    display: block;
    overflow: hidden;
    line-height: 1.5;
}

.btn__label > span {
    display: block;
    text-shadow: 0 1.5em currentColor;
    transition: transform 0.6s var(--btn-ease);
}

/* Pijl vliegt rechtsboven weg, kopie (drop-shadow) komt linksonder binnen.
   --btn-icon-shift = net iets groter dan het icoon */
.btn__icon {
    --btn-icon-shift: 8px;
    display: flex;
    overflow: hidden;
}

.btn__icon > * {
    filter: drop-shadow(calc(var(--btn-icon-shift) * -1) var(--btn-icon-shift) 0 currentColor);
    transition: transform 0.6s var(--btn-ease);
}

/* Ook bij hover/focus op een omliggende .group (bv. een klikbare kaart) */
.btn:focus-visible::before,
.group:focus-within .btn::before { transform: translateY(0); border-radius: 0; }
.btn:focus-visible .btn__label > span,
.group:focus-within .btn__label > span { transform: translateY(-1.5em); }
.btn:focus-visible .btn__icon > *,
.group:focus-within .btn__icon > * { transform: translate(var(--btn-icon-shift), calc(var(--btn-icon-shift) * -1)); }

@media (hover: hover) {
    .btn:hover::before,
    .group:hover .btn::before { transform: translateY(0); border-radius: 0; }
    .btn:hover .btn__label > span,
    .group:hover .btn__label > span { transform: translateY(-1.5em); }
    .btn:hover .btn__icon > *,
    .group:hover .btn__icon > * { transform: translate(var(--btn-icon-shift), calc(var(--btn-icon-shift) * -1)); }
}

.btn:active,
.group:active .btn { scale: 0.96; }

.btn:disabled {
    opacity: 0.3;
    cursor: default;
    pointer-events: none;
}

/* Foto zoomt subtiel in bij hover/focus op een .group (bv. een blogkaart).
   Zet de foto in een ouder met overflow--hidden, zodat de zoom binnen de randen blijft. */
.zoom { transition: scale 0.8s cubic-bezier(0.2, 0.7, 0.2, 1); }

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .group:hover .zoom,
    .group:focus-within .zoom { scale: 1.05; }
}

/* Maakt een hele kaart klikbaar via één link (bv. de titel); de kaart zelf heeft position: relative */
.link--cover::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
}

.link--cover:focus-visible { outline: none; }
.link--cover:focus-visible::after { outline: 2px solid var(--primary); outline-offset: -2px; }

/* Formuliervelden (contactformulier in inc/formulieren.php, nieuwsbrief in de footer): het label staat op
   de rand van het veld en krijgt dezelfde achtergrond als het vlak eronder (bg-utility op het label) */
.veld__label {
    z-index: 1;
    translate: 0 -50%;
}

.veld__input {
    font-family: inherit;
    transition: border-color 0.2s ease;
}

.veld__input::placeholder { color: var(--muted); }

.veld__input:focus-visible {
    outline: none;
    border-color: var(--primary);
}

select.veld__input {
    appearance: none;
    cursor: pointer;
    background-image: url("assets/img/icons/arrow-down-white.svg");
    background-repeat: no-repeat;
    background-position: right 1.375rem center;
}

textarea.veld__input { resize: vertical; }

/* Op een licht vlak: donker pijltje in de keuzelijst */
select.veld__input--licht { background-image: url("assets/img/icons/arrow-down-dark.svg"); }

/* Fotowiel (ed_fotowiel in inc/componenten.php): foto's op een cirkel die aan constante snelheid ronddraait.
   Enkel de bovenkant is zichtbaar: het paneel eromheen knipt de rest af (zet het wiel onderaan, zonder padding).
   Maten uit Figma: foto 260 × 284, straal tot het midden van een foto 532 */
.wiel {
    --foto-b: 16.25rem;
    --foto-h: 17.75rem;
    --straal: 33.25rem;
    position: relative;
    height: calc(var(--foto-h) - 1.5rem);
}

.wiel__rad {
    position: absolute;
    top: calc(var(--foto-h) / 2 + var(--straal));
    left: 50%;
    animation: wiel-draai 100s linear infinite;
}

.wiel__foto {
    position: absolute;
    top: calc(var(--foto-h) / -2);
    left: calc(var(--foto-b) / -2);
    width: var(--foto-b);
    height: var(--foto-h);
    overflow: hidden;
    border-radius: 24px;
    transform: rotate(var(--hoek)) translateY(calc(var(--straal) * -1));
}

.wiel:hover .wiel__rad { animation-play-state: paused; }

@keyframes wiel-draai {
    to { rotate: 360deg; }
}

@media (max-width: 767px) {
    .wiel {
        --foto-b: 10rem;
        --foto-h: 11rem;
        --straal: 20rem;
    }
}

/* Teammozaïek (ed_teammozaiek in inc/componenten.php): patroon van 7 kaarten uit Figma, daarna herhaalt het zich.
   Elke kaart staat op een eigen regel; breedte, inspringing en marges in % van de breedte van de mozaïek
   (percentages uit Figma, 1368 breed), zodat alles mee schaalt. 16% ≈ 160px tussen de rijen bij 1024 breed. */
.mozaiek {
    display: flex;
    flex-direction: column;
}

.mozaiek__kaart:nth-child(7n+1) { width: 66.67%; aspect-ratio: 912 / 680; }
.mozaiek__kaart:nth-child(7n+1):not(:first-child) { margin-top: 16%; }
.mozaiek__kaart:nth-child(7n+2) { width: 41.23%; margin-left: 58.77%; aspect-ratio: 564 / 672; margin-top: 16%; }
.mozaiek__kaart:nth-child(7n+3) { width: 24.27%; aspect-ratio: 332 / 480; margin-top: -16%; }  /* schuift op naast kaart 2 */
.mozaiek__kaart:nth-child(7n+4) { width: 58.19%; margin-left: 41.81%; aspect-ratio: 796 / 600; margin-top: 6%; }
.mozaiek__kaart:nth-child(7n+5) { width: 32.75%; margin-left: 24.85%; aspect-ratio: 1; margin-top: 16%; }
.mozaiek__kaart:nth-child(7n+6) { width: 24.27%; margin-left: 75.73%; aspect-ratio: 332 / 480; margin-top: 6%; }
.mozaiek__kaart:nth-child(7n+7) { width: 66.67%; aspect-ratio: 912 / 680; margin-top: 16%; }

/* Mobiel: twee kolommen, de rechterkolom iets lager */
@media (max-width: 767px) {
    .mozaiek {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.5rem;
        padding-bottom: 3rem;
    }

    .mozaiek .mozaiek__kaart:nth-child(n) {
        width: auto;
        margin: 0;
        aspect-ratio: 3 / 4;
    }

    .mozaiek__kaart:nth-child(even) { translate: 0 3rem; }
}

/* Vinkjes en keuzerondjes in de huisstijl (bv. het filter op de blog) */
html { accent-color: var(--primary); }

/* Uitklapmenu met <details> (bv. "Filter" op de blog): geen driehoekje, pijltje draait mee */
summary.list--none::-webkit-details-marker { display: none; }
details[open] > summary .icon--flip { transform: rotate(180deg); }

/* Lopende tekst (.content, bv. een blogartikel): tussentitels kleiner dan sectietitels, citaat en foto's zoals in Figma.
   Koppen schalen mee via --fs (zie de koppen in tailwind-css.css) */
.content h2 { --fs: 42; --fs-min: 28; line-height: 0.95; }
.content h3 { --fs: 32; --fs-min: 24; }

.content blockquote {
    padding-left: 2rem;
    border-left-width: 4px;
    font-family: var(--font-heading);
    font-weight: var(--heading-weight);
    font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.625rem);
    line-height: 0.95;
    letter-spacing: var(--heading-tracking);
    text-transform: uppercase;
}

.content blockquote > * { margin: 0; }
.content img { border-radius: 8px; }