/* ============================================================
   Beco Bouwgroep — de sitemap

   Puur tekst. De inspringing draagt de structuur, en verder
   staat er niets in de weg: geen kaarten, geen kolommen, geen
   kleurvlakken. Wie hier komt, zoekt één link en wil de boom
   in één blik kunnen overzien.

   Daarom ook één kolom en niet twee of drie: een lijst die
   over kolommen breekt, lees je niet van boven naar beneden
   maar op en neer, en dan ben je de plaats in de boom kwijt.
   ============================================================ */

.smap{padding-block:clamp(126px,15vh,190px) var(--blok)}
.smap .kruimels{margin-bottom:clamp(22px,3vw,34px)}

.smap h1{font-size:clamp(2rem,4.4vw,3rem);line-height:1;
  letter-spacing:-.04em}
.smap-kern{margin-top:16px;max-width:56ch;
  font-size:clamp(1rem,1.2vw,1.05rem);line-height:1.6}

/* ── Een onderdeel ───────────────────────────────────────── */
.smap-vak{margin-top:clamp(36px,4.6vw,56px)}
.smap-vak h2{font-size:clamp(1.15rem,1.9vw,1.45rem);
  letter-spacing:-.025em;margin-bottom:12px}
.smap-vak h2 a{border-bottom:1px solid var(--grijs-200);padding-bottom:2px;
  transition:border-color .2s var(--ease)}
.smap-vak h2 a:hover{border-color:var(--goud)}

/* ── De boom ─────────────────────────────────────────────── */
.smap-boom a{display:inline-block;font-size:15px;line-height:1.45;
  padding-block:3px;color:var(--indigo);
  border-bottom:1px solid transparent;
  transition:border-color .18s var(--ease)}
.smap-boom a:hover{border-bottom-color:var(--goud)}

/* Elk niveau springt in en hangt aan een lijn, zodat je bij de
   64ste gemeente nog ziet onder welke provincie je zit.      */
.smap-boom ul{margin-left:7px;padding-left:15px;
  border-left:1px solid var(--lijn)}

/* Hoe dieper in de boom, hoe rustiger de regel. Dat is het
   enige onderscheid dat de niveaus krijgen.                  */
.smap-boom > li{margin-top:4px}
.smap-boom > li > a{font-family:var(--disp);font-weight:600;font-size:15.5px;
  letter-spacing:-.015em}
.smap-boom ul a{color:var(--tekst-kleur)}
.smap-boom ul a:hover{color:var(--indigo)}

@media(max-width:640px){
  /* Op een telefoon is een link met een muisaanwijzer een link
     met een duim: genoeg hoogte om te raken.                 */
  .smap-boom a{padding-block:5px}
  .smap-boom ul{margin-left:4px;padding-left:11px}
}