/* lempenshrm.nl: groene kop, foto, witte vlakken.

   De oude site (eigen WordPress-thema uit 2016, tot november 2026) had een
   groene kop met de naam (Arial vet 38,4 px, 40 px boven en onder), de foto
   over de volle breedte, de inhoud in twee witte vlakken met ronde hoeken
   van 12 px (120 px marge opzij, 40 px binnenruimte boven en onder) op
   lichtgrijs, groene tussenkoppen van 24 px en onderaan één regel met de
   contactgegevens. Arial, een systeemlettertype; er wordt niets geladen.
   Gemeten op 1280 px op 1 november 2026 (docs/01-bron.md).

   Kleuren komen uit tokens.css (gegenereerd uit tools/tokens.py). */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; color-scheme: light; }
body {
  margin: 0;
  background: var(--color-page);
  color: var(--color-text);
  font-family: Arial, sans-serif;
  font-size: 1rem;
}
img { display: block; max-width: 100%; height: auto; }
a { color: var(--color-brand); }
:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }

.skip { position: absolute; left: -999px; top: 0; padding: .5rem 1rem; background: var(--color-card); }
.skip:focus { left: 1rem; z-index: 10; }

.kop {
  padding: 2.5rem 1.25rem;
  background: var(--color-brand);
  color: var(--color-on-brand);
}
.kop h1, .kop-naam { margin: 0; font-size: 2.4rem; font-weight: 700; line-height: 1.15; }
.kop-naam a { color: inherit; text-decoration: none; }

/* De foto van de oude site is 869 px breed en stond daar over de volle
   breedte; dat doet hij hier ook. */
.foto img { width: 100%; }

/* De witte vlakken. Zelfde kleuren en ronde hoeken als de oude site, maar
   de tekst ingericht naar wat nu gangbaar is (Mike, 1 november 2026): een
   iets grotere letter, regelafstand 1,6, een regellengte van zo'n 70 tekens
   en meer lucht tussen de onderdelen. De tekst zelf is ongewijzigd. */
.vlak {
  width: min(52rem, calc(100% - 1.5rem));
  margin: 2rem auto;
  padding: clamp(1.75rem, 4vw, 3.5rem) clamp(1.25rem, 5vw, 4rem);
  background: var(--color-card);
  border-radius: 12px;
  font-size: 1.0625rem;
  line-height: 1.6;
}
.vlak > * { max-width: 68ch; }
.vlak > :first-child { margin-top: 0; }
.vlak > :last-child { margin-bottom: 0; }
.vlak h1 { margin: 0 0 1.5rem; font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.25rem); line-height: 1.2; color: var(--color-brand); }
.vlak h2 {
  margin: 2.75rem 0 1rem;
  font-size: clamp(1.4rem, 1.2rem + .8vw, 1.75rem);
  line-height: 1.25;
  color: var(--color-brand);
}
.vlak h3 { margin: 2rem 0 .5rem; font-size: 1.2rem; line-height: 1.3; }
.vlak p { margin: 0 0 1.1rem; }
/* Een vette regel bovenaan een alinea is een tussenkopje van de oude site
   (Persoonlijke motieven, Achtergrond); iets lucht erboven. */
.vlak p:has(> strong:first-child) { margin-top: 1.75rem; }
.vlak strong { color: var(--color-text); }
.vlak ul { margin: .25rem 0 1.5rem; padding-left: 1.25rem; }
.vlak li { margin: 0; padding: .2rem 0 .2rem .25rem; }
.vlak li::marker { color: var(--color-brand); }
/* Een lange opsomming (de twintig opdrachtgevers) in kolommen, zodat hij
   niet een scherm lang doorloopt. */
.vlak ul:has(> li:nth-child(9)) { max-width: none; columns: 3 14rem; column-gap: 2.5rem; }
.vlak ul:has(> li:nth-child(9)) li { break-inside: avoid; }

.voet {
  padding: 1.875rem;
  color: var(--color-muted);
  text-align: center;
}
.voet p { margin: 0; }
.voet-onder {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1rem 2rem;
  margin-top: 1.25rem !important;
  font-size: .875rem;
}
.voet-onder a { color: inherit; }
.voet-maker { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; }
.voet-maker img { width: 7.5rem; height: auto; }

@media (max-width: 760px) {
  .kop { padding: 1.75rem 1.25rem; }
  .kop h1, .kop-naam { font-size: 1.75rem; }
  .vlak { margin: 1rem auto; font-size: 1rem; }
}

/* De badge van internet.nl onder in de voet (alleen op productie). */
.voet-leden { display: flex; justify-content: center; margin: 1rem 0 0; padding: 0; list-style: none; flex-basis: 100%; }
.voet-leden img { width: 204px; height: auto; }