/** * 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 NUMBERS ARE NOT IN THIS FILE. The `:root { --cds-layer-* }` scale is * generated from Layer_Manager::TIERS (includes/class-cdswerx-layer-manager.php) * and printed inline on this handle, so CSS, panel copy and the plugin seed's * fallbacks can never disagree. The CDSWerx Plugin's CSS-Manager seed * (cdswerx-globalstyles.css) consumes the same custom properties for * un-roled vendor elements. Sites can still re-tune globally by overriding * the variables on :root in site CSS (loaded after this handle). * * @package CDSWerx_Widget_Library * @since 2.54.0 */ /* 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; } /* ── Popup / lightbox SHELLS (issue #94) ───────────────────────────────── Elementor Pro Popup, Elementor's image/video Lightbox and JetPopup do not render inside the element tree. The dialog library appends their shell to (dialog.js `container: 'body'`) as `position: fixed` + numeric z-index, so the shell is its own stacking context and never passes through `elementor/frontend/{section|column|container}/before_render`. A Layer Role on a container INSIDE the popup is therefore applied but unreachable — it only reorders siblings within the shell (spec §4, consequence 1). Vendor baselines (verified Elementor 4.0.7 / Pro 4.0.4 / JetPopup): .dialog-type-lightbox z-index: 9999 (popup + lightbox) .jet-popup.jet-popup--front-mode z-index: var(--jp-z-index, 999) Both sit UNDER the CDSWerx header tier (--cds-layer-header, !important). The header tier is ours, so completing the scale for shells is ours too: every shell is lifted to the modal tier by default. No markup hook exists for the Lightbox — the default rule is the only way it ever clears the header. Hidden dialogs are `display: none` (dialog.js fadeOut), so a raised shell has no footprint while closed; the Pro popup shell is additionally `pointer-events: none` with `all` only on .dialog-widget-content. */ /* Elementor Pro Popup + Elementor Lightbox. Neither has a z-index control and neither vendor writes inline z-index, so `!important` costs nothing and keeps the module's one rule (every scale value is !important, §3). */ .elementor-popup-modal, .elementor-lightbox { z-index: var(--cds-layer-modal) !important; } /* Per-popup override for Elementor Pro Popup ONLY — same role tokens as data-cds-layer, as a class typed into the popup document's Advanced → CSS Classes (Pro concatenates it onto the shell's className). Written AFTER the default so equal-!important ties resolve to the class. No `cds-layer-custom`: --cds-layer-custom-z is written by Elementor selectors onto a roled ELEMENT; nothing writes it onto a body-appended shell, so the class would silently resolve to 1. */ .elementor-popup-modal.cds-layer-modal { z-index: var(--cds-layer-modal) !important; } .elementor-popup-modal.cds-layer-header { z-index: var(--cds-layer-header) !important; } .elementor-popup-modal.cds-layer-overlay { z-index: var(--cds-layer-overlay) !important; } .elementor-popup-modal.cds-layer-footer { z-index: var(--cds-layer-footer) !important; } .elementor-popup-modal.cds-layer-sticky { z-index: var(--cds-layer-sticky) !important; } .elementor-popup-modal.cds-layer-content { z-index: var(--cds-layer-content) !important; } .elementor-popup-modal.cds-layer-behind { z-index: var(--cds-layer-behind) !important; } /* JetPopup — deliberately NOT !important and at (0,2,1). JetPopup has no CSS-class control on the popup document (render/manager.php builds the shell classes from PHP args), but it HAS a native per-popup override: Style → General Styles → Z-Index (`jet_popup_z_index`), emitted as `#jet-popup-{id} { z-index }` at (1,0,0). `html` + two classes beats the vendor baseline regardless of stylesheet order and still loses to that ID rule, so the user's own control remains the override. `!important` here would kill it. (Block-editor-content JetPopups feed --jp-z-index instead, which this rule supersedes — set it ≥ the modal tier there.) */ html .jet-popup.jet-popup--front-mode { z-index: var(--cds-layer-modal); }