/* Aanvullingen op site.css (uit Claude Design) voor de echte website.
   site.css zelf zo min mogelijk aanpassen; wijzigingen hier. */

/* Verborgen elementen (mobiel menu, locatiemenu, formulierstappen) echt verbergen,
   ook als een component zelf een display-waarde heeft. */
[hidden]{display:none!important}

/* Geen scrollen van de pagina achter het open mobiele menu */
html.menu-open{overflow:hidden}

/* ===== Topbalk: gekozen praktijk =====
   html[data-ve-loc="h|g"] wordt al tijdens het laden gezet (inline script in header.njk),
   zodat de juiste toestand meteen zichtbaar is. Alleen verbergregels, zodat de mobiele
   regel .tb-phones{display:none} van site.css blijft werken. */
html[data-ve-loc] .loc-lbl-none,
html:not([data-ve-loc="h"]) .loc-lbl-h,
html:not([data-ve-loc="g"]) .loc-lbl-g,
html[data-ve-loc] .tb-noloc,
html:not([data-ve-loc="h"]) .tb-loc-h,
html:not([data-ve-loc="g"]) .tb-loc-g,
html:not([data-ve-loc]) .tb-loc-today,
html:not([data-ve-loc]) .loc-opt[data-clear]{display:none}
.loc-lbl{white-space:nowrap}
.loc-opt:focus-visible{outline:3px solid var(--midnight);outline-offset:-3px}

/* Topbalk op smalle schermen: één regel, zoals in het mobiele ontwerp
   (locatieknop links, Mijn afspraak rechts; Spoed staat dan in de snelbalk onderin). */
@media (max-width:520px){
  .topbar{font-size:14px}
  .topbar .wrap{flex-wrap:nowrap;gap:12px;padding-left:20px;padding-right:20px}
  .tb-l,.tb-r{flex-wrap:nowrap;gap:12px;min-width:0}
  .tb-r a[href="/spoed/"]{display:none}
  .tb-r .tb-item{white-space:nowrap}
  .tb-r .tb-item svg{display:none}
  .loc-btn{border:0;padding:0;min-height:44px;font-size:14px;font-weight:600;background:transparent}
  .loc-btn:hover{background:transparent}
  .loc-menu{min-width:0;width:min(320px,calc(100vw - 40px))}
}
@media (max-width:359px){
  .topbar,.loc-btn{font-size:13px}
  .loc-btn>svg{display:none}
}

/* ===== Uitklapmenu's in het hoofdmenu =====
   .open: geopend met aanraken of pijltjestoets; .shut: gesloten met Escape
   (ook als muis of focus er nog op staat). */
.dd.open>.dd-panel{visibility:visible;clip-path:inset(0 -90px -110px -90px);transition:clip-path .75s var(--ease)}
.dd.open>.dd-panel>*{opacity:1;transform:none;transition:opacity .52s .18s,transform .68s var(--ease) .18s}
.dd.open>.dd-panel::before{transform:scaleX(1)}
.dd.open>.nav-a svg{transform:rotate(180deg)}
.dd.open>.nav-a::after{transform:scaleX(1)}
.dd.shut>.dd-panel{visibility:hidden;clip-path:inset(0 0 100% 0);transition:none}
.dd.shut>.dd-panel>*{opacity:0;transform:translateY(-6px)}
.dd.shut>.dd-panel::before{transform:scaleX(0)}
.dd.shut>.nav-a svg{transform:none}
.dd-panel a:focus-visible{outline:3px solid var(--midnight);outline-offset:-3px;background:var(--mist)}

/* ===== Mobiel menu ===== */
/* de snelbalk (z-index 70) zou anders over het menu vallen */
html.menu-open .mbar{display:none}
.mnav{overscroll-behavior:contain}

/* ===== Teamfilters en veelgestelde vragen ===== */
.fbtn:focus-visible{outline:3px solid var(--midnight);outline-offset:3px}
.fbtn[aria-pressed="true"]{background:var(--midnight);color:#fff}

/* ===== Knop in amber (feedback praktijk, okt 2026) =====
   Gebruik: class="btn btn-amber". Zelfde opbouw als .btn-red/.btn-navy in site.css:
   vlak in amber met donkerblauwe tekst; bij aanwijzen schuift er een donkerblauw vlak in
   en wordt de tekst wit. Op donkere vlakken schuift er wit in en blijft de tekst donkerblauw.
   Iconen volgen de tekstkleur (currentColor). Amber nooit tinten: geen lichtere/donkere amber.
   Dubbele klasse (.btn.btn-amber) zodat regels als ".footer a" of ".topbar a" (witte tekst,
   onderstreping bij aanwijzen) de knop niet onleesbaar maken (wit op amber haalt geen AA). */
.btn.btn-amber{background:var(--amber);color:var(--midnight)}
.btn-amber::before{background:var(--midnight)}
.btn.btn-amber:hover{color:#fff;text-decoration:none}
.btn-amber::after{background:rgba(255,255,255,.3)}
:is(.dark,.cta-band,.plate,.mega-cta) .btn-amber::before{background:#fff}
:is(.dark,.cta-band,.plate,.mega-cta) .btn.btn-amber:hover{color:var(--midnight)}
.btn.btn-amber:is([disabled],.is-disabled){background:var(--line);color:var(--muted)}

/* ===== Spoed beter zichtbaar (feedback praktijk, okt 2026) ===== */
/* Topbalk (desktop/tablet): "Spoed" als amber knop met donkerblauwe tekst, even hoog als de
   locatieknop links (32 px). Bij aanwijzen wit. Focus: witte rand (ux.css, punt 1).
   Op ≤ 520 px staat Spoed niet in de topbalk maar in de snelbalk onderin. */
.tb-r a.tb-spoed{position:relative;min-height:32px;padding:0 14px;border-radius:4px;background:var(--amber);color:var(--midnight);font-weight:600;line-height:1;transition:background .38s,color .38s}
.topbar a.tb-spoed:hover{background:#fff;color:var(--midnight);text-decoration:none}
/* Aanraakschermen: raakvlak 44 px hoog, zonder dat de knop de hele topbalk vult */
@media (max-width:1060px){
  .tb-r a.tb-spoed{min-height:32px}
  .tb-r a.tb-spoed::after{content:"";position:absolute;left:0;right:0;top:-6px;bottom:-6px}
}

/* Snelbalk onderin (telefoon): Bellen wit, Spoed rood, Inschrijven amber.
   Contrast: donkerblauw op wit, wit op rood, donkerblauw op amber (alle ruim boven AA). */
.mbar a.spoed{background:var(--red);color:#fff;border-left:0}
.mbar a.go{background:var(--amber);color:var(--midnight);border-left:0}
.mbar a:focus-visible{outline-offset:-6px;border-radius:6px}
.mbar a.spoed:focus-visible{outline-color:#fff}

/* ===== Footer (feedback praktijk, okt 2026) ===== */
/* "Spoed? Lees wat je moet doen": rode knop met witte tekst (rode tekst op donkerblauw haalt geen AA).
   .footer a zet een eigen overgang en onderstreping; voor knoppen de knopovergang terug. */
.footer a.btn{transition:color .52s var(--ease),border-color .52s var(--ease),transform .52s var(--ease),box-shadow .52s var(--ease)}
.footer a.btn:hover{text-decoration:none}
/* In een smalle footerkolom (tablet liggend, telefoon) mag de knoptekst netjes over twee regels */
.footer a.f-spoed{max-width:100%;white-space:normal;text-wrap:balance;line-height:1.25;padding-block:10px;text-align:center}
/* Klantenvertellen uitgelicht in amber: amber lijn ervoor, score groot in amber met de naam
   (amber link) ernaast, toelichting eronder. Leesvolgorde blijft "Klantenvertellen 9,1 gemiddeld uit …".
   Amber op donkerblauw: contrast 8,8:1. */
.f-kv{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:baseline;column-gap:12px;row-gap:4px;margin-top:8px;padding-left:14px;border-left:3px solid var(--amber);font-size:15px;line-height:1.45}
.f-kv>a{grid-column:2;grid-row:1}
.f-kv-score{grid-column:1;grid-row:1;color:var(--amber);font-size:34px;font-weight:600;line-height:1;letter-spacing:-.01em}
.f-kv-tekst{grid-column:1/-1;grid-row:2}
.footer .f-kv a:not(.btn){color:var(--amber);font-size:17px;font-weight:600;text-decoration:underline;text-underline-offset:3px}
.footer .f-kv a:not(.btn):hover{color:var(--amber);text-decoration-thickness:2px}
.f-kv-stand{opacity:.85}

/* ===== Rode spoedbalk op /locaties/ (feedback ronde 2, okt 2026) =====
   Gebruik: <section class="sec-sm x-spoedbalk">. Rood vlak met witte tekst.
   Contrast: wit op rood (#E30B11) 4,9:1 (AA), wit op donkerblauw (knop) 14:1.
   De knop .btn-navy vult bij aanwijzen met wit (rood vlak op rood zou wegvallen). */
.x-spoedbalk{background:var(--red);color:#fff}
.x-spoedbalk p{font-weight:400}
.x-spoedbalk a:not(.btn){color:#fff;text-decoration:underline;text-underline-offset:3px}
.x-spoedbalk a:not(.btn):hover{color:#fff;text-decoration-thickness:2px}
.x-spoedbalk :focus-visible{outline-color:#fff}
.x-spoedbalk .spoed-dot{background:#fff;animation-name:x-ping-wit}
@keyframes x-ping-wit{0%{box-shadow:0 0 0 0 rgba(255,255,255,.7)}70%,100%{box-shadow:0 0 0 10px rgba(255,255,255,0)}}
.x-spoedbalk .btn-navy::before{background:#fff}
.x-spoedbalk .btn-navy:hover{color:var(--midnight)}

/* ===== Werken bij: twee vacatures onder elkaar (feedback ronde 2, okt 2026) =====
   De tweede vacature volgt zonder eigen bovenruimte op de eerste (zelfde witte vlak);
   een dunne lijn scheidt ze. */
.x-vac-volgende>.wrap::before{content:"";display:block;height:1px;background:var(--line);margin-bottom:clamp(16px,4vw,48px)}

/* ===== Facturatie: blok "Pas op voor nepfacturen" (feedback ronde 2, okt 2026) =====
   Licht vlak met een rode lijn links, zodat de waarschuwing opvalt zonder te schreeuwen. */
.x-nepfactuur{background:var(--mist);border-left:4px solid var(--red);border-radius:0 var(--r) var(--r) 0;padding:22px 24px;display:flex;flex-direction:column;gap:12px}
.prose .x-nepfactuur h3{margin-top:0}
@media (max-width:640px){.x-nepfactuur{padding:18px 16px}}

/* ===== Handgeschreven accenten springen iets naar links uit (feedback Richard, okt 2026) =====
   "Die speelse tekst mag altijd iets naar links uitgelijnd worden" (zoals in het brandbook, waar de
   handletter los van de tekstkolom staat). Alle .hand-accenten schuiven daarom met een negatieve
   marge iets voor de tekstkolom uit: desktop ~½ letterhoogte (max 22 px), tablet max 12 px,
   telefoon max 6 px (de paginamarge is daar 20 px: nooit buiten beeld, geen zijwaarts scrollen).
   Grote handgeschreven koppen (bedankpagina's) schuiven dankzij de bovengrens niet verder dan 22 px.
   Gecentreerde accenten (bv. /locaties/, /over-ons/) schuiven niet. */
.hand{--hand-uit:min(.5em,22px);margin-left:calc(-1 * var(--hand-uit))}
@media (max-width:960px){.hand{--hand-uit:min(.35em,12px)}}
@media (max-width:640px){.hand{--hand-uit:min(.2em,6px)}}
/* Handletter direct boven een titel springt verder uit (feedback Richard, 22 okt 2026): "Bij gebruik
   van het geschreven font in een blok boven een titel, graag verder verspringen naar links." Zijn
   voorbeeld ("Persoonlijke aandacht" op de home) springt bij 1440 px schermbreedte ~85 px uit: twee
   keer de letterhoogte (2em, max 84 px). Begrensd door de witruimte naast de pagina (.wrap: max
   1240 px, 40 px marge): altijd minstens 24 px van de schermrand, dus 24 px tot 1240 px breed, daarna
   oplopend tot 84 px vanaf ~1360 px. Andere accenten (onder een intro, quotes) houden de kleine
   uitsprong. Staat vóór de regel voor gecentreerde accenten, zodat die gecentreerd blijven. */
@media (min-width:961px){
  .hand:has(+ :is(h1,h2,h3,.h1,.h2,.h3)){--hand-uit:min(2em,84px,max(24px,calc(50vw - 596px)))}
}
:is([style*="text-align: center"],[style*="text-align:center"],[style*="align-items: center"],[style*="align-items:center"])>.hand{--hand-uit:0px}

/* ===== Handletter niet meer afgeknipt (feedback Richard, okt 2026) =====
   "Samen houden we je gebit gezond" verloor onderaan de staart van de g. De schrijfanimatie
   (writeOn in site.css) knipte boven en onder precies op de regel (inset 0, regelhoogte 1,05),
   terwijl de staarten van g, j en p en de lussen van de handletter daarbuiten vallen. Zelfde naam,
   later in de cascade, dus deze versie geldt overal. Ruimte boven, onder en links (de letter staat
   sinds hierboven iets naar links); alleen de rechterkant schuift open. Maten in em, zodat het
   voor elke lettergrootte en ook voor Market Pro klopt. */
@keyframes writeOn{
  from{clip-path:inset(-.4em calc(100% + .7em) -.6em -.7em)}
  to{clip-path:inset(-.4em -5% -.6em -.7em)}
}

/* ===== Vaste zijkolom op desktop als donkerblauw vlak (feedback Richard, okt 2026) =====
   "Doordat de opmaak gelijk is voelt het als veel tegelijk. Misschien kan die rechtersectie een
   donkerblauwe achtergrond krijgen op het moment dat hij blijft staan?" De zijkolom (.sticky-aside:
   inhoudsopgave, belkaart, klachtenkaart …) is op desktop één donkerblauw vlak met witte tekst,
   zodat de tekst links de aandacht houdt.
   Keuze: altijd donkerblauw op desktop, niet pas op het moment dat de kolom gaat vaststaan.
   - Rustiger: een kleurwissel net als je begint te lezen gebeurt in je ooghoek en trekt de blik
     juist naar rechts; bij op en neer scrollen bovenaan zou hij steeds aan en uit gaan.
   - Overal gelijk: op /afspraken/, /afspraken/verzetten/ en /spoed/ is de kolom hoger dan de tekst
     ernaast en blijft hij dus nooit staan; met een wissel zou hij daar altijd wit blijven.
   - Geen JavaScript nodig, dus ook geen flits van wit naar blauw bij het laden.
   Het vlak heeft 24 px binnenruimte en een even grote negatieve marge: de inhoud staat precies waar
   hij stond, het vlak steekt 24 px rondom uit. Vast op 104 px (vlak 15 px onder de kopbalk, inhoud
   op 128 px; was 120). Onder 961 px staat de kolom onder de tekst en blijft hij ongewijzigd.
   Kaarten in het vlak worden een iets lichtere donkerblauwe tegel; een foto in een kaart blijft
   gewoon zichtbaar. Contrast: wit op #102A43 14:1, wit op de tegel (#1B3A58) 11:1, grijze bijtekst
   (wit 80%) 8:1. Knoppen keren om: rood vult bij aanwijzen wit, donkerblauw wordt wit met rood. */
@media (min-width:961px){
  .sticky-aside{top:104px;margin:-24px;padding:24px;border-radius:12px;background:var(--midnight);color:#fff}
  .sticky-aside :is(.eyebrow,h2,h3,h4,.h3,.h4,strong,p){color:#fff}
  .sticky-aside .muted{color:rgba(255,255,255,.8)}
  .sticky-aside a:not(.btn),.sticky-aside a:not(.btn):hover{color:#fff}
  .sticky-aside .card-b>p a{text-decoration-color:#fff}
  .sticky-aside :focus-visible{outline-color:#fff}
  .sticky-aside .hand{color:#fff}
  /* inhoudsopgave */
  .sticky-aside .toc{border-left-color:rgba(255,255,255,.28)}
  .sticky-aside .toc a:hover{border-left-color:var(--red)}
  /* kaarten: lichtere donkerblauwe tegel */
  .sticky-aside .card{background:var(--navy-2);border-color:rgba(255,255,255,.16);color:#fff}
  .sticky-aside a.card:hover{border-color:rgba(255,255,255,.5);color:#fff}
  .sticky-aside a.card:hover .go{color:#fff}
  .sticky-aside .info-row:hover>svg{color:#fff}
  .sticky-aside .tlink::before{background:#fff}
  /* knoppen: op donkerblauw omkeren (zelfde logica als .dark in site.css) */
  .sticky-aside .btn-red::before{background:#fff}
  .sticky-aside .btn-red:hover{color:var(--midnight)}
  .sticky-aside .btn-navy{background:#fff;color:var(--midnight)}
  .sticky-aside .btn-navy:hover{color:#fff}
  .sticky-aside .btn-amber::before{background:#fff}
  .sticky-aside .btn.btn-amber:hover{color:var(--midnight)}
  /* Kolom met maar één kaart (/afspraken/, /afspraken/verzetten/, /contact/): geen vlak om de kaart
     heen (dat gaf een dubbele rand), de kaart zelf is het donkerblauwe vlak. */
  .sticky-aside:has(>.card:only-child){top:120px;margin:0;padding:0;border-radius:0;background:transparent}
  .sticky-aside>.card:only-child{background:var(--midnight);border-color:var(--midnight)}
}

/* ===== Logo met slogan volgens het brandbook (feedback Richard, 22 okt 2026) =====
   Maten overgenomen uit het logobestand van Richard (rode balk "vaneckmondzorg.nl" met "Een glimlach
   voor iedereen!" eronder), uitgedrukt in de lettergrootte van de balk (--bm, 1em hieronder):
   - rode balk 1,46em hoog; tekst 0,57em van de zijkanten, iets boven het midden (ruimte voor de g);
   - slogan in Market Pro op 0,91 x de balkletter; hij begint ~2,15em na de linkerrand van de balk,
     steekt ~0,76em rechts buiten de balk uit en staat 0,24em onder de balk.
   Het blok blijft altijd rechts uitgelijnd binnen zichzelf (ook in de footer op de telefoon), zodat
   slogan en balk overal in dezelfde verhouding staan. */
.brandmark{--bm:clamp(19px,1.8vw,26px);font-size:var(--bm);gap:0;align-items:flex-end}
.brandmark .label{font-size:1em;line-height:1.2;padding:.06em .57em .2em}
.brandmark .slogan{font-size:.908em;line-height:1.1;margin:.24em -.79em 0 0;white-space:nowrap}
.footer .brandmark{align-items:flex-end}

/* ===== Logo op een foto: rode balk midden op de onderrand (feedback Richard, 22 okt 2026) =====
   "Het logo + slogan hoort bij gebruik op een afbeelding geplaatst te zijn op de onderste rand van de
   afbeelding, waarbij het rode vlak op het midden van de rand is geplaatst" (brandbook, pagina 14).
   Omhulsel .foto-merk = foto + logo. Het logo staat onder de foto in de normale flow en schuift een
   halve balkhoogte (0,73em) omhoog: de balk ligt half op de foto, half eronder; de slogan staat
   helemaal onder de foto, op de achtergrond van de sectie. Rechts op 5,5% van de fotobreedte, zoals
   in het brandbook. Omdat het logo in de flow staat, schuift de inhoud eronder vanzelf mee. */
.foto-merk{position:relative;display:flex;flex-direction:column}
.foto-merk>.brandmark{position:relative;z-index:1;align-self:flex-end;margin:calc(-.73 * var(--bm)) 5.5% 0 0}