/**
 * A2Z Woo Solutions
 *
 * Site Footer
 *
 * @package A2Z_Woo_Solutions
 */

/* =========================================================
   SITE FOOTER
   ========================================================= */

.site-footer {
	position: relative;
	margin-top: 100px;
	overflow: hidden;

	background: var(--bp-white);
	color: var(--bp-text);

	border-top: 1px solid var(--bp-border);
}

/* =========================================================
   DECORATIVE BACKGROUND
   ========================================================= */

.site-footer::before {
	content: "";
	position: absolute;
	top: -180px;
	left: -120px;

	width: 420px;
	height: 420px;

	background: var(--bp-blue-pale);
	border-radius: 50%;

	filter: blur(10px);
	opacity: 0.55;

	pointer-events: none;

	animation: footer-float-blue 9s ease-in-out infinite;
}

.site-footer::after {
	content: "";
	position: absolute;
	right: -140px;
	bottom: -220px;

	width: 440px;
	height: 440px;

	background: var(--bp-pink-pale);
	border-radius: 50%;

	filter: blur(12px);
	opacity: 0.5;

	pointer-events: none;

	animation: footer-float-pink 11s ease-in-out infinite;
}

/* =========================================================
   FOOTER MAIN
   ========================================================= */

.footer-container {
	position: relative;
	z-index: 1;

	width: min(1200px, calc(100% - 48px));
	margin: 0 auto;
	padding: 72px 0 64px;

	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 80px;
}

/* =========================================================
   BRAND
   ========================================================= */

.footer-brand {
	width: min(100%, 450px);
}

.footer-logo {
	position: relative;

	display: inline-flex;
	align-items: center;

	margin-bottom: 20px;

	color: var(--bp-text);

	font-size: 23px;
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -0.6px;

	text-decoration: none;

	transition:
		transform 220ms ease,
		color 220ms ease;
}

.footer-logo span {
	color: var(--bp-blue);
	transition: color 220ms ease;
}

.footer-logo:hover {
	color: var(--bp-blue);
	transform: translateY(-2px);
}

.footer-logo:hover span {
	color: var(--bp-pink);
}

.footer-description {
	max-width: 410px;
	margin: 0;

	color: var(--bp-text-muted);

	font-size: 14px;
	line-height: 1.8;
}

/* =========================================================
   FOOTER LINKS
   ========================================================= */

.footer-links {
	display: flex;
	gap: 100px;
}

.footer-column {
	min-width: 130px;
}

.footer-column h3 {
	position: relative;

	display: inline-block;

	margin: 0 0 22px;

	color: var(--bp-text);

	font-size: 14px;
	font-weight: 700;
	line-height: 1.4;
}

.footer-column h3::after {
	content: "";

	position: absolute;
	left: 0;
	bottom: -8px;

	width: 24px;
	height: 2px;

	background: linear-gradient(
		90deg,
		var(--bp-blue),
		var(--bp-pink)
	);

	border-radius: 999px;
}

.footer-column ul {
	display: flex;
	flex-direction: column;
	gap: 11px;

	margin: 0;
	padding: 0;

	list-style: none;
}

.footer-column li {
	margin: 0;
	padding: 0;
}

.footer-column a {
	position: relative;

	display: inline-block;

	color: var(--bp-text-muted);

	font-size: 14px;
	line-height: 1.6;

	text-decoration: none;

	transition:
		color 180ms ease,
		transform 180ms ease;
}

.footer-column a::after {
	content: "";

	position: absolute;
	left: 0;
	bottom: 0;

	width: 0;
	height: 1px;

	background: linear-gradient(
		90deg,
		var(--bp-blue),
		var(--bp-pink)
	);

	transition: width 220ms ease;
}

.footer-column a:hover,
.footer-column a:focus-visible {
	color: var(--bp-blue);
	transform: translateX(3px);
}

.footer-column a:hover::after,
.footer-column a:focus-visible::after {
	width: 100%;
}

/* =========================================================
   FOOTER BOTTOM
   ========================================================= */

.footer-bottom {
	position: relative;
	z-index: 1;

	border-top: 1px solid var(--bp-border);
	background: rgba(252, 252, 255, 0.72);
}

.footer-bottom-container {
	width: min(1200px, calc(100% - 48px));
	margin: 0 auto;
	padding: 22px 0;

	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}

.footer-bottom p {
	margin: 0;

	color: var(--bp-text-light);

	font-size: 12px;
	line-height: 1.6;
}

.footer-bottom p:last-child {
	color: var(--bp-text-muted);
}

/* =========================================================
   SUBTLE TOP GLOW
   ========================================================= */

.site-footer .footer-container::before {
	content: "";

	position: absolute;
	top: 0;
	left: 50%;

	width: 180px;
	height: 2px;

	transform: translateX(-50%);

	background: linear-gradient(
		90deg,
		transparent,
		var(--bp-blue),
		var(--bp-pink),
		transparent
	);

	border-radius: 999px;

	opacity: 0.8;
}

/* =========================================================
   ANIMATIONS
   ========================================================= */

@keyframes footer-float-blue {

	0%,
	100% {
		transform: translate3d(0, 0, 0) scale(1);
	}

	50% {
		transform: translate3d(35px, 25px, 0) scale(1.06);
	}

}

@keyframes footer-float-pink {

	0%,
	100% {
		transform: translate3d(0, 0, 0) scale(1);
	}

	50% {
		transform: translate3d(-30px, -25px, 0) scale(1.05);
	}

}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 900px) {

	.footer-container {
		gap: 50px;
	}

	.footer-links {
		gap: 60px;
	}

}

@media (max-width: 768px) {

	.site-footer {
		margin-top: 72px;
	}

	.footer-container {
		width: min(100% - 40px, 600px);
		padding: 56px 0 48px;

		flex-direction: column;
		gap: 44px;
	}

	.footer-brand {
		width: 100%;
	}

	.footer-links {
		width: 100%;
		gap: 72px;
	}

	.footer-bottom-container {
		width: min(100% - 40px, 600px);
		padding: 20px 0;

		flex-direction: column;
		align-items: flex-start;
		gap: 6px;
	}

}

@media (max-width: 480px) {

	.footer-container {
		padding: 48px 0 42px;
	}

	.footer-links {
		gap: 40px;
	}

	.footer-logo {
		font-size: 21px;
	}

	.footer-description {
		font-size: 13px;
	}

	.footer-column a {
		font-size: 13px;
	}

	.footer-column h3 {
		font-size: 13px;
	}

	.footer-bottom p {
		font-size: 11px;
	}

}

/* =========================================================
   REDUCE MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

	.site-footer::before,
	.site-footer::after {
		animation: none;
	}

	.footer-logo,
	.footer-column a {
		transition: none;
	}

}