/*
  COMPONENTEN — de onderdelen die op meerdere plekken terugkomen.

  De regel voor de hele pagina: één knopstijl, één kaartstijl, één reviewstijl.
  Wil je ergens toch iets anders, gebruik dan een modifier van hetzelfde
  component in plaats van iets nieuws te verzinnen.
*/

/* ==========================================================================
   EYEBROW
   Het kleine kapitaaltje boven een kop: Figtree, klein, met letterspatiëring.
   Handschrift kan hier niet, want Chelsie in kapitalen is onleesbaar. De hero
   heeft als enige een handgeschreven regel, en die heeft zijn eigen opmaak.
   ========================================================================== */

.dp-eyebrow {
	display: block;

	/* Volle breedte: anders krijgt het regeltje de leesbreedte van een alinea
	   mee en staat het in een gecentreerde kop links van het midden. */
	max-width: none;
	margin: 0;
	font-family: var(--dp-font-body);
	font-size: var(--dp-size-xs);
	font-weight: var(--dp-weight-bold);
	letter-spacing: var(--dp-tracking-eyebrow);
	text-transform: uppercase;
	color: var(--dp-text-muted);

	/* Letterspatiëring zet ook achter de laatste letter nog een spatie. In een
	   gecentreerde kop staat het woord daardoor zichtbaar te ver naar links.
	   Deze negatieve marge maakt het vakje even breed als de spatie, zodat de
	   tekst weer in het midden valt. Links uitgelijnd verandert er niets. */
	margin-inline-end: calc(var(--dp-tracking-eyebrow) * -1);
}

.dp-section--dark .dp-eyebrow {
	/* Op donker altijd zacht groen. Koraal schreeuwt boven een kop, en het
	   eyebrow is juist het rustige regeltje dat de kop aankondigt. Ligt een
	   eyebrow op een foto, dan wordt het doorzichtig wit (zie .dp-over). */
	color: var(--dp-leaf);
}

/* Het handgeschreven accentje. Losse woorden, nooit een hele zin. */
.dp-hand {
	font-family: var(--dp-font-hand);
	font-weight: 400;
	letter-spacing: 0.01em;
	text-transform: none;
}

/* ==========================================================================
   MARKERING
   Een streep in de CTA-kleur áchter een woord in een kop, alsof je het met een
   markeerstift hebt aangezet. Hij zit los van de letters, zodat de tekst zelf
   zijn kleur en zijn contrast houdt.

   De streep staat expres iets scheef en heeft vier verschillende hoekrondingen:
   daardoor oogt hij met de hand gezet in plaats van als een rechthoekje.
   ========================================================================== */

.dp-mark {
	position: relative;
	display: inline-block;
	isolation: isolate;
}

.dp-mark::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset-inline: -0.14em;
	inset-block-end: 0.1em;
	height: 0.36em;
	background: var(--dp-lime);
	border-radius: 0.5em 0.2em 0.45em 0.25em;
	transform: rotate(-0.7deg);
	transform-origin: left center;
}

/*
  Bij het laden trekt de streep van links naar rechts. Dat gebeurt één keer,
  duurt kort, en gaat niet door bij wie minder beweging wil.
*/
@media (prefers-reduced-motion: no-preference) {
	.dp-mark::before {
		animation: dp-streep 620ms var(--dp-ease-out) 380ms both;
	}
}

@keyframes dp-streep {
	from {
		transform: rotate(-0.7deg) scaleX(0);
	}

	to {
		transform: rotate(-0.7deg) scaleX(1);
	}
}

/* ==========================================================================
   KNOPPEN
   ========================================================================== */

.dp-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 0.6em;
	padding: 0.95em 1.7em;
	border: var(--dp-border) solid var(--dp-pil-rand);
	border-radius: var(--dp-radius-pill);
	background: var(--dp-lime);

	/*
	   Twee schaduwen tegelijk: een harde donkere schijf die 3px uitsteekt, en
	   daaronder een vage. Bij hover schuift de knop op die schijf en verdwijnt
	   hij, alsof je de knop echt indrukt.
	*/
	box-shadow:
		3px 3px 0 0 var(--dp-btn-schijf, var(--dp-forest)),
		0 14px 26px -14px rgb(18 43 7 / 0.45);
	color: var(--dp-forest);
	font-family: var(--dp-font-body);
	font-size: var(--dp-size-body);
	font-weight: var(--dp-weight-bold);
	line-height: 1.1;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	isolation: isolate;
	transition:
		transform var(--dp-transition),
		box-shadow var(--dp-transition),
		background-color var(--dp-transition),
		color var(--dp-transition);
}

.dp-btn__icon {
	flex: none;
	width: 1.1em;
	height: 1.1em;
	transition: transform var(--dp-transition);
}

.dp-btn:hover {
	transform: translate(3px, 3px);
	box-shadow:
		0 0 0 0 var(--dp-btn-schijf, var(--dp-forest)),
		0 4px 10px -6px rgb(18 43 7 / 0.35);
}

.dp-btn:active {
	transform: translate(3px, 3px) scale(0.985);
}

.dp-btn:hover .dp-btn__icon {
	transform: translateX(0.22em);
}

/*
  Op donkergroen valt een donkergroene schijf weg. Daar wordt hij nog een stuk
  donkerder, bijna zwart, zodat de knop ook daar zijn tweede laag houdt.
*/
.dp-section--dark,
.dp-scene--1,
.dp-op-donker {
	--dp-btn-schijf: #050a03;
}

.dp-btn--wide {
	width: 100%;
	justify-content: center;
}

.dp-btn--small {
	padding: 0.7em 1.25em;
	font-size: var(--dp-size-small);
}

/* --- Grote knop -----------------------------------------------------------
   De hoofd-CTA in de hero: 18px, zoals in Simones voorbeeld. Elders is de
   gewone maat genoeg.
*/

.dp-btn--lg {
	padding: 1em 1.45em;
	font-size: clamp(1rem, 0.93rem + 0.3vw, 1.125rem);
}

/* --- Secundaire knop ------------------------------------------------------
   Dezelfde vorm, maar leeg. Nooit twee lime knoppen naast elkaar: dan weet
   niemand meer waar hij heen moet.
*/

.dp-btn--ghost {
	background: transparent;
	border-color: var(--dp-line-strong);
	box-shadow: none;
	color: var(--dp-text-strong);
}

.dp-btn--ghost:hover {
	background: rgb(18 43 7 / 0.05);
	border-color: var(--dp-forest);
	transform: none;
	box-shadow: none;
}

.dp-btn--ghost:active {
	transform: scale(0.985);
}

.dp-section--dark .dp-btn--ghost,
.dp-btn--ghost-on-dark {
	border-color: rgb(231 238 221 / 0.35);
	color: var(--dp-paper);
}

.dp-section--dark .dp-btn--ghost:hover,
.dp-btn--ghost-on-dark:hover {
	background: rgb(231 238 221 / 0.1);
	border-color: var(--dp-paper);
}

/* ==========================================================================
   KAARTEN
   ========================================================================== */

.dp-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--dp-space-xs);
	padding: var(--dp-space-m);
	border: var(--dp-border) solid var(--dp-line);
	border-radius: var(--dp-radius-l);
	background: var(--dp-paper);
	transition:
		transform var(--dp-transition),
		box-shadow var(--dp-transition),
		border-color var(--dp-transition);
}

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

.dp-card__text {
	color: var(--dp-text-muted);
	max-width: none;
}

.dp-section--dark .dp-card {
	background: rgb(231 238 221 / 0.05);
	border-color: var(--dp-line-on-dark);
}

/*
  De kaart tilt bij hover een paar pixels op en de rand wordt donkerder. Verder
  niets: de 1px rand doet het werk.
*/

.dp-card:hover {
	transform: translateY(-4px);
	border-color: var(--dp-line-strong);
	box-shadow: var(--dp-shadow-m);
}

.dp-section--dark .dp-card:hover {
	border-color: rgb(231 238 221 / 0.4);
	box-shadow: none;
}

/* ==========================================================================
   BUBBELS EN CHIPS
   De vorm uit de accent bubbles: pill, zachte halfdoorzichtige rand, vier vaste
   kleuren. Elke pill op de pagina gebruikt dezelfde rand (--dp-pil-rand).
   Let op: een bubbel is een label, geen knop. Daarom nooit een schaduw of een
   hover-effect: dan denkt de bezoeker dat hij erop moet klikken.
   ========================================================================== */

.dp-bubble {
	display: inline-flex;
	align-items: center;
	padding: 0.42em 0.95em;
	border: var(--dp-border) solid var(--dp-pil-rand);
	border-radius: var(--dp-radius-pill);
	background: var(--dp-shell);
	color: var(--dp-forest);
	font-size: var(--dp-size-small);
	font-weight: var(--dp-weight-medium);
	line-height: 1.2;
}

.dp-bubble--peach {
	background: var(--dp-peach);
}

.dp-bubble--leaf {
	background: var(--dp-leaf);
}

.dp-bubble--forest {
	background: var(--dp-forest);
	color: var(--dp-paper);
}

/* Twee extra kleuren, zodat elke blogcategorie er echt een eigen krijgt. */
.dp-bubble--lime {
	background: var(--dp-lime);
}

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

/* De waardechip op de bonuskaarten: "Waarde: € 150". */
.dp-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	padding: 0.45em 1em;
	border: var(--dp-border) solid var(--dp-pil-rand);
	border-radius: var(--dp-radius-pill);
	background: var(--dp-shell);
	font-size: var(--dp-size-small);
	font-weight: var(--dp-weight-bold);
	color: var(--dp-forest);
	white-space: nowrap;
}

/* ==========================================================================
   VINKJESLIJST
   Het vinkje is bewust klein: net zo hoog als een hoofdletter, zodat het naast
   de tekst staat en er niet bovenuit steekt.
   ========================================================================== */

.dp-checklist {
	display: grid;
	gap: var(--dp-space-xs);
}

.dp-checklist li {
	display: grid;
	grid-template-columns: 1.15em 1fr;
	gap: 0.7em;
	align-items: start;
}

/* Vinkjes zijn overal donkergroen. Bladgroen leest alleen op een donker vlak;
   op papier, mos of een lichtgroen kaartje valt het weg. Dit is de regel voor
   de hele site, dus zet hem nergens anders om. */
.dp-checklist svg {
	width: 1.15em;
	height: 1.15em;
	margin-top: 0.22em;
	flex: none;
	color: var(--dp-forest);
	stroke-width: 2.2;
}

.dp-section--dark .dp-checklist svg {
	color: var(--dp-leaf);
}

/* ==========================================================================
   STERREN
   ========================================================================== */

.dp-stars {
	display: inline-flex;
	gap: 0.12em;
	color: var(--dp-orange);
}

.dp-stars svg {
	width: 1em;
	height: 1em;
}

/* ==========================================================================
   REVIEW
   Eén stijl voor de hele pagina: witte kaart, sterren, tekst, naam met avatar.
   De uitgelichte variant is dezelfde kaart in donkergroen.
   ========================================================================== */

.dp-review {
	display: flex;
	flex-direction: column;
	gap: var(--dp-space-s);
	padding: var(--dp-space-m);
	border: var(--dp-border) solid var(--dp-line);
	border-radius: var(--dp-radius-l);
	background: #fff;
	transition:
		transform var(--dp-transition),
		box-shadow var(--dp-transition),
		border-color var(--dp-transition);
}

.dp-review:hover {
	transform: translateY(-4px);
	border-color: var(--dp-line-strong);
	box-shadow: var(--dp-shadow-m);
}

.dp-review__text {
	max-width: none;
	line-height: 1.52;
	color: var(--dp-text);
}

/* Het stukje dat je echt moet lezen springt eruit. */
.dp-review__text strong {
	font-weight: var(--dp-weight-bold);
	color: var(--dp-text-strong);
}

.dp-review--featured .dp-review__text strong {
	color: #fff;
}

.dp-review__person {
	display: flex;
	align-items: center;
	gap: 0.7em;
	margin-top: auto;
}

.dp-review__avatar {
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	object-fit: cover;
	border: var(--dp-border) solid var(--dp-line);
}

/* Naam en functie direct onder elkaar, zonder lucht ertussen. */
.dp-review__wie {
	display: grid;
	gap: 0.05rem;
}

/*
  Naam en site even klein en even rustig: de review zelf is het belangrijkste,
  niet wie hem schreef.
*/
.dp-review__name,
.dp-review__role {
	font-size: var(--dp-size-xs);
	font-weight: var(--dp-weight-medium);
	line-height: 1.3;
	color: var(--dp-text-muted);
}

/* De site is een link naar de echte website, in een nieuw tabblad. Met een
   streepje eronder, net als alle andere tekstlinks. */
a.dp-review__role {
	text-decoration: underline;
	text-decoration-color: rgb(18 43 7 / 0.25);
	text-underline-offset: 0.18em;
}

a.dp-review__role:hover {
	color: var(--dp-forest);
	text-decoration-color: currentcolor;
}

/* Op een donkere kaart wordt hij wit bij hover; donkergroen viel daar weg. */
.dp-review--featured a.dp-review__role:hover,
.dp-section--dark a.dp-review__role:hover {
	color: #fff;
	text-decoration-color: currentcolor;
}

.dp-review--featured {
	background: var(--dp-forest);
	border-color: var(--dp-forest);
	color: var(--dp-text-on-dark);
}

.dp-review--featured .dp-review__text {
	color: var(--dp-paper);
	font-size: var(--dp-size-lead);
	font-family: var(--dp-font-display);
	font-variation-settings: var(--dp-fraunces-axes);
	line-height: 1.35;
}

.dp-review--featured .dp-review__name,
.dp-review--featured .dp-review__role {
	color: var(--dp-text-on-dark-muted);
}

.dp-review--featured .dp-review__role {
	color: var(--dp-text-on-dark-muted);
}

/* De grote variant, voor één review die alleen op een rij staat. */
.dp-review--groot {
	padding: var(--dp-space-l);
}

.dp-review--groot .dp-review__text {
	font-family: var(--dp-font-display);
	font-size: var(--dp-size-h4);
	font-variation-settings: var(--dp-fraunces-axes);
	line-height: 1.35;
	color: var(--dp-text-strong);
}

.dp-review blockquote {
	margin: 0;
}

/* De eyebrow staat in de H1, zodat de zoekwoorden meetellen als deel van de
   hoofdtitel. Hij moet er wel precies uit blijven zien als een eyebrow, dus
   niets van de titel overnemen: geen titelletter, regelhoogte of spatiëring. */
h1 > .dp-eyebrow {
	margin-bottom: var(--dp-space-s);
	font-style: normal;
	font-variation-settings: normal;
	line-height: 1.5;
}

@media (width < 62rem) {
	h1 > .dp-eyebrow {
		margin-bottom: 0.9rem;
	}
}

/* ==========================================================================
   UITKLAPVAK (het WordPress-blok Details)
   Voor de cursuslessen en andere inhoud uit de editor. Dezelfde vorm als de
   vragen in de FAQ: een witte kaart met een plusje dat een kruisje wordt, en
   het antwoord schuift zacht open in plaats van ineens te verschijnen.
   ========================================================================== */
.wp-block-details {
	margin-block: 0.75rem;
	border: var(--dp-border) solid var(--dp-line);
	border-radius: 1rem;
	background: #fff;
	transition:
		border-color 250ms var(--dp-ease),
		box-shadow 250ms var(--dp-ease);
}

.wp-block-details:hover {
	border-color: var(--dp-line-strong);
}

.wp-block-details[open] {
	border-color: var(--dp-forest);
	box-shadow: var(--dp-shadow-m);
}

.wp-block-details > summary {
	display: flex;
	gap: 1rem;
	justify-content: space-between;
	align-items: center;
	padding: 1rem 1.25rem;
	font-weight: var(--dp-weight-bold);
	color: var(--dp-text-strong);
	list-style: none;
	cursor: pointer;
}

.wp-block-details > summary::-webkit-details-marker {
	display: none;
}

.wp-block-details > summary::after {
	content: "+";
	flex: none;
	font-size: 1.4rem;
	line-height: 1;
	color: var(--dp-link);
	transition: transform 350ms var(--dp-ease);
}

.wp-block-details[open] > summary::after {
	transform: rotate(45deg);
}

.wp-block-details > :not(summary) {
	margin-inline: 1.25rem;
}

.wp-block-details > :last-child:not(summary) {
	margin-block-end: 1.1rem;
}

/* Ruimte tussen alles wat in een uitklapvak staat: tekst, lijstjes, knoppen. */
.wp-block-details > :not(summary) + :not(summary) {
	margin-top: 0.8rem;
}

.wp-block-details > .wp-block-buttons,
.wp-block-details > :is(ul, ol) + * {
	margin-top: 1.25rem;
}

@supports (interpolate-size: allow-keywords) {
	.wp-block-details {
		interpolate-size: allow-keywords;
	}

	.wp-block-details::details-content {
		height: 0;
		overflow: clip;
		transition:
			height 450ms var(--dp-ease),
			content-visibility 450ms allow-discrete;
	}

	.wp-block-details[open]::details-content {
		height: auto;
	}
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-details::details-content {
		transition: none;
	}
}

/* Het mailadres dat in lessen de plaats van een formulier inneemt: een zacht
   groen vlak met een envelopje ervoor. */
.dp-les-mail {
	position: relative;
	padding: 1rem 1.25rem 1rem 3.5rem;
	border-radius: 1rem;
	background: var(--dp-moss);
	font-weight: var(--dp-weight-medium);
}

.dp-les-mail::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 1.1rem;
	width: 1.6rem;
	height: 1.6rem;
	border-radius: 50%;
	background: var(--dp-forest) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f5f9ed' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E") center / 0.95rem no-repeat;
	transform: translateY(-50%);
}

/* ==========================================================================
   LEARNDASH-LESSEN: tussenkoppen op leesmaat
   In een les is een kop een tussenkopje, geen paginatitel. De maten van de
   site (h2 tot 3.5rem) zijn daar veel te groot. Binnen een uitklapvak is een
   kop gewoon vetgedrukte tekst.
   ========================================================================== */
.learndash-wrapper .ld-tab-content h2 {
	margin-block: 2rem 0.5rem;
	font-size: var(--dp-size-h4);
}

.learndash-wrapper .ld-tab-content h3 {
	margin-block: 1.5rem 0.4rem;
	font-size: var(--dp-size-h5);
}

.wp-block-details :is(h2, h3, h4) {
	margin-block: 1.25rem 0.4rem;
	font-family: var(--dp-font-body);
	font-size: var(--dp-size-body);
	font-weight: var(--dp-weight-bold);
	letter-spacing: 0;
}

/* ==========================================================================
   TABEL (het WordPress-blok Tabel)
   In lessen en blogs. Een witte kaart met een zachte schaduw in plaats van een
   harde rand. De kopregel is donkergroen met kleine kapitalen in blad-groen,
   de eerste kolom leest als het label van de rij, en de rij onder je muis
   licht op, zodat je een regel makkelijk volgt.
   ========================================================================== */
.wp-block-table {
	overflow-x: auto;
	margin: 2rem 0;
	border: var(--dp-border) solid var(--dp-line);
	border-radius: var(--dp-radius-l);
	background: #fff;
	box-shadow: var(--dp-shadow-m);
}

figure.wp-block-table table {
	width: 100%;
	border: 0;
	border-collapse: separate;
	border-spacing: 0;
	font-size: var(--dp-size-small);
	line-height: 1.5;
}

figure.wp-block-table table :is(th, td) {
	padding: 0.95rem 1.25rem;
	border: 0;
	text-align: left;
	vertical-align: top;
}

/* WordPress zet zelf randen om elke cel en een dikke lijn onder de kop; die gaan eruit. */
figure.wp-block-table table thead {
	border: 0;
}

/* De kop van de tabel: rustig, zonder donkere balk. Kleine hoofdletters en
   een dunne lijn eronder, net als de tabellen in de winkel. */
figure.wp-block-table table thead th {
	border-bottom: var(--dp-border) solid var(--dp-line);
	background: transparent;
	font-size: 0.72rem;
	font-weight: var(--dp-weight-bold);
	letter-spacing: var(--dp-tracking-eyebrow);
	text-transform: uppercase;
	color: var(--dp-text-muted);
}

figure.wp-block-table table tbody td {
	border-top: var(--dp-border) solid var(--dp-line);
	transition: background-color var(--dp-transition);
}

figure.wp-block-table table tbody tr:first-child td {
	border-top: 0;
}

figure.wp-block-table table :is(th, td) > :is(p, br):last-child {
	margin-bottom: 0;
}

figure.wp-block-table table :is(th, td) > p:first-child {
	margin-top: 0;
}

figure.wp-block-table table tbody td:first-child {
	font-weight: var(--dp-weight-bold);
	color: var(--dp-text-strong);
}

figure.wp-block-table table tbody tr:hover td {
	background: rgb(232 243 211 / 0.55);
}

/* Plaatjes, video's en tabellen uit de editor staan in een <figure>, en die
   krijgt van de browser 40px inspringing. Die hoort er niet. */
figure:is(.wp-block-image, .wp-block-embed, .wp-block-video, .wp-block-table) {
	margin-inline: 0;
}

figure:is(.wp-block-image, .wp-block-embed, .wp-block-video) {
	margin-block: 1.5rem;
}

/* ==========================================================================
   KNOP UIT DE EDITOR (het WordPress-blok Knoppen)
   In lessen en blogs, zoals "Ga verder naar les 1.3". Donkergroen met een
   pijltje, dezelfde vorm als de knoppen op de site. Geen lime: dat blijft
   voor de ene hoofdknop per scherm.
   ========================================================================== */
.wp-block-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.wp-block-button .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 0.6em;
	padding: 0.9em 1.5em;
	border: 0;
	border-radius: var(--dp-radius-pill);
	background: var(--dp-forest);
	box-shadow: 0 14px 26px -16px rgb(18 43 7 / 0.55);
	color: var(--dp-paper) !important;
	font-family: var(--dp-font-body);
	font-size: var(--dp-size-small);
	font-weight: var(--dp-weight-bold);
	line-height: 1.25;
	text-decoration: none !important;
	transition:
		background-color var(--dp-transition),
		transform var(--dp-transition);
}

.wp-block-button .wp-block-button__link::after {
	content: "→";
	transition: transform var(--dp-transition);
}

.wp-block-button .wp-block-button__link:hover {
	background: #050a03;
	transform: translateY(-1px);
}

.wp-block-button .wp-block-button__link:hover::after {
	transform: translateX(0.2em);
}

/* Een infoblok in een les ("Houd er rekening mee…"): een witte kaart met een
   rond i-tje ervoor. Wit, zodat hij loskomt van het groene kruimelpad. */
.dp-les-info {
	position: relative;
	max-width: none;
	margin-block: 1.75rem;
	padding: 1.15rem 1.35rem 1.15rem 3.5rem;
	border: var(--dp-border) solid var(--dp-line);
	border-radius: var(--dp-radius-m);
	background: #fff;
	box-shadow: var(--dp-shadow-s);
	font-size: var(--dp-size-small);
	color: var(--dp-text);
}

.dp-les-info::before {
	content: "i";
	position: absolute;
	top: 1.15rem;
	left: 1.15rem;
	display: grid;
	place-items: center;
	width: 1.5rem;
	height: 1.5rem;
	border-radius: 50%;
	background: var(--dp-leaf-soft);
	font-family: var(--dp-font-display);
	font-size: 0.85rem;
	font-weight: var(--dp-weight-bold);
	font-style: italic;
	color: var(--dp-forest);
}

.dp-les-info > * + * {
	margin-top: 0.6rem;
}

/* De lege variant van een editorknop (stijl "Omlijnd"), zoals "Bekijk de demo".
   De rand is een outline, geen border: LearnDash haalt bij links de onderrand
   weg met een selector die zwaarder weegt dan alles wat hier kan. */
.wp-block-button.is-style-outline .wp-block-button__link {
	border: 0;
	outline: var(--dp-border) solid var(--dp-line-strong);
	outline-offset: -1px;
	background: transparent;
	box-shadow: none;
	color: var(--dp-text-strong) !important;
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
	outline-color: var(--dp-forest);
	background: rgb(18 43 7 / 0.05);
}

.wp-block-button.is-style-outline .wp-block-button__link:focus-visible {
	outline: 2px solid var(--dp-focus);
	outline-offset: 2px;
}

.wp-block-button.is-style-outline .wp-block-button__link[target="_blank"]::after {
	content: "↗";
}

/* Scheidingslijn uit de editor: zacht, dun en met ruim lucht erboven en eronder. */
hr.wp-block-separator,
.ld-tab-content > hr {
	height: 0;
	margin: clamp(2.5rem, 2rem + 2vw, 3.5rem) 0;
	border: 0;
	border-top: var(--dp-border) solid rgb(18 43 7 / 0.1);
	background: none;
	opacity: 1;
}

/* Waarschuwing in een les ("Sla dit niet over"): zachtoranje met een uitroepteken. */
.dp-les-info.dp-les-info--let-op {
	border-color: rgb(243 115 55 / 0.35);
	background: #fff8f3;
}

.dp-les-info.dp-les-info--let-op::before {
	content: "!";
	background: var(--dp-peach-soft);
	font-style: normal;
	color: var(--dp-bast);
}

/* Vertrouwensbalk: gezichtjes en tekst altijd naast elkaar. Is de tekst te
   lang, dan loopt hij over twee regels naast de gezichtjes in plaats van
   eronder te vallen. */
.dp-trust {
	flex-wrap: nowrap;
}

.dp-trust__tekst {
	min-width: 0;
	text-wrap: balance;
}

/* ==========================================================================
   COOKIEMELDING — "Koekje erbij?" (inc/koekje.php)
   Een wit kaartje linksonder, boven de zwevende balk maar onder het menu.
   Twee even grote knoppen: weigeren is net zo makkelijk als accepteren.
   ========================================================================== */
.dp-koekje {
	position: fixed;
	z-index: 95;
	inset-inline-start: 1rem;
	inset-block-end: 1rem;
	display: grid;
	gap: 0.6rem;
	width: min(23rem, calc(100% - 2rem));
	padding: 1.25rem 1.25rem 1.1rem;
	border: var(--dp-border) solid var(--dp-line);
	border-radius: var(--dp-radius-l);
	background: #fff;
	box-shadow: var(--dp-shadow-l);
	opacity: 0;
	transform: translateY(1rem);
	transition:
		opacity 0.35s ease,
		transform 0.35s ease;
}

.dp-koekje[hidden] {
	display: none;
}

.dp-koekje.is-open {
	opacity: 1;
	transform: none;
}

.dp-koekje__kop {
	margin: 0;
	padding-inline-end: 4rem;
	font-family: var(--dp-font-heading);
	font-size: 1.2rem;
	font-weight: var(--dp-weight-bold);
	line-height: 1.2;
	color: var(--dp-text-strong);
}

.dp-koekje__tekst {
	margin: 0;
	font-size: var(--dp-size-small);
	line-height: 1.55;
	color: var(--dp-text);
}

.dp-koekje__tekst a {
	color: var(--dp-text-strong);
}

.dp-koekje__knoppen {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.6rem;
	margin-top: 0.35rem;
}

.dp-koekje__knoppen .dp-btn {
	justify-content: center;
	width: 100%;
}

/* Het hondenkoekje: een botje met een hap eruit, rechtsboven in het kaartje.
   Na "Woef, lekker!" gaat er aan de andere kant nog een hap uit, met een
   paar kruimels, en pas daarna verdwijnt de melding. De happen zijn wit,
   net als het kaartje. */
.dp-koekje__koek {
	position: absolute;
	inset-block-start: 1.05rem;
	inset-inline-end: 1.1rem;
	width: 3.4rem;
	height: auto;
	overflow: visible;
	rotate: -12deg;
}

.dp-koekje__deeg,
.dp-koekje__kruimels {
	fill: #d9a15f;
}

.dp-koekje__gaatjes {
	fill: #b27a39;
}

.dp-koekje__hap {
	fill: #fff;
}

.dp-koekje__hap--twee,
.dp-koekje__kruimels--twee {
	opacity: 0;
	transition: opacity 120ms ease;
}

.dp-koekje.is-hap :is(.dp-koekje__hap--twee, .dp-koekje__kruimels--twee) {
	opacity: 1;
}

/* De hap: het koekje veert even in, precies als de tweede hap eruit gaat. */
@media (prefers-reduced-motion: no-preference) {
	.dp-koekje.is-hap .dp-koekje__koek {
		animation: dp-koek-hap 300ms ease both;
	}
}

@keyframes dp-koek-hap {
	0% { scale: 1; }
	40% { scale: 0.88; }
	100% { scale: 1; }
}

@media (width < 36rem) {
	.dp-koekje {
		inset-inline: 0.75rem;
		inset-block-end: 0.75rem;
		width: auto;
	}
}

@media (prefers-reduced-motion: reduce) {
	.dp-koekje {
		transition: none;
	}
}

/* "Cookies" in de footer: een knop die eruitziet als de links ernaast. */
.dp-footer__koekje {
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	color: var(--dp-text-on-dark);
	cursor: pointer;
	transition: color var(--dp-transition);
}

.dp-footer__koekje:hover {
	color: var(--dp-lime);
}