@charset "utf-8";
/* CSS Document */

/*Page hero background - the section a page opens with, behind its logo, title or form. Shared by
every page whose background is configured through the admin panel and resolved by
AduvioWebsite::pageBackground(). The image (or the theme default) stays on as the poster frame for
the video and YouTube/Vimeo backgrounds, so the hero still reads while the media loads or if it
never plays at all*/

.page-hero {
	position: relative;
	overflow: hidden;
}

/*Video and YouTube/Vimeo backgrounds sit between the hero's background image and the overlay.
Neither one takes the pointer - the hero content owns it*/

.page-hero-media {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
	border: 0;
	pointer-events: none;
}

video.page-hero-media {
	object-fit: cover;
}

.page-hero-embed iframe {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	/*The player keeps its own 16:9 box, so it is oversized on whichever axis falls short of the hero*/
	width: 100vw;
	height: 56.25vw;
	min-width: 177.78vh;
	min-height: 100%;
	border: 0;
	pointer-events: none;
}

/*Backgrounds are decoration only - nothing the player would normally draw over the video
may ever show. The native controls are hidden outright, and the YouTube/Vimeo iframe is
oversized past the hero so the player's own title bar and control bar fall outside of it*/

video.page-hero-media::-webkit-media-controls,
video.page-hero-media::-webkit-media-controls-enclosure,
video.page-hero-media::-webkit-media-controls-panel,
video.page-hero-media::-webkit-media-controls-start-playback-button,
video.page-hero-media::-webkit-media-controls-overlay-play-button {
	display: none !important;
	-webkit-appearance: none;
	opacity: 0;
}

.page-hero-embed-youtube iframe {
	/*A bit over 1/8th of the player height is chrome at the top and again at the bottom*/
	transform: translate(-50%, -50%) scale(1.4);
}

.page-hero-overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
	background: linear-gradient(rgba(0,0,0,0.1), rgba(0,0,0,.5), rgba(0,0,0,.1));
}

.page-hero-inner {
	position: relative;
	z-index: 2;
}