/* BASE */
body{
    margin: 0;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	background: var(--bg);
	color: var(--fg);
	font-family: var(--font-text);
	font-size: var(--p-size);
	font-variation-settings: var(--vf-text);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-synthesis-weight: none;
}

strong,
strong *{
	font-variation-settings: 'wdth' 100, 'wght' 620 !important;
	font-weight: normal !important;
}

h1{ font-size: var(--h1-size); font-variation-settings: var(--vf-display);    letter-spacing: -0.035em; line-height: 0.94; }
h2{ font-size: var(--h2-size); font-variation-settings: var(--vf-display);    letter-spacing: -0.03em;  line-height: 0.98; }
h3{ font-size: var(--h3-size); font-variation-settings: var(--vf-heading);    letter-spacing: -0.02em;  line-height: 1.12; }
h4{ font-size: var(--h4-size); font-variation-settings: var(--vf-heading-sm); letter-spacing: -0.015em; line-height: 1.2; }
h5{ font-size: var(--h5-size); font-variation-settings: var(--vf-heading-sm); letter-spacing: -0.015em; line-height: 1.2; }
h6{ font-size: var(--h6-size); font-variation-settings: var(--vf-meta);       letter-spacing: 0.08em;   line-height: 1.4; text-transform: uppercase; }

h1,h2,h3,h4,h5,h6{
    font-family: var(--font-headings);
    font-weight: normal;
    color: var(--fg);
    text-wrap: balance;
    margin-top: 0;
    margin-bottom: 0.6em;
}

img{
	width: 100%;
	height: auto;
    user-select: none;
	background-color: var(--wash);
}
figure{ margin: 0; }
video{
	width: 100%;
	height: auto;
}
main button{ margin-top: 1.5rem; }


/* BUTTONS — vierkant, haarlijn, uppercase. De eerste knop in een rij is
   massief, de rest staat in outline. */
input[type='submit'],
a.button,
button{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.6em;
	cursor: pointer;
	padding: 0.95em 1.8em;
	border: var(--hairline-strong);
	border-radius: var(--border-radius-medium);
	background-color: var(--bg);
	color: var(--fg);
	font-family: var(--font-text);
	font-size: var(--meta-size);
	font-variation-settings: var(--vf-button);
	font-weight: normal;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	line-height: 1;
	/* Het thema zet box-sizing niet globaal. Bij fit-content maakt dat niets
	   uit, maar een knop over de volle breedte zou anders zijn padding
	   bovenop de 100% krijgen en uit zijn kolom lopen. */
	box-sizing: border-box;
	width: fit-content;
	margin-bottom: 0;
	transition: background-color var(--transition-fast) var(--ease),
	            color var(--transition-fast) var(--ease);
}

input[type='submit']:hover,
a.button:hover,
button:hover{
	background-color: var(--fg);
	color: var(--bg);
}

.buttons > a.button:first-child,
.buttons > button:first-child{
	background-color: var(--fg);
	color: var(--bg);
}
.buttons > a.button:first-child:hover,
.buttons > button:first-child:hover{
	background-color: var(--bg);
	color: var(--fg);
}

/* Een rij waarin geen enkele knop massief is. Twee klassen diep, anders
   verliest deze regel van `.buttons > a.button:first-child` hierboven. */
.buttons.buttons--outline > a.button,
.buttons.buttons--outline > button{
	background-color: var(--bg);
	color: var(--fg);
}
.buttons.buttons--outline > a.button:hover,
.buttons.buttons--outline > button:hover{
	background-color: var(--fg);
	color: var(--bg);
}

/* Knoppen over de volle breedte, onder elkaar. De tekst staat al gecentreerd
   omdat .button zelf een flexbox met justify-content: center is. */
.buttons.buttons--block{
	flex-direction: column;
	align-items: stretch;
}
.buttons.buttons--block > a.button,
.buttons.buttons--block > button{
	width: 100%;
}

.buttons{
    display: flex;
    gap: var(--gallery-gap);
    flex-wrap: wrap;
}


/* INLINE TEKST */
br{ display: inline-flex; }
b{ font-variation-settings: 'wdth' 100, 'wght' 620; }
i,
em{ font-style: italic; }
p > a{ text-decoration: underline; }

figcaption,
span,
a,
li,
p{
    font-family: var(--font-text);
    font-variation-settings: var(--vf-text);
    font-weight: normal;
    line-height: 1.6;
    letter-spacing: 0;
    margin-bottom: 1em;
    color: inherit;
	text-underline-offset: 0.22em;
    text-decoration-thickness: 1px;
    text-decoration-color: currentColor;
}

a{
	color: inherit;
	text-decoration: none;
}
p > a:hover{ text-decoration-thickness: 2px; }

.content p,
.content li{ color: var(--fg-muted); }
.content p:first-child:last-child{ margin-bottom: 0; }


/* LIJSTEN */
main ol,
main ul{ padding-left: 1.5em; }
main ol li,
main ul li{
    padding-left: 12px;
    margin-bottom: .5em;
}


/* FOCUS — zichtbaar, vierkant, nooit weggehaald */
:focus{ outline: none; }
:focus-visible{
	outline: 2px solid var(--fg);
	outline-offset: 3px;
}


/* HEADING MARGINS
   Alleen binnen .content — dat is de wrapper rond elk ACF wysiwyg-veld.
   Daarbuiten bepaalt het blok zijn eigen marges; een elementselector met
   :not(:first-child) weegt namelijk zwaarder dan een losse blokklasse en
   overrulede die anders stilletjes. */
.content h1:not(:first-child),
.content h2:not(:first-child),
.content h3:not(:first-child),
.content h4:not(:first-child),
.content h5:not(:first-child),
.content h6:not(:first-child){ margin-top: 1em; }

h1:last-child:not(:only-child),
h2:last-child:not(:only-child),
h3:last-child:not(:only-child),
h4:last-child:not(:only-child),
h5:last-child:not(:only-child),
h6:last-child:not(:only-child),
p:last-child{ margin-bottom: 0; }

h1:first-child,
h2:first-child,
h3:first-child,
h4:first-child,
h5:first-child,
h6:first-child,
p:first-child{ margin-top: 0; }