/*
---------------------------
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 */
.topnav > li > a.is-active {
	color: var(--color-primary-600);
}


/* ---------------------------------------------------------------------------
   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 {
	/* per huisstijl te overschrijven met --tw-home-bg (zie css/skins/) */
	background: var(--tw-home-bg, linear-gradient(180deg,
		rgba(var(--color-primary-200-rgb), 0.45) 0%,
		rgba(var(--color-primary-100-rgb), 0.55) 26%,
		rgba(var(--color-primary-50-rgb), 0.6) 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;
}