/* ==========================================================
   Paragraaf met achtergrondkleur
   Het kleurvlak loopt over de volle schermbreedte (box-shadow +
   clip-path), de tekst blijft in de normale contentbreedte.
   ========================================================== */

.layout-paragraph.has-bg {
	position: relative;
	padding-top: 3rem;
	padding-bottom: 3rem;
	background: var(--paragraph-bg);
	box-shadow: 0 0 0 100vmax var(--paragraph-bg);
	clip-path: inset(0 -100vmax);
}

/* Laatste element geen extra witruimte onderin het vlak */
.layout-paragraph.has-bg > *:last-child { margin-bottom: 0; }

/* Twee gekleurde paragrafen direct onder elkaar sluiten aan */
.layout-paragraph.has-bg + .layout-paragraph.has-bg { margin-top: -3.125rem; }

/* Lichte tekst op donkere achtergrond (overschrijft de !important uit main-2025.css) */
.layout-paragraph.has-bg--dark,
.layout-paragraph.has-bg--dark p,
.layout-paragraph.has-bg--dark h1,
.layout-paragraph.has-bg--dark h2,
.layout-paragraph.has-bg--dark h3,
.layout-paragraph.has-bg--dark h4,
.layout-paragraph.has-bg--dark li,
.layout-paragraph.has-bg--dark ul li,
.layout-paragraph.has-bg--dark ol li,
.layout-paragraph.has-bg--dark strong,
.layout-paragraph.has-bg--dark em,
.layout-paragraph.has-bg--dark blockquote { color: #fff !important; }

.layout-paragraph.has-bg--dark a,
.layout-paragraph.has-bg--dark a:visited { color: #fff !important; text-decoration: underline; }
.layout-paragraph.has-bg--dark a:hover { color: var(--yellow, #F7D76D) !important; }

/* Op paarse/blauwe tinten is de standaard paarse link slecht leesbaar */
.layout-paragraph.has-bg--light a,
.layout-paragraph.has-bg--light a:visited { color: var(--purple-dark, #4C3D89); text-decoration: underline; }

@media (max-width: 768px) {
	.layout-paragraph.has-bg { padding-top: 2rem; padding-bottom: 2rem; }
}