/*
 * Thema-extra's BOVENOP de 1:1 geporteerde site.css (site.css zelf blijft
 * onaangeraakt). Geladen ná site.css — zie inc/auto/opmaak.php.
 *
 * Nieuwe beheerbare kleuroptie "Geel (#ffcf00)" (dezelfde kleur als de
 * originele .color-markeryellow):
 *  - .blockcolor-geel      → gekleurd tekst-/accordeonblok (naast grey/black/white);
 *  - .backgroundcolor-geel → gele sectie-achtergrond (be_bg-keuze "Geel").
 */
.blockcolor-geel > div { background-color: #ffcf00; color: #000; }
.layout.backgroundcolor-geel { background-color: #ffcf00; }

/*
 * Responsive hero-overlay (bewuste verbetering t.o.v. live, op klantverzoek):
 * live kapt de overlay-tekst af op kleine schermen (vaste h1-maat in een
 * halve-breedte kolom binnen een 31,25%-ratio hero). Mobiel-only fixes;
 * desktop (≥768px) blijft pixel-identiek aan live.
 */
@media (max-width: 768px) {
	/* volledige breedte voor de tekst i.p.v. halve kolom */
	div.slideshow div.texts ul li.align-left > div.txt,
	div.slideshow div.texts ul li.align-right > div.txt,
	div.slideshow div.texts ul li.align-center > div.txt { left: 15px; right: 15px; }
	/* schaalbare tekstmaat i.p.v. desktop-h1 */
	div.slideshow div.texts ul li > div.txt h1,
	div.slideshow div.texts ul li > div.txt h2,
	div.slideshow div.texts ul li > div.txt h3 { font-size: 17px; line-height: 1.4; margin: 0; }
	div.slideshow div.texts ul li > div.txt .color-markeryellow,
	div.slideshow div.texts ul li > div.txt .color-markerblack { padding: 3px 7px; }
	/* hero iets hoger zodat meerregelige meldingen passen */
	div.slideshow.style-high .slides > div > ul::before,
	div.slideshow.style-low .slides > div > ul::before { padding-bottom: 45%; }
}
@media (max-width: 479px) {
	div.slideshow div.texts ul li > div.txt h1,
	div.slideshow div.texts ul li > div.txt h2,
	div.slideshow div.texts ul li > div.txt h3 { font-size: 15px; }
	div.slideshow.style-high .slides > div > ul::before,
	div.slideshow.style-low .slides > div > ul::before { padding-bottom: 62%; }
}

/* Tussenmaat tablet-liggend (769–1080px): iets kleinere hero-kop zodat ook
 * langere meldingen binnen de vaste hero-verhouding passen. */
@media (min-width: 769px) and (max-width: 1080px) {
	div.slideshow div.texts ul li > div.txt h1,
	div.slideshow div.texts ul li > div.txt h2,
	div.slideshow div.texts ul li > div.txt h3 { font-size: 24px; line-height: 1.35; margin: 0; }
}