/* Site footer. */

.site-footer {
	padding-block: var(--section-padding) var(--space-m);
	background: var(--primary);
	color: var(--base);
}

.site-footer__inner {
	width: min(
		calc(100% - var(--section-gutter) - var(--section-gutter)),
		var(--layout-wide)
	);
	margin-inline: auto;
}

.site-footer__main {
	display: grid;
	grid-template-columns: minmax(13rem, 17rem) minmax(20rem, 25rem) minmax(20rem, 25.125rem);
	justify-content: space-between;
	align-items: start;
	column-gap: var(--space-l);
}

.site-footer__brand {
	padding-top: 0;
}

.site-footer__logo-link {
	display: inline-flex;
	width: min(100%, 17rem);
}

.site-footer__logo {
	display: block;
	width: 100%;
	height: auto;
}

.site-footer__wordmark {
	font-family: var(--font-heading);
	font-size: var(--text-2xl);
	line-height: 1;
}

.site-footer__navigation,
.site-footer__contact {
	font-family: var(--font-body);
	font-size: var(--text-s);
	font-weight: 400;
	line-height: 1.6;
}

.site-footer__menu {
	display: grid;
	grid-auto-flow: column;
	grid-template-rows: repeat(4, auto);
	grid-template-columns: repeat(2, minmax(0, 10rem));
	column-gap: var(--space-l);
	row-gap: var(--space-xs);
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-footer__menu a,
.site-footer__contact a {
	color: inherit;
	text-decoration: none;
}

.site-footer__menu a:hover,
.site-footer__menu a:focus-visible,
.site-footer__contact a:hover,
.site-footer__contact a:focus-visible {
	text-decoration: underline;
	text-decoration-color: var(--accent);
	text-underline-offset: 0.2em;
}

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

.site-footer__contact-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-m);
	margin-top: var(--space-m);
}

.site-footer__contact-links a {
	padding-bottom: var(--space-xxs);
	border-bottom: 1px solid var(--accent);
	font-size: var(--text-xs);
	font-weight: 500;
	line-height: 1.55;
}

.site-footer__social-row {
	display: flex;
	align-items: center;
	gap: var(--space-xxs);
	margin-top: var(--space-m);
}

.site-footer__badges {
	flex: 0 1 11.2rem;
	width: 11.2rem;
	height: auto;
	max-height: 5.4rem;
	object-fit: contain;
	object-position: left center;
}

.site-footer__social {
	display: flex;
	flex: 0 0 auto;
	gap: var(--space-xxs);
}

.site-footer__social a,
.site-footer__social-placeholder {
	display: grid;
	width: clamp(2rem, calc(1.69rem + 0.3vw), 2.512rem);
	aspect-ratio: 1;
	place-items: center;
	border: 0;
	border-radius: 50%;
	font-size: var(--text-xs);
	line-height: 1;
}

.site-footer__legal {
	display: flex;
	justify-content: space-between;
	gap: var(--space-m);
	margin-top: var(--space-m);
	font-family: var(--font-body);
	font-size: var(--text-s);
	line-height: 1.6;
}

.site-footer__legal p {
	margin: 0;
}

@media (max-width: 80rem) {
	.site-footer__main {
		grid-template-columns: minmax(12rem, 17rem) minmax(18rem, 25rem) minmax(17rem, 22rem);
	}

	.site-footer__menu {
		column-gap: var(--space-m);
	}
}

@media (max-width: 64rem) {
	.site-footer__main {
		grid-template-columns: minmax(12rem, 17rem) minmax(18rem, 1fr);
		row-gap: var(--space-l);
	}

	.site-footer__contact {
		grid-column: 2;
	}

	.site-footer__menu {
		grid-template-rows: repeat(4, auto);
	}
}

@media (max-width: 48rem) {
	.site-footer {
		padding-block: var(--space-l) var(--space-m);
	}

	.site-footer__main {
		grid-template-columns: minmax(0, 1fr);
		row-gap: var(--space-l);
	}

	.site-footer__logo-link {
		width: min(100%, 13rem);
	}

	.site-footer__navigation,
	.site-footer__contact {
		grid-column: 1;
	}

	.site-footer__menu {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-template-rows: repeat(4, auto);
		column-gap: var(--space-m);
		row-gap: var(--space-xs);
		font-size: var(--text-xs);
	}

	.site-footer__contact-links {
		gap: var(--space-s);
	}

	.site-footer__social-row {
		flex-wrap: wrap;
	}

	.site-footer__legal {
		flex-direction: column;
		gap: var(--space-xxs);
		margin-top: var(--space-l);
		font-size: var(--text-xs);
	}
}

.site-footer__social img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.site-footer__social a { transition: opacity var(--transition); }
.site-footer__social a:is(:hover, :focus-visible) { opacity: 0.75; }
.site-footer__social a:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }