/**
 * footer.css — brand rows, mega-footer columns, legal bar.
 *
 * No app-store badge row: the app is distributed from the website, so that
 * markup does not exist in the templates at all.
 */

.ils-site-footer {
	margin-top: var(--ils-sp-7);
	background: var(--ils-chrome-bg);
	color: var(--ils-chrome-fg);
}

.ils-site-footer__inner {
	max-width: var(--ils-max-width);
	margin: 0 auto;
	padding: var(--ils-sp-6) var(--ils-gutter);
}

.ils-site-footer a {
	color: var(--ils-gray-300);
}

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

/* ---------- Brand rows ---------- */

/*
 * The newsletter band above the footer. It sits outside .ils-site-footer so it
 * keeps the light surface while the footer itself stays dark chrome.
 */
.ils-footer-newsletter {
	border-top: var(--ils-border-hairline);
	background: var(--ils-surface);
}

.ils-footer-newsletter__inner {
	max-width: var(--ils-max-width);
	margin: 0 auto;
	padding: 0 var(--ils-gutter);
}

.ils-footer-newsletter .ils-newsletter {
	margin: 0;
	background: transparent;
}

.ils-footer-brand {
	display: flex;
	gap: var(--ils-sp-4);
	align-items: center;
	flex-wrap: wrap;
	justify-content: space-between;
	padding-bottom: var(--ils-sp-5);
	border-bottom: 1px solid var(--ils-gray-700);
}

.ils-footer-brand__logo img {
	/* The logo is red-on-dark here; invert keeps one asset serving both. */
	filter: invert(1) brightness(2);
}

.ils-footer-brand__links {
	display: flex;
	gap: var(--ils-sp-1);
	align-items: center;
	font-size: var(--ils-fs-sm);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.ils-footer-brand__sep {
	color: var(--ils-gray-600);
}

.ils-footer-brand__social {
	display: flex;
	gap: var(--ils-sp-3);
	align-items: center;
}

.ils-footer-brand__social-link {
	display: grid;
	place-items: center;
	width: 2rem;
	height: 2rem;
	border: 1px solid var(--ils-gray-700);
}

.ils-footer-brand__social-link:hover {
	border-color: var(--ils-red);
	background: var(--ils-red);
	color: var(--ils-white);
}

/* ---------- Mega-footer columns ---------- */

.ils-site-footer__columns {
	padding: var(--ils-sp-6) 0;
}

.ils-site-footer__columns .ils-col-group__title {
	border-bottom-color: var(--ils-gray-700);
	color: var(--ils-white);
}

.ils-site-footer__columns .ils-col-group__title a {
	color: var(--ils-white);
}

.ils-site-footer__columns .ils-col-group__list a {
	color: var(--ils-gray-400);
	font-size: var(--ils-fs-xs);
}

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

.ils-site-footer__legal {
	display: flex;
	gap: var(--ils-sp-4);
	align-items: center;
	flex-wrap: wrap;
	justify-content: space-between;
	padding-top: var(--ils-sp-5);
	border-top: 1px solid var(--ils-gray-700);
	color: var(--ils-gray-400);
	font-size: var(--ils-fs-xs);
}

.ils-site-footer__copy {
	margin: 0;
}

.ils-legal-nav {
	display: flex;
	gap: var(--ils-sp-4);
	flex-wrap: wrap;
}

.ils-legal-nav a {
	font-size: var(--ils-fs-xs);
}