/* ==========================================================================
   Site footer
   ========================================================================== */

.site-footer {
	/* Measured on live at 390: 44px above the logo lockup. */
	padding-block: var(--section-y-sm) var(--s-7);
	/* Measured on live at 1440: 147px above the logo, 84px below the small
	   print. The phone footer keeps the tighter rhythm above. */
	/* Measured: the footer is a touch darker than the trust band. */
	background: var(--c-footer);
	color: rgba(255, 255, 255, 0.78);
	font-size: var(--fs-sm);
}

.site-footer a {
	color: rgba(255, 255, 255, 0.78);
}

.site-footer a:hover,
.site-footer a:focus-visible {
	color: var(--c-white);
}

/* --- Top row: logo, newsletter, socials ---------------------------------- */

.site-footer__top {
	display: grid;
	justify-items: start;
	gap: var(--s-6);
	padding-bottom: var(--s-7);
	border-bottom: 0;
}

/* The live footer stacks logo, newsletter line and socials in one
   left-aligned column — not a three-across row. */

.site-footer__logo .site-logo__img {
	/* Live's phone footer runs a small lockup and only scales it up on desktop. */
	max-height: 22px;
	width: auto;
}

@media (min-width: 1025px) {
	.site-footer {
		padding-block: var(--s-11) var(--s-10);
	}

	/* Live's footer lockup is 237x85 — noticeably larger than the header's. */
	.site-footer__logo .site-logo__img {
		max-height: 85px;
	}
}

.newsletter__title {
	margin-bottom: 0;
	color: var(--c-white);
	font-family: var(--f-body);
	font-size: var(--fs-sm);
	font-weight: var(--fw-bold);
	line-height: 1.4;
}

.newsletter__form {
	margin-top: var(--s-4);
}

.newsletter__form {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-2);
}

.newsletter__input {
	flex: 1 1 220px;
	min-height: 46px;
	padding: var(--s-3) var(--s-4);
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: var(--r-sm);
	color: var(--c-white);
}

.newsletter__input::placeholder {
	color: rgba(255, 255, 255, 0.5);
}

.newsletter__input:focus {
	border-color: rgba(255, 255, 255, 0.6);
	outline: none;
}

.newsletter__submit {
	min-height: 46px;
	flex: 0 0 auto;
}

.newsletter__hp {
	/* Clipped rather than pushed off-screen: a -9999px offset widens the
	   document and creates horizontal scroll. */
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.newsletter__note {
	margin-top: var(--s-3);
	font-size: var(--fs-xs);
}

.newsletter__note--ok {
	color: var(--c-green);
}

.newsletter__note--error {
	color: #ff9c9c;
}

/* --- Socials ------------------------------------------------------------- */

.socials {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-5);
	margin: 0;
	padding: 0;
	list-style: none;
}

.socials__item {
	margin: 0;
}

.socials__link {
	/* Plain glyphs on the live footer: no ring, no fill. */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* Glyph stays 24px; the hit area is 44 so the icons are tappable. */
	width: 44px;
	height: 44px;
	margin: -10px;
	color: rgba(255, 255, 255, 0.85);
	transition: color var(--t-base);
}

.socials__link:hover {
	color: var(--c-white);
}

.socials__link--inert {
	cursor: default;
	opacity: 0.55;
}

/* --- Link columns -------------------------------------------------------- */

.site-footer__cols {
	/* Live stacks the four link columns one-up on phones. */
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--s-7) var(--s-5);
	padding-block: var(--s-8);
}

@media (min-width: 600px) {
	.site-footer__cols {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 768px) {
	.site-footer__cols {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: var(--s-6);
	}
}

@media (min-width: 1025px) {
	/* Measured off the live footer: four 214px tracks packed to the left.
	   Fixed tracks only above the desktop breakpoint — 4 x 214 overflows a
	   768px viewport. */
	.site-footer__cols {
		grid-template-columns: repeat(4, 214px);
		justify-content: start;
		gap: 0;
	}
}

.footer-col__title {
	margin-bottom: var(--s-4);
	color: var(--c-white);
	font-family: var(--f-display);
	font-size: 1rem;
	font-weight: var(--fw-semibold);
	letter-spacing: 0.02em;
}

.footer-col__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.footer-col__item {
	margin-bottom: var(--s-3);
}

.footer-col__link {
	display: inline-block;
	min-height: 24px;
	line-height: 1.5;
}

/* --- Legal --------------------------------------------------------------- */

.site-footer__legal {
	padding-top: var(--s-6);
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	color: rgba(255, 255, 255, 0.55);
	font-size: var(--fs-2xs);
	line-height: 1.7;
}

.site-footer__legal p {
	margin: 0;
	max-width: 1100px;
}

/* Menu-driven footer columns share the nav walker's markup. */

.footer-col__list.nav__list,
.footer-col .nav__list {
	display: block;
	margin: 0;
	padding: 0;
	list-style: none;
}

.footer-col .nav__item {
	margin-bottom: var(--s-3);
}

.footer-col .nav__link {
	display: inline-block;
	min-height: 24px;
	padding-block: 0;
	color: rgba(255, 255, 255, 0.78);
	font-family: var(--f-body);
	font-size: var(--fs-sm);
	font-weight: var(--fw-regular);
	line-height: 1.5;
	white-space: normal;
}

.footer-col .nav__link:hover {
	color: var(--c-white);
}