/*
 * 20 — Layout
 *
 * Onze eigen containers, plus de breedte van Divi's rijen — dat laatste raakt
 * alle 85 builder-paginas, dus met beleid.
 */

/* Divi zet elke rij op 80% (row.css) en doet hetzelfde met .container op de
 * niet-builder-paginas: blog, archief, 404, zoekresultaten. Op desktop merk je
 * dat niet, want de max-width knijpt de rij toch al dicht, maar op mobiel is
 * 80% een harde marge van 10% aan elke kant — bij een scherm van 485px gaat er
 * bijna 100px op aan lucht. Op 90% houd je ongeveer --kdm-container-pad over,
 * gelijk aan de header en de footer.
 *
 * Alleen de breedte: de max-width blijft van Divi (1140px, gecompileerd uit
 * Theme Options → content_width) en moet gelijk blijven aan --kdm-container.
 *
 * Dubbele klasse voor de specificiteit: zowel Divi's `.et_pb_row` als de
 * content_width-regel zijn (0,1,0) en printen op wp_head 99/103, dus ná ons.
 * Binnenrijen (.et_pb_row_inner) vallen hier bewust buiten: die horen 100% van
 * hun kolom te vullen. De herbouwde secties in 50-components.css zetten deze
 * 90% al zelf; die zijn nu de regel in plaats van de uitzondering. */
.et_pb_row.et_pb_row,
.container.container {
	width: 90%;
}

/* Zelfde breedte als Divi's content_width (1140px, zie --kdm-container in
 * 00-tokens.css). Houd die twee gelijk, anders lijnt de header niet uit met
 * de .et_pb_row eronder. */
.kdm-container,
.kdm-header__bar,
.kdm-nav__list {
	width: 100%;
	max-width: var(--kdm-container);
	margin-inline: auto;
	padding-inline: var(--kdm-container-pad);
}

/* Scroll-offset voor ankerlinks. Zonder dit schuift een #anker onder de
 * plakkende header. Belangrijk omdat gform_confirmation_anchor aanstaat: de
 * bevestiging van een verzonden formulier is zo'n anker. JS schrijft de
 * werkelijke hoogte in --kdm-header-h; de waarde in 00-tokens.css is de
 * terugvaloptie voor als JS niet draait. */
html {
	scroll-padding-top: var(--kdm-header-h);
}