/* Pattern band above the footer */
.footer-band {
	position: relative;
	height: 73px;
	overflow: hidden;
}

.footer-band::before {
	content: "";
	position: absolute;
	inset: 0;
	background: url("../../images/footer-pattern.webp") repeat-x -6.5px -44.34px / 485.05px 161.68px;
	opacity: 0.6;
}

/* Footer bar */
.site-footer {
	background: var(--color-soft-blue);
	color: var(--color-blue);
	font-size: 15px;
	line-height: 1.43;
}

.site-footer__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 40px;
	min-height: 56px;
	padding: 10px 40px;
}

.site-footer__logo,
.site-footer__nav {
	display: none;
}

.site-footer__copyright {
	margin: 0;
}

.site-footer__privacy,
.site-footer__credit {
	flex: 0 0 auto;
	text-decoration: underline;
}

.site-footer__privacy {
	margin-left: auto;
}

.site-footer__credit {
	transition: opacity 0.2s ease;
}

.site-footer__credit:hover {
	opacity: 0.7;
}

@media (max-width: 1100px) {
	.site-footer__inner {
		gap: 24px;
		padding-inline: 24px;
	}
}

@media (max-width: 767px) {
	.footer-band {
		height: 40px;
	}

	.footer-band::before {
		background-position: calc(50% - 265.34px) -24.3px;
		background-size: 265.78px 88.59px;
	}

	.site-footer {
		position: relative;
	}

	/* White fade at the bottom, as in the mobile mockup */
	.site-footer::after {
		content: "";
		position: absolute;
		inset: auto 0 0;
		height: 106px;
		background: linear-gradient(0deg, var(--color-white) 86.97%, rgba(255, 255, 255, 0) 100%);
		pointer-events: none;
	}

	.site-footer__inner {
		position: relative;
		z-index: 1;
		flex-direction: column;
		justify-content: center;
		gap: 16px;
		min-height: 0;
		padding: 20px 24px 106px;
		text-align: center;
	}

	.site-footer__logo {
		position: relative;
		display: block;
		order: 0;
		width: 260px;
		max-width: 100%;
		height: 30px;
		margin: 20px 0 4px;
		overflow: hidden;
	}

	.site-footer__logo img {
		position: absolute;
		left: -5.31%;
		top: -62.38%;
		display: block;
		width: 115.25%;
		max-width: none;
		height: 230.59%;
		object-fit: fill;
	}

	.site-footer__nav {
		order: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 16px;
	}

	.site-footer__privacy {
		order: 2;
		margin-left: 0;
		text-decoration: none;
	}

	.site-footer__credit {
		order: 2;
		text-decoration: none;
	}

	.site-footer__copyright {
		order: 3;
		max-width: 342px;
		margin-top: 24px;
		font-size: 13px;
	}
}