/* ==========================================================================
   Donkere modus  —  DIT BESTAND IS GEGENEREERD
   --------------------------------------------------------------------------
   Bron: gen/donker_css.py. Pas dat script aan, niet dit bestand: de twee
   selectorvarianten hieronder moeten identiek blijven.

   De achtergrond is het grijs uit het logo (#545557). Omdat theme.json alle
   kleuren als CSS-variabele uitzet, is het overzetten van het palet genoeg;
   elke sectie, kaart en knop volgt automatisch. Alleen de plekken met een
   vaste kleurwaarde in theme.css krijgen hier een tegenhanger.

   Gemeten contrasten op de grijze achtergrond:
     tekst #f4f5f6        6,8:1   (eis 4,5)
     grijze tekst #d3d6d8 5,1:1
     links  #9be5f4       5,3:1
     knop: #0d1b21 op #12bbd8   7,6:1  (gelijk aan de lichte stand)
   ========================================================================== */

:root { color-scheme: light; }

/* --- Handvat voor de knop ---------------------------------------------- */
.hoi-thema {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.35rem;
	height: 2.35rem;
	padding: 0;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--hoi-radius, 6px);
	background: transparent;
	color: var(--wp--preset--color--contrast);
	cursor: pointer;
	transition: border-color var(--hoi-transition), background-color var(--hoi-transition);
}
.hoi-thema:hover {
	border-color: var(--wp--preset--color--accent-2);
	background: color-mix(in srgb, var(--wp--preset--color--accent-2) 12%, transparent);
}
/* Let op de specificiteit: ".hoi-thema svg" (0,1,1) verslaat een losse
   ".hoi-thema__zon" (0,1,0). Daarom overal de ouderclass erbij. */
.hoi-thema svg { width: 1.05rem; height: 1.05rem; }
.hoi-thema .hoi-thema__zon { display: none; }
.hoi-thema .hoi-thema__maan { display: block; }


/* ====================== eigen keuze van de bezoeker ===================== */
:root[data-theme="dark"] {
	--wp--preset--color--base:       #545557;
	--wp--preset--color--base-alt:   #4a4b4d;
	--wp--preset--color--contrast:   #f4f5f6;
	--wp--preset--color--contrast-2: #d3d6d8;
	--wp--preset--color--accent-2:   #9be5f4;
	--wp--preset--color--border:     #75767a;

	--hoi-groen:     #93e6ab;
	--hoi-header-bg: #545557;
	--hoi-ph-1:      #4e4f52;
	--hoi-ph-2:      #56575a;
	--hoi-ph-label:  rgba(30, 31, 33, .72);
	--hoi-outline:   #c3c7ca;
}

/* Kleurschema, zodat formulierelementen en schuifbalken meegaan. */
:root[data-theme="dark"] {
	color-scheme: dark;
}
/* De doorzichtige headerachtergrond. */
:root[data-theme="dark"] .hoi-header {
	background: var(--hoi-header-bg);
}
/* Beeldplaceholders: donkerder streeppatroon en een leesbaar labelbalkje. */
:root[data-theme="dark"] .hoi-ph {
	background:
		linear-gradient(135deg, rgba(18, 187, 216, .16), rgba(2, 45, 65, .22)),
		repeating-linear-gradient(45deg, var(--hoi-ph-1) 0 12px, var(--hoi-ph-2) 12px 24px);
}
:root[data-theme="dark"] .hoi-ph::after {
	background: var(--hoi-ph-label);
	color: #e6e9eb;
}
/* Hover van de gevulde knop gaat hier lichter in plaats van donkerder,
    zodat de knop op de grijze achtergrond juist meer opvalt. De vulling
    zelf is in beide standen gelijk en staat in theme.json. */
:root[data-theme="dark"] .wp-element-button:hover {
	background-color: #7fdcf0;
	border-color: #7fdcf0;
	color: #0d1b21;
}
/* Secundaire knop: rand sterk genoeg om de knop te herkennen (4,4:1). */
:root[data-theme="dark"] .wp-block-button.is-style-outline > .wp-block-button__link {
	color: var(--wp--preset--color--contrast);
	border-color: var(--hoi-outline);
	background-color: transparent;
}
:root[data-theme="dark"] .wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--contrast);
	border-color: var(--wp--preset--color--contrast);
	color: #1b1d1f;
}
/* Het logo in de header. De footer is marineblauw en houdt in beide
    standen zijn eigen, lichte logokleuren uit theme.css. */
:root[data-theme="dark"] .hoi-header .hoi-logo__word {
	color: var(--wp--preset--color--contrast);
}
:root[data-theme="dark"] .hoi-header .hoi-logo__word em {
	color: var(--wp--preset--color--contrast-2);
}
:root[data-theme="dark"] .hoi-header .hoi-logo__since {
	color: var(--wp--preset--color--accent-2);
}
/* 'base' heeft twee rollen: paginakleur én tekstkleur op de donkere
    secties. Alleen de variabele omzetten maakt die tekst grijs op
    marineblauw (1,9:1). Tekst met has-base-color blijft dus licht. */
:root[data-theme="dark"] .has-base-color {
	color: #f4f5f6 !important;
}
:root[data-theme="dark"] .hoi-footer {
	color: #f4f5f6 !important;
}
:root[data-theme="dark"] .has-navy-background-color {
	color: #f4f5f6 !important;
}
:root[data-theme="dark"] .has-navy-background-color :where(h1, h2, h3, h4, h5, h6) {
	color: #ffffff;
}
/* Het uitklapmenu op telefoon en tablet. Core maakt die overlay altijd wit
    met zwarte tekst — in de donkere stand een witte flap midden in een
    donkere pagina, en het groen van Duurzaamheid zou er onleesbaar op staan.
    Specificiteit: core zit op 0,4,0; deze selector komt met :root op 0,5,0. */
:root[data-theme="dark"] .hoi-header .wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
}
/* Het contactformulier. De invoervelden krijgen een eigen, iets donkerder
    vlak dan de kaart eromheen, zodat ze te onderscheiden blijven.
    Doorgerekend: tekst 8,3:1, placeholder 6,2:1 en de rand 3,5:1 op de
    kaart — die rand is een UI-component en heeft 3:1 nodig.
    Elke selector staat apart: dit script zet de basis er letterlijk
    voor, dus een opsomming met komma's zou maar half werken. */
:root[data-theme="dark"] .hoi-formulier .forminator-input {
	color: #f4f5f6;
	background-color: #48494b;
	border-color: #b0b2b6;
}
:root[data-theme="dark"] .hoi-formulier .forminator-textarea {
	color: #f4f5f6;
	background-color: #48494b;
	border-color: #b0b2b6;
}
:root[data-theme="dark"] .hoi-formulier .forminator-select--field {
	color: #f4f5f6;
	background-color: #48494b;
	border-color: #b0b2b6;
}
:root[data-theme="dark"] .hoi-formulier .forminator-input::placeholder {
	color: #d3d6d8;
}
:root[data-theme="dark"] .hoi-formulier .forminator-textarea::placeholder {
	color: #d3d6d8;
}
:root[data-theme="dark"] .hoi-formulier .forminator-input:hover {
	border-color: #d9dbde;
}
:root[data-theme="dark"] .hoi-formulier .forminator-textarea:hover {
	border-color: #d9dbde;
}
:root[data-theme="dark"] .hoi-formulier .forminator-select--field:hover {
	border-color: #d9dbde;
}
:root[data-theme="dark"] .hoi-formulier .forminator-required {
	color: #ffb3b8;
}
:root[data-theme="dark"] .hoi-formulier .forminator-error-message {
	color: #ffb3b8;
}
:root[data-theme="dark"] .hoi-formulier .forminator-response-message {
	color: #f4f5f6;
	background-color: #48494b;
	border-color: #b0b2b6;
}
/* Wisselen van pictogram in de knop. */
:root[data-theme="dark"] .hoi-thema .hoi-thema__zon {
	display: block;
}
:root[data-theme="dark"] .hoi-thema .hoi-thema__maan {
	display: none;
}

/* ================= systeemvoorkeur, zolang er geen keuze is ============= */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--wp--preset--color--base:       #545557;
		--wp--preset--color--base-alt:   #4a4b4d;
		--wp--preset--color--contrast:   #f4f5f6;
		--wp--preset--color--contrast-2: #d3d6d8;
		--wp--preset--color--accent-2:   #9be5f4;
		--wp--preset--color--border:     #75767a;

		--hoi-groen:     #93e6ab;
		--hoi-header-bg: #545557;
		--hoi-ph-1:      #4e4f52;
		--hoi-ph-2:      #56575a;
		--hoi-ph-label:  rgba(30, 31, 33, .72);
		--hoi-outline:   #c3c7ca;
	}

	/* Kleurschema, zodat formulierelementen en schuifbalken meegaan. */
	:root:not([data-theme="light"]) {
		color-scheme: dark;
	}
	/* De doorzichtige headerachtergrond. */
	:root:not([data-theme="light"]) .hoi-header {
		background: var(--hoi-header-bg);
	}
	/* Beeldplaceholders: donkerder streeppatroon en een leesbaar labelbalkje. */
	:root:not([data-theme="light"]) .hoi-ph {
		background:
			linear-gradient(135deg, rgba(18, 187, 216, .16), rgba(2, 45, 65, .22)),
			repeating-linear-gradient(45deg, var(--hoi-ph-1) 0 12px, var(--hoi-ph-2) 12px 24px);
	}
	:root:not([data-theme="light"]) .hoi-ph::after {
		background: var(--hoi-ph-label);
		color: #e6e9eb;
	}
	/* Hover van de gevulde knop gaat hier lichter in plaats van donkerder,
	    zodat de knop op de grijze achtergrond juist meer opvalt. De vulling
	    zelf is in beide standen gelijk en staat in theme.json. */
	:root:not([data-theme="light"]) .wp-element-button:hover {
		background-color: #7fdcf0;
		border-color: #7fdcf0;
		color: #0d1b21;
	}
	/* Secundaire knop: rand sterk genoeg om de knop te herkennen (4,4:1). */
	:root:not([data-theme="light"]) .wp-block-button.is-style-outline > .wp-block-button__link {
		color: var(--wp--preset--color--contrast);
		border-color: var(--hoi-outline);
		background-color: transparent;
	}
	:root:not([data-theme="light"]) .wp-block-button.is-style-outline > .wp-block-button__link:hover {
		background-color: var(--wp--preset--color--contrast);
		border-color: var(--wp--preset--color--contrast);
		color: #1b1d1f;
	}
	/* Het logo in de header. De footer is marineblauw en houdt in beide
	    standen zijn eigen, lichte logokleuren uit theme.css. */
	:root:not([data-theme="light"]) .hoi-header .hoi-logo__word {
		color: var(--wp--preset--color--contrast);
	}
	:root:not([data-theme="light"]) .hoi-header .hoi-logo__word em {
		color: var(--wp--preset--color--contrast-2);
	}
	:root:not([data-theme="light"]) .hoi-header .hoi-logo__since {
		color: var(--wp--preset--color--accent-2);
	}
	/* 'base' heeft twee rollen: paginakleur én tekstkleur op de donkere
	    secties. Alleen de variabele omzetten maakt die tekst grijs op
	    marineblauw (1,9:1). Tekst met has-base-color blijft dus licht. */
	:root:not([data-theme="light"]) .has-base-color {
		color: #f4f5f6 !important;
	}
	:root:not([data-theme="light"]) .hoi-footer {
		color: #f4f5f6 !important;
	}
	:root:not([data-theme="light"]) .has-navy-background-color {
		color: #f4f5f6 !important;
	}
	:root:not([data-theme="light"]) .has-navy-background-color :where(h1, h2, h3, h4, h5, h6) {
		color: #ffffff;
	}
	/* Het uitklapmenu op telefoon en tablet. Core maakt die overlay altijd wit
	    met zwarte tekst — in de donkere stand een witte flap midden in een
	    donkere pagina, en het groen van Duurzaamheid zou er onleesbaar op staan.
	    Specificiteit: core zit op 0,4,0; deze selector komt met :root op 0,5,0. */
	:root:not([data-theme="light"]) .hoi-header .wp-block-navigation__responsive-container.is-menu-open {
		background-color: var(--wp--preset--color--base);
		color: var(--wp--preset--color--contrast);
	}
	/* Het contactformulier. De invoervelden krijgen een eigen, iets donkerder
	    vlak dan de kaart eromheen, zodat ze te onderscheiden blijven.
	    Doorgerekend: tekst 8,3:1, placeholder 6,2:1 en de rand 3,5:1 op de
	    kaart — die rand is een UI-component en heeft 3:1 nodig.
	    Elke selector staat apart: dit script zet de basis er letterlijk
	    voor, dus een opsomming met komma's zou maar half werken. */
	:root:not([data-theme="light"]) .hoi-formulier .forminator-input {
		color: #f4f5f6;
		background-color: #48494b;
		border-color: #b0b2b6;
	}
	:root:not([data-theme="light"]) .hoi-formulier .forminator-textarea {
		color: #f4f5f6;
		background-color: #48494b;
		border-color: #b0b2b6;
	}
	:root:not([data-theme="light"]) .hoi-formulier .forminator-select--field {
		color: #f4f5f6;
		background-color: #48494b;
		border-color: #b0b2b6;
	}
	:root:not([data-theme="light"]) .hoi-formulier .forminator-input::placeholder {
		color: #d3d6d8;
	}
	:root:not([data-theme="light"]) .hoi-formulier .forminator-textarea::placeholder {
		color: #d3d6d8;
	}
	:root:not([data-theme="light"]) .hoi-formulier .forminator-input:hover {
		border-color: #d9dbde;
	}
	:root:not([data-theme="light"]) .hoi-formulier .forminator-textarea:hover {
		border-color: #d9dbde;
	}
	:root:not([data-theme="light"]) .hoi-formulier .forminator-select--field:hover {
		border-color: #d9dbde;
	}
	:root:not([data-theme="light"]) .hoi-formulier .forminator-required {
		color: #ffb3b8;
	}
	:root:not([data-theme="light"]) .hoi-formulier .forminator-error-message {
		color: #ffb3b8;
	}
	:root:not([data-theme="light"]) .hoi-formulier .forminator-response-message {
		color: #f4f5f6;
		background-color: #48494b;
		border-color: #b0b2b6;
	}
	/* Wisselen van pictogram in de knop. */
	:root:not([data-theme="light"]) .hoi-thema .hoi-thema__zon {
		display: block;
	}
	:root:not([data-theme="light"]) .hoi-thema .hoi-thema__maan {
		display: none;
	}
}