/**
 * Elementor Wrapper Link — Frontend Styles
 *
 * CLICK STRATEGY (two-pronged — see wrapper-link.js for the full explanation):
 *
 *  Mouse clicks: Handled by JS event delegation in wrapper-link.js.
 *                The overlay carries pointer-events:none so mouse events pass
 *                through it to the content, then bubble up to the document
 *                listener which performs navigation.
 *
 *  Keyboard:     The overlay <a> is Tab-focusable (when aria-label is set).
 *                pointer-events:none does NOT affect keyboard focus or Enter
 *                activation — the anchor's href fires normally on Enter.
 *
 * No inline styles are used anywhere in the plugin.
 */

/* ── Wrapper element ─────────────────────────────────────────────────────── */

.ewl-has-wrapper-link {
	position: relative; /* Establishes stacking context for the overlay. */
	cursor: pointer;
}

/* ── Overlay anchor (injected by wrapper-link.js) ────────────────────────── */

.ewl-overlay-link {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 0;
	display: block;
	text-decoration: none;
	background: transparent;
	pointer-events: none; /* Pass mouse events through — JS delegation handles navigation. */
	-webkit-tap-highlight-color: transparent;
}

/* WCAG 2.1 SC 1.4.11 — visible focus indicator for keyboard users. */
.ewl-overlay-link:focus-visible {
	outline: 3px solid currentColor;
	outline-offset: -3px;
	border-radius: inherit;
}

/* Remove the default outline on mouse click for browsers lacking :focus-visible. */
.ewl-overlay-link:focus:not(:focus-visible) {
	outline: none;
}

/* ── Interactive child elements ──────────────────────────────────────────── */
/*
 * Child interactive elements are raised so they appear above the overlay in
 * the stacking context.  This is now primarily for correct cursor rendering
 * (the pointer cursor should only show over non-interactive areas) and for
 * future-proofing.  Click interception is handled by the JS delegation
 * walker, not by z-index, so these rules do not affect functional behaviour.
 */

.ewl-has-wrapper-link a:not(.ewl-overlay-link),
.ewl-has-wrapper-link button,
.ewl-has-wrapper-link input,
.ewl-has-wrapper-link select,
.ewl-has-wrapper-link textarea,
.ewl-has-wrapper-link label,
.ewl-has-wrapper-link [role="button"],
.ewl-has-wrapper-link [role="link"],
.ewl-has-wrapper-link [role="checkbox"],
.ewl-has-wrapper-link [role="radio"],
.ewl-has-wrapper-link [role="menuitem"],
.ewl-has-wrapper-link [role="tab"],
.ewl-has-wrapper-link [tabindex]:not([tabindex="-1"]),
.ewl-has-wrapper-link .elementor-button,
.ewl-has-wrapper-link .wc-block-components-product-add-to-cart,
.ewl-has-wrapper-link form {
	position: relative;
	z-index: 1;
}

/* ── Screen-reader-only utility ──────────────────────────────────────────── */
/*
 * Applied to the text node inside .ewl-overlay-link so the anchor has
 * accessible text without any visible content.
 */

.ewl-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border-width: 0;
}

/* ── Elementor editor ────────────────────────────────────────────────────── */
/*
 * The overlay already has pointer-events:none globally, but this explicit
 * rule guarantees editor click-to-select continues to work even if a
 * future CSS change accidentally re-enables pointer events on the overlay.
 */

.elementor-editor-active .ewl-overlay-link {
	pointer-events: none !important;
}