/**
 * =========================================================
 * Clickable Gutenberg Cover + Group Blocks
 * =========================================================
 */


/* ---------------------------------------------------------
 * Clickable wrappers
 * --------------------------------------------------------- */

.wp-block-cover.has-cover-link,
.wp-block-cover.has-block-link,
.wp-block-group.has-block-link {
	position: relative;
	cursor: pointer;
	isolation: isolate;
}


/* ---------------------------------------------------------
 * Full block clickable overlay
 * Supports old + new overlay class names
 * --------------------------------------------------------- */

.wp-block-cover.has-cover-link > .pbl-cover-link-overlay,
.wp-block-cover.has-block-link > .pbl-block-link-overlay,
.wp-block-group.has-block-link > .pbl-block-link-overlay {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	z-index: 10;
	border-radius: inherit;
}


/* ---------------------------------------------------------
 * COVER BLOCK CONTENT
 * --------------------------------------------------------- */

.wp-block-cover.has-cover-link > .wp-block-cover__inner-container,
.wp-block-cover.has-block-link > .wp-block-cover__inner-container {
	position: relative;
	z-index: 11;
	pointer-events: none;
}


/* ---------------------------------------------------------
 * GROUP BLOCK CONTENT
 *
 * Direct children stay visually above the overlay,
 * while clicks pass through unless the child is interactive.
 * --------------------------------------------------------- */

.wp-block-group.has-block-link > *:not(.pbl-block-link-overlay) {
	position: relative;
	z-index: 11;
	pointer-events: none;
}


/* ---------------------------------------------------------
 * Existing interactive elements remain clickable
 * --------------------------------------------------------- */

.wp-block-cover.has-cover-link
	.wp-block-cover__inner-container a,

.wp-block-cover.has-cover-link
	.wp-block-cover__inner-container button,

.wp-block-cover.has-cover-link
	.wp-block-cover__inner-container input,

.wp-block-cover.has-cover-link
	.wp-block-cover__inner-container select,

.wp-block-cover.has-cover-link
	.wp-block-cover__inner-container textarea,

.wp-block-cover.has-cover-link
	.wp-block-cover__inner-container [role="button"],

.wp-block-cover.has-block-link
	.wp-block-cover__inner-container a,

.wp-block-cover.has-block-link
	.wp-block-cover__inner-container button,

.wp-block-cover.has-block-link
	.wp-block-cover__inner-container input,

.wp-block-cover.has-block-link
	.wp-block-cover__inner-container select,

.wp-block-cover.has-block-link
	.wp-block-cover__inner-container textarea,

.wp-block-cover.has-block-link
	.wp-block-cover__inner-container [role="button"],

.wp-block-group.has-block-link
	a:not(.pbl-block-link-overlay),

.wp-block-group.has-block-link
	button,

.wp-block-group.has-block-link
	input,

.wp-block-group.has-block-link
	select,

.wp-block-group.has-block-link
	textarea,

.wp-block-group.has-block-link
	[role="button"] {
	position: relative;
	z-index: 12;
	pointer-events: auto;
}


/* ---------------------------------------------------------
 * Button WITHOUT href
 *
 * If a visual button has no URL, clicks pass through
 * to the Cover / Group link overlay.
 * --------------------------------------------------------- */

.wp-block-cover.has-cover-link
	.wp-block-button__link:not([href]),

.wp-block-cover.has-block-link
	.wp-block-button__link:not([href]),

.wp-block-group.has-block-link
	.wp-block-button__link:not([href]) {
	pointer-events: none;
}


/* ---------------------------------------------------------
 * Button hover effect
 * Works whether button has its own href or not
 * --------------------------------------------------------- */

.wp-block-cover.has-cover-link .wp-block-button__link,
.wp-block-cover.has-block-link .wp-block-button__link,
.wp-block-group.has-block-link .wp-block-button__link {
	transition:
		transform 0.25s ease,
		background-color 0.25s ease,
		color 0.25s ease,
		box-shadow 0.25s ease;
}


/* Button WITH its own link */
.wp-block-cover.has-cover-link
	.wp-block-button__link[href]:hover,

.wp-block-cover.has-block-link
	.wp-block-button__link[href]:hover,

.wp-block-group.has-block-link
	.wp-block-button__link[href]:hover {
	transform: translateY(-3px);
	background-color: rgba(255, 255, 255, 0.82) !important;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}


/* Button WITHOUT its own link */
.wp-block-cover.has-cover-link:hover
	.wp-block-button__link:not([href]),

.wp-block-cover.has-block-link:hover
	.wp-block-button__link:not([href]),

.wp-block-group.has-block-link:hover
	.wp-block-button__link:not([href]) {
	transform: translateY(-3px);
	background-color: rgba(255, 255, 255, 0.82) !important;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}


/* ---------------------------------------------------------
 * Keyboard accessibility
 * --------------------------------------------------------- */

.wp-block-cover.has-cover-link
	> .pbl-cover-link-overlay:focus-visible,

.wp-block-cover.has-block-link
	> .pbl-block-link-overlay:focus-visible,

.wp-block-group.has-block-link
	> .pbl-block-link-overlay:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: -4px;
}