/*
Theme Name:   TIB Heij
Theme URI:    https://tib-heij.nl
Description:  Child-thema van Astra voor Technisch Installatiebureau Heij. Zakelijke, rustige vormgeving; alle aanpassingen staan hier zodat een Astra-update ze niet overschrijft.
Author:       Technisch Installatiebureau Heij
Template:     astra
Version:      3.2
Text Domain:  tib-heij
*/

:root {
	--tib-blauw: #262161;        /* uit het logo */
	--tib-blauw-licht: #3d3690;
	--tib-blauw-diep: #1a1745;
	--tib-accent: #b85305;       /* wit erop haalt 4,9:1 - voldoet aan 4,5 */
	--tib-accent-donker: #944204;
	--tib-tekst: #2b3440;
	--tib-grijs: #5a6672;
	--tib-lijn: #dfe3ee;
	--tib-vlak: #f2f8fc;
}

/* ------------------------------------------------------------------ basis */

body {
	color: var(--tib-tekst);
	-webkit-font-smoothing: antialiased;
}

.ast-container,
.ast-container-fluid {
	max-width: 1200px;
}

/* ----------------------------------------------------------------- header */

.main-header-bar {
	border-bottom: 1px solid var(--tib-lijn);
	padding: .35rem 0;
}

.ast-sticky-active .main-header-bar,
.ast-header-sticked .main-header-bar {
	box-shadow: 0 2px 14px rgba(18, 58, 94, .12);
}

.site-title a,
.site-title a:visited {
	color: var(--tib-blauw);
	font-weight: 700;
	letter-spacing: -.01em;
}

.site-description {
	color: var(--tib-grijs);
	font-size: .82rem;
}

/* -------------------------------------------------------------- hoofdmenu */

.main-header-menu > .menu-item > .menu-link {
	font-weight: 600;
	font-size: .96rem;
	color: var(--tib-blauw);
	padding-left: 1rem;
	padding-right: 1rem;
	position: relative;
}

/* Onderstreping die uitgroeit — subtiel, geen kleurvlak */
.main-header-menu > .menu-item > .menu-link::after {
	content: "";
	position: absolute;
	left: 1rem;
	right: 1rem;
	bottom: .55rem;
	height: 2px;
	background: var(--tib-accent);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .18s ease;
}

.main-header-menu > .menu-item:hover > .menu-link::after,
.main-header-menu > .menu-item.current-menu-item > .menu-link::after,
.main-header-menu > .menu-item.current-menu-ancestor > .menu-link::after {
	transform: scaleX(1);
}

@media (prefers-reduced-motion: reduce) {
	.main-header-menu > .menu-item > .menu-link::after {
		transition: none;
	}
}

/* --------------------------------------------------------------- dropdown */

.main-header-menu .sub-menu {
	min-width: 265px;
	padding: .5rem 0;
	border: 1px solid var(--tib-lijn);
	border-top: 3px solid var(--tib-accent);
	border-radius: 0 0 6px 6px;
	box-shadow: 0 12px 30px rgba(18, 58, 94, .16);
	background: #fff;
}

.main-header-menu .sub-menu .menu-link {
	padding: .62rem 1.15rem;
	font-size: .93rem;
	font-weight: 500;
	color: var(--tib-tekst);
	border-left: 3px solid transparent;
	transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.main-header-menu .sub-menu .menu-item:hover > .menu-link,
.main-header-menu .sub-menu .current-menu-item > .menu-link {
	background: var(--tib-vlak);
	border-left-color: var(--tib-accent);
	color: var(--tib-blauw);
}

/* Pijltje netjes uitlijnen */
.main-header-menu .menu-item-has-children > .menu-link .sub-arrow {
	margin-left: .3rem;
	opacity: .65;
}

/* -------------------------------------------------- offerteknop in het menu */

.main-header-menu .menu-item-cta > .menu-link {
	background: var(--tib-accent);
	color: #fff !important;
	border-radius: 4px;
	padding: .6rem 1.15rem !important;
	margin-left: .6rem;
	font-weight: 600;
	transition: background .15s ease;
}

.main-header-menu .menu-item-cta > .menu-link:hover {
	background: var(--tib-accent-donker);
}

.main-header-menu .menu-item-cta > .menu-link::after {
	display: none;
}

/* --------------------------------------------------------- belknop header */

.tib-header-phone {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	font-weight: 700;
	color: var(--tib-blauw);
	white-space: nowrap;
	text-decoration: none;
}

.tib-header-phone small {
	display: block;
	font-weight: 500;
	font-size: .72rem;
	color: var(--tib-grijs);
	letter-spacing: .02em;
}

.tib-header-phone:hover {
	color: var(--tib-accent);
}

/* ------------------------------------------------------------------ tekst */

.entry-content h2 {
	margin-top: 2.2em;
	padding-bottom: .35rem;
	border-bottom: 1px solid var(--tib-lijn);
}

.entry-content h3 {
	margin-top: 1.7em;
	color: var(--tib-blauw-licht);
}

.entry-content p,
.entry-content li {
	max-width: 74ch;
}

.entry-content ul li {
	margin-bottom: .45rem;
}

/* Tabellen — tarieven en specificaties */
.entry-content table {
	border-collapse: collapse;
	width: 100%;
	margin: 1.5rem 0;
	font-size: .96rem;
}

.entry-content table th {
	background: var(--tib-blauw);
	color: #fff;
	text-align: left;
	font-weight: 600;
	padding: .7rem .9rem;
}

.entry-content table td {
	padding: .65rem .9rem;
	border-bottom: 1px solid var(--tib-lijn);
}

.entry-content table tr:nth-child(even) td {
	background: var(--tib-vlak);
}

/* --------------------------------------------------------------- FAQ-blok */

.entry-content h3[class*="wp-block-heading"] {
	scroll-margin-top: 120px;
}

/* Inhoudsopgave bovenaan de FAQ */
.page-id-123 .entry-content > ul:first-of-type {
	background: var(--tib-vlak);
	border-left: 3px solid var(--tib-accent);
	padding: 1.1rem 1.3rem 1.1rem 2.4rem;
	border-radius: 0 4px 4px 0;
	columns: 2;
	column-gap: 2rem;
}

@media (max-width: 700px) {
	.page-id-123 .entry-content > ul:first-of-type {
		columns: 1;
	}
}

/* ------------------------------------------------- openstaande invulpunten */

/* Zichtbaar houden zolang ze er staan — ze horen niet live te gaan. */
.entry-content p:has(> mark.ogx-verify),
mark.ogx-verify {
	background: #fff4d6;
	border-left: 3px solid #d48806;
	display: block;
	padding: .55rem .8rem;
	margin: .8rem 0;
	font-size: .92rem;
	border-radius: 0 3px 3px 0;
}

/* --------------------------------------------------------------- paginakop */

.ast-page-title-wrap {
	background: var(--tib-vlak);
	border-bottom: 1px solid var(--tib-lijn);
}

/* ------------------------------------------------------------------ footer */

.footer-adv-widget .widget-title,
.ast-footer-overlay .widget-title {
	color: #fff;
	font-size: 1rem;
	letter-spacing: .01em;
	margin-bottom: .8rem;
}

.footer-adv ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.footer-adv li {
	margin-bottom: .35rem;
}

/* ---------------------------------------------------- sticky belbalk mobiel */

.tib-mobile-call {
	display: none;
}

@media (max-width: 768px) {
	.tib-mobile-call {
		display: grid;
		grid-template-columns: 1fr 1fr;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 999;
		box-shadow: 0 -2px 14px rgba(0, 0, 0, .18);
	}

	.tib-mobile-call a {
		padding: .95rem .5rem;
		text-align: center;
		font-weight: 700;
		font-size: .95rem;
		text-decoration: none;
		color: #fff;
	}

	.tib-mobile-call .tib-call {
		background: var(--tib-accent);
	}

	.tib-mobile-call .tib-quote {
		background: var(--tib-blauw);
	}

	/* Ruimte onderaan zodat de balk niets afdekt */
	body {
		padding-bottom: 54px;
	}
}

/* ------------------------------------------- header compacter laten passen */

/* Het menu deelt de rij met het logo; te veel padding laat het afbreken
   over twee regels en dan schuift het over de bovenbalk heen. */
.main-header-menu > .menu-item > .menu-link {
	padding-left: .72rem;
	padding-right: .72rem;
	font-size: .92rem;
}

.main-header-menu > .menu-item > .menu-link::after {
	left: .72rem;
	right: .72rem;
}

.main-header-menu .menu-item-cta > .menu-link {
	padding: .5rem .95rem !important;
	margin-left: .45rem;
}

@media (min-width: 922px) {
	.ast-primary-header-bar .site-header-primary-section-right {
		flex-wrap: nowrap;
	}
	.main-header-menu {
		flex-wrap: nowrap;
	}
}

/* Logo netjes begrenzen — het SVG-bestand ontbreekt nog, dus de alt-tekst
   mag de header niet uit elkaar trekken. */
.site-logo-img img,
.custom-logo {
	max-height: 56px;
	width: auto;
}

/* Astra zet een lege contentbalk boven de pagina wanneer er geen
   paginakop is ingesteld; die ruimte halen we weg. */
.ast-page-title-wrap:empty,
.entry-header:empty {
	display: none;
}


/* ------------------------------------------ bovenste header-rij (builder) */

.ast-above-header-bar {
	font-size: .84rem;
}

.tib-usps {
	display: flex;
	flex-wrap: wrap;
	gap: .25rem 1.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tib-usps li::before {
	content: "\2713";
	color: var(--tib-accent);
	font-weight: 700;
	margin-right: .4rem;
}

.tib-topbar-phone a {
	font-weight: 700;
	white-space: nowrap;
}

@media (max-width: 921px) {
	.ast-above-header-bar {
		text-align: center;
	}
	.tib-usps {
		justify-content: center;
	}
}

/* ------------------------- bovenbalk en footer via de builder aankleden --- */

/* Astra's kleuroptie voor deze rij is versiegevoelig; CSS is betrouwbaarder. */
.ast-above-header-bar,
.ast-above-header-wrap .ast-above-header-bar {
	background: var(--tib-blauw) !important;
	color: #dce7f0;
	border-bottom: 3px solid var(--tib-accent);
}

.ast-above-header-bar a {
	color: #fff;
}

.ast-above-header-bar a:hover {
	color: var(--tib-accent);
}

.ast-above-header-bar .ast-builder-grid-row {
	align-items: center;
}

.tib-topbar-inner {
	display: flex;
	flex-wrap: wrap;
	gap: .3rem 1.4rem;
	align-items: center;
	justify-content: space-between;
	width: 100%;
}

/* De themaknop staat rechts, direct na het telefoonnummer. */
.tib-topbar-inner .tib-thema-knop {
	margin-left: auto;
}

@media (max-width: 921px) {
	.tib-topbar-inner .tib-thema-knop {
		margin-left: 0;
	}
}

/* De HTML-elementen van de builder zijn <p>-verpakt; die marge weg. */
.ast-header-html .ast-builder-html-element > p,
.ast-footer-html .ast-builder-html-element > p:first-child {
	margin-bottom: 0;
}

/* ------------------------------------------------------------- footer ---- */

.site-footer .ast-builder-html-element h3 {
	color: #fff;
	font-size: 1.05rem;
	margin: 0 0 .6rem;
}

.site-footer .ast-builder-html-element h3 + p,
.site-footer .ast-builder-html-element h3 + ul {
	margin-top: 0;
}

.site-footer .ast-builder-html-element ul {
	list-style: none;
	margin: 0 0 1.4rem;
	padding: 0;
}

.site-footer .ast-builder-html-element li {
	margin-bottom: .3rem;
}

.site-footer .ast-builder-html-element p {
	margin-bottom: 1rem;
	max-width: 46ch;
}

.ast-footer-copyright {
	font-size: .85rem;
}


/* --------------------------------------------------- lichtblauw uit het logo */

:root {
	--tib-lichtblauw: #a1d9ee;
}

/* Accentstreep onder de bovenbalk in het lichtblauw van het logo. */
.ast-above-header-bar,
.ast-above-header-wrap .ast-above-header-bar {
	border-bottom-color: var(--tib-lichtblauw);
}

.tib-usps li::before {
	color: var(--tib-lichtblauw);
}

/* Inhoudsopgave en accentranden meenemen. */
.page-id-123 .entry-content > ul:first-of-type {
	border-left-color: var(--tib-lichtblauw);
}

/* ------------------------------------------------------- logo's op maat --- */

/* Astra zet een vaste breedte op het logo. Bij het vierkante beeldmerk op
   mobiel perst dat samen met een max-height het beeld plat; hier laten we
   de verhouding leiden en begrenzen we alleen de hoogte. */
.custom-mobile-logo-link img,
.ast-header-break-point .custom-mobile-logo-link img {
	width: auto !important;
	height: auto !important;
	max-height: 52px;
	max-width: 52px;
}

/* Het brede logo op desktop: hoogte begrenzen, breedte volgt. */
.custom-logo-link img,
.site-logo-img .custom-logo {
	height: auto;
	max-height: 58px;
	width: auto;
	max-width: 260px;
}

/* --------------------------------------------- kolomrijen met iconen ------ */

/* De koppen in een kolomrij lopen niet even lang: "Mechanische ventilatie"
   valt over twee regels, "Spoedservice" over één. Daardoor beginnen de
   teksten eronder op verschillende hoogtes. Een vaste kophoogte lijnt ze uit. */
@media (min-width: 782px) {
	.entry-content .wp-block-columns .wp-block-column > h2,
	.entry-content .wp-block-columns .wp-block-column > h3,
	.entry-content .wp-block-columns .wp-block-column > h4 {
		min-height: 2.5em;
		margin-top: .9rem;
		/* Koppen bovenaan uitlijnen; de min-height duwt de tekst eronder
		   op gelijke hoogte zonder dat korte koppen omlaag zakken. */
		display: block;
	}
}

/* Iconen op gelijke grootte en met dezelfde afstand tot de kop. */
.entry-content .wp-block-columns .wp-block-column > .wp-block-image,
.entry-content .wp-block-columns .wp-block-column > figure {
	margin: 0 0 .5rem;
}

.entry-content .wp-block-columns .wp-block-column img[src$=".svg"] {
	width: 64px;
	height: 64px;
	display: block;
}

/* De kolommen zelf bovenaan uitlijnen, niet uitrekken. */
.entry-content .wp-block-columns {
	align-items: flex-start;
}

/* Op mobiel staan de kolommen onder elkaar; dan geen vaste kophoogte
   maar wel lucht tussen de blokken. */
@media (max-width: 781px) {
	.entry-content .wp-block-columns .wp-block-column {
		margin-bottom: 1.6rem;
	}
}


/* Astra breekt lange woorden middenin af ("Loodgieterswer/k").
   In een kolom van 180px is dat lelijk; liever laten uitlopen. */
.entry-content .wp-block-columns .wp-block-column h2,
.entry-content .wp-block-columns .wp-block-column h3,
.entry-content .wp-block-columns .wp-block-column h4 {
	word-break: normal;
	overflow-wrap: normal;
	hyphens: none;
}

/* Bij smallere kolommen de kop iets kleiner, zodat hij past. */
@media (min-width: 782px) and (max-width: 1100px) {
	.entry-content .wp-block-columns .wp-block-column h3,
	.entry-content .wp-block-columns .wp-block-column h4 {
		font-size: 1.05rem;
	}
}

/* ------------------------------------------ icoonrijen gecentreerd -------- */

/* De kolomrijen met iconen lezen rustiger als icoon, kop en tekst
   gecentreerd staan. Alleen de rijen mét een icoon; gewone
   tekstkolommen blijven links uitgelijnd. */
.entry-content .wp-block-columns .wp-block-column:has(img) {
	text-align: center;
}

.entry-content .wp-block-columns .wp-block-column:has(img) > .wp-block-image,
.entry-content .wp-block-columns .wp-block-column:has(img) > figure {
	display: flex;
	justify-content: center;
}

.entry-content .wp-block-columns .wp-block-column:has(img) h2,
.entry-content .wp-block-columns .wp-block-column:has(img) h3,
.entry-content .wp-block-columns .wp-block-column:has(img) h4 {
	justify-content: center;
	text-align: center;
}

.entry-content .wp-block-columns .wp-block-column:has(img) p {
	margin-left: auto;
	margin-right: auto;
	max-width: 30ch;
}

/* Terugval voor browsers zonder :has() — dan blijft alles links,
   wat nog steeds netjes is. */

/* Astra zet een eigen text-align op alinea's binnen kolommen; die is
   specifieker dan het overerven van de kolom. Expliciet overschrijven. */
.entry-content .wp-block-columns .wp-block-column:has(img) p,
.entry-content .wp-block-columns .wp-block-column:has(img) li {
	text-align: center !important;
}

/* ------------------------------------------------- footer leesbaarheid ---- */

/* Astra's kleuropties voor de footer-HTML-elementen landen niet betrouwbaar:
   de tekst bleef donkergrijs op donkerblauw (contrast 1,07:1, feitelijk
   onleesbaar) en de links indigo op indigo (1,19:1). Hier zetten we het
   vast, met waarden die ruim boven de 4,5:1 uitkomen. */

.site-footer,
.site-primary-footer-wrap,
.site-primary-footer-wrap[data-section="section-primary-footer-builder"] {
	background-color: var(--tib-blauw) !important;
}

.site-footer,
.site-footer p,
.site-footer li,
.site-footer span,
.site-footer .ast-builder-html-element {
	color: #d7e2ee !important;   /* 10,9:1 op indigo */
}

.site-footer h2,
.site-footer h3,
.site-footer h4,
.site-footer .widget-title {
	color: #fff !important;      /* 14,3:1 */
}

.site-footer a,
.site-footer a:visited {
	color: #fff !important;      /* 14,3:1 */
	text-decoration: none;
}

.site-footer a:hover,
.site-footer a:focus-visible {
	color: var(--tib-lichtblauw) !important;  /* 9,3:1 */
	text-decoration: underline;
}

/* Onderste balk iets donkerder, zodat hij zich van de rest onderscheidt. */
.site-below-footer-wrap,
.site-below-footer-wrap[data-section="section-below-footer-builder"],
.ast-footer-copyright {
	background-color: var(--tib-blauw-diep) !important;
}

.ast-footer-copyright,
.ast-footer-copyright p {
	color: #c8d6e2 !important;   /* 11,3:1 op #1a1745 */
}

/* Leesbaarheid van de footer zelf: iets meer regelafstand en lucht. */
.site-footer .ast-builder-html-element {
	line-height: 1.7;
}

.site-footer .ast-builder-html-element li {
	margin-bottom: .4rem;
}

/* Focus zichtbaar houden voor toetsenbordgebruik. */
.site-footer a:focus-visible {
	outline: 2px solid var(--tib-lichtblauw);
	outline-offset: 2px;
}

/* Footerkolommen links uitlijnen; gecentreerd leest een adresblok slecht. */
@media (min-width: 782px) {
	.site-footer .ast-builder-html-element,
	.site-footer .ast-builder-html-element p,
	.site-footer .ast-builder-html-element li,
	.site-footer .ast-builder-html-element h3 {
		text-align: left;
	}
	.site-footer .site-footer-section {
		justify-content: flex-start;
	}
}

/* ------------------------------------------------- FAQ: uitklapbaar ------- */

/* Native <details>: geen JavaScript, het antwoord staat gewoon in de HTML
   (dus Google leest het) en toetsenbordbediening werkt vanzelf. */

.entry-content .wp-block-details {
	border: 1px solid var(--tib-lijn);
	border-radius: 5px;
	margin: 0 0 .55rem;
	background: #fff;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.entry-content .wp-block-details[open] {
	border-color: var(--tib-lichtblauw);
	box-shadow: 0 2px 10px rgba(38, 33, 97, .07);
}

.entry-content .wp-block-details > summary {
	cursor: pointer;
	padding: .85rem 2.6rem .85rem 1.05rem;
	font-weight: 600;
	color: var(--tib-blauw);
	list-style: none;
	position: relative;
	border-radius: 5px;
}

/* Standaard driehoekje weg, eigen chevron erin */
.entry-content .wp-block-details > summary::-webkit-details-marker,
.entry-content .wp-block-details > summary::marker {
	display: none;
	content: "";
}

.entry-content .wp-block-details > summary::after {
	content: "";
	position: absolute;
	right: 1.15rem;
	top: 50%;
	width: .5rem;
	height: .5rem;
	border-right: 2px solid var(--tib-accent);
	border-bottom: 2px solid var(--tib-accent);
	transform: translateY(-70%) rotate(45deg);
	transition: transform .18s ease;
}

.entry-content .wp-block-details[open] > summary::after {
	transform: translateY(-25%) rotate(-135deg);
}

.entry-content .wp-block-details > summary:hover {
	background: var(--tib-vlak);
}

.entry-content .wp-block-details > summary:focus-visible {
	outline: 2px solid var(--tib-accent);
	outline-offset: -2px;
}

/* Antwoord */
.entry-content .wp-block-details > *:not(summary) {
	margin: 0 1.05rem;
	padding-bottom: .2rem;
}

.entry-content .wp-block-details > p:last-child,
.entry-content .wp-block-details > ul:last-child {
	padding-bottom: 1rem;
}

.entry-content .wp-block-details p {
	max-width: 68ch;
}

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

/* Ruimte tussen de secties op de FAQ-pagina */
.page-id-123 .entry-content h2 {
	margin-top: 2.6em;
}

/* ------------------------------------------- FAQ: secties uitklapbaar ----- */

.tib-faq-sectie {
	border-top: 2px solid var(--tib-lijn);
	margin: 0 0 .3rem;
}

.tib-faq-sectie > summary {
	cursor: pointer;
	list-style: none;
	padding: 1.05rem 2.6rem 1.05rem 0;
	position: relative;
}

.tib-faq-sectie > summary::-webkit-details-marker,
.tib-faq-sectie > summary::marker {
	display: none;
	content: "";
}

.tib-faq-sectie-titel {
	font-size: 1.3rem;
	font-weight: 700;
	color: var(--tib-blauw);
	line-height: 1.3;
	/* Het is een h2, maar hij zit in een summary: geen eigen marge
	   en geen onderrand, anders breekt de klikbare rij. */
	margin: 0;
	padding: 0;
	border: 0;
	display: inline;
}

.tib-faq-sectie > summary::after {
	content: "";
	position: absolute;
	right: .6rem;
	top: 50%;
	width: .62rem;
	height: .62rem;
	border-right: 3px solid var(--tib-accent);
	border-bottom: 3px solid var(--tib-accent);
	transform: translateY(-70%) rotate(45deg);
	transition: transform .18s ease;
}

.tib-faq-sectie[open] > summary::after {
	transform: translateY(-25%) rotate(-135deg);
}

.tib-faq-sectie > summary:hover .tib-faq-sectie-titel {
	color: var(--tib-blauw-licht);
}

.tib-faq-sectie > summary:focus-visible {
	outline: 2px solid var(--tib-accent);
	outline-offset: 2px;
}

.tib-faq-sectie-inhoud {
	padding: .2rem 0 1.4rem;
}

/* De losse h2-marge van de FAQ is niet meer nodig nu de koppen in
   een summary zitten. */
.page-id-123 .entry-content h2 {
	margin-top: 0;
}

@media (prefers-reduced-motion: reduce) {
	.tib-faq-sectie > summary::after {
		transition: none;
	}
}


/* ==========================================================================
   Donkere modus

   Werkt op twee manieren tegelijk:
     - volgt standaard de systeeminstelling van de bezoeker
     - een knop in de bovenbalk overschrijft dat, en die keuze wordt onthouden

   Alle kleuren zitten in variabelen. De regels eronder staan buiten elke
   media query, zodat ze in beide gevallen gelden; alleen de waarden
   verschillen. Zonder die opzet zou elke regel dubbel moeten.
   ========================================================================== */

:root {
	--vlak:          #ffffff;
	--vlak-2:        #f2f8fc;
	--vlak-rand:     #dfe3ee;
	--tekst:         #2b3440;
	--tekst-gedempt: #5a6672;
	--kop:           #262161;
	--kop-sub:       #3d3690;
	--link:          #3d3690;
	--link-hover:    #b85305;
	--menu-tekst:    #262161;
	--knop-bg:       #b85305;
	--knop-bg-hover: #944204;
	--knop-tekst:    #ffffff;
	--beeld-filter:  none;
	--schaduw:       0 2px 10px rgba(38, 33, 97, .07);
}

/* Donkere waarden: bij systeemvoorkeur, tenzij de bezoeker licht koos. */
@media (prefers-color-scheme: dark) {
	:root:not([data-thema="licht"]) {
		color-scheme: dark;
		--vlak:          #141733;
		--vlak-2:        #1c2044;
		--vlak-rand:     #2e3563;
		--tekst:         #dfe4f2;
		--tekst-gedempt: #a8b2cc;
		--kop:           #ffffff;
		--kop-sub:       #a1d9ee;
		--link:          #9ec9f0;
		--link-hover:    #ff9243;
		--menu-tekst:    #dfe4f2;
		--knop-bg:       #ff9243;
		--knop-bg-hover: #ffa866;
		--knop-tekst:    #141733;
		--beeld-filter:  invert(1) hue-rotate(180deg);
		--schaduw:       none;
	}
}

/* Donker op verzoek, ongeacht de systeeminstelling. */
:root[data-thema="donker"] {
	color-scheme: dark;
	--vlak:          #141733;
	--vlak-2:        #1c2044;
	--vlak-rand:     #2e3563;
	--tekst:         #dfe4f2;
	--tekst-gedempt: #a8b2cc;
	--kop:           #ffffff;
	--kop-sub:       #a1d9ee;
	--link:          #9ec9f0;
	--link-hover:    #ff9243;
	--menu-tekst:    #dfe4f2;
	--knop-bg:       #ff9243;
	--knop-bg-hover: #ffa866;
	--knop-tekst:    #141733;
	--beeld-filter:  invert(1) hue-rotate(180deg);
	--schaduw:       none;
}

/* --------------------------------------------------------------- toepassen */

/* Let op: .ast-container komt ook in de header- en footerbalken voor.
   Die hebben hun eigen achtergrond; hier alleen de contentkolom. */
body,
.site,
.site-content,
.site-content > .ast-container {
	background-color: var(--vlak);
	color: var(--tekst);
}

.entry-content,
.entry-content p,
.entry-content li,
.entry-content td {
	color: var(--tekst);
}

.entry-content h1,
.entry-content h2,
.entry-content h4,
.entry-title {
	color: var(--kop);
}

.entry-content h3 {
	color: var(--kop-sub);
}

.entry-content h2 {
	border-bottom-color: var(--vlak-rand);
}

.entry-content a:not(.wp-element-button):not(.wp-block-button__link) {
	color: var(--link);
}

.entry-content a:not(.wp-element-button):not(.wp-block-button__link):hover {
	color: var(--link-hover);
}

/* ------------------------------------------------------------------ header */

.main-header-bar,
.ast-primary-header-bar,
.site-header {
	background-color: var(--vlak) !important;
	border-bottom-color: var(--vlak-rand);
}

.ast-builder-menu-1 .menu-item > .menu-link,
.ast-builder-menu-1 .menu-item.current-menu-item > .menu-link,
.ast-builder-menu-1 .menu-item.current-menu-ancestor > .menu-link,
.main-header-menu > .menu-item > .menu-link {
	color: var(--menu-tekst) !important;
}

.ast-builder-menu-1 .menu-item:hover > .menu-link {
	color: var(--kop) !important;
}

.main-header-menu .sub-menu {
	background: var(--vlak);
	border-color: var(--vlak-rand);
}

.main-header-menu .sub-menu .menu-link {
	color: var(--tekst);
}

.main-header-menu .sub-menu .menu-item:hover > .menu-link,
.main-header-menu .sub-menu .current-menu-item > .menu-link {
	background: var(--vlak-2);
	color: var(--kop);
}

/* ----------------------------------------------------------------- knoppen */

.wp-block-button__link,
.ast-button,
.main-header-menu .menu-item-cta > .menu-link,
.ast-builder-menu-1 .menu-item.menu-item-cta > .menu-link,
button:not(.tib-thema-knop),
input[type="submit"] {
	background-color: var(--knop-bg) !important;
	color: var(--knop-tekst) !important;
}

.wp-block-button__link:hover,
.ast-button:hover,
.main-header-menu .menu-item-cta > .menu-link:hover,
button:not(.tib-thema-knop):hover,
input[type="submit"]:hover {
	background-color: var(--knop-bg-hover) !important;
	color: var(--knop-tekst) !important;
}

/* --------------------------------------------------------------------- FAQ */

.entry-content .wp-block-details {
	background: var(--vlak);
	border-color: var(--vlak-rand);
}

.entry-content .wp-block-details[open] {
	border-color: var(--tib-lichtblauw);
	box-shadow: var(--schaduw);
}

.entry-content .wp-block-details > summary {
	color: var(--kop);
}

.entry-content .wp-block-details > summary:hover {
	background: var(--vlak-2);
}

.tib-faq-sectie {
	border-top-color: var(--vlak-rand);
}

.tib-faq-sectie-titel {
	color: var(--kop);
}

.page-id-123 .entry-content > ul:first-of-type {
	background: var(--vlak-2);
}

/* ---------------------------------------------------------------- tabellen */

.entry-content table td {
	border-bottom-color: var(--vlak-rand);
}

.entry-content table tr:nth-child(even) td {
	background: var(--vlak-2);
}

/* ----------------------------------------------------------- contentvlakken */

.entry-content .has-ast-global-color-5-background-color,
.entry-content .wp-block-group.has-background:not([style*="gradient"]) {
	background-color: var(--vlak-2) !important;
}

.ast-page-title-wrap {
	background: var(--vlak-2);
	border-bottom-color: var(--vlak-rand);
}

/* ------------------------------------------------------------------- beeld */

.custom-logo-link img,
.custom-mobile-logo-link img,
.entry-content .wp-block-columns .wp-block-column img[src$=".svg"] {
	filter: var(--beeld-filter);
}

/* --------------------------------------------------------------- formulier */

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
textarea,
select {
	background: var(--vlak-2);
	border: 1px solid var(--vlak-rand);
	color: var(--tekst);
}

input::placeholder,
textarea::placeholder {
	color: var(--tekst-gedempt);
}

hr,
.wp-block-separator {
	border-color: var(--vlak-rand);
}

/* ------------------------------------------------------- schakelaar zelf --- */

.tib-thema-knop {
	background: none !important;
	border: 1px solid rgba(255, 255, 255, .28);
	border-radius: 4px;
	color: #fff !important;
	cursor: pointer;
	font: inherit;
	font-size: .8rem;
	line-height: 1;
	padding: .32rem .6rem;
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	white-space: nowrap;
}

.tib-thema-knop:hover {
	background: rgba(255, 255, 255, .12) !important;
	color: #fff !important;
}

.tib-thema-knop:focus-visible {
	outline: 2px solid var(--tib-lichtblauw);
	outline-offset: 2px;
}

.tib-thema-knop .tib-thema-icoon {
	font-size: .95rem;
	line-height: 1;
}

/* Zonder JavaScript heeft de knop geen functie; dan tonen we hem niet. */
html:not(.js) .tib-thema-knop {
	display: none;
}