/**
* Elementor Wrapper Link — Frontend Styles
*
* Strategy
* ─────────
* 1. Every enabled wrapper element gets `position: relative` so the overlay
* anchor can be absolutely positioned to fill it.
* 2. The overlay sits at z-index 1.
* 3. Any child , , or interactive element is raised to z-index 2
* via a general rule, so they remain individually clickable.
* 4. Pointer-events on nested anchors are set to `auto` so they receive
* click events naturally (they sit above the overlay).
*
* This avoids nested in the HTML (valid HTML5) while giving the full
* clickable area behaviour.
*/
/* ── Wrapper ─────────────────────────────────────────────────────────────── */
.ewl-wrapper-link-enabled {
position: relative; /* establish stacking context for overlay */
}
/* ── Overlay anchor ──────────────────────────────────────────────────────── */
.ewl-overlay-link {
/* Fill the entire parent */
position: absolute;
inset: 0; /* shorthand for top/right/bottom/left: 0 */
top: 0; /* fallback for older browsers */
right: 0;
bottom: 0;
left: 0;
/* Visual */
display: block;
z-index: 1;
/* No visual appearance — purely functional */
background: transparent;
border: none;
outline: none;
text-decoration: none;
color: transparent;
font-size: 0;
/* Cursor feedback */
cursor: pointer;
}
/* Visible focus ring for keyboard navigation (accessibility) */
.ewl-overlay-link:focus-visible {
outline: 3px solid #0073aa;
outline-offset: -3px;
border-radius: 2px;
}
/* ── Lift inner interactive elements above the overlay ───────────────────── */
/*
* Any anchor, button, input, or label that lives inside an enabled wrapper
* is raised above the overlay so it stays individually clickable.
* This is the key conflict-avoidance rule.
*/
.ewl-wrapper-link-enabled a,
.ewl-wrapper-link-enabled button,
.ewl-wrapper-link-enabled input,
.ewl-wrapper-link-enabled select,
.ewl-wrapper-link-enabled textarea,
.ewl-wrapper-link-enabled label,
.ewl-wrapper-link-enabled [role="button"],
.ewl-wrapper-link-enabled .elementor-button,
.ewl-wrapper-link-enabled .elementor-button-wrapper {
position: relative;
z-index: 2;
pointer-events: auto;
}
/*
* Elementor widgets that are themselves links should also sit above their
* own overlay — e.g. an Image widget with a lightbox link.
*/
.ewl-wrapper-link-enabled .elementor-image a,
.ewl-wrapper-link-enabled .elementor-icon-box-wrapper a,
.ewl-wrapper-link-enabled .elementor-icon-list-item a,
.ewl-wrapper-link-enabled .elementor-post__thumbnail__link {
position: relative;
z-index: 2;
}
/* ── Hover effect (optional subtle feedback) ─────────────────────────────── */
/*
* Adds a very faint overlay tint on hover so the user knows the whole
* element is clickable. Comment out if you prefer zero visual feedback.
*/
.ewl-wrapper-link-enabled:hover > .ewl-overlay-link::after {
content: "";
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.03);
pointer-events: none;
border-radius: inherit;
}
/* ── Editor preview indicator ────────────────────────────────────────────── */
/*
* In the Elementor editor canvas, show a subtle blue border so designers
* can see which elements have a wrapper link applied.
* The .elementor-edit-mode class is added by Elementor to in editor.
*/
.elementor-edit-mode .ewl-wrapper-link-enabled::before {
content: "⬡ Wrapper Link";
position: absolute;
top: 4px;
right: 4px;
z-index: 9999;
background: #0073aa;
color: #fff;
font-size: 10px;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
padding: 2px 7px;
border-radius: 3px;
line-height: 1.6;
pointer-events: none;
opacity: 0.85;
letter-spacing: 0.3px;
}
.elementor-edit-mode .ewl-wrapper-link-enabled {
outline: 2px dashed #0073aa;
outline-offset: -2px;
}
/* ── Elementor sections / columns specifics ──────────────────────────────── */
/*
* Sections and columns already have complex layering. Ensure the overlay
* does not escape the inner content wrapper.
*/
.elementor-section.ewl-wrapper-link-enabled > .elementor-container,
.elementor-column.ewl-wrapper-link-enabled > .elementor-column-wrap {
/* no extra styles needed — the section/column wrapper itself is relative */
}
/*
* Flexbox Container (Elementor 3.6+)
* Containers use display:flex — the overlay fills them correctly via inset:0
* because the container itself is the positioned ancestor.
*/
.e-con.ewl-wrapper-link-enabled {
position: relative;
}
/* ── Transition ──────────────────────────────────────────────────────────── */
.ewl-overlay-link::after {
transition: background 0.2s ease;
}