/*
 * Vimeo facade - the poster and play button shown until someone presses play.
 *
 * The surrounding markup is Vimeo's own embed wrapper, which is already a 16:9 box:
 *
 *     <div style="padding: 56.25% 0 0 0; position: relative;"> ... </div>
 *
 * so the facade only has to fill it, exactly as the iframe did. Nothing here changes
 * the size or position of anything on the page.
 *
 * See mu-plugins/dr-customizations/video-facade.php and MOD-043.
 */

/*
 * A box for embeds that never had one.
 *
 * Most Vimeo embeds on this site arrive inside Vimeo's own
 * `padding:56.25%; position:relative` div, and the facade button simply fills it.
 * Four embeds in live content are bare <iframe> tags with no such wrapper, and an
 * absolutely positioned button inside one of those resolves against the page instead,
 * drawing the poster over the top of the document and collapsing the video's space.
 * video-facade.php emits this element around those, carrying the original iframe's
 * width and aspect ratio inline, so the video keeps the dimensions it had.
 *
 * inline-block, because a bare iframe is a replaced inline element: one of these sits
 * inside a <center> and would stop being centred if this became a block.
 */
.dr-video-facade-box {
	position: relative;
	display: inline-block;
	/* Set per embed from the iframe's own attributes; see video-facade.php. */
	width: var(--dr-facade-w, 100%);
	height: var(--dr-facade-h, auto);
	max-width: 100%;
	/*
	 * baseline, not top. An <iframe> is an inline replaced element and sits on the
	 * baseline, so the line box around it reserves descender space underneath. Aligning
	 * the replacement to the top removes that and the page came out 5px shorter at every
	 * width - small, consistent, and exactly the kind of thing this comparison exists to
	 * catch.
	 */
	vertical-align: baseline;
}

/*
 * Below 767px the theme gives these iframes fixed heights, and different ones
 * depending on the layout. Measured on the live site at 390px wide: 366x215 on
 * /education-2/ and 366x260 on the Hours of Freedom description page. These two rules
 * mirror the theme's own, so the replacement box lands on the same numbers.
 */
@media only screen and (max-width: 767px) {

	#main #content.right-content .dr-video-facade-box {
		height: 260px;
	}

	body.page-id-4148 .post-content .dr-video-facade-box {
		width: 100%;
		height: 215px;
	}
}

/*
 * Mirror the theme's own rule for the element that replaced the iframe.
 *
 * style.css line 4127 stretches iframes to the column inside a sidebar layout, at every
 * width: `#main #content.right-content iframe { width: 100% }`. A <span> does not match
 * that selector, so without this the Hours of Freedom description page would render its
 * video 640px wide where the live site renders it 670px.
 */
#main #content.right-content .dr-video-facade-box {
	width: 100%;
}

/*
 * And mirror the theme's display rule too.
 *
 * `.post-content p iframe { display:block; margin:auto }` applies at every width, so an
 * embed inside .post-content is a centred block - no baseline, and no descender space
 * under it. An embed outside .post-content stays inline and does reserve that space.
 * /education-2/ is the first case and the Hours of Freedom description page the second;
 * picking either one for both put 5px on one of them.
 */
.post-content p .dr-video-facade-box {
	display: block;
	margin: auto;
}

.dr-video-facade {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: #000;
	cursor: pointer;
	display: block;
	overflow: hidden;
	/* A <button> inherits none of this by default and would otherwise show system UI. */
	font: inherit;
	color: inherit;
	-webkit-appearance: none;
	appearance: none;
}

.dr-video-facade__poster {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Avada sets a max-width on content images; the poster must fill its box. */
	max-width: none;
	border: 0;
	margin: 0;
	padding: 0;
}

/*
 * The play button, drawn rather than loaded, so it costs no request. Shaped and
 * positioned to sit where Vimeo's own control sits, in a neutral dark translucent
 * treatment rather than an imitation of Vimeo's branding.
 */
.dr-video-facade__play {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 84px;
	height: 56px;
	margin: -28px 0 0 -42px;
	border-radius: 8px;
	background-color: rgba(23, 35, 34, 0.75);
	transition: background-color 0.15s ease-out;
}

.dr-video-facade__play::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -11px 0 0 -8px;
	border-style: solid;
	border-width: 11px 0 11px 19px;
	border-color: transparent transparent transparent #fff;
}

.dr-video-facade:hover .dr-video-facade__play,
.dr-video-facade:focus-visible .dr-video-facade__play {
	background-color: rgba(26, 128, 182, 0.92); /* the site's link blue */
}

/* Keyboard users must be able to see what they are about to press. */
.dr-video-facade:focus-visible {
	outline: 3px solid #1a80b6;
	outline-offset: -3px;
}

@media (prefers-reduced-motion: reduce) {
	.dr-video-facade__play {
		transition: none;
	}
}

/* Small screens: a 84px button on a 320px-wide video is out of proportion. */
@media only screen and (max-width: 480px) {
	.dr-video-facade__play {
		width: 60px;
		height: 40px;
		margin: -20px 0 0 -30px;
		border-radius: 6px;
	}

	.dr-video-facade__play::before {
		margin: -8px 0 0 -6px;
		border-width: 8px 0 8px 14px;
	}
}