/**
 * Site footer, design-faithful styles for template-parts/footer.php.
 *
 * Matches the design system footer (ui_kits/website/Footer.jsx + page.css):
 * navy-900 band with a wave top edge, brand column, uppercase sage headings,
 * navy-200 links, hairline bottom bar. Tokens come from colors_and_type.css.
 *
 * Selector note: the footer renders inside an Elementor shortcode widget, so
 * every rule is scoped `.fv-footer …` (two classes). That outranks Elementor's
 * `.elementor img { height: auto }` reset and `.elementor-kit-… a` link colors
 * regardless of stylesheet load order, do not "simplify" to single classes.
 */

.fv-footer {
	position: relative;
	background: #222222; /* charcoal per client 2026-07-14 (was --navy-900) */
	color: #fff;
	font-family: var(--font-body, 'Hanken Grotesk', sans-serif);
	/* The Elementor kit sets body line-height in `em`, so a COMPUTED 28px
	   inherits into every element here and inflates each row's line box
	   (the block strut, not just the text). The design's body declares no
	   line-height, reset to `normal` at the root; elements that need a
	   specific leading (e.g. the description) set their own. */
	line-height: normal;
}

/* Wave top edge, sits just above the footer, overlapping the section before it. */
.fv-footer .fv-footer-wave {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	transform: translateY(-99%);
	line-height: 0;
	pointer-events: none;
}
.fv-footer .fv-footer-wave svg {
	display: block;
	width: 100%;
	height: 56px;
}

/* Design: maxWidth 1200, padding 68px 28px 40px. */
.fv-footer .fv-footer-inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 68px 28px 40px;
}

/* Brand column + one equal column per menu (count set inline by the template).
   Design: gridTemplateColumns '1.5fr 1fr 1fr 1fr', gap 40. */
.fv-footer .fv-footer-grid {
	display: grid;
	grid-template-columns: 1.5fr repeat(var(--fv-foot-cols, 3), 1fr);
	gap: 40px;
}

/* ---------------- Brand column ---------------- */
.fv-footer .fv-footer-logo-link {
	display: inline-block;
	margin-bottom: 18px; /* design: logo marginBottom 18 */
	line-height: 0;
}
/* Design: height 52, width auto. Beats `.elementor img { height:auto }`. */
.fv-footer .fv-footer-logo {
	height: 52px;
	width: auto;
	max-width: none;
	display: block;
}
/* Design: navy-200, 14.5px, line-height 1.7, maxWidth 300, margin 0 0 18px. */
.fv-footer .fv-footer-desc {
	color: var(--navy-200, #C9DEF0);
	font-size: 14.5px;
	line-height: 1.7;
	max-width: 300px;
	margin: 0 0 18px;
}
.fv-footer .fv-footer-social {
	display: flex;
	gap: 10px;
}
/* Design: 38px circle, white @ 8%, 17px white icon, sage-600 on hover. */
.fv-footer .fv-footer-social-link {
	width: 38px;
	height: 38px;
	border-radius: var(--radius-circle, 50%);
	background: rgba(255, 255, 255, 0.08);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	transition: background-color 0.18s var(--ease-standard, ease);
}
.fv-footer .fv-footer-social-link:hover,
.fv-footer .fv-footer-social-link:focus-visible {
	background: var(--sage-600, #61907E);
	color: #fff;
}

/* ---------------- Menu columns ---------------- */
/* Design: 13px / 700 / 0.12em tracking / uppercase / sage-300 / 16 below. */
.fv-footer .fv-footer-heading {
	font-family: var(--font-body, 'Hanken Grotesk', sans-serif);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--sage-300, #BFD6CC);
	margin-bottom: 16px;
	line-height: normal; /* don't inherit the kit's computed 28px */
}
/* Design: column flex, gap 11. */
.fv-footer .fv-footer-links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 11px;
}
.fv-footer .fv-footer-links li {
	margin: 0;
	padding: 0;
	line-height: normal; /* the li's own strut sets the row height, keep it at the design's value */
}
/* Design: navy-200, 14.5px, no underline; white on hover.
   Scoped to outrank the Elementor kit's global link color/hover.
   line-height: the kit sets body line-height in `em`, so its COMPUTED 28px
   inherits into these 14.5px links and inflates each row, the design's body
   has no line-height (normal ≈ 20px). Declare it explicitly to match. */
.fv-footer .fv-footer-links a {
	color: var(--navy-200, #C9DEF0);
	font-size: 14.5px;
	font-weight: 400;
	line-height: normal;
	text-decoration: none;
	transition: color 0.15s ease;
}
.fv-footer .fv-footer-links a:hover,
.fv-footer .fv-footer-links a:focus-visible {
	color: #fff;
}

/* ---------------- Bottom bar ---------------- */
/* Design: hairline @ 12% white, marginTop 44, paddingTop 24, navy-300 13px. */
.fv-footer .fv-footer-bottom {
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	margin-top: 44px;
	padding-top: 24px;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
	color: var(--navy-300, #9DBAD6);
	font-size: 13px;
	line-height: normal; /* don't inherit the kit's computed 28px */
}

/* Bottom-bar right group: Privacy Policy link before the crisis note. */
.fv-footer .fv-footer-bottom-right {
	display: inline-flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
}
.fv-footer .fv-footer-privacy {
	color: inherit;
	text-decoration: none;
}
.fv-footer .fv-footer-privacy:hover,
.fv-footer .fv-footer-privacy:focus-visible {
	color: #fff;
	text-decoration: underline;
	text-underline-offset: 2px;
}
.fv-footer .fv-footer-sep {
	opacity: 0.6;
}

/* ---------------- Responsive (design page.css breakpoints) ---------------- */
@media (max-width: 980px) {
	.fv-footer .fv-footer-grid {
		grid-template-columns: 1fr 1fr;
	}
}
@media (max-width: 600px) {
	.fv-footer .fv-footer-grid {
		grid-template-columns: 1fr;
		gap: 32px;
	}
	.fv-footer .fv-footer-inner {
		padding: 56px 20px 32px;
	}
}