/* Wholelink: stretches the block's link over the whole block, keeping inner controls clickable. */
:where(.wholelink-is-linked:not(.is-position-sticky)) {
	position: relative;
}

/* Two classes beat the layout rules that give direct children a block gap and a content width. */
.wholelink-is-linked > .wholelink-link {
	position: absolute;
	inset: 0;
	z-index: 1;
	margin: 0;
	max-width: none;
	/* The focus outline follows the block's rounded corners. */
	border-radius: inherit;
}

/* WordPress 6.5 repeats the container class in its custom block gap rule, which would push the link down from the block's top. */
.wholelink-is-linked[class*="wp-container-"] > .wholelink-link.wholelink-link.wholelink-link {
	margin: 0;
}

/* The link sits before the last child, so that child keeps :last-child; an only child loses :first-child, so this stands in for such resets at their usual weight. */
.wholelink-link:where(:first-child) + :last-child,
.wholelink-is-linked[class*="wp-container-"] > .wholelink-link:first-child + :last-child { /* A custom block gap has a heavier rule in WordPress 6.5. */
	margin-block-start: 0;
}

/* A Cover's background video and embed stay below the link. */
:where(.wholelink-is-linked) :where(a:not(.wholelink-link), button, input, select, textarea, label, summary, video[controls], audio[controls], iframe:not(.wp-block-cover__embed-background iframe), object, embed, [role="button"], [tabindex]:not([tabindex="-1"])) {
	position: relative;
	z-index: 2;
}

/* A linked block inside another becomes its own layer above the outer link. */
:where(.wholelink-is-linked .wholelink-is-linked) {
	z-index: 2;
}

/* Cover content has its own stacking context before WordPress 6.8, so lift it, whether the Cover is linked or inside a linked block. */
.wp-block-cover.wholelink-is-linked > .wp-block-cover__inner-container,
.wholelink-is-linked .wp-block-cover > .wp-block-cover__inner-container {
	z-index: 2;
}

/* These keep a z-index of their own (a nested Cover's background too), so clicks outside controls pass through them to the link. */
.wp-block-cover.wholelink-is-linked > .wp-block-cover__inner-container,
.wholelink-is-linked .wp-block-cover,
.wholelink-is-linked .is-position-sticky {
	pointer-events: none;
}

:is(.wp-block-cover.wholelink-is-linked > .wp-block-cover__inner-container, .wholelink-is-linked .wp-block-cover, .wholelink-is-linked .is-position-sticky) :where(a, button, input, select, textarea, label, summary, video[controls], audio[controls], iframe:not(.wp-block-cover__embed-background iframe), object, embed, [role="button"], [tabindex]:not([tabindex="-1"])) {
	pointer-events: auto;
}

/* Drawn inside the block, because Cover and many card styles clip overflow; the white ring keeps it visible on dark blocks. */
.wholelink-is-linked > a.wholelink-link.wholelink-link:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: -2px;
	box-shadow: inset 0 0 0 4px #fff;
}

/* The doubled class beats theme focus rules such as Twenty Twenty-One's, whose almost white background would hide the block's content. */
.wholelink-is-linked > a.wholelink-link.wholelink-link:focus {
	background: none;
}

.wholelink-is-linked:hover :is(h1, h2, h3, h4, h5, h6) {
	text-decoration: underline;
}

/* Separate rule, so browsers without :has() still keep the hover underline. */
.wholelink-is-linked:has(> .wholelink-link:focus-visible) :is(h1, h2, h3, h4, h5, h6) {
	text-decoration: underline;
}