/*
 * keuken-typografie.css
 * ============================================================================
 * Houdt de typografie van de keuken-secties en de page-builder-blokken gelijk
 * aan de rest van de site.
 *
 * WAAROM EEN APART BESTAND
 * keuken.css is een 1-op-1 overname uit het designhandoff. Wordt dat bestand
 * opnieuw geëxporteerd of teruggezet, dan verdwijnt elke correctie die erin is
 * gemaakt — precies wat eerder gebeurde toen dit al een keer was rechtgezet.
 * Deze regels staan daarom búiten keuken.css en worden er direct na ingeladen.
 * Vervang keuken.css dus gerust; de typografie blijft staan.
 *
 * UITGANGSPUNT
 * 1. De rest van de site zet alle koppen expliciet op gewicht 400:
 *      body h1, body h2, body h3, body h4 { font-weight: 400 }
 *    en gebruikt nergens letter-spacing op koppen. keuken.css maakte er 700 van
 *    met een negatieve letterafstand — vandaar dat de titels dikker en anders
 *    leken dan elders.
 *
 * 2. Het Typekit-pakket (use.typekit.net/jgk8gwk.css) levert stolzl in de
 *    gewichten 100, 200, 300, 400, 500 en 700 — er is géén 600. keuken.css
 *    vroeg op vijftien plekken om 600, dus maakte de browser daar zelf een
 *    vetter variant van. Dat leverde vervormde letters op, het duidelijkst in
 *    de kleine labels en de lopende tekst. 500 is het dichtstbijzijnde gewicht
 *    dat echt bestaat.
 *
 * Het lettertype zelf was nooit het probleem: keuken.css zet geen font-family,
 * dus de keuken-pagina's gebruiken dezelfde stolzl als de rest van de site.
 * ============================================================================
 */

/* ── Koppen: zelfde gewicht en letterafstand als elders op de site ────────── */
.keuken-h-xl,
.keuken-h-lg,
.keuken-h-md,
.keuken-cta h2,
.keuken-proj h3,
.keuken-prod-step h3 {
	font-weight: 400;
	letter-spacing: normal;
}

/* ── Gewicht 600 bestaat niet in stolzl: naar 500 ─────────────────────────── */
.keuken-kicker,
.keuken-btn,
.keuken-link-more,
.keuken-crumb__cur,
.keuken-mat-brands__label,
.keuken-mat-brand-pills span,
.keuken-proj__cat,
.keuken-bekijk,
.keuken-rev-card__who,
.keuken-sticky-cta span,
.keuken-keuze-link,
.keuken-meer,
.keuken-prod-quote p,
.keuken-contact-row div strong {
	font-weight: 500;
}

/* ── Lopende tekst: zelfde maat, gewicht en kleur als op de homepage ───────
 *
 * keuken.css komt uit het designhandoff en zet de lopende tekst op zestien
 * verschillende maten (13px t/m 19px), deels in een andere kleur dan de rest
 * van de site. Daardoor viel op dat de tekst op een builder-pagina anders
 * oogt dan op de homepage: daar is de body-tekst overal even groot en even
 * dik, in één kleur.
 *
 * De site zelf gebruikt: 16px / line-height 28px / gewicht 300 (zie
 * views/assets/style/layout/_content.scss) en kleur #24272b (base/_reset.scss,
 * $color-2). Die drie waarden staan hieronder.
 *
 * De kleur gaat via de tokens, niet per selector: op de donkere kaarten
 * (uitgelicht pakket, vanaf-vak, garantieband) zet keuken.css een eigen lichte
 * kleur, en die moet blijven staan.
 */
:root {
	--keuken-ink: #24272b;
	--keuken-ink-soft: #24272b;
}

.keuken-lead,
.keuken-check-list li,
.keuken-choice-list li,
.keuken-crosssell__inner p,
.keuken-faq-a p,
.keuken-feat-card p,
.keuken-garantie-card p,
.keuken-layout-card p,
.keuken-midcta p,
.keuken-prijs-card-accent p,
.keuken-prijs-list li,
.keuken-prod-step p,
.keuken-rev-card p,
.keuken-step__text,
.keuken-style-item p,
.keuken-usp-card p,
.keuken-variant-card__body p,
.keuken-why-item p,
.keuken-prijs-card > .keuken-muted,
.keuken-split__body .keuken-muted,
.rw-pb-wysiwyg,
.rw-pb-wysiwyg li {
	font-size: 16px;
	line-height: 28px;
	font-weight: 300;
}

/* Bijschriften en kleine regels: ook onderling gelijk, één maat kleiner. */
.keuken-brand-strip__cap,
.keuken-contact-row div span,
.keuken-crumb .container,
.keuken-hero__trust,
.keuken-mat-brands__note,
.keuken-mat-media__cap,
.keuken-prijs-note,
.keuken-team-card span {
	font-size: 14px;
	line-height: 22px;
	font-weight: 300;
}