/**
 * YouTube overlay wrapper: cover image and 16:9 placeholder.
 *
 * @package RothCo CPA
 * @since 1.0.0
 */

.rothcocpa-yt-overlay-wrapper {
	position: relative;
	width: 100%;
	max-width: 100%;
	border-radius: 0.5rem;
	overflow: hidden;
}

/* 16:9 aspect ratio container */
.rothcocpa-yt-overlay-wrapper::before {
	content: "";
	display: block;
	padding-bottom: 56.25%;
}

.rothcocpa-yt-overlay-iframe-container {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

/* Overlay play button (YT embed and core/video – same styling) */
.rothcocpa-yt-overlay-trigger,
.rothcocpa-video-overlay-trigger {
	position: absolute;
	z-index: 20;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3.5rem;
	height: 3.5rem;
	margin: 0;
	padding: 0;
	border: 1px solid var(--wp--preset--color--accent, currentColor);
	border-radius: 9999px;
	background: transparent;
	cursor: pointer;
	overflow: visible;
	transition: transform 300ms ease-out;
}

.rothcocpa-yt-overlay-trigger:hover,
.rothcocpa-video-overlay-trigger:hover {
	transform: translate(-50%, -50%) scale(1.25);
}

.rothcocpa-yt-overlay-trigger::before,
.rothcocpa-video-overlay-trigger::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
	height: 100%;
	background: var(--wp--preset--color--accent, currentColor);
	opacity: 0.5;
	border-radius: 9999px;
}

.rothcocpa-yt-overlay-trigger::after,
.rothcocpa-video-overlay-trigger::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
	height: 100%;
	border: 1px solid var(--wp--preset--color--accent, currentColor);
	border-radius: 9999px;
	transform-origin: center;
	transition: transform 500ms ease-out, opacity 500ms ease-out;
}

.rothcocpa-yt-overlay-trigger:hover::after,
.rothcocpa-video-overlay-trigger:hover::after {
	transform: translate(-50%, -50%) scale(1.5);
	opacity: 0;
}

.rothcocpa-yt-overlay-trigger:focus,
.rothcocpa-video-overlay-trigger:focus {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* Play icon (shared by YT and video overlay triggers) */
.rothcocpa-yt-overlay-trigger .rothcocpa-overlay-play-icon,
.rothcocpa-video-overlay-trigger .rothcocpa-overlay-play-icon {
	position: relative;
	z-index: 1;
	width: 20px;
    height: 20px;
    margin-left: 4px;
}

.rothcocpa-yt-overlay-trigger.is-hidden,
.rothcocpa-video-overlay-trigger.is-hidden {
	pointer-events: none;
	visibility: hidden;
}

.rothcocpa-yt-overlay-cover {
	position: absolute;
	inset: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.rothcocpa-yt-overlay-iframe-container {
	z-index: 0;
	background: #000;
}

.rothcocpa-yt-overlay-iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: none;
}

/* Video block overlay (same structure as YT overlay) */
.rothcocpa-video-overlay-wrapper {
	position: relative;
	width: 100%;
	max-width: 100%;
	border-radius: 0.5rem;	
	overflow: hidden;
}

.rothcocpa-video-overlay-wrapper::before {
	content: "";
	display: block;
	padding-bottom: 56.25%;
}

.rothcocpa-video-overlay-video-container {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.rothcocpa-video-overlay-cover {
	position: absolute;
	inset: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.rothcocpa-video-overlay-video-container {
	z-index: 0;
	background: #000;
}

.rothcocpa-video-overlay-video-container video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/*
 * Reveal the media once playback starts.
 *
 * Both youtube-overlay.js and video-overlay.js add .is-hidden to the trigger
 * on click but never hide the cover, and the cover sits at z-index 1 above the
 * z-index 0 media container - so the poster stayed on top of the playing
 * video. Site-wide fix, keyed on the class the scripts already set.
 */
.rothcocpa-yt-overlay-wrapper:has(.rothcocpa-yt-overlay-trigger.is-hidden) .rothcocpa-yt-overlay-cover,
.rothcocpa-video-overlay-wrapper:has(.rothcocpa-video-overlay-trigger.is-hidden) .rothcocpa-video-overlay-cover {
	display: none;
}