.site-footer {
	background: var(--dark);
	color: color-mix(in srgb, var(--white) 75%, transparent);
	padding-top: var(--section-spacing);
}

/* Match the header's edge inset so the footer logo lines up with the
   nav logo above it, instead of the wider generic .container gutter. */
.site-footer .container {
	width: min(100% - var(--edge-inset), var(--container));
}

.site-footer a {
	color: var(--white);
	text-decoration: none;
}

.site-footer a:hover {
	color: var(--secondary);
}

.footer-grid {
	display: grid;
	grid-template-columns: var(--footer-columns, 1.4fr 1fr 1fr 1.2fr);
	gap: var(--footer-gap, 40px);
	padding-bottom: 50px;
}

.footer-grid h3 {
	color: var(--white);
	font-size: 1.05rem;
	margin: 0 0 20px;
}

.footer-brand .custom-logo {
	display: block;
	width: var(--logo-width);
	max-width: 160px;
	height: auto;
	margin-bottom: 20px;
}

.footer-business-name {
	color: var(--white);
	font-size: 1.3rem;
	font-weight: 700;
	margin: 0 0 15px;
}

.footer-description {
	margin-bottom: 20px;
	line-height: 1.7;
}

.footer-description p:last-child {
	margin-bottom: 0;
}

.footer-social {
	display: flex;
	gap: 14px;
}

.footer-social a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: color-mix(in srgb, var(--white) 10%, transparent);
	color: var(--white);
	transition: background .2s ease;
}

.footer-social a:hover {
	background: var(--secondary);
	color: var(--white);
}

.footer-social svg {
	width: 22px;
	height: 22px;
}

.footer-menu ul,
.footer-services ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 12px;
}

.footer-contact-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 16px;
}

.footer-contact-list li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
}

.footer-contact-list svg {
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	margin-top: 2px;
	color: var(--secondary);
}

.footer-bottom {
	margin-top: 10px;
	padding: 25px 0;
	border-top: 1px solid color-mix(in srgb, var(--white) 12%, transparent);
}

.footer-bottom p {
	margin: 0;
	font-size: .85rem;
	opacity: .6;
}

@media (max-width: 991px) {

	.footer-grid {
		grid-template-columns: 1fr 1fr;
		gap: 40px;
	}

}

@media (max-width: 575px) {

	.footer-grid {
		grid-template-columns: 1fr;
		gap: 35px;
	}

}

/*
=========================================
LIGHT FOOTER
=========================================
| Toggle in Customizer > Branding > Footer Colour Style.
| Use this when your logo isn't a light/knockout version
| meant to sit on a dark background.
*/

.site-footer.footer-light {
	background: var(--white);
	color: var(--text);
	border-top: 1px solid var(--border);
}

.site-footer.footer-light a {
	color: var(--text);
}

.site-footer.footer-light a:hover {
	color: var(--secondary);
}

.site-footer.footer-light .footer-grid h3,
.site-footer.footer-light .footer-business-name {
	color: var(--primary);
}

.site-footer.footer-light .footer-social a {
	background: var(--accent);
	color: var(--primary);
}

.site-footer.footer-light .footer-social a:hover {
	background: var(--secondary);
	color: var(--white);
}

.site-footer.footer-light .footer-contact-list svg {
	color: var(--secondary);
}

.site-footer.footer-light .footer-bottom {
	border-top-color: var(--border);
}

.site-footer.footer-light .footer-bottom p {
	opacity: .7;
}