/**
 * Footer Styles
 * BEM: .site-footer, .site-footer__inner, .site-footer__logo, .site-footer__links, .site-footer__contact
 */

/* ==========================================================================
   Footer Container
   ========================================================================== */

.site-footer {
	background-color: var(--wp--preset--color--background);
	padding: var(--wp--preset--spacing--50) 0;
}

.site-footer__inner {
	display: grid;
	grid-template-columns: 1fr 2fr;
	gap: 60px;
	max-width: 1920px;
	margin: 0 auto;
	padding: 0 var(--wp--preset--spacing--50);
	align-items: start;
}

/* ==========================================================================
   Footer Logo
   ========================================================================== */

.site-footer__logo {
	max-width: 300px;
}

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

/* ==========================================================================
   Footer Columns
   ========================================================================== */

.site-footer__columns {
	display: flex;
	gap: 108px;
	justify-content: flex-end;
}

.site-footer__column {
	display: flex;
	flex-direction: column;
	gap: 40px;
}

/* Column Headings */
.site-footer__heading {
	font-family: var(--wp--preset--font-family--dm-sans);
	font-size: 18px;
	font-weight: 600;
	color: var(--wp--preset--color--primary);
	text-transform: uppercase;
	letter-spacing: 0.36px;
	line-height: 32px;
	margin: 0;
}

/* ==========================================================================
   Quick Links
   ========================================================================== */

.site-footer__links-list {
	display: flex;
	flex-direction: column;
	gap: 25px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.site-footer__links-list a {
	font-family: var(--wp--preset--font-family--dm-sans);
	font-size: 16px;
	font-weight: 400;
	color: var(--wp--preset--color--text-muted);
	text-decoration: none;
	letter-spacing: 0.32px;
	line-height: 30px;
	transition: color 0.2s ease;
}

.site-footer__links-list a:hover,
.site-footer__links-list a:focus {
	color: var(--wp--preset--color--primary);
}

/* ==========================================================================
   Contact Info
   ========================================================================== */

.site-footer__contact-info {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.site-footer__contact-details {
	font-family: var(--wp--preset--font-family--dm-sans);
	font-size: 16px;
	font-weight: 400;
	color: var(--wp--preset--color--text-muted);
	letter-spacing: 0.32px;
	line-height: 30px;
}

.site-footer__contact-details a {
	color: var(--wp--preset--color--text-muted);
	text-decoration: none;
	transition: color 0.2s ease;
}

.site-footer__contact-details a:hover,
.site-footer__contact-details a:focus {
	color: var(--wp--preset--color--primary);
}

/* Social Icons */
.site-footer__social {
	display: flex;
	gap: 16px;
	align-items: center;
}

.site-footer__social a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 25px;
	height: 25px;
	color: var(--wp--preset--color--primary);
	transition: opacity 0.2s ease;
}

.site-footer__social a:hover,
.site-footer__social a:focus {
	opacity: 0.7;
}

.site-footer__social svg {
	width: 100%;
	height: 100%;
	fill: currentColor;
}

/* ==========================================================================
   Copyright Bar
   ========================================================================== */

.site-footer__copyright {
	text-align: center;
	padding-top: var(--wp--preset--spacing--40);
	margin-top: var(--wp--preset--spacing--40);
	border-top: 1px solid rgba(1, 102, 108, 0.1);
}

.site-footer__copyright p {
	font-family: var(--wp--preset--font-family--dm-sans);
	font-size: 14px;
	font-weight: 400;
	color: var(--wp--preset--color--primary);
	margin: 0;
	text-transform: capitalize;
}

.site-footer__copyright a {
	color: var(--wp--preset--color--primary);
	text-decoration: underline;
	transition: opacity 0.2s ease;
}

.site-footer__copyright a:hover,
.site-footer__copyright a:focus {
	opacity: 0.7;
}

/* ==========================================================================
   Responsive Styles
   ========================================================================== */

@media (max-width: 1024px) {
	.site-footer__inner {
		grid-template-columns: 1fr;
		gap: 40px;
	}

	.site-footer__logo {
		max-width: 250px;
		margin: 0 auto;
	}

	.site-footer__columns {
		justify-content: center;
		gap: 60px;
	}
}

@media (max-width: 768px) {
	.site-footer__columns {
		flex-direction: column;
		gap: 40px;
		align-items: center;
		text-align: center;
	}

	.site-footer__column {
		align-items: center;
	}

	.site-footer__links-list {
		align-items: center;
	}

	.site-footer__contact-info {
		align-items: center;
	}

	.site-footer__contact-details {
		text-align: center;
	}
}