/*
 * 10 — Base
 *
 * Stond bewust zonder globale typografie: die zou alle 85 Divi-paginas in één
 * klap veranderen. Dat is nu een expliciete opdracht — de hele site zet op
 * CormorantGaramond, geen schreefloze letter meer — dus het lettertype staat
 * hieronder wél globaal.
 *
 * Sinds de koppenschaal geldt dat ook voor h1–h6. Dat was hiervoor anders
 * ("groottes, kleuren en h1–h6 blijven aan Divi") en dat liep vast: alles wat
 * we niet per component aanraakten viel terug op Divi's basis — 30/26/22/18/
 * 16/14px, font-weight 500 en line-height 1em. Van die 500 bestaat geen
 * CormorantGaramond-snede (zie de @font-face-regels in 00-tokens.css: alleen
 * 400 en 600), dus die liet de browser namaken, en 1em zette een kop van 40px
 * op 40px regelafstand. h4, h5 en h6 hadden helemaal nergens een regel.
 * Groottes en gewicht komen nu uit de tokens; de ruimte eronder blijft aan
 * Divi (zie de opmerking bij het blok zelf).
 *
 * Verder staat hier wat we zelf aanmaken en dus niets kan breken: de skip-link
 * en een zichtbare toetsenbordfocus.
 */

/* ── Globale letter ─────────────────────────────────────────────────────
 *
 * Divi's stylesheet zet `body { font-family: Open Sans, Arial, sans-serif }`
 * en laat de rest erven (`button,input,select,textarea { font-family:
 * inherit }`). Eén regel op de body is dus genoeg — mits hij wint.
 *
 * Winnen kan hier niet op volgorde: Divi print op wp_head 99/103, wij op 8
 * (zie inc/enqueue.php). `html body` maakt er (0,0,2) van en verslaat Divi's
 * (0,0,1) ongeacht wie later staat.
 *
 * Dat volstaat pas sinds Theme Options → body_font / heading_font /
 * primary_nav_font op "Default" staan. Stonden op Source Sans Pro; Divi
 * printte die op wp_head 99 op o.a. `body, input, .et_pb_module h1` en won
 * daarmee alsnog. LET OP: zet een redacteur daar opnieuw een letter, dan komt
 * de schreefloze terug — die drie horen leeg te blijven.
 *
 * De grootte staat hier ook: Divi zet `body { font-size: 14px }` (ook in zijn
 * mobiele media-queries, allemaal (0,0,1)) en alle lopende tekst — <p> incluis —
 * erft daarvan. Eén regel op de body tilt dus de hele site naar 18px; de
 * componenten die --kdm-size-base al expliciet zetten veranderen daar niet van.
 * Wat een redacteur per module instelt (`.et_pb_text_3 { font-size: … }`,
 * wp_head 99+) wint hier nog steeds van, net als bij de koppen. */
html body {
	font-family: var(--kdm-font-body);
	font-size: var(--kdm-size-base);
}

/* Elementen die de body-letter niet vanzelf erven. Divi zet inherit al op
 * formuliervelden, maar niet elke plugin doet dat (Gravity Forms, de GDPR-
 * banner), dus expliciet. */
button,
input,
optgroup,
select,
textarea {
	font-family: inherit;
}

/* Divi zet `code, pre { font-family: Courier New, monospace }`. "Alleen dit
 * lettertype" betekent ook geen Courier. Staat los van de regel hierboven
 * omdat dit de plek is om het terug te draaien als er ooit codevoorbeelden op
 * de site komen — die willen wél een vaste letterbreedte. */
code,
pre,
kbd,
samp {
	font-family: var(--kdm-font-body);
}

/* ── Koppen ─────────────────────────────────────────────────────────────
 *
 * Eén schaal voor de hele site, uit de tokens. Elke kop van hetzelfde niveau
 * is nu even groot, ongeacht in wat voor kolom hij staat.
 *
 * `html body` maakt er (0,0,3) van en verslaat Divi's basis (0,0,1). Winnen op
 * volgorde kan hier niet: Divi print op wp_head 99/103, wij op 8 (zie
 * inc/enqueue.php), dus dit moet het van specificiteit hebben.
 *
 * !! Bewust laag gehouden !! Eén element, geen klasse. Elke componentregel in
 * 50-components.css is (0,1,1) en wint hier dus van — precies de bedoeling:
 * dit is de bodem, niet de baas. Zet je hier een klasse bij, dan sloopt deze
 * laag de witte kop in de hero en het halfvette in de tegel.
 *
 * Ruimte staat er bewust NIET in. Divi's `padding-bottom: 10px` onder elke kop
 * blijft staan, zodat de bladspiegel van de bestaande paginas niet verschuift.
 * Componenten die het weg willen hebben, zetten dat zelf (zie 50-components).
 *
 * Wat een redacteur per module in Divi instelt (`.et_pb_text_3 h2 {…}`, wp_head
 * 99+) wint hier ook van, en dat hoort ook zo — dat is een bewuste keuze in de
 * builder, geen ongeluk. */
html body :is(h1, h2, h3, h4, h5, h6) {
	color: var(--kdm-ink);
	font-weight: 400;
	line-height: var(--kdm-lh-tight);
}

html body h1 {
	font-size: var(--kdm-size-h1);
}

html body h2 {
	font-size: var(--kdm-size-h2);
}

html body h3 {
	font-size: var(--kdm-size-h3);
}

html body h4 {
	font-size: var(--kdm-size-h4);
}

html body h5 {
	font-size: var(--kdm-size-h5);
}

html body h6 {
	font-size: var(--kdm-size-h6);
}

/* Divi verkleint koppen in smalle kolommen: `.et_pb_column_1_4 h3 {
 * font-size: 20px }` en vijf soortgelijke regels, allemaal (0,1,1). Daardoor
 * verspringt dezelfde kop zodra iemand de kolom smaller maakt — een maat die
 * uit de lay-out komt in plaats van uit de schaal. Uit.
 *
 * Alleen font-size, want dat is ook het enige wat Divi's kolomregels zetten;
 * kleur en gewicht blijven van de basis hierboven komen.
 *
 * (0,1,2) tegen Divi's (0,1,1). Dat betekent dat een componentregel van
 * (0,1,1) hier wél van verliest: staat je kop in een 1/3-, 1/4-, 1/5-, 1/6- of
 * 2/5-kolom en wil je een eigen grootte, dan heb je twee klassen nodig. In de
 * praktijk raakt dit alleen de tegels; zie .kdm-tile__body h3. */
body :is(.et_pb_column_1_3, .et_pb_column_1_4, .et_pb_column_1_5,
         .et_pb_column_1_6, .et_pb_column_2_5) h1 {
	font-size: var(--kdm-size-h1);
}

body :is(.et_pb_column_1_3, .et_pb_column_1_4, .et_pb_column_1_5,
         .et_pb_column_1_6, .et_pb_column_2_5) h2 {
	font-size: var(--kdm-size-h2);
}

body :is(.et_pb_column_1_3, .et_pb_column_1_4, .et_pb_column_1_5,
         .et_pb_column_1_6, .et_pb_column_2_5) h3 {
	font-size: var(--kdm-size-h3);
}

body :is(.et_pb_column_1_3, .et_pb_column_1_4, .et_pb_column_1_5,
         .et_pb_column_1_6, .et_pb_column_2_5) h4 {
	font-size: var(--kdm-size-h4);
}

body :is(.et_pb_column_1_3, .et_pb_column_1_4, .et_pb_column_1_5,
         .et_pb_column_1_6, .et_pb_column_2_5) h5 {
	font-size: var(--kdm-size-h5);
}

body :is(.et_pb_column_1_3, .et_pb_column_1_4, .et_pb_column_1_5,
         .et_pb_column_1_6, .et_pb_column_2_5) h6 {
	font-size: var(--kdm-size-h6);
}

/* ── Links in lopende tekst ─────────────────────────────────────────────
 * Divi's style.css zet `a { text-decoration: none }` (0,0,1); `p a` (0,0,2)
 * wint op specificiteit. Bewust alleen binnen <p>: links in menu's, knoppen
 * en kaarten staan niet in een <p> en blijven dus zonder streep. */
p a {
	text-decoration: underline;
	text-underline-offset: 0.15em; /* streep iets losser van de x-hoogte, past bij CormorantGaramond */
}

/* !! Niet omzetten: iconen zijn géén tekst !!
 * Font Awesome (<i class="fa-...">) en Divi's eigen ETmodules-icoonletter
 * leveren hun glyphs via font-family. Een globale `*`-regel zou die allemaal
 * in blokjes veranderen. Daarom staat de regel hierboven op `html body` en
 * niet op `*` — iconen erven niets, ze hebben hun eigen font-family. */

/* ── Skip-link ──────────────────────────────────────────────────────────
 * Off-screen tot hij focus krijgt. De markup komt in fase 5 in header.php;
 * tot die tijd heeft deze regel geen effect. */
.kdm-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: var(--kdm-z-drawer);
	padding: var(--kdm-s-3) var(--kdm-s-5);
	background: var(--kdm-surface);
	color: var(--kdm-ink);
	font-family: var(--kdm-font-body);
	font-size: var(--kdm-size-base);
	text-decoration: underline;
}

.kdm-skip:focus {
	left: var(--kdm-s-4);
	top: var(--kdm-s-4);
}

/* ── Toetsenbordfocus ───────────────────────────────────────────────────
 * :focus-visible raakt alleen toetsenbordnavigatie, niet muisklikken, dus
 * dit verandert visueel niets aan de bestaande paginas. Divi levert op veel
 * elementen helemaal geen focus-indicator; dit is het vangnet daarvoor.
 * Specifieke componenten mogen dit later overschrijven. */
:focus-visible {
	outline: var(--kdm-ring);
	outline-offset: var(--kdm-ring-offset);
}

/* ── Schermlezer-only ───────────────────────────────────────────────────
 * Eigen klasse; WordPress' .screen-reader-text komt uit de core-stylesheet
 * die hier niet altijd geladen is. Gebruikt door de nav-walker in fase 5. */
.kdm-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}