/* Site footer */
/* Site footer: white by default, blue (site-footer-dark) on the prospects page */
/* Inner colors come from custom properties, so the modifier needs no descendant selectors */
.site-footer {
	--site-footer-heading: var(--color-blue);
	--site-footer-slogan: var(--color-text);
	--site-footer-link: #56636e;
	--site-footer-line: #e5e5e5;
	box-shadow: inset 0 4px 4px rgba(0, 0, 0, .1); /* soft transition from the block above */
}

.site-footer-dark {
	--site-footer-heading: var(--color-white);
	--site-footer-slogan: var(--color-white);
	--site-footer-link: var(--color-border);
	--site-footer-line: var(--color-border);
	background: var(--color-navy) url(../../images/bg-hex-dark.svg) 0 0 repeat;
}

.site-footer-inner {
	padding-top: 77px;
	padding-bottom: 83px;
}

.site-footer-top {
	display: grid;
	grid-template-columns: 360px 177px 303px 240px 200px;
	padding-bottom: 30px;
	border-bottom: 1px solid var(--site-footer-line);
}

.site-footer-brand {
	min-width: 0;
}

.site-footer-logo {
	display: block;
	width: 171px;
	margin-top: 3px;
}

.site-footer-logo-img {
	width: 171px;
	height: auto;
}

.site-footer-slogan {
	margin-top: 13px;
	font: 400 12px/15px var(--font-text);
	color: var(--site-footer-slogan);
}

.site-footer-socials {
	display: flex;
	gap: 12px;
	margin-top: 11px;
}

.site-footer-social {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border: 1.5px solid #a1a1aa;
	border-radius: 50%;
	color: #a1a1aa;
	transition: color .2s, border-color .2s;
}

.site-footer-social:hover {
	border-color: var(--color-accent);
	color: var(--color-accent);
}

.site-footer-social-icon {
	width: 14px;
	height: 14px;
}

.site-footer-col {
	min-width: 0;
	padding-right: 24px;
}

.site-footer-col-title {
	margin-bottom: 14px;
	font: 600 14px/18px var(--font-title);
	text-transform: uppercase;
	color: var(--site-footer-heading);
}

.site-footer-list-item {
	margin-bottom: 7px;
}

.site-footer-link {
	display: block;
	font: 400 13px/19px var(--font-text);
	color: var(--site-footer-link);
	transition: color .2s;
}

.site-footer-link:hover {
	color: var(--color-accent);
}

.site-footer-phone {
	display: block;
	margin-bottom: -1px;
	font: 600 16px/20px var(--font-text);
	color: var(--site-footer-heading);
	transition: color .2s;
}

.site-footer-phone:hover {
	color: var(--color-accent);
}

.site-footer-text {
	display: block;
	font: 400 13px/19px var(--font-text);
	color: var(--site-footer-link);
}

.site-footer-bottom {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 24px;
	padding-top: 31px;
}

.site-footer-copy {
	font: 400 11px/16px var(--font-text);
	color: #8a9299;
}

.site-footer-legal {
	display: flex;
	gap: 44px;
	margin: -1px 70px 0 0;
}

.site-footer-legal-link {
	display: block;
	font: 400 11px/16px var(--font-text);
	color: #8a9299;
	transition: color .2s;
}

.site-footer-legal-link:hover {
	color: var(--color-accent);
}

@media (max-width: 1279px) {
	.site-footer-top {
		grid-template-columns: 1fr 1fr 1fr;
		gap: 32px 24px;
	}

	.site-footer-brand {
		grid-column: 1 / -1;
	}

	.site-footer-legal {
		margin-right: 0;
	}
}

@media (max-width: 767px) {
	.site-footer-inner {
		padding-top: 32px;
		padding-bottom: 28px;
	}

	.site-footer-top {
		grid-template-columns: 1fr 1fr;
		gap: 28px 16px;
		padding-bottom: 28px;
	}

	.site-footer-logo {
		margin-top: 0;
	}

	.site-footer-slogan {
		margin-top: 12px;
	}

	.site-footer-socials {
		margin-top: 12px;
	}

	.site-footer-col {
		padding-right: 0;
	}

	.site-footer-col-about {
		grid-column: 1;
		grid-row: 2;
	}

	.site-footer-col-buyers {
		grid-column: 2;
		grid-row: 2;
	}

	.site-footer-col-products {
		grid-column: 1 / -1;
		grid-row: 3;
	}

	.site-footer-col-contacts {
		grid-column: 1 / -1;
		grid-row: 4;
	}

	.site-footer-col-title {
		margin-bottom: 8px;
	}

	.site-footer-list-item {
		margin-bottom: 8px;
	}

	.site-footer-bottom {
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
		padding-top: 28px;
	}

	.site-footer-legal {
		flex-wrap: wrap;
		gap: 8px 16px;
		margin-top: 0;
	}
}