/**
 * CDSWerx Layer Manager — Canonical Stacking Scale (v1.0)
 *
 * One site-wide z-index scale, assigned per element via the "Layer Role"
 * Elementor control (Advanced → CDSWerx Layering), enforced with !important.
 *
 * WHY !important: sticky providers (JetSticky, Elementor Pro Sticky) write
 * z-index as INLINE styles at runtime. Inline styles beat every author rule
 * EXCEPT !important declarations. Without it, layering is whack-a-mole —
 * e.g. a JetSticky sticky column's inline z-index riding over the header
 * menu. Role rules here are the single place that wins that war.
 *
 * The scale mirrors the CDSWerx Plugin tier system
 * (cdswerx-globalstyles.css: header 10000 / dropdowns 10001 / footer 9000 /
 * on-page sticky 1050) so both systems agree. Sites can re-tune globally by
 * overriding these variables on :root.
 *
 * @package CDSWerx_Widget_Library
 * @since   2.54.0
 */

:root {
	--cds-layer-modal:   10500; /* modals + off-canvas panels — the ONE tier above
	                               the header (and its dropdowns at 10001)         */
	--cds-layer-header:  10000; /* headers + anything page content must not cover  */
	--cds-layer-overlay:  9500; /* scrims, search overlays (below header by design) */
	--cds-layer-footer:   9000; /* sticky/reveal footers                           */
	--cds-layer-sticky:   1050; /* on-page sticky sections/columns — above content,
	                               below header                                    */
	--cds-layer-content:     1; /* explicitly raised normal content                */
	--cds-layer-behind:      0; /* pinned to the back of the positioned stack      */
}

/* z-index requires a positioned element. Zero-specificity guard so any
   Elementor position setting (absolute/fixed/sticky) always overrides. */
:where([data-cds-layer]) {
	position: relative;
}

[data-cds-layer="modal"]   { z-index: var(--cds-layer-modal)   !important; }
[data-cds-layer="header"]  { z-index: var(--cds-layer-header)  !important; }
[data-cds-layer="overlay"] { z-index: var(--cds-layer-overlay) !important; }
[data-cds-layer="footer"]  { z-index: var(--cds-layer-footer)  !important; }
[data-cds-layer="sticky"]  { z-index: var(--cds-layer-sticky)  !important; }
[data-cds-layer="content"] { z-index: var(--cds-layer-content) !important; }
[data-cds-layer="behind"]  { z-index: var(--cds-layer-behind)  !important; }

/* Custom role: the per-element value arrives via Elementor selectors as
   --cds-layer-custom-z on the element itself (live editor preview). */
[data-cds-layer="custom"]  { z-index: var(--cds-layer-custom-z, 1) !important; }

/* Header-role elements must never clip their own dropdown panels. */
[data-cds-layer="header"] {
	overflow: visible !important;
}