/*
 * Elementor integration, not component styling: selectors here target Elementor's container (.e-con) and widget
 * wrapper, so they do not start with [data-de26] (assets/css/ is reserved for [data-de26] rules).
 *
 * Hero container background. The hero's gradient used to be painted on the widget only, so any padding on the
 * container around it (and the wave Shape Divider space below it) showed a white frame. A container that directly
 * holds a DE Hero now paints the same gradient itself, and the hero root goes transparent so there is one painted
 * surface. :where() keeps the container rule at zero specificity: any background the editor sets on the container
 * (a gradient or image, with its own size and position) wins untouched: this rule sets background-image only, because
 * the hero's 146.4%-wide centered sizing is baked into --de26-hero-bg-window. Standalone (outside an
 * .e-con) the root keeps its own background.
 * A plain background COLOR set on the container is NOT enough: it paints under this image and stays hidden. Authors
 * set a gradient or image instead (the hero usage text says so). No CSS-only way lets a color win without losing the
 * default gradient: Elementor writes the color as a bare background-color with no class or variable to key off.
 */
:where(.e-con:has(> .elementor-widget-de26-hero), .e-con:has(> .e-con-inner > .elementor-widget-de26-hero)) {
	background-image: var(--de26-hero-bg-window);
}

.e-con > .elementor-widget-de26-hero [data-de26].de26-hero,
.e-con-inner > .elementor-widget-de26-hero [data-de26].de26-hero {
	background: transparent;
}

/*
 * Hero Twirl, edge to edge. The hero sits inside the container's padding, so a Twirl drawn by the hero stops short of the
 * container edges. A container that directly holds a DE Hero with the Twirl on draws it instead, on ::after across its
 * whole padding box (border-radius inherited), and the hero's own ::before Twirl is turned off. A background never
 * overflows its box, so a wide or offset Twirl crops at the container edge with no scrollbars and no overflow setting.
 * Layering: isolation makes the container a stacking context, so z-index -2 sits above the container background and
 * below the Shape Divider svg (z-index -1) and all content. Elementor uses ::before for the background overlay and
 * nothing on ::after. Variables: see the Twirl block in assets/css/hero.css; keep the two in step.
 */
.e-con:has(> .elementor-widget-de26-hero .de26-hero--twirl),
.e-con:has(> .e-con-inner > .elementor-widget-de26-hero .de26-hero--twirl) {
	isolation: isolate;
}

.e-con:has(> .elementor-widget-de26-hero .de26-hero--twirl)::after,
.e-con:has(> .e-con-inner > .elementor-widget-de26-hero .de26-hero--twirl)::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -2;
	border-radius: inherit;
	pointer-events: none;
	background-image: var(--de26-hero-twirl, url("../twirl/hero-twirl-white.svg"));
	background-repeat: no-repeat;
	background-size: var(--de26-hero-twirl-size, 100%) auto;
	background-position: calc(50% + var(--de26-hero-twirl-x, 0px)) var(--de26-hero-twirl-y, 0px);
}

/* Bundled variations, same files as hero.css. */
.e-con:has(> .elementor-widget-de26-hero .de26-hero--twirl-experience-feathered)::after,
.e-con:has(> .e-con-inner > .elementor-widget-de26-hero .de26-hero--twirl-experience-feathered)::after {
	background-image: var(--de26-hero-twirl, url("../twirl/experience-feathered.png"));
}

.e-con:has(> .elementor-widget-de26-hero .de26-hero--twirl-wide-feathered)::after,
.e-con:has(> .e-con-inner > .elementor-widget-de26-hero .de26-hero--twirl-wide-feathered)::after {
	background-image: var(--de26-hero-twirl, url("../twirl/wide-feathered.webp"));
}

.e-con:has(> .elementor-widget-de26-hero .de26-hero--twirl-wide-hard-edge)::after,
.e-con:has(> .e-con-inner > .elementor-widget-de26-hero .de26-hero--twirl-wide-hard-edge)::after {
	background-image: var(--de26-hero-twirl, url("../twirl/wide-hard-edge.svg"));
}

.e-con > .elementor-widget-de26-hero [data-de26].de26-hero--twirl::before,
.e-con-inner > .elementor-widget-de26-hero [data-de26].de26-hero--twirl::before {
	content: none;
}