/*
 * Cửa sổ bật lên.
 *
 * Chỉ dùng biến của theme, mọi biến đều có giá trị dự phòng để block chạy được
 * trên theme mặc định của WordPress.
 *
 * KHÔNG CÓ MỘT DÒNG `z-index` NÀO TRONG FILE NÀY, VÀ ĐÓ LÀ ĐIỂM MẠNH.
 * `showModal()` đặt hộp thoại vào top layer của trình duyệt — một tầng nằm trên
 * toàn bộ cây tài liệu. Nó nổi trên header dính, trên cụm nút nổi, trên trình
 * phát video, mà không cần biết những thứ đó đang để z-index bao nhiêu.
 */

/*
 * TÊN LỚP LẶP HAI LẦN, VÀ ĐÓ LÀ CHỦ Ý.
 *
 * Hộp thoại nằm trong nội dung trang nên nó là con trực tiếp của một khối layout
 * "ràng buộc". Global styles do theme.json sinh ra áp cho MỌI con của khối đó
 * một bộ `max-width` bằng cột nội dung và một bộ `margin-block` theo blockGap.
 * Đo được trên site thật: hộp thoại rộng 1088px thay vì 544px, và `margin: auto`
 * bị thay bằng `margin-block-start` nên nó dính lên đỉnh màn hình.
 *
 * `dialog.nd-modal` — một thẻ một lớp — KHÔNG đủ để thắng: đã thử và vẫn thua ở
 * `margin-block-end`. Hai lớp thì thắng. Lặp `.nd-modal` là cách nâng độ đặc
 * hiệu mà không phải bám vào tên lớp `wp-block-*` do WordPress sinh, và không
 * phải dùng `!important` (CLAUDE.md §1.5).
 *
 * Triệu chứng nếu ai đó rút bớt một lớp: hộp thoại vẫn hiện ra, vẫn có nền mờ,
 * chỉ rộng gấp đôi và dính mép trên. Trông vẫn như một hộp thoại, nên rất dễ
 * tưởng là đúng.
 */
dialog.nd-modal.nd-modal {
	/*
	 * `inset-block: 0` để `margin: auto` căn được theo CHIỀU DỌC.
	 *
	 * Bảng kiểu mặc định của trình duyệt chỉ đặt mép trên cho `<dialog>`, nên
	 * `margin: auto` một mình chỉ căn giữa được chiều ngang và hộp thoại dính
	 * lên đỉnh màn hình. Phải có cả hai mép thì `auto` mới chia đều được.
	 */
	inset-block: 0;
	max-inline-size: min( 92vw, var( --nd-modal-width, 34rem ) );
	max-block-size: min( 92dvh, 48rem );
	inline-size: 100%;
	margin: auto;
	padding: 0;
	border: 0;
	border-radius: var( --wp--custom--radius--lg, 0.75rem );
	background: var( --wp--preset--color--canvas, #fff );
	color: var( --wp--preset--color--fg, #1f2328 );
	box-shadow: var( --wp--preset--shadow--xl, 0 24px 48px -12px rgb( 0 0 0 / 0.25 ) );
	overflow: hidden;
}

.nd-modal--sm {
	--nd-modal-width: 24rem;
}

.nd-modal--md {
	--nd-modal-width: 34rem;
}

.nd-modal--lg {
	--nd-modal-width: 52rem;
}

/*
 * `dvh` chứ không `vh` cho chiều cao tối đa.
 *
 * Trên iOS Safari, `100vh` là chiều cao khi thanh địa chỉ ĐÃ THU LẠI, nên hộp
 * thoại cao bằng `vh` bị thanh địa chỉ cắt mất phần đáy — và phần đáy thường là
 * chỗ đặt nút gửi. `dvh` đo phần thật sự nhìn thấy được. Dòng `max-block-size`
 * ở trên đã dùng nó; đây là lời giải thích.
 */

.nd-modal::backdrop {
	background: rgb( 0 0 0 / 0.55 );
}

.nd-modal__panel {
	position: relative;
	max-block-size: inherit;
	overflow-y: auto;

	/*
	 * Cuộn nằm ở ruột chứ không ở `<dialog>`: nút đóng phải đứng yên khi người
	 * ta cuộn nội dung dài, và một `position: sticky` bên trong phần tử đang
	 * cuộn thì bám đúng, còn bên trong dialog đang cuộn thì nhảy trên Safari.
	 */
	overscroll-behavior: contain;
}

.nd-modal__body {
	padding: var( --wp--preset--spacing--lg, 2rem );
}

.nd-modal__close {
	position: absolute;
	inset-block-start: var( --wp--preset--spacing--2-xs, 0.5rem );
	inset-inline-end: var( --wp--preset--spacing--2-xs, 0.5rem );
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;

	/* 44px là vùng bấm tối thiểu cho ngón tay — WCAG 2.5.8. */
	inline-size: 2.75rem;
	block-size: 2.75rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var( --wp--preset--color--surface, #f2f4f7 );
	color: var( --wp--preset--color--fg, #1f2328 );
	cursor: pointer;
	transition: background var( --wp--custom--motion--duration-fast, 120ms ) ease;
}

.nd-modal__close:hover {
	background: var( --wp--preset--color--line, #d8dce3 );
}

.nd-modal__close:focus-visible {
	outline: 2px solid var( --wp--preset--color--brand, #1f2328 );
	outline-offset: 2px;
}

.nd-modal__close svg {
	inline-size: 1.25rem;
	block-size: 1.25rem;
}

/*
 * Dự phòng khi KHÔNG có JavaScript.
 *
 * Nút mở là một liên kết `#id` thì không có JS, trình duyệt vẫn nhảy tới neo —
 * và một `<dialog>` chưa mở thì `display: none`, tức là nhảy tới hư không. Cho
 * `:target` hiện nó ra như một khối bình thường ở cuối trang: không còn là hộp
 * thoại, nhưng nội dung tới được, biểu mẫu vẫn gửi được.
 *
 * Không áp cho `[open]` vì lúc đó JavaScript đang lo, và hai luật chồng nhau
 * làm hộp thoại vừa nằm trong luồng vừa nằm ở top layer.
 */
dialog.nd-modal.nd-modal:target:not( [open] ) {
	display: block;
	position: static;
	max-block-size: none;
	margin-block: var( --wp--preset--spacing--lg, 2rem );
}

dialog.nd-modal.nd-modal:target:not( [open] ) .nd-modal__close {
	display: none;
}

@media ( max-width: 480px ) {

	dialog.nd-modal.nd-modal {
		max-inline-size: 100%;
		max-block-size: 92dvh;
	}

	.nd-modal__body {
		padding: var( --wp--preset--spacing--md, 1.5rem );
	}
}

@media ( prefers-reduced-motion: reduce ) {

	.nd-modal__close {
		transition: none;
	}
}