/**
 * 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, #2E2A2A); /* 12.30:1 on cream (WCAG AA/AAA) */
	--hh-green: var(--hh-color-green, #247B4E);
	--hh-amber: var(--hh-color-amber, #FFA825);
	--hh-trust-copy: var(--hh-color-trust-copy, #4D483E); /* 8:1 on cream, over 6:1 on the photo's warm fade; Figma's #716B5D falls under 4.5:1 there */

	--hh-heading-font: "Nominee", var(--theme-font-family, sans-serif);
	--hh-body-font: "Kobe1.1", var(--theme-font-family, sans-serif);
	/* Same "not loaded yet, fall back to theme font" gap noted on
	   footer.css: no @font-face for Nominee/Kobe1.1 exists on this site
	   yet, tracked on 86eypb6aw.
	   Corrected 2026-09-21 (hover/type audit 86eyxb3yu): --hh-headline-font
	   used to name "Floyd Caps" first, a non-brand noise font with no
	   @font-face anywhere on this site. Same rating-value node type as
	   product-page.css's Feefo row, which already substitutes Nominee for
	   the missing Floyd/Floyd Caps family -- the var is dropped here and
	   .hh-hero__trust-rating now reads --hh-heading-font directly,
	   matching that established decision rather than inventing a second
	   dead font-var tier. */

	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 (#2E2A2A)
 * 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__sub,
.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;
}

/* Current crumb in the darker hover green: #247B4E is 4.5:1 on cream and dips
   under AA on the photo's warm fade at desktop; #1C5F3C holds above 6:1. */
.hh-hero__breadcrumb-current,
.hh-hero__breadcrumb span:last-child {
	color: #1C5F3C;
}

.hh-hero__breadcrumb-sep {
	display: inline-block;
	width: 12px;
	height: 12px;
	margin: 0 4px; /* Figma 34306:193693: 12px chevron, 4px gap each side */
	vertical-align: middle;
	line-height: 0;
	color: var(--hh-ink);
}

.hh-hero__breadcrumb-sep svg {
	display: block;
}

/* Line 2 of the H1, Figma mixed-fill range (34247:174306): brand green #247B4E.
   Large text (48px / 24px, weight 900), so AA needs 3:1; 4.5:1 on cream. */
.hh-hero__heading-accent {
	color: var(--hh-green);
}

.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;
}

/* Subtitle: Figma Kobe1.1 Regular 20/24 (mobile 18/24), ink, 12px under the H1. */
.hh-hero__sub {
	font-family: var(--hh-body-font);
	font-weight: 400;
	font-size: 20px;
	line-height: 24px;
	color: var(--hh-ink);
	max-width: 700px;
	margin: -20px 0 -20px;
}

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

/* Figma 34247:174388: five stars + rating text as one unit, 7.91px apart
   (rating x 89.69 minus stars frame width 81.78). */
.hh-hero__trust-score {
	display: flex;
	align-items: center;
	flex-shrink: 0;
	gap: 7.91px;
}

/* Figma 34247:174389-174394: 5 stars 14.13 square, pitch 16.91 (gap 2.78),
   fill #FFA825 (baked into the shared 'stars' SVG). Frame is 81.78 wide. */
.hh-hero__trust-stars {
	display: block;
	flex-shrink: 0;
	width: 81.78px;
	line-height: 0;
}

.hh-hero__trust-stars svg {
	display: block;
	width: 100%;
	height: auto;
}

.hh-hero__trust-rating {
	font-family: var(--hh-heading-font);
	font-weight: 400;
	font-size: 18px;
	text-transform: uppercase;
	color: var(--hh-green); /* Figma 34247:174395 / 34349:193436 fill #247B4E; 4.53:1 on cream #F8EDE3 */
}

.hh-hero__trust-marks {
	display: flex;
	align-items: center;
	gap: 10.5px; /* Figma 34247:174387 item spacing 10.55 */
}

.hh-hero__trust-logo,
.hh-hero__trust-seal {
	display: block;
	line-height: 0;
}

/* Figma 34247:174397: feefo wordmark 70 x 17, ink #494545 + amber. */
.hh-hero__trust-logo {
	width: 70px;
	height: 17px;
	color: #494545;
}

/* Figma 34247:174407: seal 33.75 square. */
.hh-hero__trust-seal {
	width: 33.75px;
	height: 33.75px;
}

.hh-hero__trust-logo svg,
.hh-hero__trust-seal svg {
	display: block;
	width: 100%;
	height: 100%;
}

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

/*
 * Figma HERO BANNER: the text column is 700px wide, pinned 64px from the
 * right edge, LEFT-aligned inside it. The desktop photo's packs and dogs
 * fill its left half (packs end at 45.7% of the image width, the beagle's
 * paw at 49%), so the column starts right of the 50% line plus 24px of
 * air. The image is `cover` on a 607px box, which scales it to at least
 * 1517px wide, hence the max() floor. The heading shrinks with the
 * viewport so the longest German word (UNTERSTUETZUNG.) still fits the
 * narrower column at 1366px; Figma has no frame there.
 */
.hh-hero {
	min-height: 607px;
	background-size: cover;
	background-position: left bottom;
}

@media (min-width: 1366px) {
	.hh-hero__content {
		box-sizing: border-box;
		align-items: flex-start;
		text-align: left;
		padding: 200px 64px 64px 0;
		margin-left: max(calc(max(100%, 1517px) * 0.5 + 24px), calc(100% - 764px));
	}

	.hh-hero__heading {
		font-size: min(48px, 2.9vw);
		line-height: 1.0833;
	}
}

/*
 * Tablet 600-1365 (Figma draws 744): Figma's tablet frame (744 x 788) stacks the text block
 * (700px wide, 20px side padding) above the photo, with nothing behind
 * the text. The desktop photo is laid along the bottom at full width
 * (1920 x 768, so 40vw tall) and the text block reserves that height
 * below it, so the text can never reach the dogs or packs, and the text
 * sits on the plain cream background (ink 12.3:1, trust copy above 4.5:1)
 * instead of on the photo. The top 24px of the photo fades into the
 * cream so the stack reads as one banner.
 */
@media (min-width: 600px) and (max-width: 1365px) {
	.hh-hero {
		min-height: 0;
		background-size: 100% auto;
		background-position: center bottom;
	}

	.hh-hero::before {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		bottom: calc(40vw - 24px);
		height: 24px;
		z-index: 1;
		pointer-events: none;
		background: linear-gradient(to bottom, var(--hh-cream), rgba(248, 237, 227, 0));
	}

	.hh-hero__content {
		padding: 72px 40px calc(40vw + 24px);
	}
}

/*
 * Phone: the mobile photo is 428 x 778 with a plain cream top; its plant
 * (the highest non-cream element) starts 43.6% down, so the text block
 * reserves the image height below that line (56.4% of 1.818 x the width)
 * and stays above it, and the image is sized to the width instead of
 * `cover` so the crop cannot slide the dogs up into the text between 428
 * and 599. The trust row stays left of the plant (58% of the width).
 */
@media (max-width: 599px) {
	.hh-hero {
		min-height: 0;
		background-size: 100% auto;
		background-position: center bottom;
	}

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

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

	.hh-hero__content {
		padding: 40px 20px calc(102.5vw + 8px);
		align-items: flex-start;
		text-align: left;
	}

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

	.hh-hero__sub {
		font-size: 18px;
	}

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

	.hh-hero__trust {
		flex-wrap: wrap;
		max-width: 58%;
	}

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

	/* Figma 34349:193494: logo + seal sit on their own line, gap 10. */
	.hh-hero__trust-marks {
		flex-basis: 100%;
		gap: 10px;
	}
}

/*
 * 86eypb6ny (Vita, 7 Oct: "the hero still not responsive"): on phones the
 * photo is sized to the width and anchored to the bottom, so when a longer
 * language (German at 375) makes the text block taller than the photo, the
 * photo's own cream top ends partway down the section and its edge shows
 * as a seam against --hh-cream. Same 24px-style fade the tablet tier uses,
 * placed at the photo's top edge (the photo is 778/428 = 1.8178 x the
 * width tall), 48px so the two creams blend.
 */
@media (max-width: 599px) {
	.hh-hero::before {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		bottom: calc(181.78vw - 48px);
		height: 48px;
		z-index: 1;
		pointer-events: none;
		background: linear-gradient(to bottom, var(--hh-cream), rgba(248, 237, 227, 0));
	}
}

/*
 * Compact hero (z8udzkgq2b, Glendon X3 / HH1 / HH2): H1 plus the photograph of
 * Glendon with Ruby and Poppy, replacing the 607px Bites category hero so the
 * search box, pills and first articles sit above the fold. The two-class
 * selectors beat the single-class saved-hero rules and the inline
 * background-image that bnz_hh_hero_background_css() adds to .hh-hero.
 */
.hh-hero.hh-hero--compact {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	box-sizing: border-box;
	min-height: 0;
	padding: 40px 64px;
	background-image: none;
}

.hh-hero.hh-hero--compact::before {
	display: none;
}

.hh-hero--compact .hh-hero__content {
	flex: 1 1 auto;
	max-width: 640px;
	margin: 0;
	padding: 0;
	gap: 16px;
}

.hh-hero--compact .hh-hero__heading {
	margin: 0;
	font-size: 40px;
	line-height: 44px;
}

.hh-hero--compact .hh-hero__photo {
	position: relative;
	z-index: 2;
	flex: 0 0 auto;
	width: min(420px, 42%);
	margin: 0;
}

.hh-hero--compact .hh-hero__photo-img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 280px;
	object-fit: cover;
	object-position: center 35%;
	border-radius: 12px;
}

@media (max-width: 767px) {
	.hh-hero.hh-hero--compact {
		flex-direction: column;
		align-items: stretch;
		gap: 24px;
		padding: 24px 20px;
	}

	.hh-hero--compact .hh-hero__content {
		max-width: none;
	}

	.hh-hero--compact .hh-hero__heading {
		font-size: 28px;
		line-height: 32px;
	}

	.hh-hero--compact .hh-hero__photo {
		width: 100%;
	}

	.hh-hero--compact .hh-hero__photo-img {
		max-height: 220px;
	}
}