/**
 * Homepage-only styles (loaded via functions.php on the front page).
 *
 * Do NOT rely on Flatsome/Ux Builder IDs (#col-*, #banner-*) — they change when
 * you edit the page. Use classes + :has() instead.
 */

/* -------------------------------------------------------------------------
 * Full-height video banner — kill padding-top: 100% box + column gutters
 * ------------------------------------------------------------------------- */

/* Column that wraps this banner: strip horizontal padding */
.home .col:has(> .col-inner > .banner.has-video) {
	padding-left: 0 !important;
	padding-right: 0 !important;
}

.home .col:has(> .col-inner > .banner.has-video) > .col-inner {
	padding-left: 0 !important;
	padding-right: 0 !important;
	padding-bottom: 0 !important;
	margin-bottom: 0 !important;
}

.home .col:has(> .col-inner > .banner.has-video) {
	padding-bottom: 0 !important;
	margin-bottom: 0 !important;
}

/* Section / row: Flatsome adds default vertical padding — often reads as white band under the hero */
.home .section:has(.banner.has-video) {
	padding-bottom: 0 !important;
	margin-bottom: 0 !important;
}

.home .section:has(.banner.has-video) > .section-bg,
.home .section:has(.banner.has-video) > .section-content {
	margin-bottom: 0 !important;
}

.home .section:has(.banner.has-video) .section-content {
	padding-bottom: 0 !important;
}

.home .row:has(.banner.has-video) {
	margin-bottom: 0 !important;
	padding-bottom: 0 !important;
}

/* Override Flatsome’s inline <style> #banner-… { padding-top: 100%; } — IDs change; classes + !important win */
.home .banner.has-video.is-full-height,
.home .banner.has-video {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	margin-bottom: 0 !important;
	min-height: 70vh;
}

.home .banner.has-video .banner-inner,
.home .banner.has-video .banner-bg {
	min-height: inherit;
}

.home .banner.has-video .video-bg {
	width: 100%;
	height: 100%;
	min-height: inherit;
	object-fit: cover;
}

/* -------------------------------------------------------------------------
 * Flatsome UX countdown (.ux-timer) — single line, numbers only (matrix look)
 * Hides <strong> labels (weeks/day/hours…). Order is still Flatsome’s
 * (e.g. w d h m s). Do not use #timer-* IDs in UX Builder.
 * ------------------------------------------------------------------------- */

.home .banner-layer .ux-timer,
.home .ux-timer {
	display: flex;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	gap: 0;
	max-width: 100%;
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	white-space: nowrap;
	font-family: "Share Tech Mono", "Courier New", Courier, monospace !important;
	font-size: clamp(0.75rem, 3.2vw, 1.65rem) !important;
	font-weight: 400;
	line-height: 1.15;
	letter-spacing: 0.18em;
	font-variant-numeric: tabular-nums;
	color: #39ff14 !important;
	text-shadow:
		0 0 6px rgba(57, 255, 20, 0.85),
		0 0 14px rgba(57, 255, 20, 0.45),
		0 0 28px rgba(0, 255, 65, 0.25);
	filter: drop-shadow(0 0 2px rgba(57, 255, 20, 0.9));
}

.home .banner-layer .ux-timer span,
.home .ux-timer span {
	display: inline;
	white-space: nowrap;
}

/* Hide “weeks”, “day”, “hours”, etc. — only the leading number in each span shows */
.home .banner-layer .ux-timer strong,
.home .ux-timer strong {
	display: none !important;
}

/* One long line: separators between number groups (clock-style) */
.home .banner-layer .ux-timer span + span::before,
.home .ux-timer span + span::before {
	content: ":";
	display: inline;
	font-weight: 400;
	opacity: 0.55;
	margin: 0 0.06em 0 0;
	letter-spacing: 0;
	text-shadow: 0 0 6px rgba(57, 255, 20, 0.5);
}

/* -------------------------------------------------------------------------
 * Countdown text box: max width cap everywhere; full width only on phone (see below).
 * ------------------------------------------------------------------------- */
.home .banner-layers .text-box.banner-layer:has(.agora-countdown-clock) {
	max-width: 100% !important;
}

/* -------------------------------------------------------------------------
 * Desktop: true center in the hero. .banner-layers often has .container — that
 * max-width + side padding shifts flex “center”; instead we full-bleed the
 * layer stack and pin the countdown with translate(-50%,-50%) like Flatsome x50/y50.
 * ------------------------------------------------------------------------- */
@media only screen and (min-width: 48.0625em) {
	.home .banner.has-video .banner-inner {
		position: relative !important;
	}

	.home .banner.has-video .banner-layers {
		position: absolute !important;
		inset: 0 !important;
		width: 100% !important;
		max-width: none !important;
		height: 100% !important;
		min-height: 100% !important;
		margin: 0 !important;
		padding: 0 1.5rem !important;
		box-sizing: border-box !important;
		display: block !important;
	}

	.home .banner.has-video .banner-layers.container {
		max-width: none !important;
	}

	.home .banner.has-video .banner-layers .text-box.banner-layer:has(.agora-countdown-clock) {
		position: absolute !important;
		left: 50% !important;
		top: 50% !important;
		right: auto !important;
		bottom: auto !important;
		transform: translate(-50%, -50%) !important;
		margin: 0 !important;
		max-width: 100% !important;
		text-align: center !important;
		z-index: 3 !important;
	}
}

/* -------------------------------------------------------------------------
 * Phone: no vertical page scroll (this file loads on front page only).
 * Uses 100dvh so mobile browser chrome doesn’t leave a stray scroll gap.
 * If something still scrolls, check which element scrolls in DevTools — add it here.
 * ------------------------------------------------------------------------- */
@media only screen and (max-width: 48em) {
	html {
		overflow: hidden !important;
		height: 100% !important;
		max-height: 100dvh !important;
		overscroll-behavior: none;
	}

	body {
		overflow: hidden !important;
		width: 100% !important;
		height: 100% !important;
		max-height: 100dvh !important;
		overscroll-behavior: none;
		/* iOS Safari: overflow:hidden on body alone often still rubber-bands */
		position: fixed !important;
		inset: 0;
	}

	#wrapper {
		overflow: hidden !important;
		min-height: 0 !important;
		max-height: 100dvh !important;
		height: 100% !important;
	}

	/* Hero fills the locked viewport; layers flex-center (UX Builder top/% offsets read as “too high”). */
	.home .banner.has-video.is-full-height,
	.home .banner.has-video {
		min-height: 100dvh !important;
		height: 100dvh !important;
	}

	.home .banner.has-video .banner-inner {
		min-height: 100% !important;
		height: 100% !important;
		position: relative !important;
	}

	.home .banner.has-video .banner-bg {
		min-height: 100% !important;
		height: 100% !important;
	}

	.home .banner.has-video .banner-layers {
		position: absolute !important;
		inset: 0 !important;
		display: flex !important;
		flex-direction: column !important;
		align-items: center !important;
		justify-content: center !important;
		width: 100% !important;
		height: 100% !important;
		margin: 0 !important;
		padding-left: 1rem !important;
		padding-right: 1rem !important;
		box-sizing: border-box !important;
	}

	.home .banner.has-video .banner-layer {
		position: relative !important;
		top: auto !important;
		left: auto !important;
		right: auto !important;
		bottom: auto !important;
		transform: none !important;
		margin: 0.35rem 0 !important;
	}

	.home .banner-layers .text-box.banner-layer:has(.agora-countdown-clock) {
		width: 100% !important;
	}

	.home .section:has(.banner.has-video),
	.home .row:has(.banner.has-video),
	.home .col:has(> .col-inner > .banner.has-video) > .col-inner {
		min-height: 0 !important;
	}
}