/* Meyne Dynamic Blocks — frontend overlay + highlight */

/* The pattern itself: position context for the close button, plus
 * the transition target for the highlight effect. Specificity bumped
 * to .mdp-pattern.mdp-pattern so themes can't accidentally win on a
 * single-class selector like `.entry-content > div`. */
.mdp-pattern,
.mdp-pattern.mdp-pattern {
	position: relative;
	transition: box-shadow 200ms ease, background-color 200ms ease, transform 200ms ease;
}

/* The .mdp-overlay element is still rendered by PHP for backward
 * compatibility, but the dim effect is now achieved via a giant
 * box-shadow on the pattern itself (see .mdp-pattern.is-active).
 * Hiding the overlay element so it never participates in rendering
 * even when the JS toggles its class. */
.mdp-overlay {
	display: none !important;
}

/* When active, lift the pattern above everything else and surround it
 * with a giant box-shadow. The huge spread radius dims everything
 * around the pattern, making it appear "cut out" from a darkened
 * page — same end result as a separate overlay element, but immune
 * to containing-block issues from transformed ancestors (Kadence
 * containers, block themes with will-change, etc.) which were
 * causing position: fixed on the overlay element to fail. */
.mdp-pattern.is-active {
	position: relative;
	z-index: 99999;
	background-color: #fff;
	box-shadow:
		0 0 0 9999px rgba( 0, 0, 0, 0.7 ),
		0 1rem 3rem rgba( 0, 0, 0, 0.4 );
}

/* Close button: black X in a white-bordered circle, top-right corner.
 * Hidden by default; only shown while the highlight is active.
 *
 * !important on the layout properties because themes (especially
 * block themes with global button styles) routinely apply
 * `position: static`, `display: inline-block`, custom padding, etc.
 * to every button inside .entry-content, which would otherwise
 * fight us. The close button is a chrome UI element, not page
 * content, so it's appropriate to enforce its layout. */
.mdp-pattern .mdp-close,
button.mdp-close {
	position: absolute !important;
	top: -0.75rem !important;
	right: -0.75rem !important;
	left: auto !important;
	bottom: auto !important;
	width: 2rem !important;
	height: 2rem !important;
	min-width: 0 !important;
	min-height: 0 !important;
	max-width: none !important;
	max-height: none !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 2px solid #fff !important;
	border-radius: 50% !important;
	background: #000 !important;
	color: #fff !important;
	font-size: 1.25rem !important;
	line-height: 1 !important;
	cursor: pointer;
	display: none !important;
	align-items: center;
	justify-content: center;
	z-index: 100000;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	box-shadow: 0 2px 6px rgba( 0, 0, 0, 0.35 );
	text-transform: none !important;
	letter-spacing: normal !important;
}

.mdp-pattern.is-active .mdp-close,
.mdp-pattern.is-active button.mdp-close {
	display: flex !important;
}

.mdp-close:hover,
.mdp-close:focus {
	background: #222 !important;
	outline: none;
}

.mdp-close:focus-visible {
	outline: 2px solid #fff !important;
	outline-offset: 2px;
}

/* Honour reduced motion. */
@media ( prefers-reduced-motion: reduce ) {
	.mdp-pattern,
	.mdp-overlay {
		transition: none;
	}
}