/* lokale-seo: CSS van de secties op lokale-seo en seo-aalst (docs/prototype/lokale-seo.html en seo-aalst.html,
   inline <style>; de twee pagina's delen dezelfde CSS). Opvolgen staat in seo-shared.css, het kruimelpad in styles.css. */
/* ---------- SEO in Aalst: paginaspecifiek ---------- */
.hand{font-family:var(--font-hand)}
/* hero: zoekresultaten in de buurt, jouw kaartje schuift op */
.sa-track{position:relative;height:300vh}
/* vastgezette hero: zo hoog als de inhoud, met 48px onder het kruimelpad; geen volledig scherm met gecentreerde inhoud, want dat liet boven en onder de hero honderden pixels leeg (zelfde patroon als software-op-maat) */
.sa-sticky{position:sticky;top:40px;display:flex;align-items:center;padding:48px 0 32px}
.sa-stage{position:relative;padding-bottom:20px}
.sa-panel{position:relative;container-type:inline-size;background:var(--color-card);border:1px solid var(--color-rule);border-radius:20px;box-shadow:var(--shadow-lift);overflow:hidden}
.sa-in{font-size:clamp(9px,2.2cqw,14px);line-height:1.35}
.sa-search{display:flex;align-items:center;gap:.8em;margin:1.1em 1.1em .8em;background:#fff;border:1.5px solid var(--color-rule);border-radius:2em;padding:.65em 1.1em;font-weight:500}
.sa-search svg{width:1.2em;height:1.2em;flex:none;color:var(--color-ink-3)}
.sa-search .caret{display:inline-block;width:1px;height:1.1em;background:var(--color-ink);vertical-align:-.2em;margin-left:1px;animation:caret 1s steps(1) infinite}
@keyframes caret{50%{opacity:0}}
.sa-map{position:relative;height:9.5em;margin:0 1.1em;border-radius:.9em;overflow:hidden;background:#E9E2D3}
.sa-map svg{position:absolute;inset:0;width:100%;height:100%}
.sa-map .river{fill:none;stroke:#A9C0CC;stroke-width:5}
.sa-map .road{fill:none;stroke:#F6F2EA;stroke-width:3}
.sa-map .town{font-family:var(--font-sans);font-size:11px;fill:#8C8475;font-weight:600}
.sa-pin{position:absolute;width:1.9em;height:1.9em;margin:-1.9em 0 0 -.95em;border-radius:50% 50% 50% 0;rotate:-45deg;background:var(--color-ink-2);display:flex;align-items:center;justify-content:center;box-shadow:0 .2em .4em rgb(25 23 20 / .2);transition:background .3s,scale .3s}
.sa-pin b{rotate:45deg;color:#fff;font-size:.8em;font-weight:800}
.sa-pin.me{background:var(--color-accent);scale:1.15;z-index:2}
.sa-list{position:relative;margin:.8em 1.1em 1.1em;height:calc(5 * 4.3em + 4 * .45em)}
.sa-row{position:absolute;left:0;right:0;top:0;height:4.3em;display:grid;grid-template-columns:2em minmax(0,1fr) auto;gap:.8em;align-items:center;background:#fff;border:1px solid var(--color-rule);border-radius:.8em;padding:0 .9em;transform:translateY(calc(var(--pos,0) * 4.75em));transition:transform .7s cubic-bezier(.2,.8,.2,1),border-color .3s,box-shadow .3s}
.sa-row .rk{width:1.8em;height:1.8em;border-radius:50%;background:var(--color-paper-2);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.85em}
.sa-row b{display:block;font-weight:700}
.sa-row small{display:block;color:var(--color-ink-3);font-size:.85em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sa-row .stars{color:#C9B27A;letter-spacing:.05em;font-size:.85em;white-space:nowrap}
.sa-row.me{border:2px solid var(--color-accent);box-shadow:0 .8em 1.6em -.6em rgb(217 71 31 / .35);z-index:2}
.sa-row.me .rk{background:var(--color-accent);color:#fff}
.sa-row.me .stars{color:var(--color-accent)}
.sa-row .gap{display:block;height:.5em;border-radius:1em;background:#EEE9E0;margin-top:.35em}
/* post-it met wat er in orde gebracht wordt */
.sa-postit{position:absolute;right:-10px;bottom:-112px;width:min(250px,52%);background:var(--color-postit);padding:14px 16px 16px;box-shadow:0 14px 26px rgb(25 23 20 / .2);rotate:2.5deg;font-family:var(--font-hand);color:#3A3420;z-index:4}
.sa-postit .sa-postit-t{font-family:var(--font-hand);font-weight:400;font-size:19px;color:#3A3420;margin-bottom:6px}
.sa-postit ol{list-style:none;margin:0;padding:0;font-size:15.5px;line-height:1.25}
.sa-postit li{display:grid;grid-template-columns:20px 1fr;gap:6px;padding:3px 0;opacity:.5;transition:opacity .3s}
.sa-postit li::before{content:"";width:14px;height:14px;border:1.5px solid #3A3420;border-radius:3px;margin-top:2px}
.sa-postit li.on{opacity:1}
.sa-postit li.on::before{content:"✓";border-color:var(--color-accent-dark);color:var(--color-accent-dark);font-family:var(--font-sans);font-weight:800;font-size:12px;line-height:12px;text-align:center}
.sa-disc{margin-top:18px;max-width:50%;font-size:13px;color:var(--color-ink-3)}
/* wat we doen: geannoteerde pagina */
.sa-anno{position:relative}
.sa-page{background:#fff;border-radius:14px;box-shadow:0 30px 60px -24px rgb(25 23 20 / .28),0 0 0 1px rgb(25 23 20 / .06);overflow:hidden;font-size:13px}
.sa-page .bar{height:32px;background:#F1EEE8;display:flex;align-items:center;gap:6px;padding:0 12px;font-size:11px;color:var(--color-ink-3)}
.sa-page .bar i{width:8px;height:8px;border-radius:50%;background:#DAD3C6}
.sa-page .tab{margin-left:10px;background:#fff;border-radius:6px 6px 0 0;padding:4px 10px;align-self:flex-end;font-weight:600;color:var(--color-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:70%}
.sa-page .body{padding:18px 20px 20px;display:grid;gap:12px}
.sa-mark{position:relative;border-radius:6px;transition:box-shadow .4s}
.sa-anno.in .sa-mark{box-shadow:0 0 0 2px var(--color-accent)}
.sa-mark.ghost{border:1.5px dashed var(--color-ink-3);padding:8px 10px;font-family:var(--font-mono);font-size:11px;color:var(--color-ink-3)}
.sa-anno .lab{position:absolute;font-family:var(--font-hand);color:var(--color-accent);font-size:17px;line-height:1.1;white-space:nowrap;opacity:0;transition:opacity .4s var(--d,0s)}
.sa-anno.in .lab{opacity:1}
/* wat je zelf kan doen: schriftblad */
.sa-paper{background-color:#FDFCF7;background-image:linear-gradient(90deg,transparent 46px,#E9A6A0 46px,#E9A6A0 47px,transparent 47px),repeating-linear-gradient(transparent 0 31px,#D7E3EC 31px 32px);border-radius:6px;box-shadow:0 24px 48px -24px rgb(25 23 20 / .35);padding:26px 22px 26px 62px;rotate:-.6deg}
.sa-paper h3{font-family:var(--font-hand);font-weight:400;font-size:24px;color:var(--color-blueprint);line-height:32px}
.sa-paper ul{list-style:none;margin:8px 0 0;padding:0}
.sa-paper li{padding:0 0 16px;line-height:1.45}
.sa-paper li b{display:block;font-family:var(--font-hand);font-weight:400;font-size:20px;color:var(--color-blueprint);line-height:32px}
.sa-paper li span{display:block;font-size:15px;color:var(--color-ink-2)}
/* herkenning: drie kaartjes van één zin */
.sa-rec{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.sa-rec p{padding:22px 24px;font-family:var(--font-serif);font-size:20px;font-weight:600;line-height:1.3;color:var(--color-ink)}
@media (max-width:767px){
.sa-rec{grid-template-columns:minmax(0,1fr)}
}
/* zo verloopt een meting */
.sa-steps{list-style:none;margin:0;padding:0;position:relative}
.sa-steps::before{content:"";position:absolute;left:17px;top:18px;bottom:18px;width:2px;background:var(--color-rule)}
.sa-steps li{position:relative;display:grid;grid-template-columns:36px minmax(0,1fr);gap:16px;padding:0 0 26px}
.sa-steps li > span{width:36px;height:36px;border-radius:50%;background:var(--color-paper-2);border:2px solid var(--color-ink);display:flex;align-items:center;justify-content:center;font-family:var(--font-serif);font-weight:700;position:relative;z-index:1}
.sa-steps b{display:block;font-family:var(--font-serif);font-size:21px;font-weight:600;line-height:1.2;margin-top:4px}
.sa-steps p{color:var(--color-ink-2);font-size:15.5px;margin-top:4px}
/* smalle schermen en minder beweging */
.static .sa-track{height:auto}
.static .sa-sticky{position:relative;top:auto;min-height:0;padding:56px 0 24px}
@media (max-width:1023px){
.sa-postit{position:relative;right:auto;bottom:auto;width:auto;max-width:320px;margin:-18px 0 0 auto}
.sa-disc{margin-top:18px;max-width:none}
}
@media (prefers-reduced-motion:reduce){
.sa-track{height:auto}
.sa-sticky{position:relative;top:auto;min-height:0}
}
@media (max-width:640px){
.sa-anno .lab{white-space:normal;max-width:78%;font-size:15px}
}
/* gsm: tekst in de illustratie leesbaar houden */
@media (max-width:640px){
.sa-in{font-size:max(10.5px,2.2cqw)}
}
/* dienstpagina's: overal dezelfde ruimte rond de hero. Kruimelpad tot de eerste tekst 32px (gsm) en 48px (desktop),
   laatste regel van de hero tot de titel van het volgende blok 112px en 144px. De marges hieronder corrigeren de
   eigen opbouw van deze hero naar die maten; in Wagtail wordt het één gedeelde instelling op de heroblokken. */
/* tekst en beeld bovenaan uitlijnen, niet centreren: anders zakt de H1 mee met de hoogte van het beeld en verschilt de afstand per schermbreedte */
.svc-hero-cols,.svc-hero .sa-sticky,.svc-hero .wl-sticky{align-items:start}
.svc-hero{margin-top:-24px;margin-bottom:4px}
@media (min-width:768px) and (max-width:1023px){
.svc-hero{margin-top:-24px;margin-bottom:4px}
}
@media (min-width:1024px){
.svc-hero{margin-top:0px;margin-bottom:109px}
}
/* volgt er een blok met een gekleurde achtergrond, dan begint die achtergrond minstens 48/64px onder de hero; de titel van dat blok blijft op 112/144px door een kleinere bovenpadding */
.svc-next{padding-top:64px}
@media (min-width:768px) and (max-width:1023px){
.svc-next{padding-top:64px}
}
@media (min-width:1024px){
.svc-next{padding-top:80px}
}
/* kleine desktop (1024 tot 1279px): de hero bouwt hier anders op, dus een eigen correctie */
@media (min-width:1024px) and (max-width:1279px){
.svc-hero{margin-top:0px;margin-bottom:133px}
.svc-next{padding-top:80px}
}
@media (min-width:1280px) and (max-width:1439px){
.svc-hero{margin-top:0px;margin-bottom:133px}
.svc-next{padding-top:80px}
}

/* omzetting naar Wagtail: tekst uit rich text */
.lede.rt p + p{margin-top:.75em}
.sa-what-rt.rt p + p{margin-top:0}