/*
 * Home hero background video
 * ---------------------------------------------------------------------------
 * Replaces the Video Background Pro stylesheet. The geometry below is a
 * deliberate match for what that plugin produced (.vidbg-container), so the
 * hero looks identical after the swap:
 *
 *   - container absolutely fills .hero_banner_section, which the theme already
 *     sets to position: relative (style.css, .hero_banner_section)
 *   - poster shown as a cover background until the video paints
 *   - #020202 behind it, the plugin's own fallback colour
 *
 * The one real change: the plugin centred the video with translate(-50%,-50%)
 * and then resized it with JavaScript on every window resize. object-fit does
 * that in CSS, so none of that JavaScript is needed.
 */

.dre-hero-video {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	overflow: hidden;
	background-color: #020202;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	z-index: 0;
}

.dre-hero-video__media {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	max-width: none;
}

/* Keep the headline above the video. The theme gives .hero_banner_section
   z-index: 1 and this sits inside it, so a small positive value is enough. */
.hero_banner_section .hero_banner_content {
	position: relative;
	z-index: 2;
}

/* ---------------------------------------------------------------------------
 * Sound toggle.
 * Positioned to match the old .vidbg-frontend-buttons.bottom-right rules in
 * style.css: pinned 17px from the bottom, inside the same 1165px centred
 * column as the rest of the page, using the theme's own 30x34 icons.
 * ------------------------------------------------------------------------ */
.dre-hero-video__controls {
	position: absolute;
	right: 0;
	bottom: 17px;
	left: 0;
	max-width: 1165px;
	margin: 0 auto;
	padding: 0 15px;
	text-align: right;
	z-index: 3;
	pointer-events: none; /* let clicks through everywhere except the button */
}

.dre-hero-video__sound {
	display: inline-block;
	width: 30px;
	height: 34px;
	margin-right: 18px;
	padding: 0;
	border: 0;
	background: url('../images/unmute.png') 0 0 no-repeat;
	background-size: 30px 34px;
	cursor: pointer;
	pointer-events: auto;
}

/* IF THE TWO ICONS LOOK SWAPPED, SWAP THESE TWO background-image LINES.
   The old plugin's markup did not make clear which icon meant which state. */
.dre-hero-video__sound.is-muted {
	background-image: url('../images/mute.png');
}

.dre-hero-video__sound:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

/* Visually hidden label, for screen readers only. */
.dre-hero-video__sound .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
	/* Respect the OS setting: hold on the poster frame rather than looping. */
	.dre-hero-video__media {
		display: none;
	}
}