/*
 * ASDF ⇄ Elementor layout bridge.
 *
 * Goal: the imported Elementor pages must render EXACTLY like the original static
 * HTML. The ASDF widgets already output the identical markup/classes, but Elementor
 * wraps every widget in section → container → column → widget-wrap → widget →
 * widget-container, and each wrapper adds width limits, padding and gutters that
 * shift the design.
 *
 * Fix: on the FRONT END, collapse the structural wrappers ABOVE the widget —
 * section, container, column, widget-wrap — with `display:contents`, so the ASDF
 * `<section>` sits flush against the page exactly like the static site.
 *
 * The widget's own two elements — `[class*="elementor-widget-asdf-"]` (the div
 * Elementor's {{WRAPPER}} selector resolves to) and its child
 * `.elementor-widget-container` (what the Advanced tab's Padding control targets;
 * Margin targets the wrapper itself) — are deliberately NOT collapsed. An element
 * with `display:contents` generates no box at all, so margin, padding, and every
 * other box-dependent Advanced/Style-tab control (motion effects, entrance
 * animations, custom position) would have nothing to apply to. Collapsing
 * everything down to and including the widget wrapper — which an earlier version
 * of this file did — is what broke those controls; leaving these two as real
 * (invisible, unstyled-by-default) boxes fixes it without reintroducing any of
 * Elementor's actual unwanted section/column chrome, which lives one level up.
 *
 * In the Elementor EDITOR the wrappers are kept as boxes too (so editing handles
 * work), just stripped of Elementor's default padding/gutter/max-width so the
 * preview still resembles the front end.
 */

/* ---- Front end: make Elementor's structural wrappers transparent ---- */
body:not(.elementor-editor-active) .elementor-section:has([class*="elementor-widget-asdf-"]),
body:not(.elementor-editor-active) .elementor-section:has([class*="elementor-widget-asdf-"]) > .elementor-container,
body:not(.elementor-editor-active) .elementor-section:has([class*="elementor-widget-asdf-"]) > .elementor-container > .elementor-column,
body:not(.elementor-editor-active) .elementor-section:has([class*="elementor-widget-asdf-"]) .elementor-widget-wrap,
body:not(.elementor-editor-active) .elementor-column:has([class*="elementor-widget-asdf-"]),
/* Elementor (flexbox) container equivalents */
body:not(.elementor-editor-active) .e-con:has([class*="elementor-widget-asdf-"]),
body:not(.elementor-editor-active) .e-con:has([class*="elementor-widget-asdf-"]) > .e-con-inner {
	display: contents !important;
}

/* ---- Editor: keep wrappers as boxes, but full-width + no gutter so the preview
        still resembles the front end. Same "stop above the widget" boundary as
        the front-end rule above — .elementor-widget-wrap and .elementor-column
        are genuine Elementor chrome; the widget and its own container are not. */
.elementor-editor-active .elementor-section:has([class*="elementor-widget-asdf-"]) {
	padding: 0 !important;
	margin: 0 !important;
}
.elementor-editor-active .elementor-section:has([class*="elementor-widget-asdf-"]) > .elementor-container {
	max-width: 100% !important;
	width: 100% !important;
}
.elementor-editor-active .elementor-section:has([class*="elementor-widget-asdf-"]) .elementor-widget-wrap,
.elementor-editor-active .elementor-section:has([class*="elementor-widget-asdf-"]) .elementor-column {
	padding: 0 !important;
	margin: 0 !important;
}

/* Full-bleed ASDF sections must not create a horizontal scrollbar. */
body.elementor-page,
.elementor-page .elementor {
	overflow-x: hidden;
}

/*
 * Fallback for the rare browser without :has() support — never let an Elementor
 * container holding an ASDF widget stay boxed.
 */
@supports not (selector(:has(*))) {
	.elementor-widget-wrap > [class*="elementor-widget-asdf-"] {
		width: 100%;
	}
}