/**
 * Header dùng chung.
 *
 * - Cố định trên đầu trang, nền trong suốt; khi cuộn xuống thì có nền và bóng đổ.
 * - Không có logo (theo thiết kế). Trang chủ: header nằm đè lên hero.
 * - Dưới 1280px: menu thu vào nút ☰.
 */

.site-header {
	position: fixed;
	inset: 0 0 auto;
	z-index: var(--z-header);
	transition: background-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}

.admin-bar .site-header {
	top: var(--wp-admin--admin-bar--height, 32px);
}

.site-header.is-scrolled,
.site-header.is-open {
	background-color: rgb(251 245 241 / 0.95);
	box-shadow: 0 2px 16px rgb(116 65 27 / 0.08);
	backdrop-filter: blur(8px);
}

/* Trang khác trang chủ: chừa chỗ cho header cố định */
body:not(.home) .site-main {
	padding-top: var(--header-height);
}

.site-header__inner {
	display: flex;
	align-items: center;
	gap: var(--space-md);
	min-height: var(--header-height);
}

/* ------------------------------------------------------------------------
 * Menu chính
 * ---------------------------------------------------------------------- */

.site-nav {
	flex: 1;
	min-width: 0;
}

/* Figma: menu dồn sang phải, sát nút CTA */
.site-nav__list {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: clamp(0.75rem, -1.9643rem + 4.2411vw, 3.125rem); /* 12 → 50 */
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-nav a {
	position: relative;
	display: block;
	padding-block: 0.5em;
	color: var(--color-text);
	font-size: var(--fs-nav);
	font-weight: var(--fw-medium);
	text-transform: uppercase;
	white-space: nowrap;
}

/* Khi đã cuộn tới một section có trong menu, mục "Tổng quan" (trang chủ) thôi gạch chân */
.site-nav.has-active .current-menu-item > a:not(:hover)::after {
	content: none;
}

/* Gạch chân hiện khi rê chuột hoặc ở mục đang xem (.is-active do JS gắn khi cuộn tới section tương ứng) */
.site-nav a:hover::after,
.site-nav .current-menu-item > a::after,
.site-nav a.is-active::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0.15em;
	height: 3px;
	border-radius: 2px;
	background: linear-gradient(90deg, var(--color-gradient-start), var(--color-gradient-end));
}

/* ------------------------------------------------------------------------
 * Nút CTA
 * ---------------------------------------------------------------------- */

.site-header__cta {
	flex: none;
	padding: 0.85em 1.4em;
	border-radius: var(--radius-pill);
	font-size: clamp(0.75rem, 0.4643rem + 0.4464vw, 1rem); /* 12 → 16 */
	text-transform: uppercase;
}

/* ------------------------------------------------------------------------
 * Nút mở menu (chỉ hiện dưới 1280px)
 * ---------------------------------------------------------------------- */

.site-header__toggle {
	display: none;
	margin-left: auto;
	padding: var(--space-xs);
	border: 0;
	background: none;
	color: var(--color-heading);
	cursor: pointer;
}

.site-header__toggle .icon {
	width: 1.75rem;
	height: 1.75rem;
}

.site-header__toggle-close,
.site-header.is-open .site-header__toggle-open {
	display: none;
}

.site-header.is-open .site-header__toggle-close {
	display: block;
}

@media (max-width: 1279.98px) {
	/* nút mở menu bên trái, nút CTA bên phải */
	.site-header__toggle {
		display: block;
		order: -1;
		margin: 0 0 0 calc(var(--space-xs) * -1); /* thẳng mép trái với nội dung trang */
	}

	.site-header__cta {
		margin-left: auto;
	}

	.site-nav {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		display: none;
		padding: var(--space-xs) var(--page-gutter) var(--space-lg);
		background-color: rgb(251 245 241 / 0.98);
		box-shadow: 0 12px 24px rgb(116 65 27 / 0.1);
	}

	.site-header.is-open .site-nav {
		display: block;
	}

	.site-nav__list {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	.site-nav a {
		padding-block: 0.75em;
		font-size: var(--fs-md);
	}

	.site-nav a::after {
		right: auto;
		width: 2.5em;
	}
}

@media (max-width: 599.98px) {
	.site-header__cta {
		padding: 0.75em 1.1em;
		font-size: 0.75rem;
	}
}

/* ------------------------------------------------------------------------
 * Desktop: khi đã cuộn xuống, header ẩn đi; chỉ hiện khi rê chuột vào vùng menu
 * (dải trên cùng màn hình) hoặc khi di chuyển bằng bàn phím vào menu.
 * ---------------------------------------------------------------------- */
@media (min-width: 1280px) {
	.site-header {
		transition: opacity 300ms var(--ease), background-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
	}

	.site-header.is-scrolled:not(:hover):not(:focus-within) {
		opacity: 0;
	}
}