/* ============================================
   FOOTER STYLES
   3DAYS GC - Footer
   ============================================ */

.site-footer {
	background-color: #282828; /* bg-[#282828] */
	color: rgb(var(--color-white));
	padding: 3rem 0; /* py-12 = 48px */
}

.site-footer .container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 var(--spacing-4); /* px-4 = 16px */
}

.footer-content {
	display: grid;
	grid-template-columns: 1fr; /* grid-cols-1 */
	gap: var(--spacing-2xl); /* gap-8 = 32px */
	margin-bottom: 0;
}

@media (min-width: 768px) {
	.footer-content {
		grid-template-columns: repeat(2, 1fr); /* md:grid-cols-2 */
	}
}

@media (min-width: 1024px) {
	.footer-content {
		grid-template-columns: repeat(4, 1fr); /* lg:grid-cols-4 */
	}
}

/* ============================================
   FOOTER COLUMNS
   ============================================ */

.footer-col {
	/* Column container */
}

.footer-heading {
	font-family: var(--font-display);
	font-weight: var(--font-weight-bold);
	font-size: var(--font-size-xl); /* text-xl = 20px */
	margin-bottom: var(--spacing-4); /* mb-4 = 16px */
	color: rgb(var(--color-primary)); /* text-primary */
}

/* ============================================
   FOOTER COMPANY INFO (First Column)
   ============================================ */

.footer-company-title {
	font-family: var(--font-display);
	font-weight: var(--font-weight-bold);
	font-size: var(--font-size-xl); /* text-xl = 20px */
	margin-bottom: var(--spacing-4); /* mb-4 = 16px */
	color: rgb(var(--color-primary)); /* text-primary */
}

.footer-company-description {
	color: rgb(var(--gray-300)); /* text-gray-300 */
	margin-bottom: var(--spacing-4); /* mb-4 = 16px */
	line-height: 1.6;
}

.footer-social-links {
	display: flex;
	gap: var(--spacing-4); /* space-x-4 = 16px */
}

.footer-social-link {
	color: rgb(var(--gray-300)); /* text-gray-300 */
	transition: color var(--transition-base) var(--ease-in-out);
	font-size: var(--font-size-lg); /* text-lg = 18px */
	padding: var(--spacing-2); /* p-2 = 8px */
	border-radius: 9999px; /* rounded-full */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
}

.footer-social-link:hover {
	color: rgb(var(--color-white)); /* hover:text-white */
	background-color: #3b3b3b; /* hover:bg-[#3b3b3b] */
}

.footer-social-link svg {
	width: 1em;
	height: 1em;
}

/* ============================================
   FOOTER MENU LISTS
   ============================================ */

.footer-menu,
.footer-services-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--spacing-2); /* space-y-2 = 8px */
}

.footer-menu li,
.footer-services-list li {
	margin: 0;
	padding: 0;
}

.footer-menu a,
.footer-services-list a {
	color: rgb(var(--gray-300)); /* text-gray-300 */
	text-decoration: none;
	transition: all 0.3s ease; /* transition-all duration-300 */
	display: inline-block;
}

.footer-menu a:hover,
.footer-services-list a:hover {
	color: rgb(var(--color-white)); /* hover:text-white */
	transform: translateX(0.25rem); /* hover:translate-x-1 = 4px */
}

/* ============================================
   FOOTER CONTACT INFO
   ============================================ */

.footer-contact-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--spacing-2); /* space-y-2 = 8px */
}

.footer-contact-item {
	display: flex;
	align-items: start;
	gap: var(--spacing-3); /* mr-3 = 12px */
}

.footer-contact-icon {
	color: rgb(var(--color-primary)); /* text-primary */
	margin-top: 0.25rem; /* mt-1 */
	flex-shrink: 0;
}

.footer-contact-icon svg {
	width: 1em;
	height: 1em;
}

.footer-contact-text {
	color: rgb(var(--gray-300)); /* text-gray-300 */
}

/* ============================================
   FOOTER BOTTOM (Copyright)
   ============================================ */

.footer-bottom {
	border-top: 1px solid #1f2937; /* border-t border-gray-800 */
	margin-top: 2.5rem; /* mt-10 = 40px */
	padding-top: var(--spacing-6); /* pt-6 = 24px */
	text-align: center;
}

.footer-copyright {
	color: rgb(var(--gray-300)); /* text-gray-300 */
	margin: 0;
}

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

@media (max-width: 768px) {
	.site-footer {
		padding: var(--spacing-3xl) 0 var(--spacing-2xl);
	}

	.footer-content {
		gap: var(--spacing-xl);
	}
}