/* UX/UI-controle (6 okt 2026) — kleine correcties op het ontwerp.
   Alleen dingen die schuurden; de stijl van het ontwerp blijft gelijk.
   Toelichting per punt: docs/REVIEW-UX-UI.md */

/* 1. Toetsenbordfocus zichtbaar op donkere vlakken.
   De focusrand is standaard donkerblauw; op de donkerblauwe topbalk, het blok
   "Nieuw bij ons?" in het Mondzorg-menu en de donkere afsluitblokken was hij onzichtbaar. */
.topbar :focus-visible,
.mega-cta :focus-visible,
.cta-band :focus-visible{outline-color:#fff}

/* (Teamleden met initialen, afbreken in koppen en het kaartje in het afsluitblok: zelfde bevindingen,
   opgelost in responsive.css door de responsiveness-controle. Niet dubbel opgenomen.) */

/* 2. Mondzorg-menu, blok "Nieuw bij ons?": bij toetsenbordfocus kreeg de link een lichtgrijze
   achtergrond (regel voor gewone menulinks) terwijl de tekst wit is: onleesbaar. Nu een witte focusrand. */
.mega-cta a:focus-visible{background:transparent;color:#fff;outline:3px solid #fff;outline-offset:3px}

/* 3. Foutmeldingen in formulieren: rode tekst op het lichtgrijze vlak haalde net geen AA-contrast
   (4,4:1) en de melding schudde. Nu donkerblauwe tekst met het rode icoon ervoor,
   zonder schudden. Het veld zelf houdt zijn rode rand. */
.err-msg{color:var(--midnight);animation:none}
.err-msg svg{color:var(--red)}

/* 4. Logo: het woordmerk rekt bij hover niet meer uit (letterafstand). Het logo blijft zoals in de huisstijl. */
.logo:hover .w{letter-spacing:.01em}

/* 5. 360°-blokken op /locaties/ (twee naast elkaar): het blok was zo plat dat de afspeelknop
   over de naam van de praktijk viel (ook op 1024 px). Iets hoger (2:1), zodat knop en naam elk hun eigen plek hebben. */
@media (min-width:961px){
  .grid-2>.x-locover-vid.x-locover-vid{aspect-ratio:2/1}
}

/* 6. Knop "Bel ons" volgt de gekozen praktijk (keuze in de topbalk).
   In de pagina staan twee knoppen; zonder keuze of bij Hardinxveld zie je .bel-h, bij Giessenburg .bel-g. */
html:not([data-ve-loc="g"]) .bel-g,
html[data-ve-loc="g"] .bel-h{display:none}

/* 7. Linklijsten in kaarten (bv. "Je kind bij de tandarts" op de home): bij hover schoof de tekst 6px op
   en brak dan soms af op een tweede regel, waardoor de kaart verspringt. De ruimte is nu vooraf
   gereserveerd: de tekst schuift wel op, maar de regel wordt niet smaller. */
.card-list a{padding-right:6px}
.card-list a:hover{padding-right:0}

/* 8. Teamlijst op desktop (teampagina en locatiepagina's). In de compacte lijst waren de locatielabels
   en de korte bio onzichtbaar, terwijl de intro belooft dat "bij iedereen staat waar je diegene tegenkomt".
   - Teampagina: locatielabels weer zichtbaar onder de functie.
   - Bio: verschijnt als klein kaartje onder de naam bij aanwijzen of toetsenbordfocus
     (zoals de bio op telefoon/tablet al over de foto schuift). */
@media (min-width:961px){
  #team-lijst .meta .row{display:flex}
  .x-locover-team>.team-card .more{display:block;position:absolute;left:0;right:auto;top:calc(100% + 4px);bottom:auto;width:max(100%,240px);z-index:6;border-radius:var(--r);box-shadow:0 18px 36px -18px rgba(16,42,67,.55);transform:none;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .3s,visibility .3s}
  .x-locover-team>.team-card:is(:hover,:focus-within) .more{opacity:1;visibility:visible}
  .x-locover-team>.team-card:is(:hover,:focus-within){z-index:6}
}

/* 9. Veelgestelde vragen op de telefoon: de onderwerpknoppen stonden op één regel die je opzij moest
   vegen, zonder zichtbare schuifbalk. Je zag alleen "Alle vragen" en half "Afspraken en spoed".
   Nu lopen ze door op een volgende regel, zoals de filters op de teampagina. */
@media (max-width:640px){
  .x-info-chips{flex-wrap:wrap;overflow-x:visible;margin:0;padding:0}
}

/* 10. 360°-blokken op de telefoon (/verwijzers/, en /locaties/ op 320 px): de afspeelknop viel over de
   naam van de praktijk. Verhouding 4:3 (op heel smalle schermen 1:1) en een iets kleinere knop wat hoger. */
@media (max-width:640px){
  a.vid-ph.ar-169{aspect-ratio:4/3}
  a.vid-ph.ar-169 .play{width:64px;height:64px;top:42%}
}
@media (max-width:400px){
  a.vid-ph.ar-169.ar-169{aspect-ratio:1/1}
}

/* ===== Geen trilling bij aanwijzen (6 okt) =====
   Oorzaak: een element dat bij :hover zelf omhoog of opzij schuift, schuift onder de muis
   vandaan als die op de rand staat (bijv. de onderste 6 px van een kaart). Dan vervalt :hover,
   het element schuift terug, de muis zit er weer in, het schuift weer op … en het trilt.
   Daarom bewegen elementen bij aanwijzen niet meer zelf. De feedback komt van schaduw,
   randkleur, de rode balk bovenin en de pijltjes/iconen binnenin (die bewegen wel; zij
   veranderen het raakvlak van het element niet). */
a.card:hover,.card.hov:hover,.review:hover,.team-card:hover,.pricebox:hover,.cta-band:hover,
.pick-card:hover,.btn:hover,.fbtn:hover,.socials a:hover,.place-tag:hover,
.x-locover-team>.team-card:hover{transform:none}
/* Handschrift: geen effect bij aanwijzen (het heeft zelf een scroll-animatie; groter worden
   laat Safari trillen, zie hieronder) */
.hand:hover{transform:none}

/* ===== Aanklikbare blokken faden alleen in (6 okt) =====
   Extra zekerheid tegen trillen: kaarten, knoppen, reviews, teamkaarten, prijsblokken,
   afsluitblokken, tegels en footerkolommen schuiven tijdens het scrollen niet in, maar faden
   alleen in (fadeIn, alleen doorzichtigheid). Hun plek en raakvlak veranderen daardoor nooit. */
@media (prefers-reduced-motion: no-preference){
@supports (animation-timeline: view()){
  .stagger>:is(a,button,.card,.review,.team-card,.pricebox,.cta-band,.pick-card),
  :is(a,button,.card.hov,.review,.team-card,.pricebox,.cta-band,.pick-card):is(.reveal,.reveal-l,.reveal-r,.reveal-s),
  :where(main .sec, main .sec-sm) :is(a.card,.card.hov,.review,.team-card,.pricebox,.cta-band,a.vid-ph),
  .footer .f-grid>*{animation-name:fadeIn}
}
}

/* ===== Geen trilling in Safari: schaduw verandert niet van grootte (6 okt) =====
   Gemeten in Safari 26 met een meetpagina: het trillen stopte zodra óf de scroll-animatie óf
   de schaduw-bij-aanwijzen uit stond. Safari tekent een blok met scroll-animatie op een eigen
   laag. Groeit bij aanwijzen de schaduw (van geen naar groot), dan groeit die laag mee en
   verspringt de tekening telkens een paar pixels. Oplossing: de schaduw heeft altijd dezelfde
   vorm en is in rust onzichtbaar; bij aanwijzen verandert alleen de kleur. */
a.card,.card.hov{box-shadow:0 24px 50px -18px rgba(16,42,67,0)}
a.card:hover,.card.hov:hover{box-shadow:0 24px 50px -18px rgba(16,42,67,.28)}
.review{box-shadow:0 26px 50px -22px rgba(16,42,67,0)}
.review:hover{box-shadow:0 26px 50px -22px rgba(16,42,67,.35)}
.team-card{box-shadow:0 22px 40px -22px rgba(16,42,67,0)}
.team-card:hover{box-shadow:0 22px 40px -22px rgba(16,42,67,.45)}
.x-locover-team>.team-card,.x-locover-team>.team-card:hover{box-shadow:none}
.pricebox{box-shadow:0 20px 40px -24px rgba(16,42,67,0)}
.pricebox:hover{box-shadow:0 20px 40px -24px rgba(16,42,67,.4)}
.cta-band{box-shadow:0 30px 60px -30px rgba(16,42,67,0)}
.cta-band:hover{box-shadow:0 30px 60px -30px rgba(16,42,67,.6)}
.btn{box-shadow:0 14px 26px -12px rgba(16,42,67,0)}
.btn:hover{box-shadow:0 14px 26px -12px rgba(16,42,67,.55)}
.btn:active,.btn[disabled]:hover{box-shadow:0 14px 26px -12px rgba(16,42,67,0)}
.fbtn{box-shadow:0 10px 20px -14px rgba(16,42,67,0)}
.fbtn:hover{box-shadow:0 10px 20px -14px rgba(16,42,67,.6)}

/* ===== Geen trilling in Safari (2): niets groeit bij aanwijzen buiten zijn blok (6 okt) =====
   Zelfde oorzaak als hierboven: wordt de tekening van een blok met scroll-animatie bij aanwijzen
   groter (grotere schaduw, of iets dat buiten het blok schuift of groeit), dan verspringt Safari.
   Gevonden met een automatische controle van alle aanwijs-effecten op alle pagina's. */
.pick-card{box-shadow:0 16px 30px -20px rgba(16,42,67,0)}
.pick-card:hover{box-shadow:0 16px 30px -20px rgba(16,42,67,.45)}
.brandmark:hover .label{transform:none}
.info-row:hover>svg{transform:none}
.mini-steps li:hover>span{transform:none}
.news-card:hover .d{transform:none}
/* Tekstlinks: het pijltje schuift 5 px op; die ruimte zit nu al in de link zelf */
.tlink:has(svg){padding-right:6px}

/* ===== Aanwijzen: het hele blok wordt donkerblauw (feedback Richard, okt 2026) =====
   "Wanneer je over een blok gaat, niet alleen het rode streepje bovenin, maar het gehele blok
   donkerblauw." Geldt voor de mondzorgblokken op de home, de reviews, de drie kernwaarden op
   /over-ons/missie/ en de personenkaarten in de teamlijst. Donkerblauw met witte tekst; rode
   accenten (streep, aanhalingsteken) blijven. Toetsenbord: zelfde vlak zodra een link in het blok
   focus heeft (:focus-visible) of, bij de teamkaarten, de kaart zelf.
   Zonder trillen in Safari: alleen achtergrond, tekstkleur en doorzichtigheid veranderen; maat,
   plaats en schaduwvorm van het blok blijven gelijk (zie de punten hierboven).
   Aanwijzen alleen met een muis (@media (hover:hover)): op aanraakschermen blijft niets donker hangen. */

/* --- Home, "Alle mondzorg onder één dak" --- */
.x-basis-mz>.card.hov{transition:transform .75s var(--ease),box-shadow .75s var(--ease),border-color .45s,background-color .5s var(--ease),color .5s var(--ease)}
.x-basis-mz>.card.hov .card-list a{transition:padding .45s var(--ease),color .4s,border-color .5s var(--ease)}
@media (hover:hover){
  .x-basis-mz>.card.hov:hover{background:var(--midnight);border-color:var(--midnight);color:#fff}
  .x-basis-mz>.card.hov:hover .card-ico{background:var(--red);color:#fff}
  .x-basis-mz>.card.hov:hover .card-list a{color:#fff;border-color:rgba(255,255,255,.22)}
  .x-basis-mz>.card.hov:hover .card-list a svg{opacity:.8}
  .x-basis-mz>.card.hov:hover .card-list a:hover{color:#fff;text-decoration:underline;text-decoration-color:var(--red);text-decoration-thickness:2px;text-underline-offset:4px}
  .x-basis-mz>.card.hov:hover .card-list a:hover svg{opacity:1}
}
.x-basis-mz>.card.hov:has(:focus-visible){background:var(--midnight);border-color:var(--midnight);color:#fff}
.x-basis-mz>.card.hov:has(:focus-visible)::before{transform:scaleX(1)}
.x-basis-mz>.card.hov:has(:focus-visible) .card-ico{background:var(--red);color:#fff}
.x-basis-mz>.card.hov:has(:focus-visible) .card-list a{color:#fff;border-color:rgba(255,255,255,.22)}
.x-basis-mz>.card.hov:has(:focus-visible) .card-list a svg{opacity:.8}
.x-basis-mz>.card.hov :focus-visible{outline-color:#fff;outline-offset:2px}

/* --- Reviews (home, locatiepagina's, over ons) --- */
.review{transition:transform .75s var(--ease),box-shadow .75s var(--ease),border-color .45s,background-color .5s var(--ease),color .5s var(--ease)}
.review figcaption,.review .muted{transition:color .5s var(--ease)}
@media (hover:hover){
  .review:hover{background:var(--midnight);border-color:var(--midnight);color:#fff}
  .review:hover :is(figcaption,.muted){color:rgba(255,255,255,.8)}
  .review:hover .stars{color:#fff}
}

/* --- Missie: de drie kernwaarden ---
   De eerste kernwaarde heeft links geen binnenruimte (staat gelijk met de kop erboven). Het donkere
   vlak is daarom een laag achter de tekst (::after) die bij de eerste 32 px naar links uitsteekt
   (de rode lijn bovenin, ::before, steekt mee uit), zodat de tekst in alle drie de vlakken even ver
   van de rand staat. Op ≤ 960 px (onder elkaar) steken vlak en lijn aan beide kanten 16 px uit. */
.x-missie-val{isolation:isolate}
.x-missie-val::after{content:"";position:absolute;inset:0;z-index:-1;background:var(--midnight);border-radius:0 0 var(--r) var(--r);opacity:0;transition:opacity .5s var(--ease);pointer-events:none}
.x-missie-val:first-child::after,.x-missie-val:first-child::before{left:-32px}
@media (max-width:960px){.x-missie-val::after,.x-missie-val:first-child::after,.x-missie-val::before,.x-missie-val:first-child::before{left:-16px;right:-16px}}
.x-missie-val>:is(.eyebrow,p){transition:color .5s var(--ease)}
@media (hover:hover){
  .x-missie-val:hover::after{opacity:1}
  .x-missie-val:hover>:is(.eyebrow,p),.x-missie-val:hover .x-missie-word{color:#fff}
}

/* --- Teamlijst op desktop (teampagina en locatiepagina's) ---
   De hele personenkaart (rondje, naam, functie, locaties) wordt donkerblauw en het kaartje met de
   beschrijving sluit er naadloos op aan: één blauw blok. De naam staat al in de kaart, dus die
   wordt in de beschrijving niet herhaald (voorlezers lezen de kaart via aria-label).
   Alleen bij kaarten mét beschrijving (.more); zonder beschrijving blijft het bij de lichte achtergrond. */
@media (min-width:961px){
  .x-locover-team>.team-card{transition:background-color .35s var(--ease),color .35s var(--ease)}
  .x-locover-team>.team-card .meta :is(.muted,.chip){transition:color .35s var(--ease),border-color .35s var(--ease),background-color .35s}
  /* 3 px overlap: geen lichte naad (afronding op halve pixels) tussen kaart en beschrijving */
  .x-locover-team>.team-card .more{top:calc(100% - 3px);width:100%;border-radius:0 0 var(--r) var(--r);transition:opacity .35s,visibility .35s}
  .x-locover-team>.team-card .more>strong:first-child{display:none!important}
  .x-locover-team>.team-card:has(.more):focus-within{background:var(--midnight);color:#fff;border-radius:var(--r) var(--r) 0 0}
  .x-locover-team>.team-card:has(.more):focus-within .meta :is(strong,.muted){color:#fff}
  .x-locover-team>.team-card:has(.more):focus-within .chip{border-color:#fff;color:#fff}
  .x-locover-team>.team-card:has(.more):focus-within .chip::before{background:#fff;border-color:#fff}
  .x-locover-team>.team-card:has(.more):focus-within .chip.g::before{background:transparent}
}
@media (min-width:961px) and (hover:hover){
  .x-locover-team>.team-card:has(.more):hover{background:var(--midnight);color:#fff;border-radius:var(--r) var(--r) 0 0}
  .x-locover-team>.team-card:has(.more):hover .meta :is(strong,.muted){color:#fff}
  .x-locover-team>.team-card:has(.more):hover .chip{border-color:#fff;color:#fff}
  .x-locover-team>.team-card:has(.more):hover .chip::before{background:#fff;border-color:#fff}
  .x-locover-team>.team-card:has(.more):hover .chip.g::before{background:transparent}
}