/**
 * Centi Theme — assets/css/footer.css
 *
 * Site footer: widget columns, bottom bar, copyright.
 *
 * @package CentiTheme
 */

/* -------------------------------------------------------------------------
 * Site Footer
 * ---------------------------------------------------------------------- */

.site-footer {
	background-color: var(--footer-bg);
	color: var(--footer-text);
	margin-top: auto;
}

/* -------------------------------------------------------------------------
 * Widget area
 * ---------------------------------------------------------------------- */

.site-footer__widgets {
	display: grid;
	gap: var(--space-8);
	grid-template-columns: 1fr;
	padding-block: var(--space-12);
	border-bottom: 1px solid rgb(255 255 255 / 0.1);
}

@media (min-width: 640px) {
	.site-footer__widgets {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	/* 4 cột: cột 1 (brand) rộng hơn, 3 cột còn lại bằng nhau */
	.site-footer__widgets {
		grid-template-columns: 1.5fr 1fr 1fr 1fr;
	}
}

/* Cột 1 — brand: logo + mô tả */
.site-footer__col--brand .widget {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
}

.site-footer__col--brand .custom-logo {
	height: 40px;
	width: auto;
	filter: brightness(0) invert(1);
	opacity: 0.9;
}

.site-footer__col--brand .widget-text,
.site-footer__col--brand p {
	font-size: var(--font-size-sm);
	color: rgb(255 255 255 / 0.65);
	line-height: var(--line-height-body);
	margin: 0;
}

/* Widget trong footer */
.site-footer .widget {
	color: rgb(255 255 255 / 0.75);
}

.site-footer .widget__title {
	color: var(--color-text-inverse);
	font-size: var(--font-size-base);
	font-weight: var(--font-weight-semibold);
	margin-bottom: var(--space-4);
	padding-bottom: var(--space-3);
	border-bottom: 2px solid var(--color-primary);
	display: inline-block;
}

.site-footer .widget a {
	color: rgb(255 255 255 / 0.75);
	text-decoration: none;
	transition: color var(--transition-fast);
}

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

.site-footer .widget ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.site-footer .widget ul li {
	padding-block: var(--space-1);
	border-bottom: 1px solid rgb(255 255 255 / 0.08);
	font-size: var(--font-size-sm);
}

.site-footer .widget ul li:last-child {
	border-bottom: none;
}

/* -------------------------------------------------------------------------
 * Footer bottom bar
 * ---------------------------------------------------------------------- */

.site-footer__bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--space-4);
	padding-block: var(--space-6);
}

.site-footer__copyright {
	font-size: var(--font-size-sm);
	color: rgb(255 255 255 / 0.5);
	margin: 0;
}

.site-footer__copyright a {
	color: rgb(255 255 255 / 0.75);
	text-decoration: none;
}

.site-footer__copyright a:hover {
	color: var(--color-text-inverse);
}

/* -------------------------------------------------------------------------
 * Social menu trong footer
 * ---------------------------------------------------------------------- */

.site-footer .social-menu {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	align-items: center;
	gap: var(--space-3);
}

.site-footer .social-menu a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: var(--radius-full);
	background-color: rgb(255 255 255 / 0.1);
	color: rgb(255 255 255 / 0.75);
	font-size: var(--font-size-sm);
	transition: background-color var(--transition-fast), color var(--transition-fast);
	text-decoration: none;
}

.site-footer .social-menu a:hover {
	background-color: var(--color-primary);
	color: #fff;
}

/* -------------------------------------------------------------------------
 * AI Advanced Footer Widget — grid layout
 * ---------------------------------------------------------------------- */

.ai-footer-container {
	width: 100%;
	padding-block: var(--space-8);
}

.ai-footer-row {
	display: grid;
	gap: var(--space-6);
	grid-template-columns: 1fr;
}

@media (min-width: 640px) {
	.ai-footer-row.ai-grid-2,
	.ai-footer-row.ai-grid-3,
	.ai-footer-row.ai-grid-4 {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.ai-footer-row.ai-grid-2 {
		grid-template-columns: repeat(2, 1fr);
	}

	.ai-footer-row.ai-grid-3 {
		grid-template-columns: repeat(3, 1fr);
	}

	.ai-footer-row.ai-grid-4 {
		grid-template-columns: 1.5fr 1fr 1fr 1fr;
	}
}

.ai-footer-col {
	color: rgb(255 255 255 / 0.8);
}

.ai-footer-title {
	color: #fff;
	font-size: var(--font-size-base);
	font-weight: var(--font-weight-semibold);
	margin-bottom: var(--space-4);
	padding-bottom: var(--space-3);
	border-bottom: 2px solid var(--color-primary);
	display: inline-block;
}

.ai-footer-logo {
	max-height: 48px;
	width: auto;
	margin-bottom: var(--space-3);
	display: block;
}

.ai-footer-desc {
	font-size: var(--font-size-sm);
	color: rgb(255 255 255 / 0.65);
	line-height: var(--line-height-body);
}

.ai-footer-list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.ai-footer-list li {
	padding-block: var(--space-1);
	border-bottom: 1px solid rgb(255 255 255 / 0.08);
	font-size: var(--font-size-sm);
}

.ai-footer-list li:last-child {
	border-bottom: none;
}

.ai-footer-list a {
	color: rgb(255 255 255 / 0.75);
	text-decoration: none;
	transition: color var(--transition-fast);
}

.ai-footer-list a:hover {
	color: #fff;
}

.ai-footer-contact {
	font-size: var(--font-size-sm);
	color: rgb(255 255 255 / 0.75);
	line-height: var(--line-height-body);
}

.ai-footer-contact p {
	margin-bottom: var(--space-2);
}

/* -------------------------------------------------------------------------
 * Footer khi không có widget
 * ---------------------------------------------------------------------- */

.site-footer--minimal .site-footer__widgets {
	display: none;
}

.site-footer--minimal .site-footer__bottom {
	justify-content: center;
	padding-block: var(--space-8);
}