/* ============================================================
   03-header.css — Header / Navigation
   Override Astra default header.
   ============================================================ */

/* --- Wrapper --- */
.site-header,
.ast-primary-header-bar {
	background-color: var(--y-cream);
	border-bottom: 1px solid transparent;
	box-shadow: none;
	transition: background-color var(--y-duration) var(--y-ease),
				border-color var(--y-duration) var(--y-ease),
				backdrop-filter var(--y-duration) var(--y-ease);
}

.site-header .ast-container {
	padding-top: 1rem;
	padding-bottom: 1rem;
}

/* Sticky state — Astra add class .ast-header-stick hoặc qua JS scroll */
body.ast-header-sticked-active .site-header,
.site-header.ast-header-sticked,
.site-header.is-scrolled {
	background-color: rgba(var(--y-cream-rgb), 0.85);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border-bottom-color: var(--y-line);
}

/* --- Logo / Site title --- */
.site-branding .site-title,
.site-branding .ast-site-title-wrap a {
	font-family: var(--y-font-serif);
	font-size: 1.75rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: lowercase;
	color: var(--y-ink);
	text-decoration: none;
	line-height: 1;
}

.site-branding .site-title a:hover,
.site-branding .ast-site-title-wrap a:hover {
	color: var(--y-sage-deep);
}

.site-description,
.ast-site-description {
	font-family: var(--y-font-sans);
	font-size: 0.75rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--y-ink-soft);
	margin-top: 0.25rem;
}

/* Logo image — preserve aspect, max height */
.custom-logo-link img,
.site-logo-img img {
	max-height: 48px;
	width: auto;
}

/* --- Primary navigation --- */
.main-navigation .menu,
.ast-primary-menu,
ul.main-header-menu {
	display: flex;
	gap: 2rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.main-navigation .menu > li > a,
.ast-primary-menu > .menu-item > a,
ul.main-header-menu > li > a {
	font-family: var(--y-font-serif);
	font-size: 1.05rem;
	font-weight: 500;
	letter-spacing: 0.02em;
	color: var(--y-ink);
	text-decoration: none;
	padding: 0.4rem 0;
	position: relative;
	transition: color var(--y-duration) var(--y-ease);
}

.main-navigation .menu > li > a:hover,
.ast-primary-menu > .menu-item > a:hover,
ul.main-header-menu > li > a:hover {
	color: var(--y-sage-deep);
}

/* Underline from center on hover — ::after width transition */
.main-navigation .menu > li > a::after,
.ast-primary-menu > .menu-item > a::after,
ul.main-header-menu > li > a::after {
	content: '';
	position: absolute;
	left: 50%;
	bottom: 0;
	width: 0;
	height: 1px;
	background-color: var(--y-sage-deep);
	transform: translateX(-50%);
	transition: width var(--y-duration) var(--y-ease);
}

.main-navigation .menu > li > a:hover::after,
.main-navigation .menu > .current-menu-item > a::after,
.ast-primary-menu > .menu-item > a:hover::after,
.ast-primary-menu > .current-menu-item > a::after,
ul.main-header-menu > li > a:hover::after,
ul.main-header-menu > .current-menu-item > a::after {
	width: 100%;
}

/* Sub-menu / dropdown */
.main-navigation .sub-menu,
.ast-primary-menu .sub-menu {
	background-color: var(--y-cream);
	border: 1px solid var(--y-line);
	border-radius: var(--y-radius-sm);
	padding: 0.5rem 0;
	min-width: 220px;
	box-shadow: var(--y-shadow-md);
}

.main-navigation .sub-menu a,
.ast-primary-menu .sub-menu a {
	font-family: var(--y-font-sans);
	font-size: 0.95rem;
	color: var(--y-ink);
	padding: 0.6rem 1.25rem;
	display: block;
	text-decoration: none;
	transition: background-color var(--y-duration-fast) var(--y-ease);
}

.main-navigation .sub-menu a:hover,
.ast-primary-menu .sub-menu a:hover {
	background-color: var(--y-cream-warm);
	color: var(--y-sage-deep);
}

/* --- Mobile hamburger --- */
.ast-mobile-menu-buttons-fill,
.ast-mobile-menu-trigger-minimal,
.ast-mobile-menu-buttons-minimal {
	background-color: transparent;
	border: none;
	padding: 0.5rem;
	color: var(--y-ink);
}

.menu-toggle .menu-toggle-icon,
.ast-mobile-menu-trigger-minimal svg,
.ast-mobile-menu-trigger-fill svg {
	width: 24px;
	height: 24px;
	stroke: var(--y-ink);
	stroke-width: 1px;
	fill: none;
}

/* Custom hamburger thin lines (cho menu-toggle button của Astra) */
.menu-toggle {
	background-color: transparent;
	border: none;
	padding: 0.5rem;
	cursor: pointer;
	color: var(--y-ink);
}

/* --- Mobile drawer --- */
@media (max-width: 921px) {
	.main-header-bar-navigation,
	.ast-mobile-header-content {
		background-color: var(--y-cream);
		border-top: 1px solid var(--y-line);
		padding: 1rem 1.25rem 2rem;
	}

	.main-navigation .menu,
	.ast-mobile-menu,
	ul.main-header-menu {
		flex-direction: column;
		gap: 0;
	}

	.main-navigation .menu > li,
	.ast-mobile-menu > .menu-item,
	ul.main-header-menu > li {
		border-bottom: 1px solid var(--y-line);
	}

	.main-navigation .menu > li > a,
	.ast-mobile-menu > .menu-item > a,
	ul.main-header-menu > li > a {
		padding: 1rem 0;
		font-size: 1.25rem;
	}

	/* Tắt underline-from-center trên mobile */
	.main-navigation .menu > li > a::after,
	.ast-mobile-menu > .menu-item > a::after,
	ul.main-header-menu > li > a::after {
		display: none;
	}
}

/* --- Header transparent variant cho hero overlap --- */
/* CHỈ kích hoạt khi page có hero sage làm nền cho header.
   Add class .has-y-hero vào <body>. KHÔNG dựa vào is_front_page() vì
   front page có thể không có hero (như hiện tại). */
body.has-y-hero .site-header:not(.is-scrolled):not(.ast-header-sticked) {
	background-color: transparent;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: var(--y-z-header);
}

body.has-y-hero .site-header:not(.is-scrolled):not(.ast-header-sticked) .site-title,
body.has-y-hero .site-header:not(.is-scrolled):not(.ast-header-sticked) .main-navigation .menu > li > a {
	color: var(--y-cream);
}

body.has-y-hero .site-header:not(.is-scrolled):not(.ast-header-sticked) .main-navigation .menu > li > a::after {
	background-color: var(--y-cream);
}