/*
 * Header Kit — T2.3
 *
 * Nạp tự động khi block core/template-part xuất hiện trên trang
 * (xem nd_base_register_block_styles trong functions.php).
 *
 * Luật: chỉ dùng token semantic. px chỉ xuất hiện ở border-width và điều kiện
 * media query — đúng ngoại lệ của CLAUDE.md §1.3. Không !important.
 *
 * Breakpoint 1024px trùng với --wp--custom--breakpoint--lg. CSS không cho dùng
 * var() trong điều kiện media query nên phải viết lại số ở đây; đổi token thì
 * nhớ đổi cả chỗ này.
 */

.nd-header {
	position: relative;
	z-index: 10;
}

.nd-header__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var( --wp--preset--spacing--md);

	/*
	 * Chiều cao đọc token của preset, có giá trị dự phòng là 3xl. Nhờ vậy mỗi
	 * khách chỉnh header cao thấp bằng một dòng trong style.json của mình, không
	 * ai phải sửa file này — mà sửa file này là đổi header của MỌI khách.
	 */
	min-block-size: var( --wp--custom--header--height, var( --wp--preset--spacing--3-xl));
}

.nd-header__start,
.nd-header__center,
.nd-header__end {
	display: flex;
	align-items: center;

	/*
	 * Khoảng cách giữa các cụm trong header đọc token của preset, dự phòng là sm.
	 * Cùng lý do như min-block-size: mỗi khách canh header một kiểu, không ai
	 * được sửa file này vì nó áp cho mọi khách.
	 */
	gap: var( --wp--custom--header--gap, var( --wp--preset--spacing--sm));
}

/* ------------------------------------------------------------------ *
 * header-centered — menu nằm đúng tâm
 *
 * KHÔNG dùng justify-content: space-between. Với space-between, menu bị đẩy về
 * tâm của khoảng trống còn lại chứ không phải tâm của header, nên nó lệch đúng
 * bằng nửa hiệu chiều rộng giữa logo và cụm CTA. Grid 1fr auto 1fr thì cột giữa
 * luôn ở tâm, bất kể hai bên rộng bao nhiêu.
 * ------------------------------------------------------------------ */

.nd-header--centered .nd-header__row,
.nd-header--logo-center .nd-header__row {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
}

.nd-header--centered .nd-header__start,
.nd-header--logo-center .nd-header__start {
	justify-self: start;
}

.nd-header--centered .nd-header__center,
.nd-header--logo-center .nd-header__center {
	justify-self: center;
}

.nd-header--centered .nd-header__end,
.nd-header--logo-center .nd-header__end {
	justify-self: end;
}

/* Dưới 1024px quay về hai cột: logo bên trái, phần còn lại dồn phải. */
@media (max-width: 1023px) {
	.nd-header--centered .nd-header__row,
	.nd-header--logo-center .nd-header__row {
		display: flex;
		justify-content: flex-start;
	}

	.nd-header--centered .nd-header__center,
	.nd-header--logo-center .nd-header__center {
		margin-inline-start: auto;
	}
}

/* ------------------------------------------------------------------ *
 * nd-header--mobile-center — logo về giữa trên điện thoại
 *
 * BỔ NGỮ, KHÔNG PHẢI BIẾN THỂ HEADER MỚI. Preset bật bằng cách thêm
 * `nd-header--mobile-center` vào className của group ngoài cùng trong
 * `parts/header-*.html`; màn rộng không đổi một pixel nào. Thêm hẳn một biến
 * thể vào `PresetManifest::HEADERS` cho việc này là dựng một bản sao của
 * header-classic chỉ khác vài dòng CSS, và hai bản sao rồi sẽ lệch nhau.
 *
 * HỢP ĐỒNG — CHỈ CHO HEADER HÌNH DẠNG "CỔ ĐIỂN".
 *
 * Cần đúng hai điều: `__start` chứa logo hoặc tên site, và `__end` chứa
 * `core/navigation` cùng TỐI ĐA một mục nữa. Đúng hình dạng đó có
 * `header-classic`, `header-topbar`, `header-transparent` và `header.html`.
 * Món thứ ba trong `__end` rơi xuống hàng hai của lưới và header cao gấp đôi;
 * cụm `__cta` đã tự ẩn dưới 600px ở cuối file này nên bốn part trên thoả sẵn.
 *
 * CỐ Ý KHÔNG ÁP CHO `--centered` VÀ `--logo-center`. Ở hai part đó menu nằm
 * trong `__center` hoặc `__start` chứ không phải `__end`, nên cùng một luật
 * `order` sẽ xếp ra một thứ khác hẳn — và `--logo-center` vốn đã đặt tên site
 * ở giữa. Muốn chúng cũng đổi ở màn hẹp thì viết luật riêng cho đúng hình dạng
 * của chúng, đừng nới lời chọn của khối này.
 *
 * MỘT DOM, HAI HÌNH DẠNG — KHÔNG IN MENU HAI LẦN.
 *
 * Thứ tự trong HTML vẫn là logo · menu · phần còn lại, đúng như màn rộng cần.
 * Ở đây `__end` nhận `display: contents`, tức nó biến mất khỏi bố cục và các
 * con của nó thành ô của chính lưới ba cột này; `order` xếp lại thành
 * hamburger · logo · tìm kiếm. Không nhân đôi markup, nên không có hai bộ liên
 * kết cho trình đọc màn hình và không có hai chỗ phải sửa khi đổi menu.
 *
 * `1fr auto 1fr` CHỨ KHÔNG `space-between`. Với space-between, logo nằm giữa
 * KHOẢNG TRỐNG còn lại chứ không giữa header, nên nó lệch đúng bằng nửa hiệu
 * bề rộng giữa nút hamburger và nút tìm kiếm. Hai cột `1fr` luôn bằng nhau nên
 * cột giữa ở đúng tâm, kể cả khi cột phải bỏ trống.
 *
 * 599px LÀ SỐ CỦA LÕI, KHÔNG PHẢI SỐ CHỌN CHO ĐẸP. `core/navigation` với
 * `overlayMenu: "mobile"` chỉ hiện nút hamburger dưới 600px — con số nằm trong
 * CSS của lõi, không phải trong token của ta. Kéo bổ ngữ này lên breakpoint md
 * (768px) thì trong dải 600–767px cột trái không còn một cái nút mà là cả một
 * menu ngang, và nó đè vào logo. Đổi số ở đây phải đi kiểm số của lõi trước.
 *
 * ĐÁNH ĐỔI ĐÃ BIẾT: thứ tự tiêu điểm bàn phím là logo → hamburger → tìm kiếm,
 * còn thứ tự nhìn thấy là hamburger → logo → tìm kiếm. Một header logo-trái ở
 * màn rộng và logo-giữa ở màn hẹp buộc phải xếp lại ở một trong hai đầu; xếp
 * lại ở màn hẹp là chỗ đổi ít nhất, vì nó chỉ hoán vị hai phần tử liền nhau và
 * cả hai đều là đích rõ ràng. Đảo thứ tự DOM để hết lệch ở đây là đẩy đúng cái
 * lệch đó sang màn rộng, nơi có nhiều mục hơn để lệch.
 * ------------------------------------------------------------------ */

@media (max-width: 599px) {
	.nd-header--mobile-center .nd-header__row {
		display: grid;
		grid-template-columns: 1fr auto 1fr;
		align-items: center;
		gap: var( --wp--preset--spacing--2-xs);
	}

	.nd-header--mobile-center .nd-header__end {
		display: contents;
	}

	.nd-header--mobile-center .nd-header__end > * {
		order: 3;
		justify-self: end;
	}

	.nd-header--mobile-center .nd-header__end > .wp-block-navigation {
		order: 1;
		justify-self: start;
	}

	.nd-header--mobile-center .nd-header__start {
		order: 2;
		justify-self: center;
	}

	/*
	 * `justify-self: end` không đủ khi khối tự khai bề rộng. Khối tìm kiếm khai
	 * `width: 100%` thì nó phủ kín cột phải và cái nút nằm ở MÉP TRÁI của cột —
	 * tức thụt vào gần một phần ba màn hình. Đẩy bằng chính flexbox của khối
	 * mới chắc, vì nó đúng dù bề rộng khai bao nhiêu.
	 */
	.nd-header--mobile-center .nd-header__end > .wp-block-search {
		justify-content: flex-end;
	}
}

/* ------------------------------------------------------------------ *
 * header-topbar — dải thông tin mảnh phía trên
 * ------------------------------------------------------------------ */

.nd-header__topbar {
	border-block-end: 1px solid var( --wp--preset--color--line);
	font-size: var( --wp--preset--font-size--caption);
}

/*
 * Link trong topbar nằm lẫn giữa chữ thường, nên KHÔNG được bỏ gạch chân:
 * màu brand so với chữ fg-muted chỉ chênh 1.11:1, không đủ để phân biệt bằng
 * màu (WCAG 1.4.1 — axe bắt lỗi này là link-in-text-block).
 */
.nd-header__topbar a {
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

@media (max-width: 767px) {
	.nd-header__topbar {
		display: none;
	}
}

/* ------------------------------------------------------------------ *
 * header-transparent — nằm chồng lên hero
 *
 * Scrim là bắt buộc, không phải trang trí: chữ trắng trên ảnh hero sáng sẽ rớt
 * AA nếu thiếu nó. Dải scrim-header giữ alpha >= 0.6 suốt vùng chữ; build kiểm
 * điều đó bằng semantic.scrimChecks nên không thể vô tình làm nhạt đi.
 * ------------------------------------------------------------------ */

.nd-header--transparent {
	position: absolute;
	inset-block-start: 0;
	inset-inline: 0;
	background-color: transparent;
	color: var( --wp--custom--color--fg-on-scrim);
}

.nd-header--transparent::before {
	content: "";
	position: absolute;
	inset-block-start: 0;
	inset-inline: 0;
	block-size: 150%;
	background-image: var( --wp--preset--gradient--scrim-header);
	pointer-events: none;
	z-index: -1;
}

.nd-header--transparent a,
.nd-header--transparent .wp-block-site-title a,
.nd-header--transparent .wp-block-navigation a {
	color: var( --wp--custom--color--fg-on-scrim);
}

.nd-header--transparent :where(a, button):focus-visible {
	outline-color: var( --wp--custom--color--fg-on-scrim);
}

/* ------------------------------------------------------------------ *
 * Chung
 * ------------------------------------------------------------------ */

.nd-header .wp-block-site-title {
	margin: 0;
}

.nd-header .wp-block-site-title a {
	text-decoration: none;
}

.nd-header .wp-block-navigation {
	font-size: var( --wp--preset--font-size--small);
}

/* Ẩn cụm CTA ở màn hẹp để menu không bị bóp. */
@media (max-width: 599px) {
	.nd-header__cta {
		display: none;
	}
}