/*
 * Biểu mẫu — T3.1
 *
 * Nạp cùng block core/html (xem nd_base_register_block_styles).
 *
 * WordPress không có block form, nên phần diện mạo của ô nhập liệu thuộc về
 * theme còn phần xử lý dữ liệu thuộc về nd-core (CLAUDE.md §1). File này CHỈ
 * lo diện mạo.
 *
 * Mọi giá trị đến từ token. px chỉ có ở border-width và outline-width — đúng
 * ngoại lệ của §1.3. Không !important.
 */

.nd-form {
	display: flex;
	flex-direction: column;
	gap: var( --wp--preset--spacing--sm);
	margin-block-start: var( --wp--preset--spacing--md);
	max-inline-size: 34rem;
}

.nd-form__field {
	display: flex;
	flex-direction: column;
	gap: var( --wp--preset--spacing--2-xs);
	margin: 0;
}

.nd-form__label {
	font-size: var( --wp--preset--font-size--small);
	font-weight: 600;
	color: var( --wp--preset--color--fg);
}

.nd-form__input {
	/*
	 * Ô nhập liệu không thừa hưởng `border-box` từ đâu cả: trình duyệt đặt
	 * `content-box` cho input và WordPress không đặt lại. Cùng với `100%` và một
	 * viền 1px mỗi bên, ô rộng hơn khung chứa đúng 2px. Trước T10.4 chỗ này còn
	 * dư lề nên không lộ; khi biểu mẫu nằm trong một dải tràn viền thì 2px đó
	 * thành thanh cuộn ngang ở 360px — test `không pattern nào tràn ngang` bắt được.
	 */
	box-sizing: border-box;
	inline-size: 100%;
	padding: var( --wp--preset--spacing--2-xs) var( --wp--preset--spacing--sm);
	font-family: inherit;
	font-size: var( --wp--preset--font-size--body);
	line-height: inherit;
	color: var( --wp--preset--color--fg);
	background-color: var( --wp--preset--color--surface-raised);

	/* border-strong đạt 3:1 với nền ở mọi tông — WCAG 1.4.11 cho thành phần không phải chữ. */
	border: 1px solid var( --wp--custom--color--border-strong);
	border-radius: var( --wp--custom--radius--md);
	transition: border-color var( --wp--custom--motion--duration-fast) var( --wp--custom--motion--ease-standard);
}

.nd-form__input:hover {
	border-color: var( --wp--custom--color--focus);
}

.nd-form__input::placeholder {
	color: var( --wp--preset--color--fg-muted);
	opacity: 1;
}

.nd-form textarea.nd-form__input {
	resize: vertical;
	min-block-size: var( --wp--preset--spacing--3-xl);
}

.nd-form__consent {
	display: flex;
	gap: var( --wp--preset--spacing--2-xs);
	margin: 0;
	font-size: var( --wp--preset--font-size--small);
	color: var( --wp--preset--color--fg-muted);
}

.nd-form__consent label {
	display: flex;
	align-items: flex-start;
	gap: var( --wp--preset--spacing--2-xs);
	cursor: pointer;
}

.nd-form__consent input {
	margin-block-start: 0.25em;
	accent-color: var( --wp--preset--color--brand);
	flex: none;
}

.nd-form .wp-block-button {
	margin: 0;
}

.nd-form__note {
	margin: 0;
	font-size: var( --wp--preset--font-size--caption);
	color: var( --wp--preset--color--fg-muted);
}

/* ------------------------------------------------------------------ *
 * Biến thể THẺ của biểu mẫu — dùng cho pattern `form-consult`.
 *
 * Cùng bộ khối, chỉ đổi hình dáng: ô bo tròn hết cỡ, nhãn nhỏ hơn, nút chiếm
 * trọn chiều ngang. Thẻ đặt trong một dải tông (`is-style-tone-*`) nên MÀU
 * không viết ở đây dòng nào — tông đã ánh xạ lại palette cho cả vùng, và cùng
 * một thẻ nằm trên nền thương hiệu hay nền trắng đều tự ra đúng màu.
 *
 * `select` phải khai lại `appearance` và màu nền: trình duyệt vẽ ô chọn bằng
 * kiểu của hệ điều hành, nên nếu không đặt thì trên nền tối nó ra chữ đen trên
 * nền đen ở Windows — lỗi chỉ lộ trên máy khách, không lộ trên máy mình.
 * ------------------------------------------------------------------ */

.nd-form--card {
	gap: var( --wp--preset--spacing--2-xs);
	margin-block-start: var( --wp--preset--spacing--sm);
	max-inline-size: none;
}

.nd-form--card .nd-form__label {
	font-size: var( --wp--preset--font-size--caption);
}

.nd-form--card .nd-form__input {
	border-radius: var( --wp--custom--radius--pill);
	padding-inline: var( --wp--preset--spacing--md);
}

.nd-form--card textarea.nd-form__input {
	border-radius: var( --wp--custom--radius--lg);
	min-block-size: var( --wp--preset--spacing--2-xl);
}

.nd-form__select {
	appearance: none;
	background-color: var( --wp--preset--color--surface-raised);
	color: var( --wp--preset--color--fg);
	cursor: pointer;
}

.nd-form--card .wp-block-button__link {
	inline-size: 100%;
}

/* ------------------------------------------------------------------ *
 * Biến thể MỘT DÒNG — dải gọi lại và thanh dính đáy màn hình.
 *
 * Ô nhập và nút nằm cùng hàng trên màn hình rộng, xuống dòng khi hẹp. Không
 * dùng media query: `flex-wrap` cộng `min-inline-size` để chính nội dung quyết
 * định lúc nào xuống dòng — thang đo là chiều rộng của khối chứa, không phải
 * của màn hình, nên nó vẫn đúng khi ai đó thả biểu mẫu vào một cột hẹp.
 * ------------------------------------------------------------------ */

.nd-form--inline {
	flex-direction: row;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: var( --wp--preset--spacing--2-xs);
	max-inline-size: none;
}

.nd-form--inline .nd-form__field {
	flex: 1 1 14rem;
}

.nd-form--inline .nd-form__note {
	flex: 1 0 100%;
}

/* ------------------------------------------------------------------ *
 * Biến thể GỌN và RỘNG.
 * ------------------------------------------------------------------ */

.nd-form--compact {
	margin-block-start: 0;
	max-inline-size: none;
}

.nd-form--wide {
	max-inline-size: none;
}

/*
 * Hai ô một hàng. `1 1 12rem` nghĩa là mỗi ô co được tới 12rem rồi mới chịu
 * xuống dòng — vừa đủ cho "0912 345 678" mà không cần media query.
 */
.nd-form__row {
	display: flex;
	flex-wrap: wrap;
	gap: var( --wp--preset--spacing--sm);
}

.nd-form__row .nd-form__field {
	flex: 1 1 12rem;
}

.nd-form__help {
	font-size: var( --wp--preset--font-size--caption);
	color: var( --wp--preset--color--fg-muted);
}

/* ------------------------------------------------------------------ *
 * Biến thể NHIỀU BƯỚC.
 *
 * `<fieldset>` mang sẵn viền và lề của trình duyệt, phải gỡ trước khi trang trí.
 * Bước bị giấu dùng thuộc tính `hidden` của HTML chứ không phải một class riêng:
 * `hidden` gỡ phần tử khỏi cây trợ năng luôn, nên trình đọc màn hình không đọc
 * phải các ô của bước chưa tới.
 * ------------------------------------------------------------------ */

.nd-form__step {
	display: flex;
	flex-direction: column;
	gap: var( --wp--preset--spacing--sm);
	margin: 0;
	padding: 0;
	border: 0;
	min-inline-size: 0;
}

/*
 * TRẢ LẠI HIỆU LỰC CHO `hidden` TRONG BIỂU MẪU.
 *
 * `hidden` chỉ là `display: none` trong bảng kiểu mặc định của trình duyệt, mà
 * bất kỳ khai báo `display` nào của tác giả cũng thắng nó. Ở đây có hai chỗ dính:
 * `.nd-form__step` đặt `display: flex`, còn nút của WordPress đặt
 * `display: inline-block` qua `.wp-block-button__link`.
 *
 * Thiếu luật này thì `forms.js` vẫn đặt `hidden` đúng, số bước vẫn đếm đúng, và
 * cả ba bước lẫn cả ba nút cùng nằm đó một lượt. Không có gì báo lỗi cả — chỉ có
 * người dùng nhìn thấy một biểu mẫu lộn xộn.
 *
 * Viết cho cả `.nd-form` thay vì riêng từng phần tử: mai này thêm thứ gì cần
 * giấu thì không phải nhớ ra luật này lần nữa.
 */
.nd-form [hidden] {
	display: none;
}

.nd-form__legend {
	padding: 0;
	font-size: var( --wp--preset--font-size--h-3);
	font-weight: 600;
	color: var( --wp--preset--color--fg);
}

.nd-form__legend:focus-visible {
	outline: 2px solid var( --wp--custom--color--focus);
	outline-offset: 2px;
}

.nd-form__step-count {
	margin: 0;
	font-size: var( --wp--preset--font-size--caption);
	color: var( --wp--preset--color--fg-muted);
}

.nd-form__nav {
	display: flex;
	flex-wrap: wrap;
	gap: var( --wp--preset--spacing--2-xs);
}

/* ------------------------------------------------------------------ *
 * THANH DÍNH ĐÁY MÀN HÌNH — chỉ trên màn hình hẹp.
 *
 * `sticky` chứ KHÔNG PHẢI `fixed`, vì ba lý do:
 *
 * 1. `fixed` lấy thanh ra khỏi luồng, nên nó che mất phần chân trang và phải
 *    chèn thêm một khối rỗng bù vào — một khối rỗng mà ai sửa pattern sau này
 *    cũng sẽ tưởng là rác và xoá đi.
 * 2. `sticky` vẫn nằm trong luồng: cuộn tới đáy thật thì thanh về đúng chỗ của
 *    nó, không đè lên dòng cuối cùng.
 * 3. Khung chứa giữ được chiều cao, nên bộ so sánh ảnh còn chụp được thanh.
 *    Với `fixed`, ảnh chuẩn ra một khung trắng và bài kiểm trở thành vô nghĩa
 *    trong khi vẫn xanh.
 *
 * Từ khổ 768 trở lên nó là dải bình thường: trên màn hình rộng, một thanh dính
 * chiếm chỗ mà không giải quyết vấn đề gì.
 *
 * `env( safe-area-inset-bottom )` chừa chỗ cho thanh cử chỉ của iPhone; nơi nào
 * không có khái niệm đó thì hàm trả 0, nên không cần nhánh dự phòng.
 * ------------------------------------------------------------------ */

@media ( max-width: 767px ) {

	.nd-sticky-bar {
		position: sticky;
		z-index: 20;
		inset-block-end: 0;
		padding-bottom: calc( var( --wp--preset--spacing--2-xs) + env( safe-area-inset-bottom ) );
		box-shadow: var( --wp--preset--shadow--lg);
	}

	.nd-form--bar {
		margin-block-start: 0;
	}
}

/* ------------------------------------------------------------------ *
 * Các bước quy trình — T3.2
 *
 * `<ol>` thật nên trình đọc màn hình nghe được thứ tự. Số hiển thị lấy từ
 * bộ đếm của CSS chứ không gõ tay, để thêm bớt bước không phải sửa số.
 * ------------------------------------------------------------------ */

.nd-steps {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: var( --wp--preset--spacing--lg);
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: nd-step;
}

.nd-steps__item {
	counter-increment: nd-step;
	padding-block-start: var( --wp--preset--spacing--sm);
	border-block-start: 2px solid var( --wp--preset--color--line);
}

.nd-steps__item::before {
	content: counter(nd-step, decimal-leading-zero);
	display: block;
	margin-block-end: var( --wp--preset--spacing--2-xs);
	font-family: var( --wp--preset--font-family--display);
	font-size: var( --wp--preset--font-size--h-2);
	font-weight: 700;
	line-height: 1;
	color: var( --wp--preset--color--brand);
	font-variant-numeric: tabular-nums;
}

.nd-steps__time {
	margin: 0 0 var( --wp--preset--spacing--2-xs);
	font-size: var( --wp--preset--font-size--caption);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var( --wp--preset--color--fg-muted);
}

.nd-steps__title {
	margin: 0 0 var( --wp--preset--spacing--2-xs);
	font-family: var( --wp--preset--font-family--display);
	font-size: var( --wp--preset--font-size--h-3);
	line-height: 1.3;
}

.nd-steps__body {
	margin: 0;
	font-size: var( --wp--preset--font-size--small);
	color: var( --wp--preset--color--fg-muted);
}

/* ------------------------------------------------------------------ *
 * Trích dẫn khách hàng — T3.2
 *
 * <blockquote> và <cite> thật, không phải chữ nghiêng giả trích dẫn.
 * ------------------------------------------------------------------ */

.nd-quote {
	display: flex;
	flex-direction: column;
	gap: var( --wp--preset--spacing--sm);
	margin: 0;
	block-size: 100%;
}

.nd-quote__body {
	margin: 0;
	padding: 0;
	border: 0;
	flex: 1;
}

.nd-quote__body p {
	margin: 0;
	font-size: var( --wp--preset--font-size--body);
	line-height: 1.65;
}

.nd-quote__body p::before {
	content: "\201C";
}

.nd-quote__body p::after {
	content: "\201D";
}

.nd-quote__cite {
	display: flex;
	flex-direction: column;
	gap: var( --wp--preset--spacing--2-xs);
	padding-block-start: var( --wp--preset--spacing--2-xs);
	border-block-start: 1px solid var( --wp--preset--color--line);
}

.nd-quote__name {
	font-style: normal;
	font-weight: 600;
	font-size: var( --wp--preset--font-size--small);
}

.nd-quote__role {
	font-size: var( --wp--preset--font-size--caption);
	color: var( --wp--preset--color--fg-muted);
}