/* ============================================================
   WERKGEBIED — de hub en de gemeentepagina's

   .gem-zoek     het zoekveld boven de lijst
   .gem-lijst    de alfabetische gemeentelijst per provincie
   .gem-feiten   de harde gegevens op een gemeentepagina

   De lijst is een gewone lijst met gewone links. Het zoekveld
   verbergt er alleen rijen in. Valt het script weg, dan staat de
   volledige index er nog, en dat is precies de bedoeling: een lokale
   laag die JavaScript nodig heeft om zichtbaar te zijn, bestaat voor
   een zoekmachine niet.
   ============================================================ */

/* ══ HET ZOEKVELD ══════════════════════════════════════════ */
.gem-zoek{margin-top:clamp(24px,3.4vw,40px); max-width:520px}
.gem-zoek input{width:100%; font:inherit; font-size:clamp(1rem,1.3vw,1.1rem);
  padding:clamp(14px,1.6vw,18px) clamp(16px,1.8vw,20px);
  color:var(--inkt); background:#fff; border:1px solid var(--lijn);
  border-radius:var(--rond-s) 0 var(--rond-s) 0;
  transition:border-color .25s var(--ease)}
.gem-zoek input:focus{outline:2px solid var(--indigo); outline-offset:2px;
  border-color:var(--indigo)}
.gem-zoek input::-webkit-search-cancel-button{cursor:pointer}
.gem-uitkomst{margin:10px 0 0; min-height:1.4em; font-size:14px; color:var(--grijs-600)}

/* ══ DE LIJST ══════════════════════════════════════════════ */
.gem-groepen{display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(28px,4vw,56px); margin-top:clamp(28px,4vw,48px)}
@media(max-width:820px){ .gem-groepen{grid-template-columns:1fr} }
.gem-groep h3{font-family:var(--disp); font-weight:600;
  font-size:clamp(1.15rem,1.7vw,1.4rem); letter-spacing:-.03em;
  padding-bottom:12px; border-bottom:1px solid var(--lijn)}
.gem-groep h3 a{color:var(--indigo-900); transition:color .2s var(--ease)}
.gem-groep h3 a:hover{color:var(--indigo)}
.gem-groep h3 span{font-family:var(--tekst); font-weight:400; font-size:13.5px;
  letter-spacing:0; color:var(--grijs-600)}

.gem-lijst{list-style:none; margin:14px 0 0; padding:0;
  columns:2; column-gap:clamp(18px,2.4vw,30px)}
@media(max-width:520px){ .gem-lijst{columns:1} }
.gem-lijst li{break-inside:avoid; margin-bottom:3px}
.gem-lijst a{display:block; padding:5px 0 5px 16px; position:relative;
  font-size:15px; color:var(--inkt); transition:color .2s var(--ease)}
.gem-lijst a:hover{color:var(--indigo)}
/* Een streepje voor de gemeenten waar aantoonbaar werk ligt. Kleur
   alleen zou het verschil onzichtbaar maken voor wie kleur niet
   onderscheidt, dus het is een vorm en geen tint.              */
.gem-lijst [data-werk] a::before{content:""; position:absolute;
  left:0; top:calc(50% - 3px); width:8px; height:6px;
  border-radius:2px 0 2px 0; background:var(--goud)}
.gem-lijst li[hidden]{display:none}
.gem-leeg{margin-top:clamp(20px,2.6vw,28px); color:var(--grijs-600)}
.gem-leeg[hidden]{display:none}
.gem-leeg a:not(.knop):not(.knop-leeg){color:var(--indigo); font-weight:600; text-decoration:underline;
  text-decoration-thickness:1px; text-underline-offset:3px}

/* ══ DE HARDE GEGEVENS OP EEN GEMEENTEPAGINA ═══════════════
   Postcode, deelgemeenten, provincie. Alles wat hier staat komt
   uit een bron met naam; wat er niet is, staat er niet.        */
.gem-feiten{list-style:none; margin:clamp(24px,3.4vw,40px) 0 0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:clamp(18px,2.4vw,32px)}
@media(max-width:560px){ .gem-feiten{grid-template-columns:1fr} }
.gem-feiten li{padding-top:clamp(14px,1.6vw,18px); border-top:3px solid var(--goud)}
.gem-feiten b{display:block; font-family:var(--disp); font-weight:600;
  font-size:clamp(1.05rem,1.5vw,1.25rem); letter-spacing:-.03em;
  line-height:1.2; color:var(--indigo-900)}
.gem-feiten span{display:block; margin-top:6px; font-size:14px;
  line-height:1.55; color:var(--grijs-600)}

/* ══ WAT WIJ HIER HET MEEST DOEN ═══════════════════════════ */
.gem-stielen{display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(16px,2.2vw,26px); margin-top:clamp(28px,4vw,48px)}
@media(max-width:860px){ .gem-stielen{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media(max-width:520px){ .gem-stielen{grid-template-columns:1fr} }
.gem-stielen a{display:block; padding:clamp(20px,2.4vw,28px);
  background:#fff; border:1px solid var(--lijn);
  border-radius:var(--rond-m) 0 var(--rond-m) 0;
  transition:border-color .25s var(--ease), transform .25s var(--ease)}
.gem-stielen a:hover{border-color:var(--kleur,var(--indigo)); transform:translateY(-2px)}
.gem-stielen b{display:flex; align-items:center; gap:10px;
  font-family:var(--disp); font-weight:600; font-size:clamp(1rem,1.4vw,1.15rem);
  letter-spacing:-.025em; color:var(--indigo-900)}
.gem-stielen b::before{content:""; width:14px; height:14px; flex:none;
  border-radius:5px 0 5px 0; background:var(--kleur,var(--indigo))}
.gem-stielen span{display:block; margin-top:10px; font-size:14.5px;
  line-height:1.6; color:var(--grijs-600)}

/* ══ DE BUURT ══════════════════════════════════════════════ */
.gem-buurt{display:flex; flex-wrap:wrap; gap:8px; margin-top:clamp(24px,3.4vw,36px)}
/* De twintig dienstlinks onder de zes stielkaarten. Zelfde chipvorm als
   de buurgemeenten, maar in de kleur van de stiel en met wat meer lucht
   erboven, want het is een weg naar beneden en geen voetnoot. */
.gem-diensten{margin-top:clamp(10px,1.4vw,14px)}
.gem-diensten a{border-color:var(--grijs-200)}
.gem-diensten a:hover{border-color:var(--indigo); color:var(--indigo)}
.gem-buurt a{display:inline-flex; align-items:center; gap:8px;
  padding:9px 15px; font-size:14px; color:var(--inkt);
  background:#fff; border:1px solid var(--lijn);
  border-radius:var(--rond-s) 0 var(--rond-s) 0;
  transition:border-color .25s var(--ease), color .25s var(--ease)}
.gem-buurt a:hover{border-color:var(--indigo); color:var(--indigo)}

/* De terugknop onder een blok. Zonder eigen marge plakt hij tegen
   de kaarten of de gemeentenamen erboven, want die dragen hun
   afstand aan de bovenkant en niet aan de onderkant.           */
.gem-terug{margin:clamp(28px,4vw,44px) 0 0}
.gem-bron{margin:clamp(16px,2vw,22px) 0 0; color:var(--grijs-600)}

/* De wegwijzer onder de zes stielkaarten: hij staat er alleen als er
   voor deze gemeente echt een diepere pagina bestaat. */
.gem-wegwijzer{margin:clamp(20px,2.6vw,28px) 0 0; font-size:15px; color:var(--grijs-600)}

/* De bronvermelding staat dicht. GeoNames en Statbel vallen onder
   CC BY 4.0 en die licentie vraagt naamsvermelding, dus hij mag niet
   weg; maar uitgeschreven onder elke cijferstrip leest hij als kleine
   lettertjes waar niemand om vroeg. */
.gem-bron{margin:clamp(16px,2vw,22px) 0 0}
.gem-bron > summary{display:inline-flex; align-items:center; gap:7px;
  cursor:pointer; font-size:13.5px; color:var(--grijs-600);
  list-style:none; transition:color .2s var(--ease)}
.gem-bron > summary::-webkit-details-marker{display:none}
.gem-bron > summary::before{content:""; width:7px; height:7px; flex:none;
  border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
  transform:rotate(-45deg); transition:transform .2s var(--ease)}
.gem-bron[open] > summary::before{transform:rotate(45deg)}
.gem-bron > summary:hover{color:var(--indigo)}
.gem-bron > summary:focus-visible{outline:2px solid var(--indigo); outline-offset:3px}
.gem-bron p{margin:10px 0 0; max-width:78ch; color:var(--grijs-600)}

/* ── Eén ritme tussen de secties ──────────────────────────
   Op een regiopagina laat elke sectie boven en onder evenveel
   ruimte, dus de afstand tussen twee secties is overal dezelfde.
   Gemeten op 1440 stond die eerst op 86, 432, 324, 297, 432, 432
   en 216 pixels; nu overal op --blok.

   HALF --blok PER KANT, en dat is geen detail. basis.css noemt
   --blok "de witruimte tussen de secties". Twee secties die elk
   --blok aandragen zetten er dus tweemaal zoveel tussen als
   bedoeld. Elders op de site is dat met een lapmiddel opgevangen
   (de oproep haalt de ruimte van haar buren weg), hier draagt elke
   sectie gewoon de helft en klopt de som vanzelf.

   Drie dingen stonden dat ritme in de weg.

   1. .realisaties draagt een eigen maat (clamp 80/150 boven en
      60/110 onder) in plaats van --blok, waardoor de sectie ervoor
      en erna scheef stonden.

   2. Twee regels in home.css halen de bovenruimte weg na de hero en
      rond de oproep. Dat is een geldige keuze voor de home, maar
      het maakt een sectie asymmetrisch: vol boven, niets onder.

   3. Met padding-top op nul zakte de marge van het EERSTE KIND naar
      buiten (margin collapsing) en schoof de sectie 48 pixels op,
      een gat dat in geen enkele regel te vinden was. Echte padding
      aan alle kanten sluit dat af.

   De hero houdt zijn eigen bovenruimte, want die rekent met de
   zwevende balk. Zijn onderkant doet wel mee aan het ritme.

   Het is met opzet gebonden aan main.regio en niet aan main: de
   home en de dienstpagina's houden hun eigen ritme.            */
main.regio > *{padding-block:calc(var(--blok) / 2)}
main.regio > .hero-smal{padding-top:clamp(120px,14vh,180px);
  padding-bottom:calc(var(--blok) / 2)}
main.regio > .hero-smal + *{padding-top:calc(var(--blok) / 2)}
main.regio > :not(.hero-smal):has(+ .daadstrook){
  padding-bottom:calc(var(--blok) / 2)}
main.regio > .daadstrook + *{padding-top:calc(var(--blok) / 2)}