/* De kennisbank in de huisstijl van de nieuwe site.
 *
 * Mark, 16 aug: de kennisartikelen stonden nog in de oude stijl (Fraunces en
 * Inter, groen en goud) terwijl de site Newsreader en Manrope draait in crème
 * en oranje. Wie doorklikte kwam op iets dat eruitzag als een andere website.
 *
 * Dit bestand laadt ná /stijl.css en zet alleen de kleuren en lettertypes om.
 * De opbouw van de artikelen blijft zoals hij was: die is goed en scoort in
 * Google. De oude stijl blijft ongemoeid voor /test3 en de andere pagina's die
 * hem nog gebruiken.
 *
 * De kleurwaarden komen letterlijk uit de gebouwde CSS van de nieuwe site, dus
 * ze lopen niet uit de pas als het palet daar ooit wijzigt.
 */

:root {
  /* crème papier, donkerblauwe inkt, oranje accent */
  --canvas: oklch(98.2% 0.011 84);
  --papier: oklch(99.5% 0.004 84);
  --inkt: oklch(21.5% 0.032 264);
  --inkt-zacht: oklch(50.8% 0.026 262);

  /* het accent was goud, wordt oranje: dezelfde knopkleur als de rest van de site */
  --goud: oklch(63% 0.196 42);
  --goud-licht: oklch(72% 0.148 78);
  --goud-diep: oklch(55% 0.18 42);

  /* de groentinten worden de zachte crèmetinten van de nieuwe site */
  --salie: oklch(70.6% 0.031 262);
  --salie-licht: oklch(95.1% 0.017 78);
  --bos: oklch(19.6% 0.043 264);
  --bos-diep: oklch(16% 0.04 264);

  --klei: oklch(63% 0.196 42);
  --klei-licht: oklch(68% 0.17 42);
  --klei-diep: oklch(55% 0.18 42);

  --lijn: oklch(90.5% 0.014 78);
}

body,
input,
button,
select,
textarea {
  font-family: "Manrope", "Inter", system-ui, sans-serif;
}

h1,
h2,
h3,
h4,
.artikel h3,
.feit b,
.serif {
  font-family: "Newsreader", Georgia, serif;
  font-weight: 500;
  letter-spacing: -0.01em;
}

/* Knoppen in het oranje van de site, met dezelfde ronding. */
.knop,
a.knop,
button.knop {
  background: var(--goud);
  color: oklch(99% 0.01 84);
  border-radius: 999px;
}

.knop:hover,
a.knop:hover {
  background: var(--goud-diep);
}

/* De doorverwijzing onderaan elk artikel naar de bijbehorende cursus. */
.naar-cursus {
  margin: 3rem 0 1rem;
  padding: 1.6rem;
  border-radius: 1rem;
  background: var(--salie-licht);
  border: 1px solid var(--lijn);
}

.naar-cursus .boven {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--inkt-zacht);
}

.naar-cursus h2 {
  margin: 0.4rem 0 0.5rem;
  font-size: 1.35rem;
  line-height: 1.25;
}

.naar-cursus p {
  margin: 0 0 1.1rem;
  color: var(--inkt-zacht);
  line-height: 1.6;
}

.naar-cursus a.knop {
  display: inline-block;
  padding: 0.85rem 1.6rem;
  font-weight: 500;
  text-decoration: none;
}

.naar-cursus .klein {
  display: block;
  margin-top: 0.7rem;
  font-size: 0.8rem;
  color: var(--inkt-zacht);
}