/*
---------------------------
WBCE - aanvullingen op de TimeWriter opmaak
---------------------------
Dit bestand bevat uitsluitend regels die nodig zijn omdat de navigatie en de
content nu uit het CMS komen. De originele stylesheets zijn ongewijzigd
gebleven, zodat een update van de vormgeving hier niet in de weg zit.
*/


/* Actieve pagina in de hoofdnavigatie (a of button, zie $tw['menu_click']) */
.topnav > li > a.is-active,
.topnav > li > button.is-active {
	color: var(--color-primary-600);
}

/* De streep onder het item is in deze template de taal voor "hier ben je":
 * topbar.css laat hem bij hover omhoog schuiven en houdt hem staand bij
 * .item-breadcrumb en .hover. De actieve pagina hoorde daarbij, maar kreeg
 * hem niet. Nu wel. */
.topnav > li > a.is-active:before,
.topnav > li > button.is-active:before {
	transform: translateY(0px);
	visibility: visible;
	opacity: 1;
}


/* ---------------------------------------------------------------------------
   Actieve pagina in de bovenbalk en in het copyrightmenu

   show_menu2 zet class="is-active" op het <li> van de huidige pagina. Foundation
   pakt dat op met .menu .is-active > a en zet daar een vol blok #1779ba achter:
   zijn eigen standaard-primary, een kleur die in dit palet niet voorkomt. Die
   achtergrond werd nergens overschreven, de labelkleur uit topbar.css wel - die
   heeft dezelfde specificiteit en staat later, dus die wint. Het resultaat was
   antracietgrijze tekst (--color-text) op middenblauw: 2,7:1, ruim onder de
   4,5:1 die gewone tekst nodig heeft, en een blok dat op een bijna witte balk
   harder roept dan de knop ernaast.

   Hieronder gaat het blok weg en komt de taal van de template ervoor terug:
   het label in het donkere blauw van het palet (7,3:1 op de balk) met dezelfde
   accentstreep eronder die de hoofdnavigatie gebruikt.
--------------------------------------------------------------------------- */
.topbar-extra-content .menu li.is-active > a,
.topbar-extra-content .menu li.active > a {
	background: transparent;
	color: var(--color-primary-900);
	font-weight: 600;
	box-shadow: inset 0 -2px 0 var(--color-primary-600);
}
.topbar-extra-content .menu li.is-active > a:hover,
.topbar-extra-content .menu li.active > a:hover {
	color: var(--color-primary-600);
}

/* Hetzelfde menu staat onderaan bij het copyright. Daar alleen het blok weg;
 * kleur en gewicht blijven van de footer zelf. */
.copyright-content .menu li.is-active > a,
.copyright-content .menu li.active > a {
	background: transparent;
	font-weight: 600;
}


/* ---------------------------------------------------------------------------
   Afbeelding op de kaart in het menupaneel

   De promokaart in de mega-dropdown toonde de afbeelding op de grootte die het
   bestand zelf meebracht: een icoon van 128 px werd 128 px, een foto liep over
   de volle kaartbreedte. Daardoor sprong de kaart van formaat zodra iemand een
   andere afbeelding koos. Hij staat nu vast op 100 x 100.

   Ander formaat? Pas alleen --menupaneel-afbeelding hieronder aan.

   object-fit: contain laat de hele afbeelding zien, met ruimte eromheen als
   hij niet vierkant is - goed voor iconen en logo's. Zet je er een foto op en
   wil je het vierkant helemaal gevuld hebben (bijgesneden), vervang contain
   dan door cover.
--------------------------------------------------------------------------- */
.mega-dropdown .card-image {
	--menupaneel-afbeelding: 100px;

	width: var(--menupaneel-afbeelding);
	height: var(--menupaneel-afbeelding);
	flex: 0 0 auto;
}

.mega-dropdown .card-image img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
}


/* ---------------------------------------------------------------------------
   Subnavigatie in de zijbalk
   show_menu2 kan meerdere niveaus diep gaan; hieronder de inspringing.
--------------------------------------------------------------------------- */
.sidebar-subnav ul ul {
	margin-left: 15px;
	border-left: 1px solid var(--color-primary-100);
}

.sidebar-subnav li.menu-current > a,
.sidebar-subnav li.menu-parent > a {
	font-weight: 600;
	color: var(--color-primary-600);
}


/* ---------------------------------------------------------------------------
   Content uit de WYSIWYG-editor
   Basisopmaak voor content zonder .textblock-classes, zodat een gewone
   pagina er meteen goed uitziet.
--------------------------------------------------------------------------- */
#page-content > ul,
#page-content > ol {
	margin-bottom: 20px;
	line-height: 1.9;
}

#page-content img {
	max-width: 100%;
	height: auto;
}

#page-content table {
	width: 100%;
	margin-bottom: 25px;
}

#page-content iframe {
	max-width: 100%;
}

#page-content > *:last-child {
	margin-bottom: 0;
}

/* Meldingen van modules (bijv. formulieren) */
#page-content .message,
#page-content .error {
	padding: 15px 20px;
	border-radius: 10px;
	background: var(--color-primary-50);
	margin-bottom: 20px;
}

#page-content .error {
	background: rgba(var(--color-alert-rgb), 0.1);
}


/* ---------------------------------------------------------------------------
   Toegankelijkheid: link naar de inhoud
--------------------------------------------------------------------------- */
.show-on-focus {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.show-on-focus:focus {
	left: 0;
	top: 0;
	z-index: 999;
	width: auto;
	height: auto;
	clip: auto;
	padding: 12px 20px;
	background: var(--color-white);
	color: var(--color-primary-950);
	border-radius: 0 0 10px 0;
}


/* ---------------------------------------------------------------------------
   Naar boven
--------------------------------------------------------------------------- */
.scroll-to-top {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 90;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--color-primary-600);
	color: var(--color-white);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease;
}

body.is-scrolled .scroll-to-top {
	opacity: 1;
	pointer-events: auto;
}

.scroll-to-top:hover {
	background: var(--color-primary-700);
	color: var(--color-white);
}

/* ---------------------------------------------------------------------------
 * Homepage (modulegebouwde hero) - toegevoegd voor de modulaire homepage.
 * De homepage (bovenste pagina, body.is-home) krijgt een doorlopende lichte
 * achtergrond die naar wit vervaagt, zodat een hero uit blok 10 (bv. de
 * Cover-module met achtergrond op "transparant") naadloos aansluit op de nav.
 * Op de homepage staat bovendien geen kruimelpad (zie index.php / IS_HOME).
 * ------------------------------------------------------------------------ */
body.is-home {
	background: linear-gradient(180deg, #e7f1ff 0%, #eef5ff 26%, #f6faff 48%, #ffffff 70%);
	background-repeat: no-repeat;
}

/* ---------------------------------------------------------------------------
 * Blok 'Brede secties (volle breedte)' - .page-content-full
 *
 * Wordt door index.php gebruikt voor blok 5: de secties lopen edge-to-edge en
 * bepalen zelf hun ruimte. Losse tekst die je ertussen typt zou dan tot de schermrand lopen;
 * onderstaande regels vangen dat op door gewone tekstelementen alsnog in de
 * standaard containerbreedte te zetten (75rem, zelfde gutter als
 * .grid-container). Elementen met een eigen class - dus de opmaak van de
 * template en de sectiemodules - blijven onaangeroerd volle breedte.
 * ------------------------------------------------------------------------ */
/* Zorg dat dit blok zelf nooit zij-padding krijgt, zodat een sectie met een
   achtergrond (bv. het CTA-bannerblok) echt tegen de schermranden staat. */
.page-content-full {
	padding-left: 0;
	padding-right: 0;
}

.page-content-full > p,
.page-content-full > h1,
.page-content-full > h2,
.page-content-full > h3,
.page-content-full > h4,
.page-content-full > h5,
.page-content-full > h6,
.page-content-full > ul,
.page-content-full > ol,
.page-content-full > dl,
.page-content-full > table,
.page-content-full > blockquote,
.page-content-full > pre,
.page-content-full > address,
.page-content-full > form,
.page-content-full > hr,
.page-content-full > figure,
.page-content-full > iframe,
.page-content-full > img,
.page-content-full > div:not([class]) {
	max-width: 75rem;
	margin-left: auto;
	margin-right: auto;
	padding-left: 0.9375rem;
	padding-right: 0.9375rem;
	box-sizing: border-box;
}

/* wat lucht boven/onder losse tekst, zodat die niet tegen een sectie plakt */
.page-content-full > p:first-child,
.page-content-full > h1:first-child,
.page-content-full > h2:first-child,
.page-content-full > h3:first-child,
.page-content-full > ul:first-child,
.page-content-full > ol:first-child,
.page-content-full > table:first-child,
.page-content-full > div:not([class]):first-child {
	margin-top: 2.5rem;
}
.page-content-full > p:last-child,
.page-content-full > h1:last-child,
.page-content-full > h2:last-child,
.page-content-full > h3:last-child,
.page-content-full > ul:last-child,
.page-content-full > ol:last-child,
.page-content-full > table:last-child,
.page-content-full > div:not([class]):last-child {
	margin-bottom: 2.5rem;
}

/* Staat er tekst zowel voor als na een volle-breedte sectie in hetzelfde blok,
   dan krijgt elk vervolgstuk dezelfde inspringing als #page-content
   (zie content.css), zodat alles netjes op een lijn blijft. */
.page-content-more {
	padding-left: 30px;
	padding-right: 6rem;
}
@media (max-width: 1023px) {
	.page-content-more { padding-left: 15px; padding-right: 1rem; }
}
@media (max-width: 640px) {
	.page-content-more { padding-left: 15px; padding-right: 15px; }
}

/* ---------------------------------------------------------------------------
 * Achtergronddecoratie achter een eigen hero (blok 'Cover / hero')
 *
 * De automatische cover-placeholder heeft een kleurvlak, twee gloedcirkels en
 * de grote sierlijke cirkels. Vul je blok 10 zelf (bv. met de Cover-module),
 * dan rendert die placeholder niet en zou de achtergrond vlak worden. Deze
 * laag brengt dezelfde decoratie terug, achter de hero.
 * ------------------------------------------------------------------------ */
.cover-decor {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	overflow: hidden;
	pointer-events: none;
	z-index: 0;
}

/* de cirkels zijn standaard onzichtbaar tot een slider ze activeert */
.cover-decor .circle-wrapper {
	opacity: 1 !important;
}

/* de hero zelf boven de decoratie houden */
.cover-wrapper > *:not(.cover-decor) {
	position: relative;
	z-index: 1;
}

/* ---------------------------------------------------------------------------
 * Opmaak gelijktrekken: gewone WYSIWYG-content vs. de eigen modules
 *
 * Een kale <h1>/<h2> die je in een standaard WYSIWYG-blok typt viel tot nu
 * toe terug op de algemene kopregel in basics.css (donker,
 * var(--color-primary-950)), terwijl regel 1 van een moduletitel zijn
 * zachtere kleur krijgt via "h1 span { color: rgba(0,33,100,0.6) }" (ook
 * basics.css) - de modules zetten hun titeltekst namelijk in een <span>.
 * Ook de broodtekst verschilde: .textblock-content P (content.css) is
 * clamp(1rem -> 1.125rem), een kale <p> (basics.css) blijft 1rem.
 *
 * Onderstaande regels geven kale koppen en alinea's in de leeskolom
 * (#page-content, .page-content-more en het volle-breedte blok
 * .page-content-full) dezelfde waarden als de modules. Bewust alleen
 * elementen ZONDER class (:not([class])): alles wat al een eigen class
 * draagt - moduletitels, c-primary-600-koppen uit de editor
 * ("Kop 1 lichtblauw"), sectie-opmaak - blijft volledig ongemoeid.
 * :where() houdt de specificiteit laag, zodat bestaande, specifiekere
 * regels (bv. .accordion-content .textblock-lead p) blijven winnen.
 * ------------------------------------------------------------------------ */
:where(#page-content, .page-content-more, .page-content-full) :is(h3, h4, h5, h6):not([class]) {
	color: rgba(0, 33, 100, 0.6); /* zelfde kleur als moduletitel regel 1 */
}

/* Een kale <h1> of <h2> is automatisch tweekleurig, net als de tweeregelige
 * moduletitels: de eerste GETOONDE regel in de normale kopkleur, alles
 * daarna in de lichtblauwe accentkleur. Je hoeft daar in de editor dus geen
 * stijl voor te kiezen - typ de kop, breek af met Shift+Enter (of laat de
 * browser hem zelf afbreken) en de tweede regel kleurt vanzelf mee. Past de
 * kop op een regel, dan oogt hij gewoon als een normale kop.
 *
 * De h2 hoorde hier vanaf v2.9 bij, maar stond nog in de rij hierboven
 * (h2 t/m h6 = een kleur). Die twee regels spreken elkaar tegen en zijn even
 * specifiek, dus won de laatste - en dat was de eenkleurige. Daarom staat de
 * h2 nu hier en niet meer daar.
 *
 * Alleen een h1/h2 ZONDER class: moduletitels (.textblock-title) regelen hun
 * eigen twee kleuren al met .tw-title-line1/.tw-title-line2 en blijven
 * daardoor volledig ongemoeid. Koppen die de stijl "Kop 1/2 tweekleurig"
 * uit de editor dragen, hebben class="kop-duo" en krijgen hetzelfde beeld
 * verderop in dit bestand.
 *
 * .cover-wrapper staat er sinds 2.9.2 bij. Dat is de kopband uit index.php,
 * met daarin blok 10 - dus de hero. De kop daarvan is de grootste <h1> van
 * de pagina en viel als enige buiten deze regels, omdat de opsomming
 * hierboven alleen de leeskolom noemt; hij bleef daardoor eenkleurig terwijl
 * dezelfde kop in een gewoon tekstblok wel tweekleurig werd. */
:where(#page-content, .page-content-more, .page-content-full, .cover-wrapper) :is(h1, h2):not([class]) {
	color: var(--color-primary-600);
}
:where(#page-content, .page-content-more, .page-content-full, .cover-wrapper) :is(h1, h2):not([class])::first-line {
	color: rgba(0, 33, 100, 0.6);
}

:where(#page-content, .page-content-more, .page-content-full) p:not([class]) {
	font-size: clamp(1.000rem, 0.9152rem + 0.1399vw, 1.125rem); /* zelfde als .textblock-content P */
	line-height: 1.9;
}

/* De leadtekst van de modules (Intro Block e.d.) staat als kale tekst in de
 * .textblock-lead-span, meestal zonder <p> eromheen - de bestaande regel
 * ".textblock-lead p { line-height: 1.9 }" (content.css) doet dan niets en
 * de tekst valt terug op de krappere standaard-regelafstand van de browser.
 * Zelfde waarden als de WYSIWYG-alinea's hierboven, op de span zelf, zodat
 * lead- en hoofdtekst dezelfde regelafstand hebben. Staat er wel een <p> in
 * de lead, dan blijven de eigen p-regels (o.a. font-weight 600) gewoon
 * gelden - de regelafstand is daar al 1.9. */
.textblock-lead {
	font-size: clamp(1.000rem, 0.9152rem + 0.1399vw, 1.125rem);
	line-height: 1.9;
}

/* Tweekleurige kop voor de WYSIWYG-editor ("Kop 1 tweekleurig" in de
 * Stijl-lijst, zie wb_config/editor.styles.js): regel 1 in de normale
 * kopkleur, elke volgende regel in de lichtblauwe accentkleur - hetzelfde
 * beeld als de tweeregelige moduletitels (regel 1 via de "h1 span"-regel in
 * basics.css, regel 2 in c-primary-600). ::first-line pakt de eerste
 * GETOONDE regel: een nieuwe regel maak je in de editor met Shift+Enter
 * (of de kop breekt vanzelf af); past de kop op een regel, dan oogt hij
 * gewoon als een normale kop. */
.kop-duo {
	color: var(--color-primary-600);
}
.kop-duo::first-line {
	color: rgba(0, 33, 100, 0.6); /* zelfde als moduletitel regel 1 */
}

/* ---------------------------------------------------------------------------
 * Kopband zonder tekst (v2.5)
 *
 * De automatische paginatitel + omschrijving in de kopband zijn vervallen
 * (zie index.php). Die tekst gaf de band vanzelf hoogte; nu is de sectie
 * alleen nog zijn eigen padding hoog. .cover-wrapper trekt zichzelf 160px
 * omhoog onder de vaste menubalk, terwijl .cover-placeholder in cover.css
 * per breekpunt 160px/180px/110px padding-top heeft. Op smalle schermen
 * (110px) zou de band die -160px dus niet meer volledig opvangen en zou de
 * eerste content onder de menubalk schuiven. Deze ondergrens houdt de band
 * altijd minstens even hoog als de verschuiving.
 * ------------------------------------------------------------------------ */
.cover-placeholder {
	min-height: 240px;
}