/* Blog and calculator pages. Tokens come from styles.css. */

.kennis-kicker { margin-bottom: 10px; font-size: 0.875rem; }
.kennis-kicker a { color: var(--inkt-zacht); }
.kennis-meta { margin-top: 12px; font-size: 0.875rem; color: var(--inkt-zacht); }

.kennis-kort {
  margin-top: 28px; padding: 18px 20px;
  border-left: 3px solid var(--blauw); border-radius: var(--r);
  background: var(--blauw-vlak);
}
.kennis-kort__kop { margin-bottom: 6px; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; color: var(--blauw-diep); }
.kennis-kort p:last-child { color: var(--inkt); }

.kennis-tekst { display: grid; gap: 14px; margin-top: 32px; }
.kennis-tekst h2 { margin-top: 22px; font-size: 1.375rem; font-weight: 500; letter-spacing: -0.01em; line-height: 1.25; scroll-margin-top: 88px; }
.kennis-tekst h3 { margin-top: 8px; font-size: 1.0625rem; font-weight: 600; }
.kennis-tekst p, .kennis-tekst li { color: var(--inkt-2); }
.kennis-tekst strong { color: var(--inkt); font-weight: 600; }
.kennis-stappen { display: grid; gap: 8px; padding-left: 1.4rem; list-style: decimal; color: var(--inkt-2); }
.kennis-stappen li::marker { font-weight: 600; color: var(--inkt); }
.kennis-tabel { overflow-x: auto; }
.kennis-tabel th, .kennis-tabel td { vertical-align: top; padding-right: 16px; }
.kennis-tabel th:last-child, .kennis-tabel td:last-child { padding-right: 0; }
.kennis-letop { padding: 14px 16px; border-radius: var(--r); background: var(--licht); }

.kennis-bronnen a { overflow-wrap: anywhere; }
.kennis-disclaimer { margin-top: 32px; font-size: 0.8125rem; color: var(--inkt-zacht); }

.kennis-cta {
  display: grid; gap: 14px; margin-top: 40px; padding: 22px 20px;
  border: 1px solid var(--lijn); border-radius: var(--r);
}
.kennis-cta p { color: var(--inkt-2); }

.kennis-lijst { display: grid; gap: 0; margin-top: 32px; border-top: 1px solid var(--lijn); }
.kennis-item { padding: 18px 0; border-bottom: 1px solid var(--lijn); }
.kennis-item a { text-decoration: none; color: var(--inkt); }
.kennis-item a:hover strong { text-decoration: underline; text-underline-offset: 3px; }
.kennis-item strong { font-size: 1.0625rem; font-weight: 500; }
.kennis-item p { margin-top: 4px; font-size: 0.9375rem; color: var(--inkt-zacht); }

/* Calculators */
.reken {
  display: grid; gap: 16px; margin-top: 28px; padding: 22px 20px;
  border-radius: var(--r); background: var(--licht);
}
.reken-veld { display: grid; gap: 6px; }
.reken-veld label { font-size: 0.875rem; font-weight: 500; }
.reken-veld small { font-size: 0.8125rem; color: var(--inkt-zacht); }
.reken-veld--vink label { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; font-size: 0.9375rem; }
.reken-veld--vink input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--blauw); }
.reken-invoer { display: flex; align-items: center; gap: 8px; }
.reken-invoer input, .reken-veld select {
  width: 100%; max-width: 18rem; min-height: 46px; padding: 0 12px;
  border: 1px solid var(--lijn); border-radius: var(--r);
  background: var(--grond); color: var(--inkt);
  font: inherit; font-variant-numeric: tabular-nums;
}
.reken-veld select { max-width: 24rem; }
.reken-invoer input:focus-visible, .reken-veld select:focus-visible { outline: 0; box-shadow: inset 0 0 0 2px var(--blauw); }
.reken-eenheid { color: var(--inkt-zacht); font-size: 0.9375rem; }

.reken-uitkomst { margin-top: 24px; scroll-margin-top: 88px; }
.reken-kop { font-size: 1.375rem; font-weight: 500; letter-spacing: -0.01em; line-height: 1.3; }
.reken-kop strong { font-weight: 600; }
.reken-tabel { margin-top: 12px; }
.reken-tabel th { color: var(--inkt-2); }
.reken-noot { margin-top: 12px; font-size: 0.875rem; color: var(--inkt-zacht); }

@media (max-width: 480px) {
  .reken { padding: 18px 16px; }
  .reken-invoer input, .reken-veld select { max-width: none; }
}