/*
 * File: assets/css/components.css
 * Vai trò: Style component dùng lại nhiều nơi (khoảng cách section, eyebrow, button CTA...).
 * Nạp SITEWIDE (mọi trang) — vì vậy KHÔNG đặt rule đổi H1-H3/typography ở đây (dễ ảnh hưởng
 * trang khác ngoài ý muốn). Typography riêng cho trang chủ nằm ở homepage.css, scoped bằng
 * ".home.taco189-site" hoặc các class ".taco189-home-*", chỉ nạp khi is_front_page().
 * Chỉ target class do child theme đặt ra (namespace "taco189-") hoặc các class ổn định của
 * Flatsome đã được xác minh (.button, .row, .col) — không phụ thuộc selector nội bộ dễ đổi.
 */

.taco189-site {
	color: var(--taco189-color-text);
}

/* Khoảng cách section chuẩn — gắn class này vào field "CSS Class" của [section] trong UX Builder */
.taco189-section {
	padding-top: var(--taco189-space-2xl);
	padding-bottom: var(--taco189-space-2xl);
}

.taco189-section--tight {
	padding-top: var(--taco189-space-xl);
	padding-bottom: var(--taco189-space-xl);
}

/* Eyebrow label nhỏ phía trên tiêu đề (VD: "XÂY DỰNG • THI CÔNG • HOÀN THIỆN") */
.taco189-eyebrow {
	display: inline-block;
	font-size: var(--taco189-fs-eyebrow);
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--taco189-color-accent);
	margin-bottom: var(--taco189-space-sm);
}

/* Nhịp tiêu đề (font-size H1-H3) đã CHUYỂN sang assets/css/homepage.css, scoped bằng
   ".home.taco189-site" — chỉ áp dụng cho trang chủ, không áp dụng cho toàn site.
   Xem homepage.css để tránh đổi typography ở các trang khác (bài viết, trang thường...). */

/* CTA chính/phụ — dùng element Button có sẵn của UX Builder (.button), chỉ chỉnh màu/bo góc
   theo định hướng thiết kế (đỏ có kiểm soát, không bo góc lớn, không đổ bóng nặng). */
.taco189-btn-accent.button {
	background-color: var(--taco189-color-accent);
	border-color: var(--taco189-color-accent);
	border-radius: var(--taco189-radius-sm);
}
.taco189-btn-accent.button:hover {
	background-color: var(--taco189-color-primary-dark);
	border-color: var(--taco189-color-primary-dark);
}

.taco189-btn-outline-light.button {
	border-radius: var(--taco189-radius-sm);
}

/* Trang chủ active màu đỏ + gạch chân đỏ trong menu chính (class ".current-menu-item"/
   ".current_page_item" do WordPress core tự thêm — ổn định, không phải nội bộ Flatsome dễ đổi). */
.nav .current-menu-item > a,
.nav .current_page_item > a {
	color: var(--taco189-color-accent) !important;
	border-bottom: 2px solid var(--taco189-color-accent);
}

/* Footer 4 cột (namespace riêng "taco189-footer-*", gắn trong nội dung widget Footer 1) — nạp
   sitewide vì footer xuất hiện ở mọi trang, khớp màu navy + chữ trắng theo ảnh thiết kế tham
   chiếu. Chỉ target class Flatsome ổn định ".footer-widgets"/".footer-1" (đã xác minh trong
   flatsome/template-parts/footer/footer.php) để đổi nền, không đụng cấu trúc bên trong. */
.footer-widgets.footer-1 {
	background-color: var(--taco189-color-primary);
	color: rgba(255, 255, 255, 0.85);
}
.taco189-footer-col ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.taco189-footer-col li {
	margin-bottom: var(--taco189-space-xs);
}
.taco189-footer-col a {
	color: rgba(255, 255, 255, 0.85);
	text-decoration: none;
}
.taco189-footer-col a:hover {
	color: var(--taco189-color-white);
	text-decoration: underline;
}
.taco189-footer-logo {
	margin-bottom: var(--taco189-space-sm);
	height: auto;
}
.taco189-footer-title {
	color: var(--taco189-color-white);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin-bottom: var(--taco189-space-sm);
}

/* Giảm hiệu ứng khi người dùng yêu cầu prefers-reduced-motion (hỗ trợ khả năng tiếp cận) */
@media (prefers-reduced-motion: reduce) {
	.taco189-site * {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}