/**
 * MD-act — Onderdelen van het blogbericht
 * ============================================
 * Hoort bij [mdact_inhoudsopgave], [mdact_artikel_auteur],
 * [mdact_artikel_datum] en [mdact_gerelateerde_artikelen].
 *
 * Bewust weinig: de auteursregel en de datum erven gewoon de typografie van
 * het Elementor-element waar je ze in zet, en de inhoudsopgave krijgt alleen
 * de opsomming zelf. Het kader eromheen maak je in Elementor.
 *
 * Kleuren komen uit de variabelen van mdact-dienstblokken.css (:root), met
 * een hex als terugval.
 */

/* --- Geen ruimte die je in Elementor niet weg krijgt ---
   Zet je zo'n shortcode in een Kop- of Teksteditor-widget, dan wikkelt
   WordPress de inhoud in <p>. Onze blokken zijn geen tekst maar een blok, dus
   de alinea breekt eromheen open en er blijft een lege <p> naast staan. Die is
   onzichtbaar, maar heeft wel de gewone alinea-marge van 14,4 px eronder, en
   die zie je in Elementor nergens terug. Gemeten op de staging bij de
   breadcrumb (14 px onder de kruimels).

   In een Shortcode-widget gebeurt dit niet; dit is het vangnet voor de andere
   twee. */
.mdact-breadcrumb + p:empty,
.mdact-pills + p:empty,
.mdact-inhoudsopgave-blok + p:empty,
.mdact-artikel-auteur + p:empty,
.mdact-artikel-datum + p:empty,
.mdact-artikelteller + p:empty,
p:empty:has( + .mdact-breadcrumb ),
p:empty:has( + .mdact-pills ),
p:empty:has( + .mdact-inhoudsopgave-blok ) {
	display: none;
}

/* --- Inhoudsopgave ---
   Op verzoek van Albert en Mariëlle (25 september): geen bolletjes, twee
   kolommen op een breed scherm zodat een lange lijst niet de hele pagina
   vult, en op een telefoon ingeklapt. De kolommen lezen van boven naar
   beneden, eerst links en dan rechts.

   Elke regel is een rij met een licht lijntje eronder en rechts een
   pijltje, zoals de antwoordrijen van de vloerkeuzehulp van Wood (Tim, 25
   september). */
.mdact-inhoudsopgave {
	margin: 0;
	padding: 0;
	list-style: none;
	/* Een raster dat kolomsgewijs vult: eerst links van boven naar beneden,
	   dan rechts. Het aantal rijen (--rijen) zet de shortcode, en het script
	   werkt het bij als het regels toevoegt. Anders dan met CSS-kolommen
	   staat zo vast welke regel onderaan een kolom komt. */
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: repeat(var(--rijen, 50), auto);
	grid-auto-flow: column;
	column-gap: 56px;
}

.mdact-inhoudsopgave .mdact-inhoudsopgave__item {
	margin: 0;
	padding: 0;
	font-size: 15px;
	line-height: 1.45;
	border-bottom: 1px solid rgba(44, 74, 62, 0.14);
	color: var(--mdact-groen, #4A7C6B);
}

/* Een H3 springt een stukje in, zodat je ziet wat onder wat valt. Alleen
   zichtbaar als je niveaus="h2,h3" gebruikt. */
.mdact-inhoudsopgave .mdact-inhoudsopgave__item.is-h3 {
	padding-left: 16px;
	font-size: 14px;
}

/* De hele rij is klikbaar. Groen zoals de links in de lopende tekst.
   Zwaarder opgeschreven dan de globale linkstijl van Elementor (Site
   Settings), net als bij de breadcrumb. */
.mdact-inhoudsopgave a.mdact-inhoudsopgave__link {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	padding: 12px 0;
	color: var(--mdact-groen, #4A7C6B) !important;
	text-decoration: none !important;
	transition: color .2s ease;
}

.mdact-inhoudsopgave a.mdact-inhoudsopgave__link::after {
	content: "\2192";
	flex: none;
	color: var(--mdact-groen, #4A7C6B);
	transition: transform .2s ease;
}

.mdact-inhoudsopgave a.mdact-inhoudsopgave__link:hover,
.mdact-inhoudsopgave a.mdact-inhoudsopgave__link:focus-visible {
	color: var(--mdact-donkergroen, #2C4A3E) !important;
}

.mdact-inhoudsopgave a.mdact-inhoudsopgave__link:hover::after,
.mdact-inhoudsopgave a.mdact-inhoudsopgave__link:focus-visible::after {
	transform: translateX(3px);
}

@media (prefers-reduced-motion: reduce) {
	.mdact-inhoudsopgave a.mdact-inhoudsopgave__link::after {
		transition: none;
	}
}

/* --- De balk met de knop "Inhoudsopgave" ---
   Maakt het script. Op een telefoon staat hij altijd in beeld (en de lijst
   zit erachter), op een breed scherm alleen als hij vast onder de header
   hangt. Zonder script is er geen knop en staat de lijst gewoon open. */
.mdact-inhoudsopgave-blok button.mdact-inhoudsopgave__knop {
	display: none;
}

/* Element plus twee klassen: de Elementor-kit maakt elke knop goud. */
.mdact-inhoudsopgave-blok button.mdact-inhoudsopgave__knop,
.mdact-inhoudsopgave-blok button.mdact-inhoudsopgave__knop:hover,
.mdact-inhoudsopgave-blok button.mdact-inhoudsopgave__knop:focus,
.mdact-inhoudsopgave-blok button.mdact-inhoudsopgave__knop:active {
	align-items: center;
	/* Het pijltje staat vlak achter het woord, niet tegen de rechterrand
	   (Tim, 25 september). */
	justify-content: flex-start;
	gap: 5px;
	width: 100%;
	margin: 0;
	padding: 16px 20px;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: var(--mdact-titel, #1E1E1A);
	font-family: inherit;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.4;
	text-align: left;
	cursor: pointer;
}

.mdact-inhoudsopgave__pijl {
	flex: none;
	width: 12px;
	height: 8px;
	color: var(--mdact-groen, #4A7C6B);
	transition: transform .2s ease;
}

.mdact-inhoudsopgave-blok.is-open .mdact-inhoudsopgave__pijl {
	transform: rotate(180deg);
}

/* Voorbij de inhoudsopgave gescrold: de balk hangt onder de header, even
   breed als de header (het script zet top, left en width). Plat en wit met
   een licht lijntje eronder, geen schaduw; crème zoals de sectie waar de
   inhoudsopgave in staat (Tim, 25 september). Onder de z-index van de header,
   zodat het menu er overheen valt. */
.mdact-inhoudsopgave-blok.is-vast .mdact-inhoudsopgave__balk {
	position: fixed;
	z-index: 890;
	background: var(--mdact-creme, #F5EFE6);
	border-bottom: 1px solid rgba(44, 74, 62, 0.14);
}

.mdact-inhoudsopgave-blok.is-vast button.mdact-inhoudsopgave__knop {
	display: flex;
}

/* Vast en dicht: alleen de knop. Vast en open: de lijst valt over de tekst
   en scrolt zelf als hij langer is dan het scherm. */
.mdact-inhoudsopgave-blok.is-vast .mdact-inhoudsopgave {
	display: none;
}

.mdact-inhoudsopgave-blok.is-vast.is-open .mdact-inhoudsopgave {
	display: grid;
	max-height: calc(100vh - var(--mdact-io-balk, 150px));
	overflow-y: auto;
	overscroll-behavior: contain;
}

/* Breed scherm: knop en lijst staan in de kolom van de tekst (1000 px), ook
   al is de balk zelf zo breed als de header. */
@media (min-width: 768px) {

	.mdact-inhoudsopgave-blok.is-vast .mdact-inhoudsopgave__balk {
		padding: 0 var(--mdact-io-rand, 20px);
	}

	.mdact-inhoudsopgave-blok.is-vast button.mdact-inhoudsopgave__knop,
	.mdact-inhoudsopgave-blok.is-vast button.mdact-inhoudsopgave__knop:hover,
	.mdact-inhoudsopgave-blok.is-vast button.mdact-inhoudsopgave__knop:focus,
	.mdact-inhoudsopgave-blok.is-vast button.mdact-inhoudsopgave__knop:active {
		padding: 16px 0;
	}

	.mdact-inhoudsopgave-blok.is-vast.is-open .mdact-inhoudsopgave {
		padding-bottom: 16px;
	}
}

@media (max-width: 767px) {

	.mdact-inhoudsopgave {
		grid-template-columns: 1fr;
		grid-template-rows: none;
		grid-auto-flow: row;
	}

	/* Een platte crème balk over de volle breedte van het scherm, als een
	   menu (Tim, 25 september): geen ronding, geen schaduw. Het blok stapt
	   daarvoor uit de kolom van de container. */
	.mdact-inhoudsopgave-blok.is-inklapbaar {
		margin-left: calc(50% - 50vw);
		margin-right: calc(50% - 50vw);
	}

	/* Evenveel crème boven de tekst als tussen de tekst en de balk: 48 px,
	   de maat van de andere secties op een telefoon. De container heeft
	   bovenin 48 (Elementor, padding_mobile) en 20 tussen de widgets; de
	   laatste alinea erboven verliest zijn marge en de balk krijgt de rest.
	   Met ~ en niet +: de kop "Inhoudsopgave" van Elementor staat er nog
	   tussen, alleen verborgen. */
	.elementor-widget-text-editor:has( ~ .elementor-widget .mdact-inhoudsopgave-blok.is-inklapbaar ) p:last-child {
		margin-bottom: 0;
	}

	.elementor-widget:has( .mdact-inhoudsopgave-blok.is-inklapbaar ) {
		margin-top: 28px;
	}

	/* Op een telefoon ook een lijntje erboven, gelijk aan dat eronder, nu de
	   balk crème is op een crème sectie (Tim, 25 september). */
	.mdact-inhoudsopgave-blok.is-inklapbaar .mdact-inhoudsopgave__balk {
		background: var(--mdact-creme, #F5EFE6);
		border-top: 1px solid rgba(44, 74, 62, 0.14);
		border-bottom: 1px solid rgba(44, 74, 62, 0.14);
	}

	.mdact-inhoudsopgave-blok.is-inklapbaar button.mdact-inhoudsopgave__knop {
		display: flex;
	}

	.mdact-inhoudsopgave-blok.is-inklapbaar .mdact-inhoudsopgave {
		display: none;
		padding: 0 20px 4px;
	}

	.mdact-inhoudsopgave-blok.is-inklapbaar.is-open .mdact-inhoudsopgave {
		display: grid;
	}
}

/* Geen lijntje onder de laatste rij als de lijst in de balk staat: de balk
   heeft er zelf al een. */
.mdact-inhoudsopgave-blok.is-vast .mdact-inhoudsopgave__item:last-child {
	border-bottom: 0;
}

/* Met twee kolommen ook niet onder de onderste regel van de linkerkolom. */
@media (min-width: 768px) {
	.mdact-inhoudsopgave-blok.is-vast .mdact-inhoudsopgave__item.is-kolomeinde {
		border-bottom: 0;
	}
}

@media (max-width: 767px) {
	.mdact-inhoudsopgave-blok.is-inklapbaar .mdact-inhoudsopgave__item:last-child {
		border-bottom: 0;
	}
}

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

/* --- Witte tekst ---
   Voor de donkergroene hero: [mdact_artikel_auteur is-wit],
   [mdact_artikel_datum is-wit] en [mdact_inhoudsopgave is-wit]. De naam blijft
   het felste wit, de functie en de datum staan er iets rustiger naast, net als
   in de wireframe. */
.mdact-artikel-auteur.is-wit,
.mdact-artikel-datum.is-wit {
	color: rgba(255, 255, 255, 0.7);
}

.mdact-artikel-auteur.is-wit .mdact-artikel-auteur__naam,
.mdact-artikel-auteur.is-wit .mdact-artikel-auteur__naam a {
	color: rgba(255, 255, 255, 0.9);
}

.mdact-inhoudsopgave.is-wit .mdact-inhoudsopgave__item {
	color: rgba(255, 255, 255, 0.75);
	border-bottom-color: rgba(255, 255, 255, 0.15);
}

.mdact-inhoudsopgave.is-wit a.mdact-inhoudsopgave__link::after {
	color: inherit;
}

/* Op de donkere hero is de balk op een telefoon donkergroen, anders valt de
   witte tekst weg. */
@media (max-width: 767px) {
	.mdact-inhoudsopgave-blok.is-inklapbaar:has( .is-wit ) .mdact-inhoudsopgave__balk {
		background: var(--mdact-donkergroen, #2C4A3E);
		border-bottom-color: rgba(255, 255, 255, 0.15);
	}

	.mdact-inhoudsopgave-blok:has( .is-wit ) button.mdact-inhoudsopgave__knop,
	.mdact-inhoudsopgave-blok:has( .is-wit ) .mdact-inhoudsopgave__pijl {
		color: #FFFFFF;
	}
}

.mdact-inhoudsopgave.is-wit a.mdact-inhoudsopgave__link {
	color: rgba(255, 255, 255, 0.75) !important;
}

.mdact-inhoudsopgave.is-wit a.mdact-inhoudsopgave__link:hover,
.mdact-inhoudsopgave.is-wit a.mdact-inhoudsopgave__link:focus-visible {
	color: #FFFFFF !important;
}

/* --- Waar de sprong landt ---
   Zonder dit verdwijnt de kop onder de vaste header zodra je op een regel in
   de inhoudsopgave klikt. */
.single-post h2[id],
.single-post h3[id],
.category h2[id],
.mdact-blok h2[id] {
	/* Header plus de vaste inhoudsopgave-balk; het script zet die twee samen
	   in --mdact-io-balk. */
	scroll-margin-top: calc(var(--mdact-io-balk, 150px) + 16px);
}

/* --- Kop boven de gerelateerde artikelen ---
   Alleen in beeld als je [mdact_gerelateerde_artikelen titel="..."] gebruikt;
   zet je de kop zelf in Elementor, dan doet dit niets. */
.mdact-gerelateerd-titel {
	margin: 0 0 24px;
	color: var(--mdact-titel, #1E1E1A);
}


/* --- De hero van een blogbericht ------------------------------------------
   Gemeten op 14 september 2026, uitgelogd op 1440 px.

   De vijf onderdelen van de hero (kruimelpad, thema-pil, titel, auteur, datum)
   stonden zonder enige tussenruimte onder elkaar: de pil plakte aan het
   kruimelpad en de auteur aan de titel. De hero van een dienstpagina doet het
   wél goed en houdt 25 px aan tussen bovenschrift, titel en tekst; dat ritme is
   hier overgenomen, zodat beide heroes hetzelfde lezen.

   Auteur en datum horen bij elkaar en staan daarom dicht op elkaar: die twee
   zijn samen één regel informatie, geen twee blokken.

   Let op: dit hangt aan de element-id's van de blogtemplate (Elementor-template
   101218). Wordt die hero opnieuw opgebouwd, dan veranderen die id's en doet
   dit blok niets meer; het staat dan in de weg noch aan. Netter is het om deze
   afstanden ooit in de editor zelf te zetten en dit blok weg te halen.
   -------------------------------------------------------------------- */

body.single-post .elementor-location-single .elementor-element-ad7bb0a {
    /* de thema-pil, onder het kruimelpad */
    margin-top: 25px;

    /* De widget bracht zelf nog 10 px onderruimte mee. Samen met de 25 px van
       de titel eronder werd de afstand onder de pil 35 px, terwijl alle andere
       afstanden in deze hero 25 zijn; dan lijkt de pil los te staan van de
       titel waar hij bij hoort. */
    margin-bottom: 0;
}

body.single-post .elementor-location-single .elementor-element-7dd8cd7 {
    /* de titel */
    margin-top: 25px;
}

body.single-post .elementor-location-single .elementor-element-7dd8cd7 h1 {
    /* De h1 bracht zelf nog eens 10 px mee; die zit nu in de 25 hierboven. */
    margin-top: 0;
    margin-bottom: 0;
}

body.single-post .elementor-location-single .elementor-element-c1e941a {
    /* naam en functie van de psycholoog */
    margin-top: 25px;
}

body.single-post .elementor-location-single .elementor-element-eeec91b {
    /* de datum, hoort bij de regel erboven */
    margin-top: 4px;
}

/* De groene balk onder de hero is de USP-balk van de dienstpagina's. Op een
   blogbericht is hij leeg: de shortcode rendert daar niets, maar de container
   houdt zijn 40 px hoogte en staat er als een losse groene band tussen de hero
   en de tekst. Die hoort hier niet; de USP's gaan over de diensten.

   Dit is een noodgreep tot de container uit de blogtemplate is gehaald. Doe dat
   bij voorkeur in Elementor zelf, dan kan deze regel weg. */
body.single-post .elementor-location-single .elementor-element-750c66e {
    display: none;
}


/* --- Oproepblok midden in het artikel ---
   Nagemeten op het blok "Klaar om de volgende stap te zetten?" onderaan de
   homepage (container 15eca7a, 28 september): groen vlak met twee lichte
   cirkels, kop 28 px wit, tekst 15 px wit op 500 breed, goudkleurige knop.
   Alleen de binnenruimte wijkt af: 80 boven en onder, 20 opzij (Tim).

   De knop draagt de klassen van een Elementor-knop, zodat hij de opmaak uit
   de kit krijgt, ook als die daar verandert.

   Twee klassen in elke selector: de Elementor-kit laadt na het thema. */
.mdact-oproep.mdact-oproep {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;

    /* Tot de randen van het witte vlak, niet alleen de tekstkolom (Tim, 28
       september). De container om de tekst is 1200 breed met 20 padding, de
       kolom erin 1000. 100cqw is de binnenkant van die container (zie de
       regel hieronder), plus zijn padding is het hele witte vlak. Op een
       telefoon komt dat uit op de schermbreedte, net als op de homepage. */
    margin: 40px calc((100% - (100cqw + 40px)) / 2);
    padding: 80px 20px;
    background:
        radial-gradient(circle at 95% 10%, rgba(74, 124, 107, 0.1) 0, rgba(74, 124, 107, 0.1) 100px, transparent 101px),
        radial-gradient(circle at 5% 90%, rgba(44, 74, 62, 0.1) 0, rgba(44, 74, 62, 0.1) 150px, transparent 151px),
        var(--e-global-color-12777e3, #4A7C6B);
    text-align: center;
}

/* De container waar de tekst van het bericht in staat meet de breedte voor
   het oproepblok. inline-size zet geen vaste stand of overflow vast, dus de
   vaste balk van de inhoudsopgave merkt er niets van. */
body.single-post .e-con:has(> .e-con-inner > .elementor-widget-theme-post-content) {
    container-type: inline-size;
}

.mdact-oproep .mdact-oproep__kop {
    margin: 0;
    font-family: Inter, sans-serif;
    font-size: 28px;
    font-weight: 500;
    line-height: 1;
    color: #fff;
}

/* Op de homepage staat de tekst in een alinea met 14,4 px marge eronder, en de
   knop 7 px omhoog. Samen 27,4 px tussen tekst en knop. */
.mdact-oproep .mdact-oproep__tekst {
    max-width: 500px;
    margin: 0 0 14.4px;
    font-family: Inter, sans-serif;
    font-size: 15px;
    font-weight: 300;
    line-height: 1.5;
    color: #fff;
}

.mdact-oproep .mdact-oproep__knoppen {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: -7px;
}

.mdact-oproep .mdact-oproep__knop {
    text-decoration: none;
}

/* De chatknop: omlijnd in goud, 1 px, met het chat-icoon ervoor. Zelfde vorm
   als de knop "Kennismaken" in de header (mdact-mm__knop): goud lijntje en
   gouden tekst, bij aanwijzen goud gevuld met donkere tekst. Even hoog als
   "Stuur een bericht" ernaast (38 px): 10 + 16 + 10 plus de lijn (Tim, 28
   september, naar het voorbeeld van Alp Lift). */
.mdact-oproep .mdact-oproep__knoppen a.mdact-oproep__chat {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 23px;
    border: 1px solid var(--e-global-color-accent, #E8C89A);
    border-radius: 6px;
    background-color: transparent;
    font-family: Inter, sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 16px;
    color: var(--e-global-color-accent, #E8C89A);
    text-decoration: none;
    transition: background-color .2s, color .2s;
}

.mdact-oproep .mdact-oproep__knoppen a.mdact-oproep__chat:hover,
.mdact-oproep .mdact-oproep__knoppen a.mdact-oproep__chat:focus {
    background-color: var(--e-global-color-accent, #E8C89A);
    color: var(--e-global-color-primary, #1E1E1A);
}

.mdact-oproep .mdact-oproep__chat .mdact-oproep__icoon {
    flex: none;
    width: 16px;
    height: 16px;
}

@media (max-width: 767px) {
    .mdact-oproep .mdact-oproep__knoppen {
        flex-direction: column;
    }
}

/* ============================================================
   Over de auteur, onder de tekst: [mdact_over_auteur]
   ============================================================
   Een fotootje met ernaast "Albert, auteur van dit bericht" en de bio (Tim,
   30 september). Crème vlak zonder rand en zonder schaduw, in de tekstkolom.
   Twee klassen in elke selector: de Elementor-kit laadt later en zet zijn
   eigen letter en linkkleur op p en a. */
.mdact-over-auteur {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    margin: 40px 0 0;
    padding: 24px;
    border-radius: 20px;
    background: var(--mdact-creme, #F5EFE6);
}

.mdact-over-auteur .mdact-over-auteur__foto {
    flex: none;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
}

.mdact-over-auteur .mdact-over-auteur__foto.is-leeg {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--mdact-donkergroen, #2C4A3E);
    font-family: Inter, sans-serif;
    font-size: 24px;
    font-weight: 500;
    color: #fff;
}

.mdact-over-auteur .mdact-over-auteur__kop {
    margin: 0 0 8px;
    font-family: Inter, sans-serif;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--mdact-titel, #1E1E1A);
}

.mdact-over-auteur a.mdact-over-auteur__naam,
.mdact-over-auteur a.mdact-over-auteur__naam:hover,
.mdact-over-auteur a.mdact-over-auteur__naam:focus,
.mdact-over-auteur a.mdact-over-auteur__naam:active {
    color: var(--mdact-groen, #4A7C6B);
    text-decoration: none;
}

.mdact-over-auteur a.mdact-over-auteur__naam:hover {
    text-decoration: underline;
}

.mdact-over-auteur .mdact-over-auteur__bio {
    margin: 0;
    font-family: Inter, sans-serif;
    font-size: 15px;
    font-weight: 300;
    line-height: 1.6;
    color: var(--mdact-body, #54595F);
}

@media (max-width: 767px) {
    .mdact-over-auteur {
        gap: 16px;
        padding: 20px;
    }
    .mdact-over-auteur .mdact-over-auteur__foto {
        width: 56px;
        height: 56px;
    }
}

/* Bij één auteur staat [mdact_over_auteur] onder de tekst; de sectie met de
   auteurskaarten is dan dubbel. De klasse op body zet functions.php. */
body.mdact-een-auteur .mdact-auteurs-sectie {
    display: none;
}

/* Afwisseling wit en crème onder een blog (Tim, 1 en 22 oktober). Volgorde:
   tekst (wit), de auteurskaarten (crème, alleen bij twee auteurs), de
   e-booksectie (alleen als de blog een e-book heeft), gerelateerde artikelen.
   - De e-booksectie is crème, en wit als de auteurskaarten er al crème boven
     zetten (twee auteurs).
   - Gerelateerde artikelen is crème met witte tegels als er precies één van
     beide crème secties boven staat: één auteur zonder e-book, of twee auteurs
     met e-book. Anders wit met crème tegels (de instelling in Elementor).
   !important is hier nodig: Elementor zet de achtergrond van de container
   met een selector van vier klassen, net als bij #container-auteur. */
body:not(.mdact-heeft-ebook) .mdact-ebook-sectie {
    display: none;
}

body.mdact-heeft-ebook:not(.mdact-een-auteur) .mdact-ebook-sectie {
    background-color: var(--mdact-wit, #FFFFFF) !important;
}

body.mdact-een-auteur:not(.mdact-heeft-ebook) .mdact-gerelateerd-sectie,
body.mdact-heeft-ebook:not(.mdact-een-auteur) .mdact-gerelateerd-sectie {
    background-color: var(--mdact-creme, #F5EFE6) !important;
}

body.mdact-een-auteur:not(.mdact-heeft-ebook) .mdact-gerelateerd-sectie .mdact-kb-grid .mdact-kb-card,
body.mdact-heeft-ebook:not(.mdact-een-auteur) .mdact-gerelateerd-sectie .mdact-kb-grid .mdact-kb-card {
    background-color: var(--mdact-wit, #FFFFFF);
}

/* ============================================================
   E-books en pdf's onder een blog: [mdact_pdf_aanvragen]
   ============================================================
   In een eigen sectie over de volle breedte (mdact-ebook-sectie in 101218,
   Tim 22 oktober), zonder eigen vlak eromheen. Links de afbeelding van het pdf-item, rechts de beschrijving en het
   Gravity-formulier. Op een telefoon onder elkaar. Twee klassen in elke
   selector: de Elementor-kit laadt later. */
.mdact-pdf {
    margin: 0;
}

/* De kop krijgt de H2 van de site (de Elementor-kit), zoals de andere secties. */
.mdact-pdf .mdact-pdf__kop {
    margin: 0 0 32px;
}

.mdact-pdf .mdact-pdf__item {
    display: grid;
    grid-template-columns: minmax(0, 200px) minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}

.mdact-pdf .mdact-pdf__item + .mdact-pdf__item {
    margin-top: 20px;
}

.mdact-pdf .mdact-pdf__item.is-zonder-beeld {
    grid-template-columns: minmax(0, 1fr);
}

.mdact-pdf .mdact-pdf__beeld {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 12px;
}

.mdact-pdf .mdact-pdf__tekst p,
.mdact-pdf .mdact-pdf__tekst li {
    font-family: Inter, sans-serif;
    font-size: 15px;
    font-weight: 300;
    line-height: 1.6;
    color: var(--mdact-body, #54595F);
}

.mdact-pdf .mdact-pdf__tekst p:first-child {
    margin-top: 0;
}

.mdact-pdf .mdact-pdf__formulier {
    margin-top: 16px;
}

/* Het formulier zelf (Gravity Forms): titel klein, velden dichter op elkaar,
   knop zoals de knoppen van de site (14 px, 500, radius 6). Kleuren: zie de
   filter gform_default_styles in functions.php. */
.mdact-pdf .mdact-pdf__formulier .gform_title {
    margin: 0 0 12px;
    font-family: Inter, sans-serif;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--mdact-titel, #1E1E1A);
}

.mdact-pdf .mdact-pdf__formulier .gform_wrapper .gform_fields {
    row-gap: 16px;
}

/* Geen schaduw op de velden (werkafspraak), alleen de rand. */
.mdact-pdf .mdact-pdf__formulier .gform_wrapper input:not([type="submit"]) {
    box-shadow: none;
}

.mdact-pdf .mdact-pdf__formulier .gform_wrapper .gform_footer {
    margin-top: 20px;
    padding-top: 0;
}

.mdact-pdf .mdact-pdf__formulier .gform_wrapper input[type="submit"].gform_button {
    border-radius: 6px;
    font-family: Inter, sans-serif;
    font-size: 14px;
    font-weight: 500;
}

.mdact-pdf .mdact-pdf__formulier .gform_confirmation_message {
    font-family: Inter, sans-serif;
    font-size: 15px;
    font-weight: 500;
    color: var(--mdact-donkergroen, #2C4A3E);
}

@media (max-width: 767px) {
    .mdact-pdf .mdact-pdf__item {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
    }
    .mdact-pdf .mdact-pdf__beeld {
        max-width: 200px;
    }
}

/* Aanmeldformulier nieuwsbrief in het groene blok onderaan een blog (Elementor-
   formulier in 101218, Tim 21 oktober): Naam, E-mail en de knop elk een derde,
   gecentreerd en niet veel breder dan de tekst erboven. Elementor zet de breedte
   met .e-con.e-con > .e-con-inner > .elementor-widget (vier klassen), dus vijf. */
.e-con.e-con > .e-con-inner > .elementor-widget.mdact-nieuwsbrief-onder {
    width: 100%;
    max-width: 640px;
}

/* Contactformulier: de keuzelijst particulier/organisatie (variant A2, Tim 22
   oktober). Zolang er niets gekozen is, staat de eerste regel grijs, net als de
   placeholders van de velden eronder. */
.elementor-field-group-lead_type .elementor-select-wrapper select:invalid {
    color: #8A8F94;
}

.elementor-field-group-lead_type .elementor-select-wrapper select option {
    color: #1F2124;
}

/* Het pijltje van Elementor staat niet in het midden; in plaats daarvan een
   dunne chevron in de kleur van de tekst, verticaal gecentreerd (Tim, 22 okt). */
.elementor-field-group-lead_type .elementor-select-wrapper .select-caret-down-wrapper {
    display: none;
}

.elementor-field-group-lead_type .elementor-select-wrapper select {
    -webkit-appearance: none;
    appearance: none;
    padding-right: 44px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%2354595F' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 18px center;
    background-size: 12px 8px;
}