/* ==========================================================================
   LAYOUT — containers en de drie layouts.
   Mobiel-first: alles is standaard één kolom. De sidebar verschijnt pas op
   1024px en hoger; daaronder valt hij onder de content.

   A = content + sidebar   B = breed gecentreerd   C = full-width
   De body krijgt .wvs-layout-a / -b / -c via inc/theme-setup.php.
   ========================================================================== */

.wvs-container {
	width: 100%;
	max-width: var(--wvs-container);
	margin-inline: auto;
	padding-inline: var(--wvs-marge);
}

.wvs-container-smal {
	max-width: var(--wvs-container-smal);
}

.wvs-sectie {
	padding-block: var(--wvs-sectie);
}

/* --- Het paginaraster --------------------------------------------------- */

.wvs-page-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wvs-ruimte-7);
	width: 100%;
	max-width: var(--wvs-container);
	margin-inline: auto;
}

@media (min-width: 1024px) {

	/* Layout A — content + sidebar */
	.wvs-layout-a .wvs-page-grid,
	.wvs-layout-a .site-content > .ast-container {
		grid-template-columns: minmax(0, 1fr) var(--wvs-sidebar);
		gap: var(--wvs-ruimte-7);
		align-items: start;
	}

	.wvs-layout-a .wvs-sidebar,
	.wvs-layout-a #secondary {
		position: sticky;
		top: var(--wvs-ruimte-6);
	}
}

/* Layout B — breed gecentreerd, geen sidebar.
   Leesbaarheid boven alles: juridische en contactpagina's. */
.wvs-layout-b .wvs-page-grid,
.wvs-layout-b .site-content .entry-content {
	max-width: var(--wvs-container-smal);
	margin-inline: auto;
}

.wvs-layout-b .wvs-sidebar,
.wvs-layout-b #secondary {
	display: none;
}

/* Layout C — full-width, eigen secties */
.wvs-layout-c .wvs-page-grid {
	max-width: 100%;
	gap: 0;
}

.wvs-layout-c .wvs-sidebar,
.wvs-layout-c #secondary {
	display: none;
}

/* --- Blokbreedtes (Gutenberg / GenerateBlocks) -------------------------- */

.entry-content > * {
	max-width: 100%;
}

.entry-content > .alignwide {
	max-width: var(--wvs-container);
}

.entry-content > .alignfull {
	max-width: 100%;
	margin-inline: calc(50% - 50vw);
	width: 100vw;
}

/* --- Eenvoudig kolommenraster voor eigen secties ------------------------ */

.wvs-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wvs-ruimte-5);
}

@media (min-width: 600px) {
	.wvs-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.wvs-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.wvs-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 992px) {
	.wvs-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.wvs-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* --- Vlakken met achtergrond ------------------------------------------- */

.wvs-vlak-zacht { background: var(--wvs-bg-zacht); }
.wvs-vlak-donker {
	background: var(--wvs-donker);
	color: #ffffff;
}
.wvs-vlak-donker h1,
.wvs-vlak-donker h2,
.wvs-vlak-donker h3,
.wvs-vlak-donker h4 { color: #ffffff; }