/* SITE MAIN */
main.site-main{
	display: flex;
    flex-direction: column;
	overflow: clip;
	flex: 1 0 auto;
}


/* SECTIONS */
section{
	padding-left: var(--section-padding-left);
	padding-right: var(--section-padding-right);
	margin-left: auto;
    max-width: 100%;
    margin-right: auto;
	width: 100%;
	padding-bottom: calc(0.5 * var(--section-padding-bottom));
	padding-top: calc(0.5 * var(--section-padding-top));
	box-sizing: border-box;
}
section:not(.has-background){
	background-color: var(--bg);
}
section:first-child:not(.has-background){
	padding-top:calc(0.25 * var(--section-padding-top));
}
section.has-background + section{
	padding-top: calc(0.5 * var(--section-padding-top));
}
section:not(.has-background) + section:not(.has-background){
	padding-top: 0;
}
section:has(+ section.has-background){
	padding-bottom: calc(0.5 * var(--section-padding-bottom));
	margin-bottom: 0;
}

.section-wrapper {
	max-width: var(--section-max-width);
	gap: var(--gap) var(--section-gap);
	width: 100%;

	display: grid;
	grid-template-columns: repeat(10, 1fr);

	margin-left: auto;
	margin-right: auto;
}


/* ACHTERGROND — enkel light of dark. Light is de default en krijgt geen
   klasse. Dark draait de semantische kleuren om: alles wat var(--fg),
   var(--fg-muted) of var(--lijn) gebruikt volgt automatisch mee. */
.bg-light{
	--bg: var(--wit);
	--fg: var(--zwart);
	--fg-muted: var(--grijs-70);
	--fg-quiet: var(--grijs-45);
	--lijn: var(--grijs-25);
	--wash: var(--grijs-10);

	/* Een var() binnenin een custom property wordt opgelost op het element
	   waar die property staat. De haarlijnen moeten dus opnieuw gezet worden,
	   anders houden ze de kleuren van :root vast. */
	--hairline:        1px solid var(--lijn);
	--hairline-strong: 1px solid var(--fg);
}

.bg-dark{
	--bg: var(--zwart);
	--fg: var(--wit);
	--fg-muted: #cacaca;
	--fg-quiet: #a4a4a4;
	--lijn: #2e2e2e;
	--wash: #0d0d0d;

	--hairline:        1px solid var(--lijn);
	--hairline-strong: 1px solid var(--fg);
}

.bg-light,
.bg-dark{
	background-color: var(--bg);
	color: var(--fg);
}

/* Licht-op-donker leest rustiger met wat meer interlinie. */
.bg-dark p,
.bg-dark li{ line-height: 1.68; }

.bg-dark + .bg-dark{  }


/* GRID KOLOMMEN */
.w10 { grid-column: span 1; }
.w20 { grid-column: span 2; }
.w30 { grid-column: span 3; }
.w40 { grid-column: span 4; }
.w50 { grid-column: span 5; }
.w60 { grid-column: span 6; }
.w70 { grid-column: span 7; }
.w80 { grid-column: span 8; }
.w90 { grid-column: span 9; }
.w0,
.w100 { grid-column: span 10; }


picture{
	display: flex;
	height: 100%;
	/* Zonder breedte krimpt een <picture> naar de intrinsieke beeldbreedte
	   zodra de container niet stretcht (bv. een gecentreerd beeld). */
	width: 100%;
}


/* NAV */
.nav-list {
	flex-direction: row;
	display: flex;
	gap: var(--gap);
	list-style: none;
	margin: 0;
	padding: 0;
}


@media screen and (max-width: 1200px) {
	.w10,
	.w20,
	.w30,
	.w40,
	.w50,
	.w60,
	.w70,
	.w80,
	.w90{
		grid-column: span 10;
	}
}