/* ==========================================================================
   Hero video / soliloquy slider stacking
   Add this block to style-front.css

   .hero-wrap is only present in the markup when a Vimeo ID is set
   (see gmc_front_page_widgets() in front-page.php). Its .hero-video-active
   class is toggled by sliderHeight() in front-page.js at the same
   breakpoint the slider itself uses (width > 1216 && height > 768), so
   video vs. slider never gets out of sync with the slider's own sizing.
   ========================================================================== */

.gmc-image-header{
	display:none;
}

/* ==========================================================================
   Hero video / soliloquy slider stacking
   Add this block to style-front.css

   .hero-wrap is only present in the markup when a Vimeo ID is set
   (see gmc_front_page_widgets() in front-page.php). Its .hero-video-active
   class is toggled by sliderHeight() in front-page.js at the same
   breakpoint the slider itself uses (width > 1216 && height > 768), so
   video vs. slider never gets out of sync with the slider's own sizing.
   ========================================================================== */

.hero-wrap {
	position: relative;
	overflow: hidden;
	z-index:0;
}

/* Below the desktop breakpoint: .hero-wrap has no explicit height and no
   .hero-video-active class, so .front-page-1.hero-slider behaves exactly
   like plain .front-page-1 does today — normal flow, height: auto. */
.hero-wrap .hero-video {
	display: none;
}

/* At/above the desktop breakpoint: stack slider and video absolutely so
   they occupy the identical box (sized by JS to calcslideHeight). */
.hero-wrap.hero-video-active .front-page-1.hero-slider {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	visibility: hidden;
	z-index: 1;
}

.hero-wrap.hero-video-active .hero-video {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	z-index: 2;
	visibility:visible;
}

.hero-video-embed {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
	z-index: 1;
}

/* Sits above the (initially empty) video embed. fp_herovideo.js adds
   .is-hidden once the video's 'play' event actually fires, so visitors see
   a still image instead of a blank/black gap while the video loads. */
.hero-video-poster {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	z-index: 2;
	opacity: 1;
	transition: opacity 0.6s ease;
	pointer-events: none;
}

.hero-video-poster.is-hidden {
	opacity: 0;
}

/* hero-video.js sizes/positions this inline (cover-fit); this is just a
   sane fallback before JS runs. */
.hero-video-embed iframe {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100%;
	height: 100%;
	pointer-events: none; /* background video, not a control surface */
	border: 0;
}

/* ==========================================================================
   Hero video / soliloquy slider stacking
   Add this block to style-front.css

   .hero-wrap is only present in the markup when a Vimeo ID is set
   (see gmc_front_page_widgets() in front-page.php). Its .hero-video-active
   class is toggled by sliderHeight() in front-page.js at the same
   breakpoint the slider itself uses (width > 1216 && height > 768), so
   video vs. slider never gets out of sync with the slider's own sizing.
   ========================================================================== */

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

/* Below the desktop breakpoint: .hero-wrap has no explicit height and no
   .hero-video-active class, so .front-page-1.hero-slider behaves exactly
   like plain .front-page-1 does today — normal flow, height: auto. */
.hero-wrap .hero-video {
	display: none;
}

/* At/above the desktop breakpoint: stack slider and video absolutely so
   they occupy the identical box (sized by JS to calcslideHeight). */
.hero-wrap.hero-video-active .front-page-1.hero-slider {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	visibility: hidden;
	z-index: 1;
}

.hero-wrap.hero-video-active .hero-video {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	z-index: 2;
}

.hero-video-embed {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
	z-index: 1;
}

/* Sits above the (initially empty) video embed. fp_herovideo.js adds
   .is-hidden once the video's 'play' event actually fires, so visitors see
   a still image instead of a blank/black gap while the video loads. */
.hero-video-poster {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	z-index: 2;
	opacity: 1;
	transition: opacity 0.6s ease;
	pointer-events: none;
}

.hero-video-poster.is-hidden {
	opacity: 0;
}

/* hero-video.js sizes/positions this inline (cover-fit); this is just a
   sane fallback before JS runs. */
.hero-video-embed iframe {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100%;
	height: 100%;
	pointer-events: none; /* background video, not a control surface */
	border: 0;
}

/* Self-hosted MP4 path — object-fit: cover does what coverBox() has to do
   by hand for the Vimeo iframe, so no JS sizing math is needed here. */
.hero-video-native {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
	z-index: 1;
	pointer-events: none; /* background video, not a control surface */
}