/* ==========================================================================
   VCA blokken: knopkleuren en gekleurde kaders (zie inc/vca-blokken.php)
   ========================================================================== */
:root {
	--vca-oranje: #ef7d00;
	--vca-blauw: #2faadc;
	--vca-paars: #7f5ca3;
	--vca-lichtgroen: #95c11f;
	--vca-donkergroen: #009636;
	--vca-rood: #e73331;
}

.button-paars,
.button-lichtgroen,
.button-donkergroen,
.button-rood {
	color: #FFFFFF !important;
	font-size: 14px !important;
	font-weight: 400;
	padding: 0 1em;
	margin-bottom: 0px;
	margin-top: 20px;
	text-wrap: wrap;
}
.button-paars { background-color: var(--vca-paars) !important; }
.button-lichtgroen { background-color: var(--vca-lichtgroen) !important; }
.button-donkergroen { background-color: var(--vca-donkergroen) !important; }
.button-rood { background-color: var(--vca-rood) !important; }

.vca-kader--oranje { --vca-kader: var(--vca-oranje); --vca-kader-licht: #fdf0e0; }
.vca-kader--blauw { --vca-kader: var(--vca-blauw); --vca-kader-licht: #e6f5fb; }
.vca-kader--paars { --vca-kader: var(--vca-paars); --vca-kader-licht: #f0ecf5; }
.vca-kader--lichtgroen { --vca-kader: var(--vca-lichtgroen); --vca-kader-licht: #f2f8e4; }
.vca-kader--donkergroen { --vca-kader: var(--vca-donkergroen); --vca-kader-licht: #e0f2e7; }
.vca-kader--rood { --vca-kader: var(--vca-rood); --vca-kader-licht: #fce7e6; }

.pixcode--infobox.vca-kader {
	box-sizing: border-box;
	margin: 0 0 24px;
	padding: 24px 28px;
	border: 0;
	border-radius: 0;
}
.pixcode--infobox.vca-kader .infobox__title {
	margin: 0 0 8px;
	font-size: 22px;
	line-height: 1.3;
}
.pixcode--infobox.vca-kader .infobox__subtitle {
	margin: 0 0 12px;
	font-weight: 600;
}
.pixcode--infobox.vca-kader .infobox__content > :last-child {
	margin-bottom: 0;
}

.vca-kader--vol {
	background-color: var(--vca-kader);
}
.vca-kader--vol,
.vca-kader--vol .infobox__title,
.vca-kader--vol .infobox__subtitle,
.vca-kader--vol .infobox__content,
.vca-kader--vol a {
	color: #FFFFFF !important;
}
.vca-kader--vol a {
	text-decoration: underline;
}

.vca-kader--licht {
	background-color: var(--vca-kader-licht);
	border-left: 6px solid var(--vca-kader) !important;
}
.vca-kader--licht .infobox__title {
	color: var(--vca-kader) !important;
}

/* Kaders in Pixcodes-kolommen: zelfde hoogte per rij op brede schermen;
   op mobiel stapelen ze via palm-one-whole */
@media (min-width: 900px) {
	.pixcode--grid:has(> .grid__item > .vca-kader) {
		display: flex;
		flex-wrap: wrap;
	}
	.pixcode--grid > .grid__item > .vca-kader {
		height: calc(100% - 24px);
	}
}

/* Tekst in een vol kader altijd wit, ook als de editor er een vaste
   tekstkleur omheen zet (bijv. <span style="color: #333333;">). */
.vca-kader--vol .infobox__content * {
	color: #FFFFFF !important;
}