/**
 * File: wp-content/themes/inspiro-child/css/jgf-hero.css
 * Theme: Inspiro Child (child of Inspiro)
 *
 * Version: 1.0.0
 *
 * Purpose:
 *   1. Full-viewport hero. Matches the live site's measured height ladder for the
 *      homepage hero: 93vh at >=1025px, 100vh at <=1024px, 88vh at <=767px. Live
 *      gets those values from post-5550.css rules on element 6a645a3d; that element
 *      does not exist on staging, so the same ladder is restated here against the
 *      staging hero container.
 *   2. The scroll-to-content arrow, a visual clone of live's #scroll-to-content
 *      (CSS-border chevron + pulsate) rebuilt as a real, keyboard-reachable button.
 *
 * Scope: every rule is scoped to Elementor container d195d9c / widget 84c61e0 on the
 * front page. No other video widget on the site is affected.
 *
 * Changelog:
 * 1.0.0 - 2026-08-26 - Initial. Replaces css/jgf-hero-audio-toggle.css (deleted:
 *         the hero mp4 carries no audio stream, so the toggle controlled nothing).
 */

/* ---------------------------------------------------------------------------
 * 1. Full-viewport hero
 *
 * Elementor gives .elementor-widget-video .elementor-wrapper an
 * `aspect-ratio: var(--video-aspect-ratio)` of 1.77777 / 1. That is what pins the
 * hero to a 16:9 letterbox (1440x810, 768x432, 375x211) and it fights any explicit
 * height, so it is cleared here. The <video> then covers the container outright -
 * object-fit, not the 100vw/56.25vw/min-height arithmetic live needs for its iframe.
 * ------------------------------------------------------------------------- */

.elementor-element.elementor-element-d195d9c {
	position: relative;
	overflow: hidden;
	height: 93vh !important;
}

.elementor-element.elementor-element-d195d9c > .e-con-inner {
	height: 100%;
	width: 100%;
}

.elementor-element.elementor-element-d195d9c .elementor-element.elementor-element-84c61e0,
.elementor-element.elementor-element-d195d9c .elementor-element.elementor-element-84c61e0 > .elementor-widget-container {
	height: 100%;
	width: 100%;
}

.elementor-element.elementor-element-84c61e0 .elementor-wrapper.e-hosted-video {
	position: relative;
	height: 100%;
	width: 100%;
	aspect-ratio: auto !important;
	--video-aspect-ratio: auto;
}

.elementor-element.elementor-element-84c61e0 video.elementor-video {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
}

@media ( max-width: 1024px ) {
	.elementor-element.elementor-element-d195d9c {
		height: 100vh !important;
	}
}

@media ( max-width: 767px ) {
	.elementor-element.elementor-element-d195d9c {
		height: 88vh !important;
	}
}

/* ---------------------------------------------------------------------------
 * 2. Scroll-to-content arrow
 *
 * Live's markup is a <div id="scroll-to-content"> with text-indent:-9999em, a 69x24
 * overflow:hidden box, and a ::before that is a 30x30 white-bordered square rotated
 * 45deg - the box clips the square so only its lower vertex shows, which is the
 * chevron. Geometry, colour, offsets and the pulsate keyframes are reproduced
 * verbatim. The two deliberate departures, both accessibility:
 *   - a real <button>, so it is keyboard reachable and Enter/Space work;
 *   - a 69x44 hit area (live is 69x24), achieved by growing the button upward and
 *     keeping the painted 69x24 chevron box pinned to its bottom edge, so the
 *     rendered arrow lands on exactly the same pixels as live.
 * ------------------------------------------------------------------------- */

.elementor-element.elementor-element-d195d9c .jgf-scroll-to-content {
	display: block;
	position: absolute;
	left: 50%;
	bottom: 20px;
	z-index: 150;
	margin: 0 0 0 -27.5px;
	padding: 0;
	width: 69px;
	height: 44px;
	border: 0;
	background: none;
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
	opacity: 0.5;
	animation: jgf-pulsate 1.5s ease-out 0s infinite;
}

.elementor-element.elementor-element-d195d9c .jgf-scroll-to-content:hover,
.elementor-element.elementor-element-d195d9c .jgf-scroll-to-content:focus-visible {
	opacity: 1;
}

.elementor-element.elementor-element-d195d9c .jgf-scroll-to-content:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 4px;
}

.elementor-element.elementor-element-d195d9c .jgf-scroll-to-content__chevron {
	display: block;
	position: absolute;
	left: 0;
	bottom: 0;
	width: 69px;
	height: 24px;
	overflow: hidden;
	pointer-events: none;
}

.elementor-element.elementor-element-d195d9c .jgf-scroll-to-content__chevron::before {
	content: "";
	display: block;
	position: absolute;
	left: 15px;
	bottom: 10px;
	height: 30px;
	width: 30px;
	border: 2px solid #fff;
	transform: rotate( 45deg );
}

@keyframes jgf-pulsate {
	0%   { opacity: 0.5; }
	50%  { opacity: 1; }
	100% { opacity: 0.3; }
}

@media ( prefers-reduced-motion: reduce ) {
	.elementor-element.elementor-element-d195d9c .jgf-scroll-to-content {
		animation: none;
		opacity: 0.85;
	}
}