/*
 * DMX Real Links — the "stretched link" overlay.
 *
 * The card (host) gets `position: relative` at zero specificity, so any positioning Divi or the
 * user already set on it wins. The overlay covers the card; everything inside the card that a
 * visitor can interact with sits above the overlay, so it keeps receiving its own clicks — and,
 * just as important, its own hover.
 */
:where(.dmx-real-link-host) {
	position: relative;
}

.dmx-real-link {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1;
	display: block;
	overflow: hidden;
	color: transparent;
	font-size: 0;
	line-height: 0;
	text-decoration: none;
}

.dmx-real-link:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: -2px;
	color: inherit;
}

/*
 * What must stay above the overlay.
 *
 * Form controls and links are the obvious half. The half that is easy to miss — and that broke
 * when this plugin was first measured against a real Divi page — is anything carrying behaviour
 * of its own on a plain element:
 *
 *   [data-interaction-trigger]  Divi stamps this on every module with an Interaction. If the
 *                               overlay covers it, its onClick never fires AND its mouseEnter
 *                               never fires, because the pointer is never really over it.
 *   .et_clickable               another Module Link nested inside this one.
 *   [onclick], [role=…]         third-party widgets: variation swatches, quick-view buttons.
 *
 * Extend the list from PHP with the `dmx_real_links_interactive_selectors` filter.
 */
.dmx-real-link-host :where(
	a:not(.dmx-real-link), button, input, select, textarea, label, summary, details,
	audio, video, iframe, object, embed, canvas,
	[tabindex], [contenteditable], [onclick], [draggable="true"],
	[role="button"], [role="link"], [role="checkbox"], [role="radio"], [role="switch"],
	[role="tab"], [role="menuitem"], [role="option"], [role="slider"], [role="spinbutton"],
	[data-interaction-trigger], .et_clickable, .dmx-real-link-host
) {
	position: relative;
	z-index: 2;
}