/* DHB Liquid Gradient — WebGL mesh-gradient met ruis.
   Overgenomen uit de Nexa-plugin (nexa-liquid-gradient.css), met de DHB-kleuren
   en het dlg-voorvoegsel. De runtime staat in assets/js/dhb-liquid-gradient.js.

   Elk element met data-dlg krijgt hier zijn opmaak. Het canvas ligt absoluut in
   de laag; de laag zelf bepaalt waar hij hangt. */

.dlg-canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
	pointer-events: none;
}

/* Geen WebGL2? Dan zet het script deze klasse en een verlopende achtergrond.
   De ruislaag erover voorkomt dat je banden ziet in het verloop. */
.dlg-fallback::after {
	content: "";
	position: absolute;
	inset: 0;
	opacity: .12;
	pointer-events: none;
	background-image: url("../images/ruis.svg");
	background-size: 160px 160px;
	mix-blend-mode: overlay;
}

/* Als achtergrond van een hele Elementor-sectie of container. */
.dlg-als-achtergrond {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
}

.elementor-section:has(.dlg-als-achtergrond),
.e-con:has(.dlg-als-achtergrond) {
	position: relative;
	isolation: isolate;
}

.elementor-section:has(.dlg-als-achtergrond) > .elementor-container,
.e-con:has(.dlg-als-achtergrond) > :not(.elementor-element:has(.dlg-als-achtergrond)) {
	position: relative;
	z-index: 1;
}

/* Optionele overgang naar de paginakleur onderaan. */
.dlg-fade {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: var(--dlg-fade, 160px);
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0), var(--dlg-fade-kleur, #0B0A0A));
}