/**
 * Les van Anne – responsive spacing
 *
 * Elementor's stretched boxed sections place the background on the outer
 * container and the page content in `.e-con-inner`. Moving all horizontal
 * spacing to that inner shell keeps backgrounds, waves and decorative artwork
 * full width while giving readable content a consistent gutter.
 */

:root {
	--lva-content-gutter: clamp(20px, 3vw, 48px);
	--lva-content-gutter-left: max(var(--lva-content-gutter), env(safe-area-inset-left, 0px));
	--lva-content-gutter-right: max(var(--lva-content-gutter), env(safe-area-inset-right, 0px));
	--lva-header-yellow: #ffcf00;
}

/**
 * Live still has the older, darker hero yellow on Group 4–8 and Informatie,
 * while staging already uses the global header yellow. Normalize only these
 * six hero containers so both environments form one continuous yellow band.
 */
body.page-id-11507 .elementor-element-32ee9231,
body.page-id-11528 .elementor-element-70871d13,
body.page-id-11548 .elementor-element-64523457,
body.page-id-11564 .elementor-element-5c05e18,
body.page-id-11566 .elementor-element-5ef66b54,
body.page-id-13151 .elementor-element-b5b713b {
	background-color: var(--lva-header-yellow) !important;
}

/**
 * Scope this to actual Elementor WordPress pages. Loop templates, product
 * cards, headers, footers and single-post templates keep their own spacing.
 */
.main-page-wrapper
	.elementor[data-elementor-type="wp-page"][data-elementor-post-type="page"]
	> .e-con-boxed {
	padding-left: 0 !important;
	padding-right: 0 !important;
}

.main-page-wrapper
	.elementor[data-elementor-type="wp-page"][data-elementor-post-type="page"]
	> .e-con-boxed
	> .e-con-inner {
	padding-left: var(--lva-content-gutter-left) !important;
	padding-right: var(--lva-content-gutter-right) !important;
}

/**
 * The homepage testimonial carousel lives in a deliberately full-width
 * container instead of a top-level boxed section. Give only that container
 * the same responsive gutter so its heading, cards and button align with the
 * rest of the page while its background remains full width.
 */
.main-page-wrapper
	.elementor[data-elementor-id="66482"]
	> .elementor-element-42580a44 {
	padding-left: var(--lva-content-gutter-left) !important;
	padding-right: var(--lva-content-gutter-right) !important;
}

/**
 * The introductory text on the Informatie page already gets the theme's
 * regular 20px paragraph margin. Remove Elementor's additional 15px widget
 * gap from this column so consecutive paragraphs use one consistent rhythm.
 */
.elementor-13151 .elementor-element-3d4eec5 {
	gap: 0 !important;
}

/**
 * The first Informatie section has an overlapping Elementor breakpoint at
 * exactly 768px: its illustration becomes 100% wide while the parent remains
 * a row, squeezing the text column to zero. Keep the intended 15/85 split
 * throughout the narrow-tablet range.
 */
@media (min-width: 768px) and (max-width: 900px) {
	.elementor-13151
		.elementor-element-6442ce6
		> .e-con-inner
		> .elementor-element-cd35be2 {
		flex: 0 0 15% !important;
		width: 15% !important;
	}

	.elementor-13151
		.elementor-element-6442ce6
		> .e-con-inner
		> .elementor-element-3d4eec5 {
		flex: 1 1 0 !important;
		width: auto !important;
	}
}