/**
 * NovaBP Home — trust bar
 *
 * The credibility strip under the Home hero: a dark rating badge beside the
 * highlight cards, all three on one row over a white band.
 *
 * Self-contained rather than built on `novabp-tax-base`: that file is the Tax
 * Advisor page's foundation and scopes everything under `.nova-tax`, so the
 * handful of values shared with it are restated here the way the header and
 * footer widgets do.
 *
 * Figma reference: NOVABP - Landing Page (Copy), node 16:7457
 * — badge 365:3707, cards 16:7770 and 16:8104.
 */

.nova-home-trust {
	/* Palette — Figma design-system tokens, named after their Figma style. */
	--nova-home-trust-primary: #021137;   /* Primary/500 — badge panel, icon glyph */
	--nova-home-trust-heading: #020f32;   /* Text/Text B — card title */
	--nova-home-trust-body: #35415f;      /* Text/Text Body — card copy */
	--nova-home-trust-surface: #f5f6f8;   /* Grey/50 — card fill */
	--nova-home-trust-border: #dee3ee;    /* Base/Stroke */
	--nova-home-trust-star: #f6af20;      /* Rating stars */
	--nova-home-trust-white: #ffffff;

	--nova-home-trust-font: "Manrope", -apple-system, blinkmacsystemfont, "Segoe UI", roboto, sans-serif;

	/*
	 * The Figma frame is 1440px wide with 80px gutters, so 1280px is the measure
	 * the row was drawn at — past that the white band keeps bleeding to the
	 * viewport edge while the items stop stretching.
	 */
	--nova-home-trust-content-max: 1280px;

	/* All three items are drawn 162px tall; the badge sets it, the cards match. */
	--nova-home-trust-item-height: 162px;

	position: relative;
	width: 100%;
	box-sizing: border-box;

	/*
	 * Inline axis and the bottom edge come from the shared gutter tokens
	 * (style.css), so this band keeps step with every other section at 1366 /
	 * 1024 / 767. The top stays 20px: the bar tucks under the hero above it and
	 * was never drawn with a full section's headroom. `!important` because
	 * Elementor's per-element CSS for the host container outranks a lone class —
	 * it is what the old 1280/767 overrides were escalating past.
	 */
	padding: 20px var(--nova-gutter-x) var(--nova-gutter-y) !important;
	background-color: var(--nova-home-trust-white);
	font-family: var(--nova-home-trust-font);
}

.nova-home-trust *,
.nova-home-trust *::before,
.nova-home-trust *::after {
	box-sizing: border-box;
}

.nova-home-trust p {
	margin: 0;
}

.nova-home-trust h3 {
	margin: 0;
}

.nova-home-trust__inner {
	display: flex;
	align-items: stretch;
	gap: 20px;
	width: 100%;
	max-width: var(--nova-home-trust-content-max);
	margin-inline: auto;
}

/*
 * Shared by the badge and the cards. `.nova-home-icon` only centres its glyph;
 * the size comes from whichever slot the icon sits in, so one class serves the
 * 18px star, the 57px laurel and the 32px card glyph.
 */
.nova-home-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
}

.nova-home-icon svg {
	display: block;
	width: 100%;
	height: 100%;
}

/* ---------------------------------------------------------------------------
 * Trust badge
 * ------------------------------------------------------------------------ */

/*
 * Sized rather than shared: the badge holds two fixed lines of text and the
 * cards divide what the row has left. `flex-basis` (not a width) is what the
 * Badge Width control writes to, so the badge can still give ground on a narrow
 * viewport before the layout wraps.
 */
.nova-home-trust__badge {
	display: flex;
	flex: 0 1 417px;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-width: 0;
	min-height: var(--nova-home-trust-item-height);
	padding: 24px;
	border: 3px solid var(--nova-home-trust-border);
	border-radius: 20px;
	background-color: var(--nova-home-trust-primary);
}

.nova-home-trust__stars {
	display: flex;
	align-items: center;
	gap: 4px;
}

.nova-home-trust__star {
	width: 18px;
	height: 18px;
	color: var(--nova-home-trust-star);
}

.nova-home-trust__badge-body {
	display: flex;
	align-items: center;
	gap: 8px;
}

/*
 * The two wreath halves are the one pair of glyphs that keep their own colour —
 * a gold-to-amber gradient baked into each file — so nothing here paints them.
 */
.nova-home-trust__laurel {
	width: 33px;
	height: 57px;
}

.nova-home-trust__laurel--right {
	height: 56px;
}

.nova-home-trust__badge-text {
	color: var(--nova-home-trust-white);
	font-family: var(--nova-home-trust-font);
	font-size: 20px;
	font-weight: 500;
	line-height: 1.3;
	text-align: center;
	text-transform: none;
	letter-spacing: normal;
}

/* ---------------------------------------------------------------------------
 * Highlight cards
 * ------------------------------------------------------------------------ */

.nova-home-trust__card {
	display: flex;
	flex: 1 1 0;
	align-items: flex-start;
	gap: 24px;
	min-width: 0;
	min-height: var(--nova-home-trust-item-height);
	padding: 24px;
	border: 1px solid var(--nova-home-trust-border);
	border-radius: 20px;
	background-color: var(--nova-home-trust-surface);
}

.nova-home-trust__card-plate {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 12px;
	background-color: var(--nova-home-trust-white);
	color: var(--nova-home-trust-primary);
}

.nova-home-trust__card-glyph {
	width: 32px;
	height: 32px;
}

/*
 * An uploaded SVG comes through Elementor's icon renderer wrapped in an <i>,
 * which the site's icon-font CSS gives a font-size and a line-height. Sizing
 * the wrapper the same as the inline glyph keeps both paths landing on 32px.
 */
.nova-home-trust__card-glyph i,
.nova-home-trust__card-glyph svg {
	display: block;
	width: 100%;
	height: 100%;
	font-size: inherit;
	line-height: 1;
}

.nova-home-trust__card-body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	justify-content: center;
	gap: 4px;
	min-width: 0;
}

/*
 * Scoped with two classes and restating font-family / text-transform /
 * letter-spacing: the site's Elementor Global Kit styles bare tags — its `h3`
 * rule sets Lato, `capitalize` and a negative letter-spacing, and at (0,1,1) it
 * beats a lone class. Two classes score (0,2,0) and win, while still losing on
 * a tie to Elementor's per-page CSS, so the widget's typography controls keep
 * overriding these defaults.
 */
.nova-home-trust .nova-home-trust__card-title {
	color: var(--nova-home-trust-heading);
	font-family: var(--nova-home-trust-font);
	font-size: 20px;
	font-weight: 600;
	line-height: 1.5;
	text-transform: none;
	letter-spacing: normal;
}

.nova-home-trust .nova-home-trust__card-text {
	color: var(--nova-home-trust-body);
	font-family: var(--nova-home-trust-font);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.5;
}

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

/*
 * Three items no longer fit a row at their drawn widths — the badge takes the
 * full width and the cards pair up beneath it, which keeps the badge's two
 * lines from wrapping into three.
 */
@media (max-width: 1024px) {
	.nova-home-trust__inner {
		flex-wrap: wrap;
	}

	.nova-home-trust__badge {
		flex: 1 1 100%;
	}

	.nova-home-trust__card {
		flex: 1 1 280px;
	}
}

@media (max-width: 767px) {
	/* Inline axis and the bottom edge already track the gutter tokens; only the
	   top tuck-under needs tightening on a phone. */
	.nova-home-trust {
		padding-top: 16px !important;
	}

	.nova-home-trust__inner {
		flex-direction: column;
		gap: 16px;
	}

	.nova-home-trust__badge {
		flex: 0 0 auto !important;
		width: 100% !important;
		height: auto !important;
		min-height: 0 !important;
		max-height: none !important;
	}

	.nova-home-trust__laurel {
		width: 26px;
		height: 44px;
	}

	.nova-home-trust__badge-text {
		font-size: 18px;
	}

	.nova-home-trust__card {
		gap: 16px;
		flex: 0 0 auto !important;
		width: 100% !important;
		height: auto !important;
		min-height: 0 !important;
		max-height: none !important;
	}

	.nova-home-trust .nova-home-trust__card-title {
		font-size: 18px;
	}
}