/*
 * Site footer. Figma at 1920: Cooper 2 band, 410px tall, 40px padding.
 * Left half: the site name. Right half: a 6px rule from 940px to 1880px,
 * a 1px divider at 940px from 80px down, content from 980px.
 */

.site-footer {
	padding-block: var(--space-40);
	background: var(--color-cooper-2);
	color: var(--color-forest-a);
}

.site-footer__inner {
	align-items: start;
}

/* The right half starts one gutter early so the rule and divider sit at 940px. */
.site-footer__side {
	position: relative;
	margin-top: calc(var(--stroke-accent) / -2);
	margin-left: calc(-1 * var(--gutter));
	padding-left: var(--gutter);
	border-top: var(--stroke-accent) solid currentColor;
}

.site-footer__side::before {
	content: "";
	position: absolute;
	top: calc(var(--space-40) - var(--stroke-accent) / 2);
	bottom: 0;
	left: 0;
	width: var(--stroke-hairline);
	background: currentColor;
}

.site-footer__body {
	display: flex;
	flex-direction: column;
	min-height: clamp(180px, 15.1042vw, 290px);
	margin-top: calc(var(--space-40) - var(--stroke-accent) / 2);
}

/* Flex keeps the underlined label's padding inside the heading box. */
.site-footer__heading {
	display: flex;
	margin-bottom: var(--space-20);
}

.site-footer__contact {
	font-style: normal;
}

.site-footer__contact a {
	text-decoration: none;
}

.site-footer__address {
	display: inline-block;
	margin-top: 1.25em;
}

.site-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-20);
	align-items: end;
	justify-content: space-between;
	margin-top: auto;
	padding-top: var(--space-40);
}

.site-footer__menu {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-10);
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-footer__menu > li {
	display: flex;
}

.site-footer__legal a {
	color: var(--color-white);
}

@media (max-width: 767px) {
	.site-footer__side {
		margin-top: var(--space-40);
		margin-left: 0;
		padding-left: 0;
	}

	.site-footer__side::before {
		display: none;
	}
}