/* Stijl A, Thuisbasis. Identiteitslaag boven /css/basis.css.
 *
 * Karakter: het dichtst bij de huidige site. Wit dominant, merkgroene
 * caps-koppen, antraciete knoppen, lichte voet. Font: Figtree.
 *
 * Kleurregel: geen eigen hexwaarden; alles via de tokens van basis.css.
 * Gemeten contrasten (tools/contrast.py): groen op wit 4.16 (alleen groot
 * en vet), groen op papier-zacht 3.89 (alleen groot en vet), drukgroen op
 * wit 5.18, drukgroen op papier-zacht 4.84, tekstgrijs op papier-zacht 5.05,
 * inkt op papier-zacht 11.11, wit op inkt 11.90, wit op drukgroen 5.18. */

@font-face {
  font-family: "Figtree";
  src: url("/fonts/figtree-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Figtree";
  src: url("/fonts/figtree-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Figtree";
  src: url("/fonts/figtree-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --f-kop: "Figtree", Verdana, sans-serif;
  --f-label: "Figtree", Verdana, sans-serif;
  --f-tekst: "Figtree", Verdana, sans-serif;
  --maat: 72rem;
}

/* Koppen: Figtree is veel breder dan Barlow Condensed, dus kleinere maten.
 * Groen op wit haalt 4.16 en mag daarom alleen groot en vet (h1 en h2);
 * h3 is klein en staat in drukgroen (5.18). Donkere secties zetten de
 * kopkleur in basis.css met hogere specificiteit terug naar wit. */
h1 {
  font-size: clamp(2rem, 4.5vw, 3.2rem);
  line-height: 1.12;
  letter-spacing: 0.01em;
  color: var(--groen);
}
h2 {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  line-height: 1.15;
  letter-spacing: 0.01em;
  color: var(--groen);
}
h3 {
  font-size: 1.15rem;
  line-height: 1.3;
  letter-spacing: 0.02em;
  color: var(--groen-diep);
}

/* ---------- Header ---------- */

.kop-balk { border-bottom: var(--hairlijn) solid var(--papier-lijn); }

.woordmerk {
  font-size: 1.05rem;
  letter-spacing: 0.03em;
  color: var(--groen-diep);
}
.woordmerk:hover { color: var(--inkt); }

.hoofdnav .nav-actie { background: var(--inkt); }
.hoofdnav .nav-actie:hover { background: var(--groen-diep); }
.hoofdnav .nav-actie[aria-current="page"] { background: var(--groen-diep); }

/* ---------- Knoppen: antraciet, hover drukgroen ---------- */

.knop {
  font-family: var(--f-label);
  font-size: 0.9rem;
  letter-spacing: 0.08em;
  background: var(--inkt);
  border-color: var(--inkt);
  padding: 0.85rem 1.8rem;
}
.knop:hover { background: var(--groen-diep); border-color: var(--groen-diep); }

/* Varianten opnieuw vastzetten: dit bestand laadt na basis.css, dus de
 * .knop-regel hierboven zou ze anders overschrijven. */
.knop--tweede {
  background: var(--wit);
  color: var(--inkt);
  border-color: var(--inkt);
}
.knop--tweede:hover {
  background: var(--wit);
  color: var(--groen-diep);
  border-color: var(--groen-diep);
}
.knop--dicht {
  background: var(--papier-zacht);
  color: var(--tekstgrijs);
  border-color: var(--papier-lijn);
}
.knop--dicht:hover {
  background: var(--papier-zacht);
  color: var(--tekstgrijs);
  border-color: var(--papier-lijn);
}

/* ---------- Maatcorrecties op Barlow-Condensed-brede componenten ---------- */

.kaart-kop__nr { font-size: 1.2rem; }
.kaart-meta { font-size: 0.95rem; letter-spacing: 0.05em; }

/* Groot en vet (21.6px), dus merkgroen mag; in donkere helden zet
 * basis.css de kleur met hogere specificiteit terug naar wit. */
.feitenstrook .feit-w { font-size: 1.35rem; color: var(--groen); }

.cijferband .cijfer-w { font-size: clamp(1.5rem, 3vw, 2rem); }

/* Stapnummers als groene cirkels (1.3rem vet is groot, dus 4.16 volstaat). */
.stappenlijst > li { padding: 1.1rem 1.25rem; align-items: center; }
.stappenlijst .stapnr {
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  border-right: none;
  background: var(--groen);
  color: var(--wit);
  font-size: 1.3rem;
}

.stroomkop li .nr { font-size: 1.1rem; }
.groepknop .tijd { font-size: 1.2rem; min-width: 4.8rem; }
.contactlijst a { font-size: 1.05rem; font-weight: 700; }
.prijsregel { font-size: 1.2rem; }
.prijslijst .prijs-naam, .prijslijst .prijs-w { font-size: 1.05rem; }
.feitenlijst .feit-waarde { font-size: 0.95rem; }
.stappenband .stap-nr { font-size: 1.5rem; }
.dienstkaart__titel { font-size: clamp(1.2rem, 2.2vw, 1.45rem); }

/* ---------- Voet: licht in plaats van inkt ---------- */

.voet {
  background: var(--papier-zacht);
  color: var(--inkt);
  border-top: var(--hairlijn) solid var(--papier-lijn);
}
.voet h2 { color: var(--groen-diep); }
.voet p, .voet li { color: var(--tekstgrijs); }
.voet .voet-sterk { color: var(--inkt); }
.voet a { color: var(--groen-diep); }
.voet a:hover { color: var(--inkt); }
.voet__onder {
  border-top-color: var(--papier-lijn);
  color: var(--tekstgrijs);
}
.voet__onder p { color: var(--tekstgrijs); }