/*
 * footer.css — five-column footer and legal bar.
 * Depends on the tokens in main.css.
 */

.wfm-footer {
	margin-top: 96px;
	border-top: var(--wfm-rule);
	background: var(--wfm-white);
}

.wfm-footer__grid {
	padding: 40px var(--wfm-pad);
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) repeat(4, minmax(0, 1fr));
	gap: 40px;
	max-width: var(--wfm-max);
	margin: 0 auto;
}

.wfm-footer__title {
	margin: 0;
	font-size: 22px;
	font-weight: 900;
	letter-spacing: -0.05em;
	text-transform: uppercase;
}

.wfm-footer__blurb {
	margin: 10px 0 18px;
	font-size: 14px;
	line-height: 1.55;
	max-width: 280px;
}

/* Link columns */
.wfm-footer__col {
	display: flex;
	flex-direction: column;
	gap: 8px;
	font-size: 14px;
}

.wfm-footer__heading {
	font-weight: 700;
}

/* Legal bar */
.wfm-footer__legal {
	padding: 18px var(--wfm-pad) 28px;
	border-top: 1px solid var(--wfm-powder);
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
	font-size: 12px;
	color: var(--wfm-slate);
	max-width: var(--wfm-max);
	margin: 0 auto;
}

.wfm-footer__legal a {
	color: var(--wfm-slate);
}

.wfm-footer__legal a:hover {
	color: var(--wfm-peach);
}

.wfm-footer__legal-links {
	display: flex;
	gap: 18px;
	flex-wrap: wrap;
}

@media (max-width: 900px) {
	.wfm-footer__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.wfm-footer__brand {
		grid-column: 1 / -1;
	}
}

@media (max-width: 520px) {
	.wfm-footer__grid {
		grid-template-columns: 1fr;
	}
}