/*
 * 60 — Divi-modules
 *
 * Aanpassingen op Divi's eigen et_pb_* output en op de theme-wrappers.
 * Overgezet uit de oude database-CSS.
 *
 * Vuistregel voor dit bestand: richt je op de stabiele klasse (.et_pb_button,
 * .et_pb_toggle_content) en niet op de genummerde varianten die Divi per
 * module genereert (.et_pb_text_3). Die laatste betekenen "de derde
 * tekstmodule op deze pagina" en verschuiven zodra een redacteur er iets
 * boven zet. Verliezen van een per-module-instelling is correct gedrag: die
 * heeft een redacteur bewust gezet.
 */

/* Lege paragrafen die Divi's editor achterlaat niet als witruimte tonen. */
p:empty {
	display: none;
}

/* ── Knoppen ────────────────────────────────────────────────────────────── */

/* De standaardknop. Elke Divi-knopmodule krijgt deze vorm, ook zonder dat er
 * een klasse op staat — dat scheelt redacteuren een handeling en voorkomt dat
 * er op oude paginas nog Divi-blauw opduikt.
 *
 * Dit verving Theme Options → Knoppen, dat #336699 in kapitalen printte op
 * `body .et_pb_button` (wp_head 99). Die velden staan nu leeg; zet een
 * redacteur daar opnieuw een kleur, dan komt die er bovenop. In dat geval:
 * Theme Options → Knoppen leegmaken, niet hier !important stapelen.
 *
 * Dubbele klasse voor de specificiteit: Divi's `.et_pb_bg_layout_dark
 * .et_pb_button` (0,2,0) zet color op #fff en print ná ons, dus (0,2,1) is
 * het minimum om de tekstkleur vast te houden. Zie ook .kdm-pill--light in
 * 50-components.css, dat hier bovenop de kleuren omdraait. */
body .et_pb_button.et_pb_button,
body .et_pb_button.et_pb_button:hover {
	padding: 13px 30px;
	border: 0;
	border-radius: var(--kdm-radius-pill);
	background-color: var(--kdm-cta-bg);
	color: var(--kdm-on-cta);
	font-family: var(--kdm-font-ui);
	font-size: 14px;
	font-weight: 600; /* Poppins is alleen als SemiBold (600) geladen, zie 00-tokens.css */
	line-height: 1.2;
	text-transform: none;
	transition: background-color var(--kdm-t-base) var(--kdm-ease);
}

body .et_pb_button.et_pb_button:hover {
	background-color: var(--kdm-cta-bg-hover);
}

/* Divi schuift op hover een pijltje in met ::after en reserveert daar ruimte
 * voor in zijn eigen :hover-padding (`.3em 2em .3em .7em`). Allebei weg, anders
 * verspringt de knop onder de muis. */
body .et_pb_button.et_pb_button::after {
	display: none;
}

#main-content .container:before {
	content: none;
}

/* ── Afbeeldingen ───────────────────────────────────────────────────────── */

/* Elke Divi-afbeeldingsmodule krijgt licht afgeronde hoeken. Divi zet zelf
 * geen border-radius op img, dus één enkele klasse volstaat hier. */
.et_pb_image img {
	border-radius: var(--kdm-radius-md);
}

/* ── Accordeon (FAQ) ────────────────────────────────────────────────────── */

/* Divi levert de accordeon als een rij dozen: rand #d9d9d9, 20px padding, grijze
 * vulling (#f4f4f4) als een item dicht is en wit als het open is, met 10px
 * tussenruimte. Dat past niet bij de rest van de herstyling. Wij maken er een
 * vlakke lijst van: alleen haarlijnen tussen de vragen, vraag links, plusje
 * rechts.
 *
 * Bewust zonder eigen klasse, dus site-breed op .et_pb_accordion — een redacteur
 * hoeft niets in te typen en er is maar één FAQ-vorm op de site. De losse
 * accordeon-plugin (.wpsm_panel) staat in 70-plugins.css en blijft ongemoeid.
 *
 * Divi's accordion.css/toggle.css printen via ET_Core_PageResource op wp_head
 * 99/103, dus ná ons: alles hieronder wint op specificiteit. Vandaar de dubbele
 * klassen, met per regel welke Divi-selector eronder ligt. */

/* Beats `.et_pb_toggle { border: 1px solid #d9d9d9 }` (0,1,0) en
 * `.et_pb_accordion .et_pb_toggle { margin-bottom: 10px }` (0,2,0). Alleen een
 * lijn bóven elk item; de onderste lijn komt van :last-child hieronder, zodat
 * de lijst boven- en onderaan wordt afgesloten. */
.et_pb_accordion.et_pb_accordion .et_pb_toggle {
	margin-bottom: 0;
	border: 0;
	border-top: 1px solid var(--kdm-line);
}

.et_pb_accordion.et_pb_accordion .et_pb_toggle:last-child {
	border-bottom: 1px solid var(--kdm-line);
}

/* Beats `.et_pb_toggle_close { background-color: #f4f4f4; padding: 20px }` en
 * `.et_pb_toggle_open { background-color: #fff; padding: 20px }` (beide 0,1,0).
 * Geen vulling en geen zijpadding: de vragen lijnen uit met de tekst erboven. */
.et_pb_accordion.et_pb_accordion .et_pb_toggle_close,
.et_pb_accordion.et_pb_accordion .et_pb_toggle_open {
	padding: var(--kdm-s-4) 0;
	background-color: transparent;
}

/* Beats `.et_pb_toggle .et_pb_toggle_title` (0,2,1) én de herhalingen daarvan in
 * Divi's eigen media queries (`.et_pb_text_align_left-tablet.et_pb_toggle
 * .et_pb_toggle_title`, 0,3,1) — daarom vier klassen. Ook beats
 * `.et_pb_toggle_close .et_pb_toggle_title { color: #666 }` (0,2,0): een dichte
 * vraag mag niet lichter zijn dan een open vraag, ze zijn even leesbaar.
 * De rechterruimte is voor het plusje, dat absoluut gepositioneerd staat. */
.et_pb_accordion.et_pb_accordion .et_pb_toggle_title.et_pb_toggle_title {
	padding: 0 var(--kdm-s-6) 0 0;
	color: var(--kdm-ink);
	font-size: var(--kdm-size-base);
	line-height: var(--kdm-lh-tight);
}

/* Beats `.et_pb_toggle_title:before { content: "\E050"; color: #ccc;
 * font-size: 16px }` (0,1,1) en `.et_pb_toggle_open .et_pb_toggle_title:before
 * { content: "\E04F" }` (0,2,1) — die laatste wisselt bij een losse toggle naar
 * een minnetje, maar wij houden één glyph en draaien hem (zie hieronder).
 *
 * font-family blijft ongemoeid: Divi zet `font-family: ETmodules !important` op
 * deze pseudo-elementen in style.min.css, dus alleen content/kleur/transform
 * zijn van ons. \4C is in dat icoonfont het kále plusje; Divi's eigen \E050 is
 * een plus in een dichte cirkel en die staat te zwaar in deze vlakke lijst. */
.et_pb_accordion.et_pb_accordion .et_pb_toggle_title.et_pb_toggle_title:before {
	content: "\4C";
	color: var(--kdm-ink);
	font-size: 18px;
	transition: transform var(--kdm-t-fast) var(--kdm-ease);
}

/* Beats `.et_pb_accordion .et_pb_toggle_open .et_pb_toggle_title:before
 * { display: none }` (0,3,1) — binnen een accordeon laat Divi het icoon van het
 * open item helemaal verdwijnen. Wij laten het staan en draaien het plusje 45°
 * tot een kruisje; dat leest als "sluiten" en houdt de rechterkolom rustig.
 * Verdwijnt het icoon toch bij het openklappen, dan is deze regel te zwak
 * geworden. De rotatie werkt op Divi's eigen positionering (top:50%,
 * margin-top:-.5em), een transform-origin is niet nodig. */
.et_pb_accordion.et_pb_accordion .et_pb_toggle_open.et_pb_toggle_open .et_pb_toggle_title:before {
	display: block;
	transform: rotate(45deg);
}

/* Beats `.et_pb_toggle_content { padding-top: 20px }` (0,1,0). Het antwoord zit
 * strakker onder de vraag dan Divi's 20px, want er is geen doos meer die de
 * twee bij elkaar houdt. */
.et_pb_accordion.et_pb_accordion .et_pb_toggle_content {
	padding-top: var(--kdm-s-3);
	line-height: var(--kdm-lh-body);
}

/* Stond hier als `color: black !important` — een overblijfsel uit de oude
 * database-CSS, dat elke tokenkleur hierboven zou verslaan. 10-base.css zet de
 * bodytekst al op --kdm-ink; deze regel blijft alleen staan zodat niemand
 * terugvalt op hardzwart. */
.et_pb_toggle_content p {
	color: var(--kdm-ink);
}

@media only screen and (max-width: 980px) {
	.et_pb_accordion.et_pb_accordion .et_pb_toggle_close,
	.et_pb_accordion.et_pb_accordion .et_pb_toggle_open {
		padding: var(--kdm-s-3) 0;
	}
}

/* Magnific Popup — de lightbox die Divi meelevert. */
.mfp-img {
	background-color: white !important;
}