/**
 * Bonza, Health Hub hero (ClickUp 86eypb6ny).
 *
 * Config investigated: no site-wide colour palette or heading/body font
 * is set in the Customizer yet ("Design foundations" task 86eyk8nqd is
 * still open), so colours and fonts are declared locally as
 * `var(--hh-*, <figma-hex>)` custom properties, the same interim pattern
 * already used in footer.css and checkout-header-footer.css on this
 * site. A later global token pass can override these without touching
 * this file.
 *
 * Figma: cY9QX6IwGVaaGI4r7J2RRF, HERO BANNER component set 23316:66531,
 * Type=Category (desktop 34247:174289, mobile 34349:193325). Breakpoints
 * per the ClickUp task: mobile 375 (floor) / 428 (drawn), tablet 744 (no
 * Figma frame exists for this template at tablet; treated as a reflow
 * between the mobile row-to-column switch and the desktop row layout,
 * switching at the same 744px breakpoint the rest of this site's
 * templates use, e.g. footer.css), desktop 1440 / 1512.
 *
 * @date 2026-08-27
 */

.hh-hero {
	--hh-cream: var(--hh-color-cream, #F8EDE3);
	--hh-white: var(--hh-color-white, #FFFFFF);
	--hh-ink: var(--hh-color-ink, #494545);
	--hh-green: var(--hh-color-green, #247B4E);
	--hh-amber: var(--hh-color-amber, #FFA825);
	--hh-trust-copy: var(--hh-color-trust-copy, #716B5D);

	--hh-heading-font: "Nominee", var(--theme-headings-font-family, var(--theme-font-family, sans-serif));
	--hh-body-font: "Kobe1.1", var(--theme-font-family, sans-serif);
	--hh-headline-font: "Floyd Caps", var(--hh-heading-font);
	/* Same "not loaded yet, fall back to theme font" gap noted on
	   footer.css: no @font-face for Nominee/Kobe1.1/Floyd Caps exists on
	   this site yet, tracked on 86eypb6aw. */

	position: relative;
	overflow: hidden;
	background-color: var(--hh-cream);
	min-height: 480px;
}

.hh-hero__bg {
	position: absolute;
	inset: 0;
	margin: 0;
	z-index: 0;
}

.hh-hero__bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Desktop image shown by default; swapped for the mobile image under
   744px below. Two distinct Figma image assets, not one image cropped
   two ways (confirmed against the Figma data). */
.hh-hero__bg-mobile {
	display: none;
}

.hh-hero__wave {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: auto;
	margin: 0;
	z-index: 1;
	pointer-events: none;
}

.hh-hero__content {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 32px;
	padding: 200px 64px 64px;
}

/*
 * Legibility safeguard, not a Figma-specified layer: the Figma data has
 * no scrim/overlay node behind this text, only ink-coloured (#494545)
 * text directly over a photo, so its contrast depends entirely on
 * whichever photo eventually gets imported (none exists on any
 * environment yet; the hero currently falls back to a plain background
 * colour). A soft cream text-shadow keeps the already-measured
 * ink/green-on-cream ratios (footer.css's WCAG note; this file's own
 * header comment) protected against a future photo that turns out too
 * light, without adding a visible panel Figma doesn't show. Re-verify
 * with a real contrast reading once real photography is imported.
 */
.hh-hero__breadcrumb,
.hh-hero__heading,
.hh-hero__trust-rating,
.hh-hero__trust-copy {
	text-shadow: 0 1px 3px rgba(248, 237, 227, 0.9), 0 0 24px rgba(248, 237, 227, 0.7);
}

.hh-hero__breadcrumb,
.hh-hero__breadcrumb a,
.hh-hero__breadcrumb span {
	font-family: var(--hh-body-font);
	font-weight: 700;
	font-size: 14px;
	line-height: 16px;
	color: var(--hh-ink);
	margin: 0;
}

.hh-hero__breadcrumb a {
	color: var(--hh-ink);
	text-decoration: none;
}

.hh-hero__breadcrumb a:hover,
.hh-hero__breadcrumb a:focus-visible {
	color: var(--hh-green);
	text-decoration: underline;
}

.hh-hero__breadcrumb a:focus-visible {
	outline: 2px solid var(--hh-green);
	outline-offset: 2px;
}

.hh-hero__breadcrumb-current,
.hh-hero__breadcrumb span:last-child {
	color: var(--hh-green);
}

.hh-hero__breadcrumb-sep {
	margin: 0 6px;
	color: var(--hh-ink);
}

.hh-hero__heading {
	font-family: var(--hh-heading-font);
	font-weight: 900;
	font-size: 48px;
	line-height: 48px;
	text-transform: uppercase;
	color: var(--hh-ink);
	margin: 8px 0 0;
}

.hh-hero__trust {
	display: flex;
	align-items: center;
	gap: 10.5px;
	margin: 10.5px 0 0;
}

.hh-hero__trust-rating {
	font-family: var(--hh-headline-font);
	font-weight: 400;
	font-size: 18px;
	text-transform: uppercase;
	color: var(--hh-ink);
}

.hh-hero__trust-copy {
	font-family: var(--hh-body-font);
	font-weight: 400;
	font-size: 14px;
	line-height: 16px;
	color: var(--hh-trust-copy);
}

@media (min-width: 1440px) {
	/*
	 * Right-align the content column and push it to the right side of
	 * the hero (Figma: content sits right-aligned within a
	 * justify-content:flex-end row at this breakpoint). This is about
	 * WHERE the column sits, not its internal direction: the audit
	 * (2026-08-27) found flex-direction:row here made the breadcrumb,
	 * H1 and trust badge line up side by side on one line instead of
	 * staying stacked, which flex-direction:column here fixes.
	 */
	.hh-hero__content {
		align-items: flex-end;
		text-align: right;
		margin-left: auto;
		max-width: 640px;
	}
}

@media (max-width: 743px) {
	.hh-hero {
		min-height: 420px;
	}

	.hh-hero__bg-desktop {
		display: none;
	}

	.hh-hero__bg-mobile {
		display: block;
	}

	.hh-hero__content {
		padding: 100px 20px 56px;
		align-items: center;
		text-align: center;
	}

	.hh-hero__heading {
		font-size: 24px;
		line-height: 36px;
	}

	.hh-hero__breadcrumb,
	.hh-hero__breadcrumb a,
	.hh-hero__breadcrumb span {
		font-size: 12px;
		line-height: 16px;
	}

	.hh-hero__trust-copy {
		font-size: 12px;
	}
}