/* =====================================================================
 * BP — Global decorative-botanical rules
 * ---------------------------------------------------------------------
 * Purpose
 *   1. Break every widget section that hosts a decorative botanical
 *      OUT of its Elementor column to the FULL viewport width, so
 *      that left/right decorations can anchor to the SCREEN edge
 *      (left edge of viewport for left botanicals, right edge for
 *      right botanicals) instead of floating inside the 1140px
 *      inner column.
 *   2. Re-anchor the left/right decorations to inset-inline-start:0
 *      and inset-inline-end:0 so the per-widget X-offset (which
 *      most widgets apply via `transform: translateX(var(--x))`)
 *      is measured FROM the screen edge, not from the inner
 *      column.
 *   3. Page-level horizontal-overflow safety net: even if a single
 *      widget forgets overflow:clip, the page itself never scrolls
 *      horizontally.
 *   4. Decoration stack / pointer-events: every decoration image is
 *      pointer-events:none and z-index:0 so it can never block a
 *      click on the cards / text / buttons layered on top.
 *
 * Animation handling
 *   Lives in `bp-reveal.css`. The initial-state `[data-bp-reveal]`
 *   rules use a `:not(...)` selector that excludes every botanical
 *   / decor / branch / leaves / foliage / ornament class fragment,
 *   so the decoration never enters the hidden state in the first
 *   place and never animates. The matching `bp-reveal.js` filter
 *   is kept as defense in depth.
 *
 * Scope
 *   Loaded on every page (editor + frontend). Only targets the
 *   decoration child elements + the widget section roots. Inner
 *   cards, text, buttons, icons, etc. are NOT touched.
 * ===================================================================== */

/* ---------------------------------------------------------------------
 * 1. Page overflow safety net.
 * ------------------------------------------------------------------ */
html,
body {
	overflow-x: clip;
}

/* ---------------------------------------------------------------------
 * 2. Decoration stack / pointer-events.
 * ------------------------------------------------------------------ */
[class*="__botanical"],
[class*="__botanical-motion"],
[class*="__leaves"],
[class*="__leaves-motion"],
[class*="__decor"],
[class*="__decoration"],
[class*="__branch"],
[class*="__branch-svg"],
[class*="__foliage"],
[class*="__ornament"],
.bp-botanical,
.bp-decor,
.bp-leaf {
	pointer-events: none;
	z-index: 0;
}

/* ---------------------------------------------------------------------
 * 3. Full-bleed breakout for every widget section that hosts a
 *    decorative botanical. This forces the section to span the full
 *    viewport width regardless of the Elementor column it sits in,
 *    so the decorations can anchor to the actual screen edges.
 *    The inner 1140px wrapper inside each widget keeps its own
 *    max-width and stays centered.
 *
 *    Widgets that ALREADY do the breakout in their own CSS
 *    (bp-product-comparison, bp-product-calculator-quote,
 *    bp-product-versions, bp-why-choose, bp-contact-hero) are
 *    included in the list for consistency; their existing rules
 *    remain the source of truth, this rule simply re-affirms the
 *    same final layout and does not override any per-widget
 *    overflow / padding values.
 * ------------------------------------------------------------------ */
.bp-calculator-quote,
.bp-commitments,
.bp-awards-recognition,
.bp-domaines-utilisation,
.bp-formulation-npk,
.bp-g4-preparation,
.bp-global-presence,
.bp-techniques,
.bp-production-quality,
.bp-product-information,
.bp-product-documentation,
.bp-product-faq,
.bp-pfc,
.bp-founder-section,
.bp-faq,
.bp-field-results,
.bp-root-diagram,
.bp-hydro-retention-technology,
.bp-contact-form,
.bp-contact-final-cta,
.bp-contact-global-network,
.bp-why-choose,
.bp-product-comparison,
.bp-pcq,
.bp-product-versions,
.bp-contact-hero {
	/* The breakout: span full viewport, ignore parent column. */
	inline-size: 100vw;
	max-inline-size: 100vw;
	min-inline-size: 100vw;
	margin-inline-start: calc(50% - 50vw);
	margin-inline-end:   calc(50% - 50vw);
	position: relative;
	/* Stop any horizontal overflow: the decoration is allowed to
	 * be partially clipped at the edge of the section, but the
	 * page itself never gains a horizontal scrollbar. */
	overflow-x: clip;
}

/* Elementor wraps every widget in `.elementor-widget > .bp-…`
 * and constrains the parent column. The same breakout is also
 * applied at the widget-container level so the visual edge of
 * the section matches the screen edge in the editor preview. */
.elementor .elementor-widget-bp-calculator-quote,
.elementor .elementor-widget-bp-commitments,
.elementor .elementor-widget-bp-awards-recognition,
.elementor .elementor-widget-bp-domaines-utilisation,
.elementor .elementor-widget-bp-formulation-npk,
.elementor .elementor-widget-bp-g4-preparation,
.elementor .elementor-widget-bp-global-presence,
.elementor .elementor-widget-bp-techniques,
.elementor .elementor-widget-bp-production-quality,
.elementor .elementor-widget-bp-product-information,
.elementor .elementor-widget-bp-product-documentation,
.elementor .elementor-widget-bp-product-faq,
.elementor .elementor-widget-bp-product-final-cta,
.elementor .elementor-widget-bp-founder-section,
.elementor .elementor-widget-bp-faq,
.elementor .elementor-widget-bp-field-results,
.elementor .elementor-widget-bp-root-interaction-diagram,
.elementor .elementor-widget-bp-hydro-retention-technology,
.elementor .elementor-widget-bp-contact-form,
.elementor .elementor-widget-bp-contact-final-cta,
.elementor .elementor-widget-bp-contact-global-network,
.elementor .elementor-widget-bp-why-choose,
.elementor .elementor-widget-bp-product-comparison,
.elementor .elementor-widget-bp-product-calculator-quote,
.elementor .elementor-widget-bp-product-versions,
.elementor .elementor-widget-bp-contact-hero {
	inline-size: 100vw;
	max-inline-size: 100vw;
	min-inline-size: 100vw;
	margin-inline-start: calc(50% - 50vw);
	margin-inline-end:   calc(50% - 50vw);
	position: relative;
	overflow-x: clip;
}

/* ---------------------------------------------------------------------
 * 4. Re-anchor LEFT decorations to the LEFT screen edge and RIGHT
 *    decorations to the RIGHT screen edge. Most widgets already
 *    follow this pattern; this block is a safety net for widgets
 *    that still use a 1140px-relative inset (e.g. legacy
 *    `inset-inline-start: clamp(-220px, -10vw, -32px)` to push
 *    the decoration outside the inner column). After the
 *    breakout above, the section spans the full viewport so
 *    `inset-inline-start: 0` is the screen edge. The widget's
 *    own X / Y / Width / Rotation / Opacity controls continue
 *    to apply on top of this anchor.
 *
 *    `--center` botanicals are intentionally NOT included here:
 *    they must stay anchored to the horizontal middle of the
 *    section.
 *
 *    Each selector uses TWO attribute matches so the specificity
 *    is (0, 2, 0) — strictly higher than the per-widget class
 *    selector (0, 1, 0) — and therefore wins regardless of
 *    source order in the head.
 * ------------------------------------------------------------------ */
[class*="__botanical"][class*="--left"],
[class*="__botanical"][class*="--start"],
[class*="__botanical"][class*="--tl"],
[class*="__botanical"][class*="--bl"],
[class*="__botanical"][class*="--sl"],
[class*="__botanical"][class*="--bg-left"],
[class*="__decor"][class*="--left"],
[class*="__decor"][class*="--start"],
[class*="__decor"][class*="--tl"],
[class*="__decor"][class*="--bl"],
[class*="__decoration"][class*="--left"],
[class*="__decoration"][class*="--start"],
[class*="__decoration"][class*="--tl"],
[class*="__decoration"][class*="--bl"],
[class*="__branch"][class*="--left"],
[class*="__branch"][class*="--start"],
[class*="__branch"][class*="--tl"],
[class*="__branch"][class*="--bl"],
[class*="__leaf"][class*="--tl"],
[class*="__leaf"][class*="--left"],
[class*="__foliage"][class*="--left"],
[class*="__ornament"][class*="--left"],
[class*="__final-ornament"][class*="--left"] {
	inset-inline-start: 0;
	inset-inline-end: auto;
}

[class*="__botanical"][class*="--right"],
[class*="__botanical"][class*="--end"],
[class*="__botanical"][class*="--tr"],
[class*="__botanical"][class*="--br"],
[class*="__botanical"][class*="--sr"],
[class*="__botanical"][class*="--bg-right"],
[class*="__decor"][class*="--right"],
[class*="__decor"][class*="--end"],
[class*="__decor"][class*="--tr"],
[class*="__decor"][class*="--br"],
[class*="__decoration"][class*="--right"],
[class*="__decoration"][class*="--end"],
[class*="__decoration"][class*="--tr"],
[class*="__decoration"][class*="--br"],
[class*="__branch"][class*="--right"],
[class*="__branch"][class*="--end"],
[class*="__branch"][class*="--tr"],
[class*="__branch"][class*="--br"],
[class*="__leaf"][class*="--tr"],
[class*="__leaf"][class*="--right"],
[class*="__foliage"][class*="--right"],
[class*="__ornament"][class*="--right"],
[class*="__final-ornament"][class*="--right"] {
	inset-inline-end: 0;
	inset-inline-start: auto;
}

/* ---------------------------------------------------------------------
 * 5. Responsive safety net.
 *
 * Each widget already has its own responsive rules (Width / X / Y /
 * Rotation / Opacity sliders on desktop, tablet, mobile) and its
 * own breakpoint-specific sizing in its own CSS file. This block
 * only intervenes when the section is so narrow that a wide
 * decoration would visibly cover the 1140px inner column. We do
 * not force `display: none` on phones because some widgets
 * intentionally keep the decoration visible at a small size
 * (bp-product-faq, bp-product-versions, …). The per-widget CSS
 * remains the source of truth.
 * ------------------------------------------------------------------ */
@media ( max-width: 480px ) {
	/* Re-anchor anything that drifted inwards (legacy widgets
	 * that still used a 1140px-relative negative inset) to the
	 * screen edge so the decoration never overflows the page. */
	[class*="__botanical"],
	[class*="__botanical-motion"],
	[class*="__leaves"],
	[class*="__leaves-motion"],
	[class*="__decor"],
	[class*="__decoration"],
	[class*="__branch"],
	[class*="__branch-svg"],
	[class*="__foliage"],
	[class*="__ornament"] {
		max-inline-size: 60vw;
		transform-origin: center;
	}
}

/* ---------------------------------------------------------------------
 * 6. Reduced-motion belt-and-suspenders.
 * ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
	[class*="__botanical"],
	[class*="__botanical-motion"],
	[class*="__leaves"],
	[class*="__leaves-motion"],
	[class*="__decor"],
	[class*="__decoration"],
	[class*="__branch"],
	[class*="__branch-svg"],
	[class*="__foliage"],
	[class*="__ornament"],
	.bp-botanical,
	.bp-decor,
	.bp-leaf {
		animation: none !important;
		transition: none !important;
		transform: none !important;
	}
}