/*!
 * Fuel Cover — reusable growing shape divider.
 * Add class "fuel-cover" to any Elementor section (or block-level element) to
 * make it draw a diagonal shape divider that grows on scroll, covering the
 * section above it as this section slides in.
 *
 * Modifier:  add class "dark" to switch the divider to #13110f and mirror the
 *            slant (top-right dips instead of top-left).
 *
 * Height and clip-path are driven by fuel-cover.js.
 */

.fuel-cover {
	position: relative;
 
}

.fuel-cover__divider {
	position: absolute;
	left: 0;
	right: 0;
	/* bottom: calc(100% - 1px) overlaps the divider 1px into its parent
	   section, killing the subpixel hairline where the divider's flat bottom
	   edge meets the section's top edge — otherwise fractional layout math
	   lets the page background bleed through a ~1px seam. */
	bottom: calc(100% - 1px);
	width: 100%;
	height: 0;
	background: #fff;
	z-index: 5;
	pointer-events: none;
	clip-path: polygon(0 30%, 100% 0, 100% 100%, 0 100%);
	will-change: height, clip-path;
}

.fuel-cover.dark .fuel-cover__divider {
	background: #13110f;
}

.fuel-cover.light .fuel-cover__divider {
	background: #ffffff;
}

/* Elementor containers apply a flex `gap` on the parent so children never sit
   flush. That gap shows as a visible strip between a fuel-cover section and
   its neighbour, breaking the "shape divider covers the section above"
   illusion. Kill the gap on any parent that holds a fuel-cover, and also drop
   sibling margins as a fallback for non-flex parents. */
:has(> .fuel-cover) {
	gap: 0 !important;
	row-gap: 0 !important;
}

.fuel-cover,
.fuel-cover + * {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}