/* Site Toolkit — Clickable Elementor Blocks. Classes only (no inline styles), so nothing lingers once the module is off. */
:where(.stk-clickable) {
	position: relative;
}

.stk-clickable {
	cursor: pointer;
}

/*
 * The overlay link is the wrapper's first child, absolutely positioned over the whole block and WITHOUT a z-index:
 * Elementor's widgets, columns and containers are positioned and come later, so they paint above it and stay
 * clickable (the script forwards clicks on content to this link). No isolation / negative z-index: a stacking context
 * on header containers would trap their dropdown menus.
 */
.stk-clickable__link {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	inset: 0;
	display: block;
	border-radius: inherit;
}

.stk-clickable__link:focus-visible {
	outline: 2px solid var(--stk-focus-color, currentColor);
	outline-offset: -2px;
}

/* Where :has() works, ring the block itself (the overlay's own ring can be covered by the content above it). */
@supports selector(:has(*)) {
	.stk-clickable__link:focus-visible {
		outline: none;
	}

	.stk-clickable:has(> .stk-clickable__link:focus-visible) {
		outline: 2px solid var(--stk-focus-color, currentColor);
		outline-offset: -2px;
	}
}

.stk-clickable__text {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	clip-path: inset(50%) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

.stk-clickable__js-link,
body.elementor-editor-active .stk-clickable__link,
body.elementor-editor-preview .stk-clickable__link {
	display: none !important;
}

body.elementor-editor-active .stk-clickable,
body.elementor-editor-preview .stk-clickable {
	cursor: auto;
}