/* First-visit video takeover popup (see template-parts/video-popup.php) */

html.video-popup-open,
html.video-popup-open body {
	overflow: hidden;
}

.video-popup {
	position: fixed;
	inset: 0;
	z-index: 100000; /* above the mobile nav (99999) */
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	background-color: rgba(0, 0, 0, 0.85);
	cursor: pointer;
}

.video-popup[hidden] {
	display: none;
}

.video-popup__inner {
	position: relative;
	/* Largest 16:9 box that fits the viewport, leaving room for the close button */
	width: min(100%, 1100px, calc((100vh - 120px) * 16 / 9));
	cursor: default;
}

.video-popup__frame {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	background-color: #000;
	border-radius: 12px;
	overflow: hidden;
}

.video-popup__frame iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.video-popup__close {
	position: absolute;
	top: -52px;
	right: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	background: transparent;
	border: 0;
	cursor: pointer;
}