/**
 * layout.css — één wrapper-norm voor de hele site.
 *
 * Aanleiding (21-08-2026): header, footer en content hadden elk hun eigen
 * `max-width` én `padding`, en lijnden daardoor nergens uit:
 *
 *   header  .taw-hd__wrap   max-width calc(1301px + 2rem), padding 1rem     -> zijmarge 16px
 *   footer  .taw-ft__wrap   max-width 1280px,              padding 1.5rem   -> zijmarge 24px
 *   content .col-full       max-width 1301px (content-box), padding ~2.6em  -> zijmarge 42px
 *
 * Op een venster van 1006px begon de header op 16px, de footer op 24px en de
 * tekst op 42px. Pas boven ongeveer 1385px vielen header en content samen,
 * en dan week de footer weer af. Dit raakte niet alleen de productlijst: ook
 * de productpagina zat 26px naast de header.
 *
 * De norm is nu: **inhoud maximaal 1301px, zijmarge 1.5rem (24px)**. Op brede
 * schermen verandert er niets aan de inhoudsbreedte (die was al 1301 voor
 * header en content); op smallere schermen krijgt de content lucht en staat
 * alles op dezelfde rand.
 *
 * Let op het verschil in box-sizing: `.col-full` staat bij Shoptimizer op
 * `content-box`, dus daar IS `max-width` de inhoudsbreedte. Header en footer
 * staan op `border-box`, dus daar moet de zijmarge bij de max-width opgeteld.
 *
 * De `body`-prefix is nodig omdat de Customizer een eigen `.col-full`-regel in
 * de head injecteert; met alleen `.col-full` weegt onze regel even zwaar en
 * beslist de volgorde.
 *
 * @package voltvast
 */

:root {
	/* Inhoudsbreedte en zijmarge van elke paginawrapper. */
	--taw-wrap:   1301px;

	/*
	 * Zijmarge. Op een telefoon smaller: 24px aan weerszijden is daar 13% van
	 * het scherm, wat de productkaarten onnodig krap maakt. Vanaf 768px de
	 * ruimere marge, waar wel plek voor is.
	 */
	--taw-gutter: 1rem;
}

@media (min-width: 768px) {
	:root { --taw-gutter: 1.5rem; }
}

/* border-box: zijmarge telt op bij de max-width. */
body .taw-hd__wrap,
body .taw-ft__wrap {
	max-width: calc(var(--taw-wrap) + 2 * var(--taw-gutter));
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--taw-gutter);
	padding-right: var(--taw-gutter);
}

/* content-box: max-width IS hier de inhoudsbreedte. */
body .col-full {
	max-width: var(--taw-wrap);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--taw-gutter);
	padding-right: var(--taw-gutter);
}

/* ------------------------------------------------------------------
 * Scheidingslijn onder de breadcrumb, over de volle schermbreedte.
 *
 * `.archive-header` is de wrapper om de breadcrumb en loopt zelf al van
 * schermrand tot schermrand; de wrapper-marge zit op de `.col-full` daarbinnen.
 * Een border hierop loopt dus vanzelf door tot de rand, zonder trucs met
 * `100vw` (die op desktop een horizontale scrollbalk kunnen veroorzaken).
 *
 * Werkt op zowel de productlijst als de productpagina: beide gebruiken deze
 * wrapper, en op allebei staat er alleen de breadcrumb in. De H1 valt erbuiten,
 * dus de lijn komt tussen breadcrumb en titel te staan.
 * ------------------------------------------------------------------ */

body .archive-header {
	border-bottom: 1px solid var(--taw-line);
	margin-bottom: 1.25rem;
}

/* ------------------------------------------------------------------
 * Artikelkaarten op /nieuws/ en de blogarchieven.
 *
 * Die pagina's draaien nog op Elementor en zetten daar een radius van 3px op,
 * terwijl alle eigen kaarten (product, artikel, hero) op --taw-radius staan.
 * Hier gelijkgetrokken zodat het overzicht en de homepage dezelfde vorm hebben.
 *
 * TIJDELIJK: kan weg zodra de blogtemplates zijn omgebouwd (stap 3 van de route
 * in memory.md). Dan komt deze opmaak uit onze eigen kaart.
 * ------------------------------------------------------------------ */

body .elementor-post__card {
	border-radius: var(--taw-radius);
}