/* MIDDERMUSIC YouTube click-to-play facade.
   Opt-in: enqueued only on pages that already have a YouTube embed.
   Fills the existing .wp-block-embed__wrapper 16:9 box so nothing shifts.
   Paper / near-black / lilac. No dark mode. */

.mm-yt {
	display: block;
	box-sizing: border-box;
	width: 100%;
	padding: 0;
	border: 0;
	margin: 0;
	cursor: pointer;
	background: var(--mm-placeholder, #D6D5D0);
	color: var(--mm-ink, #0B0B0C);
	font: inherit;
	text-align: left;
	overflow: hidden;
}

/* Inside a responsive WP embed, match the iframe: fill the padded 16:9 box. */
.wp-embed-responsive .wp-has-aspect-ratio .mm-yt {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

/* Fallback when the wrapper has no aspect padding (bare URL, unexpected markup). */
.mm-yt[style*="aspect-ratio"] {
	position: relative;
}

.mm-yt__poster {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	background: var(--mm-placeholder, #D6D5D0);
}

.mm-yt__play {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 68px;
	height: 68px;
	margin: -34px 0 0 -34px;
	border-radius: 50%;
	background: var(--mm-lilac, #B9A6DB);
	box-shadow: 0 0 0 3px var(--mm-ink, #0B0B0C);
	pointer-events: none;
}

.mm-yt__play::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -10px 0 0 -6px;
	border-style: solid;
	border-width: 10px 0 10px 18px;
	border-color: transparent transparent transparent var(--mm-ink, #0B0B0C);
}

.mm-yt:hover .mm-yt__play,
.mm-yt:focus-visible .mm-yt__play {
	background: var(--mm-lilac-hover, #C4B4DF);
}

.mm-yt:focus-visible {
	outline: var(--mm-focus, 2px solid #0B0B0C);
	outline-offset: 2px;
}