/* Balerfornia Cinematic Hero — full-bleed header + hero widget
   Modeled on the Lavender Shore reference layout: absolute nav over
   full-viewport media, bottom-anchored headline block, restrained type.

   SPECIFICITY NOTE — do not "simplify" these selectors back to single
   classes. CozyStay's main.min.css styles bare tags through descendant
   selectors like `.elementor-section h1 { color: var(--text-color) }` and
   `.elementor h1 { font-size: 2.25rem }` (specificity 0,1,1). A lone
   `.lvh-hero__headline` (0,1,0) LOSES to those and the headline renders
   dark and undersized. Scoping under `.lvh-hero` makes these 0,2,0, which
   wins cleanly without !important. Same reasoning for the CTA (`.elementor a`)
   and the dots (theme button rules). */

/* Escape whatever section/column padding Elementor puts around the widget,
   and break out to full viewport width regardless of container max-width. */
.elementor-widget-balerfornia-cinematic-hero,
.elementor-widget-balerfornia-cinematic-hero > .elementor-widget-container {
	padding: 0 !important;
	margin: 0 !important;
}

.lvh-hero {
	--lvh-accent: #7DA086;
	--lvh-overlay: 0.55;
	--lvh-fade: 1200ms;
	--lvh-forest: #053932;
	--lvh-cream: #F6F1E7;
	--lvh-font-display: 'Playfair Display', Georgia, serif;
	--lvh-font-body: 'Jost', 'Helvetica Neue', Arial, sans-serif;

	position: relative;
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	min-height: 100vh;
	overflow: hidden;
	color: #fff;
	background: var(--lvh-forest);
	font-family: var(--lvh-font-body);
}

/* ---- Background media (photo / video / slider) --------------------------- */

.lvh-hero .lvh-hero__media {
	position: absolute;
	inset: 0;
	background-color: var(--lvh-forest);
	z-index: 0;
}

/* Every media type renders as slide layers — a photo is a one-slide slider. */
.lvh-hero .lvh-hero__slide {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	opacity: 0;
	transition: opacity var(--lvh-fade, 1200ms) ease-in-out;
}

.lvh-hero .lvh-hero__slide.is-active {
	opacity: 1;
}

.lvh-hero .lvh-hero__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* The poster is already painted on the slide's background-image, so a
	   transparent video box avoids a flash of black before the first frame. */
	background: transparent;
}

.lvh-hero .lvh-hero__overlay-top,
.lvh-hero .lvh-hero__overlay-bottom {
	position: absolute;
	left: 0;
	right: 0;
	pointer-events: none;
	z-index: 1;
}

.lvh-hero .lvh-hero__overlay-top {
	top: 0;
	height: 45%;
	background: linear-gradient(
		to bottom,
		rgba(5, 57, 50, var(--lvh-overlay)),
		rgba(5, 57, 50, 0)
	);
}

/* The bottom scrim is taller than the top one and ramps early on purpose.
   The reference layout gets away with a short 45% band because its footage is
   dark and its text sits at the very bottom edge. Ours has a headline + body +
   CTA stack rising to roughly 30% off the floor, over bright daylight photos
   (pool water, pale sand). With a single linear ramp across 45%, the alpha
   where the headline actually sits works out around 0.16 — nowhere near enough
   to hold white text. The mid stop front-loads the darkening so the whole text
   block sits on real density while the top two-thirds of the photo stays clean. */
.lvh-hero .lvh-hero__overlay-bottom {
	bottom: 0;
	height: 78%;
	background: linear-gradient(
		to top,
		rgba(5, 57, 50, var(--lvh-overlay)) 0%,
		rgba(5, 57, 50, calc(var(--lvh-overlay) * 0.62)) 32%,
		rgba(5, 57, 50, 0) 100%
	);
}

/* ---- Slide dots ---------------------------------------------------------- */

.lvh-hero .lvh-hero__dots {
	position: absolute;
	right: clamp(20px, 4vw, 56px);
	bottom: clamp(48px, 8vh, 96px);
	display: flex;
	gap: 10px;
	z-index: 6;
}

.lvh-hero .lvh-hero__dot {
	width: 7px;
	height: 7px;
	min-width: 0;
	min-height: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.45);
	box-shadow: none;
	cursor: pointer;
	transition: background-color 0.3s ease, transform 0.3s ease;
}

.lvh-hero .lvh-hero__dot:hover {
	background: rgba(255, 255, 255, 0.8);
}

.lvh-hero .lvh-hero__dot.is-active {
	background: var(--lvh-accent);
	transform: scale(1.4);
}

/* ---- Nav ------------------------------------------------------------------ */

.lvh-hero .lvh-hero__nav {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 20;
}

.lvh-hero .lvh-hero__nav .nav-container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 28px clamp(20px, 4vw, 56px);
}

.lvh-hero .lvh-hero__nav-links {
	display: flex;
	align-items: center;
	gap: 4px;
	flex: 1;
}

.lvh-hero .lvh-hero__nav .nav-link {
	display: inline-flex;
	align-items: center;
	padding: 8px 14px;
	color: #fff;
	font-family: var(--lvh-font-body);
	font-size: 0.78rem;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	opacity: 0.88;
	border-radius: 999px;
	transition: opacity 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}

.lvh-hero .lvh-hero__nav .nav-link:hover {
	opacity: 1;
	color: var(--lvh-accent);
}

.lvh-hero .lvh-hero__nav .nav-link.book {
	flex: 1;
	justify-content: center;
	border: 1px solid rgba(255, 255, 255, 0.5);
	opacity: 1;
}

.lvh-hero .lvh-hero__nav .nav-link.book:hover {
	background-color: var(--lvh-accent);
	border-color: var(--lvh-accent);
	color: var(--lvh-forest);
}

.lvh-hero .lvh-hero__nav .nav-brand {
	flex: 1;
	display: flex;
	justify-content: center;
	text-decoration: none;
}

.lvh-hero .lvh-hero__wordmark {
	font-family: var(--lvh-font-display);
	font-style: italic;
	font-size: 1.35rem;
	color: #fff;
	letter-spacing: 0.01em;
}

.lvh-hero .lvh-hero__nav .nav-brand img {
	max-height: 48px;
	width: auto;
}

.lvh-hero .lvh-hero__burger {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 34px;
	height: 34px;
	min-height: 0;
	padding: 0;
	background: none;
	border: 0;
	box-shadow: none;
	cursor: pointer;
}

.lvh-hero .lvh-hero__burger span {
	display: block;
	height: 1.5px;
	background: #fff;
	border-radius: 1px;
}

.lvh-hero .lvh-hero__mobile-menu {
	display: none;
	flex-direction: column;
	gap: 4px;
	padding: 0 20px 24px;
}

.lvh-hero .lvh-hero__mobile-menu.is-open {
	display: flex;
}

.lvh-hero .lvh-hero__mobile-link {
	padding: 12px 4px;
	color: #fff;
	text-decoration: none;
	font-size: 0.95rem;
	letter-spacing: 0.03em;
	border-top: 1px solid rgba(255, 255, 255, 0.14);
}

/* ---- Headline block -------------------------------------------------------- */

/* Bottom-anchored and horizontally centred — the reference's own treatment
   (`.master-home-a`: flex column, `justify-content: flex-end`,
   `align-items: center`). It briefly ran centred while the booking form was
   being fitted in; Tiara asked for it lower, which lands back on the reference.
   The bottom padding below is what holds it off the form. */
.lvh-hero .main-container {
	position: relative;
	z-index: 5;
	min-height: 100vh;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	padding: 0 clamp(20px, 4vw, 56px) clamp(48px, 8vh, 96px);
}

.lvh-hero .lvh-hero__content {
	max-width: 720px;
	margin: 0 auto;
	text-align: center;
}

/* 0,2,0 — must outrank CozyStay's `.elementor-section h1` / `.elementor h1`. */
.lvh-hero .lvh-hero__headline {
	margin: 0;
	font-family: var(--lvh-font-display);
	font-weight: 700;
	font-size: clamp(2.5rem, 5.5vw, 4.5rem);
	line-height: 1.02;
	letter-spacing: -0.01em;
	color: #fff;
}

.lvh-hero .lvh-hero__headline em {
	font-style: italic;
}

.lvh-hero .lvh-hero__headline .lvh-underline-wave {
	font-style: normal;
	text-decoration: underline;
	text-decoration-style: wavy;
	text-decoration-color: var(--lvh-accent);
	text-decoration-thickness: 2px;
	text-underline-offset: 0.12em;
}

.lvh-hero .lvh-hero__body {
	/* `auto` side margins, not 0 — the 42ch cap means text-align on the parent
	   centres the words but would leave this box pinned left. */
	margin: 20px auto 0;
	max-width: 42ch;
	font-family: var(--lvh-font-body);
	font-size: 1.1rem;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.86);
}

.lvh-hero .lvh-hero__cta {
	display: inline-flex;
	align-items: center;
	margin-top: 32px;
	padding: 16px 30px;
	background: var(--lvh-cream);
	color: var(--lvh-forest);
	font-family: var(--lvh-font-body);
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	border-radius: 999px;
	transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.lvh-hero .lvh-hero__cta:hover {
	background: #053932;
	color: #fff;
	transform: translateY(-1px);
}

/* CozyStay ships `.elementor-element a:not([class*="button"]):not(:hover)
   { color: inherit }` — specificity 0,3,1. It beats the rule above (0,2,0)
   and `inherit` pulls the hero's white down onto the cream pill, making the
   CTA label invisible. This selector is 0,4,0, which outranks it. The theme's
   rule excludes :hover, so the hover state above still applies unaided.
   Do not collapse this back into the base rule — the bug returns silently. */
.lvh-hero .lvh-hero__content .lvh-hero__cta:not(:hover) {
	color: var(--lvh-forest);
}

/* ---- Booking form in the hero ---------------------------------------------- */

/* The reference anchors its booking bar (.form-block-home-a) inside the hero,
   under the headline. Ours is the THEME's `cs_reservation` widget dropped into
   the hero section as a SIBLING of this widget — deliberately never embedded in
   the hero's PHP, so the theme keeps owning the booking logic. It's tagged
   `bfh-hero-form` via Elementor's CSS-classes field and positioned here.

   `.lvh-hero` has `overflow: hidden`, so the form must stay OUTSIDE it — as a
   sibling — or it would be clipped. */
.elementor-widget-wrap:has(> .elementor-widget-balerfornia-cinematic-hero) {
	position: relative;
}

.bfh-hero-form {
	position: absolute;
	left: 0;
	right: 0;
	bottom: clamp(24px, 5vh, 56px);
	z-index: 6;
	padding: 0 clamp(20px, 4vw, 56px);
}

.bfh-hero-form > .elementor-widget-container {
	max-width: 1100px;
	margin: 0 auto;
}

/* Sized so the copy lands ~40px above the bar — the reference's gap between its
   headline block and its booking block. The maths, at 900px tall: the bar is
   ~119px and sits clamp(24px,5vh,56px)=45px off the bottom, so it starts at
   736; 900 − 207 = 693 puts the copy 43px clear of it.

   The content is bottom-anchored (`align-items: flex-end` above), so this
   padding genuinely holds it off the bar. It does NOT work that way under
   `align-items: center` — there, bottom padding only shifts the centre, which
   is how an earlier pass ended up floating the text at 37% height. */
.elementor-widget-wrap:has(.bfh-hero-form) .lvh-hero .main-container {
	padding-bottom: clamp(160px, 23vh, 220px);
}

@media (max-width: 900px) {
	/* Stacked fields make the bar far too tall to float over a phone-height
	   hero — let it sit under the hero in normal flow instead. */
	.bfh-hero-form {
		position: static;
		margin-top: -24px;
	}

	.elementor-widget-wrap:has(.bfh-hero-form) .lvh-hero .main-container {
		padding-bottom: clamp(48px, 8vh, 96px);
	}
}

/* ---- Responsive ------------------------------------------------------------ */

/* Respect reduced-motion: no crossfade, no autoplaying footage. The JS also
   pauses the videos and stops advancing — this is the visual half only. */
@media (prefers-reduced-motion: reduce) {
	.lvh-hero .lvh-hero__slide {
		transition: none;
	}
}

@media (max-width: 782px) {
	/* Poster-only on mobile: the JS strips the <source> so nothing downloads,
	   this just makes sure the empty video box can't cover the poster. */
	.lvh-hero .lvh-hero__video--desktop-only {
		display: none;
	}

	.lvh-hero .lvh-hero__dots {
		bottom: 20px;
	}

	.lvh-hero .lvh-hero__nav-links {
		display: none;
	}

	.lvh-hero .lvh-hero__nav .nav-link.book {
		flex: 0 0 auto;
	}

	.lvh-hero .lvh-hero__burger {
		display: flex;
	}

	.lvh-hero .lvh-hero__nav .nav-container {
		padding: 20px 20px 0;
	}

	.lvh-hero .main-container {
		padding-bottom: 56px;
	}
}