/*
 * LG Banner — the Kino Flo rendering of Flatsome's [ux_banner] + [text_box].
 *
 * Scoped entirely under .lg-banner so it cannot reach Kino Flo's own pages. Loaded only on pages
 * that actually contain a banner (see lg_enqueue_litegear_page_assets in functions.php).
 *
 * The positioning maths lives in the element templates, as inline custom properties and transforms,
 * because Flatsome allows arbitrary percentages and these pages use eleven distinct combinations —
 * a class per value would mean generating CSS for values used exactly once.
 */

.lg-banner {
	position: relative;
	width: 100%;
}

.lg-banner-inner {
	position: relative;
	/* Explicit, not auto. An image-ratio banner carries `aspect-ratio` plus a `max-height` cap
	   (see the element template); with an auto width the clamped height makes the box shrink its
	   WIDTH to preserve the ratio, and a 1440px hero came back 1293px wide. Pinning the width
	   means only the height clamps, which is what the cap is for. */
	width: 100%;
	/* --lg-banner-height is set inline from the source's height="50%" (= 50vh). */
	min-height: var(--lg-banner-height, 0px);
	background-size: cover;
	background-repeat: no-repeat;
	overflow: hidden;
}

/*
 * Deliberately NOT `overflow: hidden` on any ancestor of a sticky element, and no `overflow-x`
 * here. Setting overflow on one axis forces the other to `auto`, which silently kills
 * position: sticky further up the page — that is what broke the auroris scroll sequence twice.
 * Confining it to this element, which contains nothing sticky, is safe.
 */

/*
 * Flatsome's `.banner-layers.container`: the banner is full-bleed, its overlay content is not.
 * Measured on the source hero — max-width 1080px with a 15px gutter, centred — and it is what makes
 * the copy wrap where the original wraps. The box coordinates are percentages OF THIS, not of the
 * banner, so it also has to be the positioning context.
 */
.lg-banner-layers {
	/* ABSOLUTE, filling the banner — not `position: relative; height: 100%`.
	 *
	 * The banner sets its size with min-height or aspect-ratio, and a percentage height resolves
	 * against a parent's HEIGHT, which is auto in both cases. The layer therefore collapsed to the
	 * height of its own copy (78px on /about-litecard/), and the overlay's `top: 50%` centred it
	 * against that instead of the 400px banner — every centred hero heading sat at the top edge. */
	position: absolute;
	inset: 0;
	max-width: 1080px;
	margin: 0 auto;
	padding: 0 15px;
	box-sizing: border-box;
}

/* The content-sized banners are the exception: nothing is absolutely positioned inside them, so an
   absolute layer would leave the banner with nothing in flow and collapse it to the 30px floor. */
.lg-banner-inner--auto .lg-banner-layers {
	position: relative;
	inset: auto;
}

.lg-banner-box {
	position: static;
}

.lg-banner-box-inner {
	position: absolute;
	/* No default padding — Flatsome gives these none unless [text_box padding=] says otherwise, and
	   the template writes that inline. A blanket value here changed the measure of every hero. */
	padding: 0;
	box-sizing: border-box;
	color: #fff;
	z-index: 1;
}

.lg-banner-box-logo {
	display: block;
	height: auto;
	margin: 0 auto 1rem;
	max-width: 100%;
}

/* Left- and right-aligned boxes should not have their logo centred. */
.lg-banner-box-inner[style*="text-align:left"] .lg-banner-box-logo {
	margin-left: 0;
}

.lg-banner-box-inner[style*="text-align:right"] .lg-banner-box-logo {
	margin-right: 0;
}

.lg-banner-box-content > :first-child {
	margin-top: 0;
}

.lg-banner-box-content > :last-child {
	margin-bottom: 0;
}

/*
 * EVERY heading level, not just h2.
 *
 * The box sits on top of photographic imagery, so anything that keeps Kino Flo's dark heading
 * colour becomes invisible rather than merely off-brand — "About LiteCard" was rendering near-black
 * over a dark olive banner. The original scoped this by container and never had to name levels.
 *
 * h2 alone was the wrong guess: across the migrated pages these boxes use h4 151 times, h1 36,
 * h3 19, h2 19 and h5 twice, so the one level covered was close to the rarest. Links and list
 * items need it for the same reason.
 */
.lg-banner-box-content :is(h1, h2, h3, h4, h5, h6) {
	color: #fff;
	margin-bottom: 0.5em;
}

.lg-banner-box-content,
.lg-banner-box-content :is(p, li, span, strong, em, blockquote) {
	color: #fff;
}

.lg-banner-box-content a {
	color: #fff;
	text-decoration: underline;
}

/*
 * The exception: a banner with no image and an explicitly light background. The template adds this
 * class (see lg-banner/templates/template.php); whitening copy there would hide it exactly as
 * surely as the dark-on-photo case this file otherwise exists to prevent. Inherit instead of
 * hard-coding a colour, so the page's own type colour applies.
 */
.lg-banner-inner--light .lg-banner-box-inner,
.lg-banner-inner--light .lg-banner-box-content,
.lg-banner-inner--light .lg-banner-box-content :is(h1, h2, h3, h4, h5, h6, p, li, span, strong, em, blockquote, a) {
	color: inherit;
}

/*
 * A banner with NO height attribute is sized by its content on the original. Ours cannot be, while
 * the overlay is absolutely positioned — it contributes no height and the box collapses. For this
 * case only, put the overlay back in normal flow so the copy sets the height, exactly as Flatsome
 * does: /firmware/'s notice bar is 113px and sitelite's hero 839px, and no single default fits both.
 * Percentage- and pixel-height banners keep the absolute overlay, which is what their coordinates
 * are expressed against.
 */
.lg-banner-inner--auto .lg-banner-box-inner {
	position: relative;
	left: auto !important;
	top: auto !important;
	transform: none !important;
	width: 100% !important;
}

.lg-banner-box-button {
	display: inline-block;
	margin-top: 1.25rem;
	padding: 0.6rem 1.6rem;
	border: 1px solid currentColor;
	border-radius: 10px;
	color: #fff;
	font-size: 0.85rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
}

.lg-banner-box-button:hover,
.lg-banner-box-button:focus {
	background: #fff;
	color: #000;
	text-decoration: none;
}

/*
 * Below the medium breakpoint Flatsome collapses these overlays to full width and stacks them —
 * percentage positioning on a phone puts copy off-screen or on top of itself. Reproducing that
 * behaviour matters more than reproducing the exact desktop coordinates.
 */
@media (max-width: 959px) {
	.lg-banner-inner {
		min-height: 0;
		display: flex;
		flex-direction: column;
	}

	.lg-banner-box-inner {
		position: relative !important;
		width: 100% !important;
		left: auto !important;
		top: auto !important;
		transform: none !important;
	}
}

/* Background video layer. Sits under the overlay copy, above the background image it uses as a
   poster, and is cropped the same way `background-size: cover` crops the still. */
.lg-banner-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
	pointer-events: none;
}