/*
  BASIS — de opmaak die overal geldt.

  Hier staat geen enkele losse kleur of maat: alles komt uit tokens.css. Wil je
  iets veranderen aan het uiterlijk, kijk dan eerst of het daar kan.
*/

/* ==========================================================================
   1. RESET
   ========================================================================== */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;

	/*
	   Klik je op een ankerlink, dan stopt de pagina net onder de zwevende
	   balk in plaats van eronder. Scheelt "waar is de kop gebleven?".
	*/
	scroll-padding-top: var(--dp-anker-ruimte);
}

body {
	margin: 0;
	background: var(--dp-bg);
	color: var(--dp-text);
	font-family: var(--dp-font-body);
	font-size: var(--dp-size-body);
	font-weight: var(--dp-weight-body);
	line-height: var(--dp-leading-body);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;

	/*
	   De secties schuiven met een negatieve marge over elkaar heen. Zonder dit
	   zou de browser die overlap als extra breedte zien en een horizontale
	   scrollbalk tonen.
	*/
	overflow-x: clip;
}

img,
picture,
svg,
video {
	display: block;
	max-width: 100%;
	height: auto;
}

button,
input,
select,
textarea {
	font: inherit;
	color: inherit;
}

/* ==========================================================================
   2. TYPOGRAFIE
   ========================================================================== */

h1,
h2,
h3,
h4,
h5 {
	margin: 0;
	font-family: var(--dp-font-display);
	font-weight: var(--dp-weight-display);
	font-variation-settings: var(--dp-fraunces-axes);
	line-height: var(--dp-leading-heading);
	letter-spacing: var(--dp-tracking-heading);
	color: var(--dp-text-strong);

	/*
	   Voorkomt dat er één los woord op de laatste regel van een kop achterblijft.
	   Alleen op koppen: bij lopende tekst zou het gaten in de regels trekken.
	*/
	text-wrap: balance;
}

h1 {
	font-size: var(--dp-size-h1);
	letter-spacing: var(--dp-tracking-display);
}

h2 {
	font-size: var(--dp-size-h2);
}

h3 {
	font-size: var(--dp-size-h3);
}

h4 {
	font-size: var(--dp-size-h4);
}

h5 {
	font-size: var(--dp-size-h5);
}

/*
  Het cursieve accentwoord in een kop. Fraunces cursief is een heel ander
  ontwerp dan de rechte variant: sierlijker, met een zwierige staart. Precies
  daarom werkt het als accent op één of twee woorden, en niet op een hele zin.
*/
h1 em,
h2 em,
h3 em,
.dp-em {
	font-style: italic;
	font-weight: inherit;
}

p {
	margin: 0;
	max-width: var(--dp-measure);
}

a {
	color: inherit;
	text-decoration-color: rgb(18 43 7 / 0.35);
	text-underline-offset: 0.18em;
	text-decoration-thickness: 1px;
	transition:
		color var(--dp-transition),
		text-decoration-color var(--dp-transition);
}

a:hover {
	text-decoration-color: currentcolor;
}

/* Een link midden in lopende tekst op een lichte achtergrond krijgt de groene
   linkkleur: zonder dat had hij precies dezelfde kleur als de tekst eromheen.
   Alleen dáár. De menubalk, de footer en donkere blokken houden hun eigen
   kleur, en knoppen en pillen herken je aan hun vorm, niet aan hun letters. */
:is(p, li, dd, blockquote, .dp-vraag__tekstblok) a:not([class]) {
	color: var(--dp-link);
	text-decoration-color: rgb(67 112 31 / 0.4);
}

.dp-section--dark :is(p, li, dd, blockquote) a:not([class]),
:is(.dp-nav, .dp-footer) a:not([class]) {
	color: inherit;
}

strong,
b {
	font-weight: var(--dp-weight-bold);
	color: var(--dp-text-strong);
}

ul,
ol {
	margin: 0;
	padding: 0;
}

li {
	list-style: none;
}

/* ==========================================================================
   3. HULPKLASSEN
   ========================================================================== */

/* Alleen voor schermlezers: onzichtbaar, maar wel voorgelezen. */
.dp-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.dp-skip-link {
	position: absolute;
	top: var(--dp-space-s);
	left: var(--dp-space-s);
	z-index: 200;
	padding: 0.7em 1.2em;
	border-radius: var(--dp-radius-pill);
	background: var(--dp-lime);
	color: var(--dp-forest);
	font-weight: var(--dp-weight-bold);
	text-decoration: none;
	transform: translateY(-200%);
	transition: transform var(--dp-transition);
}

.dp-skip-link:focus-visible {
	transform: translateY(0);
}

/*
  Geeft elk direct kind ruimte van zijn voorganger, behalve het eerste. Zo
  hoeven losse elementen geen eigen marges te hebben en blijven ze herbruikbaar.
*/
.dp-flow > * + * {
	margin-top: var(--dp-flow, var(--dp-space-s));
}

.dp-container {
	width: 100%;
	max-width: calc(var(--dp-container) + 2 * var(--dp-gutter));
	margin-inline: auto;
	padding-inline: var(--dp-gutter);
}

.dp-container--wide {
	max-width: calc(var(--dp-container-wide) + 2 * var(--dp-gutter));
}

.dp-container--narrow {
	max-width: calc(var(--dp-container-narrow) + 2 * var(--dp-gutter));
}

.dp-center {
	text-align: center;
}

.dp-center p,
.dp-center .dp-lead {
	margin-inline: auto;
}

.dp-lead {
	font-size: var(--dp-size-lead);
	line-height: 1.55;
	color: var(--dp-text-muted);
}

.dp-small {
	font-size: var(--dp-size-small);
}

/* Houdt een woordgroep bij elkaar, zoals "geld-terug-garantie". */
.dp-nobr {
	white-space: nowrap;
}

/* ==========================================================================
   4. SECTIES — het tabjes-systeem
   ==========================================================================

   Elke sectie krijgt links- en rechtsboven een radius van 30px en schuift met
   een negatieve marge 30px over de vorige heen. Daardoor lijkt het alsof de
   blokken als tabbladen over elkaar liggen. De radius zit aan de sectie zelf,
   dus er zijn geen losse labels of scheidingsplaatjes nodig.
*/

.dp-section {
	position: relative;
	z-index: 1;
	padding-block: var(--dp-section-y);
	background: var(--dp-bg);
	border-start-start-radius: var(--dp-radius-section);
	border-start-end-radius: var(--dp-radius-section);
}

/*
  Elke sectie kruipt over zijn voorganger heen, ook over de hero. Omdat ze
  allemaal dezelfde z-index hebben, ligt een latere sectie vanzelf bovenop:
  bij gelijke z-index wint de volgorde in de HTML.
*/
.dp-salespagina > * + .dp-section,
.dp-salespagina > * + .dp-tpl {
	margin-top: calc(-1 * var(--dp-radius-section));
}

.dp-section--dark {
	background: var(--dp-bg-dark);
	color: var(--dp-text-on-dark);
	--dp-line: var(--dp-line-on-dark);
}

.dp-section--dark h1,
.dp-section--dark h2,
.dp-section--dark h3,
.dp-section--dark h4,
.dp-section--dark h5 {
	color: var(--dp-paper);
}

.dp-section--dark .dp-lead {
	color: var(--dp-text-on-dark-muted);
}

.dp-section--wit {
	background: #fff;
}

.dp-section--moss {
	background: var(--dp-moss);
}

.dp-section--sand {
	background: var(--dp-sand);
}

.dp-section--tight {
	padding-block: var(--dp-section-y-tight);
}

/* De eerste sectie na de hero hoeft niet over iets heen te schuiven. */
.dp-section--flush {
	border-start-start-radius: 0;
	border-start-end-radius: 0;
	margin-top: 0;
}

/* De kop van een sectie: eyebrow, titel, inleiding. */
.dp-section__head {
	--dp-flow: var(--dp-space-s);
	max-width: 46rem;
	margin-bottom: var(--dp-kopruimte);
}

.dp-section__head--center {
	margin-inline: auto;
	text-align: center;
}

.dp-section__head--center p {
	margin-inline: auto;
}

/* ==========================================================================
   5. REVEAL
   ==========================================================================

   Onderdelen met data-dp-reveal komen omhoog zodra ze in beeld schuiven. De
   klasse dp-heeft-reveal zet het script pas op de pagina als het draait. Zonder
   script, of bij minder beweging, staat alles dus gewoon meteen zichtbaar.

   Het script haalt het attribuut weg zodra de animatie klaar is. Daarna geldt
   weer de eigen overgang van het element, zodat een hover-schaduw zacht
   opkomt. Zet data-dp-reveal liever toch niet op een kaart met een eigen
   hover-beweging: tijdens het inschuiven bijten twee transforms elkaar.
*/

.dp-heeft-reveal [data-dp-reveal] {
	opacity: 0;
	transform: translateY(28px);
	transition:
		opacity 700ms var(--dp-ease-out),
		transform 900ms var(--dp-ease-out);
	transition-delay: var(--dp-delay, 0ms);
}

.dp-heeft-reveal [data-dp-reveal].is-zichtbaar {
	opacity: 1;
	transform: none;
}

/* ==========================================================================
   6. FOCUS
   ==========================================================================

   Eén zichtbare focusring voor de hele site, en alleen bij toetsenbordgebruik
   (of als een script de focus verplaatst, zoals bij een WooCommerce-melding).
   Middengroen op licht; op donkergroen valt dat weg, daar wordt hij bladgroen.
   Oranje leek op een foutmelding.
*/

:focus-visible {
	outline: var(--dp-focus-width) solid var(--dp-focus);
	outline-offset: var(--dp-focus-offset);
	border-radius: var(--dp-radius-s);
}

:is(.dp-section--dark, .dp-footer, .dp-over) {
	--dp-focus: var(--dp-leaf);
}

/* ==========================================================================
   7. BEWEGING UITZETTEN
   ==========================================================================

   Wie in zijn systeem heeft aangegeven minder beweging te willen, krijgt de
   pagina zonder animaties. Alles blijft wel zichtbaar: de reveal-animaties
   zetten hun eindstand hier meteen aan.
*/

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* Geen losse woorden op een eigen laatste regel: de browser verdeelt
   de laatste regels van een alinea zelf wat evenwichtiger. */
p,
li,
blockquote,
figcaption {
	text-wrap: pretty;
}

/* WordPress zet emoji als plaatje in de tekst (img.emoji). Zonder deze regel
   worden ze door de img-regel hierboven zo breed als de kolom. */
img.emoji,
img.wp-smiley {
	display: inline;
	width: 1em;
	height: 1em;
	margin: 0 0.07em;
	vertical-align: -0.1em;
	border-radius: 0;
	box-shadow: none;
}

/* Vetgedrukte tekst in een link houdt de kleur van de link. Anders is de ene
   link groen en de andere donkergroen, alleen omdat er <strong> in staat. */
a :is(strong, b) {
	color: inherit;
}