/* Paginaraamwerk. site.css geeft html/body een donkerblauwe achtergrond (mooie overscroll
   onder de footer); de pagina zelf ligt op een witte laag, zoals in het ontwerp. */
.site{background:var(--white);color:var(--midnight)}

/* Gegevens die de praktijk nog moet bevestigen (ingevuld als voorbeeld).
   Alleen zichtbaar gemarkeerd zolang site.concept = true; de productiebuild weigert
   zolang er nog markeringen zijn (scripts/controleer-navragen.mjs). */
html[data-concept] .navragen{background:#FFF1B8;box-shadow:0 0 0 2px #FFBE01;border-radius:2px;cursor:help}
html[data-concept] .navragen-blok{outline:2px dashed #FFBE01;outline-offset:4px}
/* in donkere secties blijft de tekst op de markering leesbaar */
html[data-concept] .navragen{color:#102A43}
/* lege foto-placeholders: de container knipt de outline af, dus een rand via ::after */
html[data-concept] :has(> .ph.navragen-blok){position:relative}
html[data-concept] :has(> .ph.navragen-blok)::after{content:"";position:absolute;inset:4px;border:2px dashed #FFBE01;border-radius:inherit;pointer-events:none;z-index:2}

/* Testfase-melding boven het inschrijfformulier (testkopie.js) */
.testkopie-melding{margin:0 0 24px;padding:14px 16px;border-radius:var(--r);background:#FFF1B8;color:var(--midnight);font-size:16px;font-weight:400;line-height:1.5;border-left:4px solid var(--amber)}

/* ===== Leesbaarheid op kleine schermen (uit de scan op 320–430 px) ===== */
/* Lange woorden in koppen nooit buiten beeld laten vallen */
h1,h2,h3,h4,.h1,.h2,.h3,.h4{overflow-wrap:break-word}
@media (max-width:430px){
  h1 [style*="nowrap"],h2 [style*="nowrap"],h3 [style*="nowrap"],.lead [style*="nowrap"]{white-space:normal!important}
}
/* Klikvlakken van telefoon-, mail- en tekstlinks minimaal 24px hoog (WCAG 2.2 AA),
   zonder de regelafstand te veranderen */
a[href^="tel:"],a[href^="mailto:"],.f-bottom a,label a,.info-row a{padding-block:4px}
/* Minimale lettergrootte voor labels en badges */
.tag,.x-gal-cap{font-size:14px}
.badge-today{font-size:13px}
@media (max-width:359px){
  .topbar,.loc-btn{font-size:14px}
}
/* Enkele eyebrows in het ontwerp hebben een inline lettergrootte van 12px: minimaal 13px */
.eyebrow[style*="font-size: 12px"]{font-size:13px!important}

/* ===== Paginakop: foto in het midden naast de tekst, even hoog als de tekst (6 okt) =====
   In het ontwerp stond de foto onderaan op de lijn. Nu: verticaal gecentreerd,
   rondom afgerond, en op desktop precies zo hoog als de tekstkolom ernaast. */
.phero:has(.phero-grid>.phero-media){padding-bottom:72px!important}
.phero-grid:has(>.phero-media){align-items:center}
.phero-grid>.stack:has(+.phero-media){padding-bottom:0!important}
.phero-grid>.phero-media{border-radius:var(--r)}
@media (min-width:901px){
  .phero-grid:has(>.phero-media){align-items:stretch}
  .phero-grid>.phero-media{aspect-ratio:auto;min-height:360px}
  .phero-grid>.phero-media>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
}
@media (max-width:900px){
  .phero:has(.phero-grid>.phero-media){padding-bottom:40px!important}
}
/* Tekst in knoppen/belkaarten mag afbreken in plaats van 1px buiten beeld te vallen */
.btn>span,.btn .small{min-width:0;overflow-wrap:anywhere}

/* Mobiel: minder lege ruimte, zodat de inhoud sneller in beeld komt (iPhone-controle 6 okt) */
@media (max-width:640px){
  .phero{padding-top:32px}
  .sec{padding:56px 0}
  .sec-sm{padding:40px 0}
}
/* Tariefregels: als het bedrag naar de volgende regel moet, blijft het rechts uitgelijnd */
dl .between>dd,.between>dt+dd{margin-left:auto!important;text-align:right}
/* iPhone: tijdens typen schuift de vaste snelbalk boven het toetsenbord en bedekt velden.
   Verberg hem zolang een formulierveld actief is. */
@media (max-width:860px){
  body:has(input:focus,select:focus,textarea:focus) .mbar{display:none}
}

/* Teamleden zonder portretfoto: rustige tegel met initialen (in plaats van een leeg grijs vlak) */
.ph-initialen{background:linear-gradient(160deg,var(--mist),var(--ph));display:flex;align-items:center;justify-content:center;padding:0}
.ph-initialen>span{display:flex;align-items:center;justify-content:center;width:2.6em;height:2.6em;border-radius:50%;background:var(--white);color:var(--midnight);font-weight:600;font-size:clamp(26px,4vw,40px);letter-spacing:.02em;box-shadow:inset 0 0 0 2px var(--red)}
.ph-initialen-sm>span{font-size:15px}
/* Info-regels (icoon + tekst): tekst mag krimpen en afbreken in plaats van buiten beeld te vallen */
.info-row>span,.info-row>div{min-width:0;overflow-wrap:break-word}

/* ===== Home: opening met video (6 okt) =====
   Rivier en splitsing zijn weg. Eén beeld over de volle breedte: een video als
   site.heroVideo is ingevuld (src/_data/site.json), anders een foto. */
.hero-v .hero-v-stage{height:min(820px,calc(100svh - 88px));min-height:560px;background:var(--midnight)}
.hero-v-media{position:absolute;inset:0;overflow:hidden}
.hero-v-img,.hero-v-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 30%}
.hero-v-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(16,42,67,.10) 0%,rgba(16,42,67,0) 45%,rgba(16,42,67,.45) 100%)}
.hero-v .hero-card{top:auto;bottom:64px;left:max(24px,calc((100% - 1200px)/2));transform:none;width:min(560px,calc(100% - 48px));text-align:left;align-items:flex-start;z-index:2;animation:none}
.hero-v .scroll-cue{z-index:3}
@media (max-width:860px){
  .hero-v .hero-v-stage{height:auto;min-height:0;display:flex;flex-direction:column}
  .hero-v .hero-card{position:relative;bottom:auto;left:auto;width:100%;order:1}
  .hero-v-media{position:relative;inset:auto;order:2;height:62vw;min-height:240px;max-height:460px}
}
@media (prefers-reduced-motion:reduce){.hero-v-img{animation:none}}

/* ===== Geen trilling bij hover (6 okt) =====
   Oorzaak: scroll-animaties (fadeUp, fadeL, …) en hover-effecten gebruikten allebei `transform`
   en vochten om voorrang. De scroll-animaties in site.css gebruiken nu de losse eigenschappen
   `translate`/`scale`; hover-effecten houden `transform`. Ze werken daardoor los van elkaar. */

/* Home: groepsfoto team — niet inzoomen, gezichten volledig in beeld (6 okt) */
.sec .x-teamfoto.ar-wide{aspect-ratio:16/8}
.x-teamfoto>img{object-fit:cover;object-position:center 22%}
@media (max-width:640px){.sec .x-teamfoto.ar-wide{aspect-ratio:4/3}}
/* Parallaxfoto's: minder zoom (zie paraY in site.css) en beeld iets hoger, zodat hoofden niet wegvallen */
.parallax>img,.parallax>.ph-img{object-position:center 30%}
/* Lijsten met links (bv. "E-mail en sociale media" op /contact/): ook een lijn boven de eerste regel,
   zodat de lijst aan de bovenkant niet open oogt */
.card-list>li:first-child>a{border-top:1px solid var(--line)}

/* ===== Rustig scrollen (6 okt) =====
   Trilling bij scrollen op de home kwam van (1) de vastgezette (sticky) opening waar de rest
   overheen schoof en (2) het parallax-effect op foto's. Beide uit, overal. */
.hero-v .hero-v-stage{position:relative!important;top:auto!important}
.parallax>.ph,.parallax>img,.parallax>video{animation:none!important;translate:none!important;scale:none!important}

/* ===== Locaties: video-rondleiding in plaats van de 360°-rondleiding (6 okt) =====
   De 360°-beelden (Google Maps) zijn weg. Elke locatie kan een eigen korte video krijgen,
   op de site zelf (src/assets/video/). Instellen in src/_data/loc.json → "video";
   uitleg voor de praktijk: docs/VIDEO-LOCATIES.md. Zolang "video" leeg is: alleen foto's,
   geen afspeelknop. Speler: src/_includes/partials/locatie-video.njk */
/* Speler op de locatiepagina (#rondleiding): 16:9, afgerond, maximaal 960px breed */
.locvid{width:100%;max-width:960px;background:var(--navy-2)}
.locvid>video{display:block;width:100%;height:100%;object-fit:cover;background:var(--navy-2)}
/* Fotogalerij met 3 foto's (als er een video is, is de eerste foto het stilstaande beeld van de video).
   Desktop: 3 naast elkaar. Telefoon: de eerste breed, de andere twee eronder naast elkaar. */
@media (min-width:641px){
  .x-gal.x-gal-3{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:640px){
  .x-gal.x-gal-3>.x-gal-i:first-child{grid-column:1/-1;aspect-ratio:16/9}
}
/* Tegels "Kijk alvast binnen" op /locaties/ en /verwijzers/: foto met naam en link naar #rondleiding.
   Afspeelknop + "Bekijk de video" alleen als die locatie een video heeft, anders "Bekijk de praktijk" + pijl. */
a.locvid-tegel{display:block;color:#fff;text-decoration:none;background:var(--navy-2)}
a.locvid-tegel:hover,a.locvid-tegel:focus-visible{color:#fff}
.locvid-tegel>img.ph{position:absolute;inset:0;object-position:center 40%}
.locvid-tegel::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(16,42,67,0) 30%,rgba(16,42,67,.88) 100%);pointer-events:none}
.locvid-tegel-tekst{position:absolute;left:24px;right:24px;bottom:20px;z-index:1;display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.locvid-tegel-naam{font-weight:600;font-size:20px;line-height:1.25}
.locvid-tegel-actie{display:inline-flex;align-items:center;gap:10px;font-size:16px;font-weight:400;line-height:1.3}
.locvid-tegel-actie>svg{width:20px;height:20px;flex:none;transition:transform .45s var(--ease)}
.locvid-tegel:hover .locvid-tegel-actie>svg{transform:translateX(4px)}
.locvid-tegel-play{display:inline-flex;align-items:center;justify-content:center;flex:none;width:36px;height:36px;border-radius:50%;background:#fff;color:var(--midnight)}
.locvid-tegel-play>svg{width:16px;height:16px;margin-left:2px}
@media (max-width:640px){
  .locvid-tegel-tekst{left:16px;right:16px;bottom:14px}
  .locvid-tegel-naam{font-size:18px}
}
@media (prefers-reduced-motion:reduce){.locvid-tegel-actie>svg{transition:none}}

/* ===== Video's (21 okt) =====
   Home-opening: de merkfilm "Een glimlach voor iedereen" (zonder logo), herhalend, zonder geluid.
   Paginakoppen: korte clip over de foto heen (partials/kop-video.njk, instellen met kopVideo in de
   front matter). De clip verschijnt pas als hij speelt; tot dan, bij "minder beweging" en zonder
   JavaScript zie je de foto. Starten/pauzeren: initAchtergrondVideo in site.js. Uitleg: docs/VIDEO-HOME.md */
.phero-media>.kop-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 35%;opacity:0;transition:opacity .9s var(--ease);pointer-events:none}
.phero-media>.kop-video.speelt{opacity:1}
@media (prefers-reduced-motion:reduce){.phero-media>.kop-video{display:none}}
/* Film met afspeelknop in een artikel (bv. nieuwsbericht over de slogan) */
.film-glimlach{display:flex;flex-direction:column}
.film-glimlach .locvid{max-width:none}

/* ===== Cookiemelding (21 okt) =====
   Alleen zichtbaar als site.googleTagManager of site.googleAnalytics is ingevuld (toestemming.js).
   Accepteren en Weigeren zien er hetzelfde uit (richtlijn Autoriteit Persoonsgegevens).
   Op telefoons staat de melding boven de balk met Bellen / Spoed / Inschrijven (bottom via JS). */
.cookiemelding{position:fixed;left:0;right:0;bottom:0;z-index:80;padding:12px;pointer-events:none}
.cookiemelding[hidden]{display:none}
.cookiemelding-in{pointer-events:auto;max-width:960px;margin:0 auto;display:flex;align-items:center;gap:16px 28px;flex-wrap:wrap;background:#fff;color:var(--midnight);border:1px solid var(--line);border-radius:var(--r);box-shadow:0 18px 40px -16px rgba(16,42,67,.35);padding:18px 22px}
.cookiemelding-tekst{flex:1 1 420px;min-width:0}
.cookiemelding-tekst p{margin:0;font-size:15px;line-height:1.5}
.cookiemelding-tekst p+p{margin-top:4px}
.cookiemelding-kop{font-weight:600;font-size:16px!important}
.cookiemelding-knoppen{display:flex;gap:10px;flex-wrap:wrap}
.cookiemelding:focus{outline:none}
.cookiemelding:focus-visible .cookiemelding-in{outline:2px solid var(--red);outline-offset:2px}
@media (max-width:640px){
  .cookiemelding{padding:8px}
  .cookiemelding-in{padding:14px 16px;gap:12px}
  .cookiemelding-knoppen{width:100%}
  .cookiemelding-knoppen .btn{flex:1 1 0}
}
/* "Cookie-instellingen" in de footer: een knop die eruitziet als de links ernaast */
.footer .f-linkknop{display:flex;align-items:center;min-height:44px;padding:0;background:none;border:0;color:#fff;font:inherit;cursor:pointer;text-align:left;transition:opacity .3s,padding .45s var(--ease)}
.footer .f-linkknop:hover{padding-left:6px;text-decoration:underline}