/* Stijl C, Sprint. Identiteitslaag boven /css/basis.css.
 *
 * Karakter: sportief en snel. Schuine vlakken (clip-path, geen transform-skew
 * vanwege overflow), condensed caps-koppen in Oswald, limoen als scoreaccent,
 * een limoenlijn onder elke sectiekop. Lopende tekst: Barlow 500.
 *
 * Kleurregel: geen eigen hexwaarden; alles via de tokens van basis.css.
 * Gemeten contrasten (tools/contrast.py): wit op groen 4.16 (alleen groot en
 * vet), wit op drukgroen 5.18, drukgroen op wit 5.18, drukgroen op
 * papier-zacht 4.84, limoen op inkt en inkt op limoen 5.93, wit op inkt 11.90,
 * wit-zacht op inkt 7.95, tekstgrijs op papier-zacht 5.05. */

@font-face {
  font-family: "Oswald";
  src: url("/fonts/oswald-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Oswald";
  src: url("/fonts/oswald-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Barlow";
  src: url("/fonts/barlow-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Barlow";
  src: url("/fonts/barlow-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --f-kop: "Oswald", "Arial Narrow", sans-serif;
  --f-label: "Barlow", Verdana, sans-serif;
  --f-tekst: "Barlow", Verdana, sans-serif;
  --maat: 72rem;
}

/* Barlow 400 laadt niet mee; 500 is de basisdikte van deze stijl. */
body { font-weight: 500; }

/* Koppen: Oswald op maten dicht bij Barlow Condensed. Groen haalt op wit
 * 4.16 en mag dus alleen groot en vet (h1 en h2); h3 is kleiner en staat in
 * drukgroen (5.18). Donkere contexten zetten de kleur in basis.css met
 * hogere specificiteit terug naar wit. */
h1 {
  font-size: clamp(2.1rem, 4.6vw, 3.4rem);
  line-height: 1.08;
  color: var(--groen);
}
h2 {
  font-size: clamp(1.7rem, 3.2vw, 2.5rem);
  line-height: 1.1;
  color: var(--groen);
}
h3 {
  font-size: 1.2rem;
  line-height: 1.25;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--groen-diep);
}

/* Scorelijn: een limoenblok onder elke sectiekop in de main. Decoratief,
 * dus zonder contrasteis. De kaartkoptitel doet niet mee. */
main h2:not(.kaart-kop__titel)::after {
  content: "";
  display: block;
  width: 4.5rem;
  height: 0.35rem;
  background: var(--limoen);
  margin-top: 0.6rem;
}

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

.kop-balk { border-bottom: 3px solid var(--groen); }

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

.hoofdnav a {
  font-family: var(--f-kop);
  font-weight: 500;
  font-size: 0.95rem;
  letter-spacing: 0.06em;
}
.hoofdnav .nav-actie {
  padding: 0.5rem 1.3rem;
  clip-path: polygon(0.5rem 0, 100% 0, calc(100% - 0.5rem) 100%, 0 100%);
}

/* ---------- Knoppen: schuin geknipt, dus zonder rand ---------- */

/* 1.2rem vet is groot, dus wit op merkgroen (4.16) volstaat. */
.knop {
  font-size: 1.2rem;
  letter-spacing: 0.08em;
  padding: 0.75rem 2rem;
  border: none;
  clip-path: polygon(0.6rem 0, 100% 0, calc(100% - 0.6rem) 100%, 0 100%);
}
.knop:hover { background: var(--groen-diep); color: var(--wit); }

/* Varianten opnieuw vastzetten: dit bestand laadt na basis.css, dus de
 * .knop-regel hierboven zou ze anders overschrijven. De rand vervalt overal,
 * omdat de clip de hoeken eruit knipt. */
.knop--tweede {
  background: var(--inkt);
  color: var(--wit);
  border: none;
}
.knop--tweede:hover { background: var(--groen-diep); color: var(--wit); }
.knop--dicht {
  background: var(--papier-zacht);
  color: var(--tekstgrijs);
  border: none;
}
.knop--dicht:hover {
  background: var(--papier-zacht);
  color: var(--tekstgrijs);
}
.groen-vlak .knop { border: none; }

/* Op donkere en drukgroene vlakken zet basis.css de tweede knop als
 * transparant kader; dat kader knipt kapot. Limoen met inkt (5.93) erop. */
.held--donker .knop--tweede,
.sectie--donker .knop--tweede,
.groen-vlak .knop--tweede {
  background: var(--limoen);
  color: var(--inkt);
  border: none;
}
.held--donker .knop--tweede:hover,
.sectie--donker .knop--tweede:hover,
.groen-vlak .knop--tweede:hover {
  background: var(--wit);
  color: var(--inkt);
}

/* ---------- Schuine vlakken buiten de homepage ---------- */

/* De clip snijdt ook kinderen af, dus de padding groeit met de schuinte mee. */
.sectie--donker {
  clip-path: polygon(0 2rem, 100% 0, 100% calc(100% - 2rem), 0 100%);
  padding-block: calc(clamp(2.75rem, 7vw, 5.5rem) + 2rem);
}

/* ---------- Componenten ---------- */

.fotonoot { background: var(--inkt); color: var(--wit); }

.stappenlijst > li {
  border: none;
  border-left: 4px solid var(--groen);
  background: var(--papier-zacht);
  padding: 1.1rem 1.25rem;
}
.stappenlijst .stapnr { border-right: none; }

.feitenstrook .feit-w { text-transform: uppercase; }

/* ---------- Voet: schuine bovenrand ---------- */

.voet {
  border-top: none;
  clip-path: polygon(0 2rem, 100% 0, 100% 100%, 0 100%);
  padding-top: 2rem;
}
.voet h2 {
  font-family: var(--f-kop);
  font-weight: 500;
  font-size: 1rem;
  letter-spacing: 0.08em;
  color: var(--limoen);
}