/*
 * The Home hero (hero-home: centered-content / 50-50-with-text-backdrop /
 * 50-50-without-text-backdrop, image/video background only) renders its
 * background image (z-10), dark overlay (z-20) and text content (z-30) as
 * three SIBLING divs under one shared outer wrapper (plain
 * `position: relative`, no z-index of its own). None of the three has a
 * containing stacking context, so all three leak: they compete directly
 * with z-index values elsewhere on the page, including the header
 * utility nav's WPML language-switcher dropdown (z-10) — the overlay
 * (z-20) in particular then paints OVER the bottom half of that dropdown
 * even though the dropdown is higher up in the DOM (confirmed via
 * elementFromPoint, 2026-10-19: the overlay, not the text layer, was the
 * element actually covering the dropdown's lower rows).
 *
 * First attempt put `isolation: isolate` directly on the z-30 text layer
 * — wrong element: isolating a div only contains ITS OWN descendants, it
 * doesn't change how that div's own z-index competes with its siblings.
 * The overlay (z-20) is a SIBLING of the z-30 div, not a descendant, so
 * isolating the z-30 div alone left the overlay's leak completely
 * unaffected. The outer wrapper is what needs isolating — then the whole
 * z-10/z-20/z-30 stack becomes one self-contained unit that, from
 * outside, has no explicit z-index and so correctly stays below the
 * header's WPML dropdown.
 *
 * No stable class names the outer wrapper (its classes vary by the
 * `background` ACF choice — gradient/texture/image/video all differ), so
 * it's matched structurally via :has() against its known child instead.
 */
.relative:has(> .fluid-grid.relative.z-30.overflow-hidden) {
    isolation: isolate;
}