/* Hallmark · v2.0.0 · theme: hệ khoá sẵn của Quata (app.css) · shape: Index-First
   critique: CSS này tồn tại vì app.css là bản Tailwind đã biên dịch — utility
   không có sẵn trong đó thì viết class ra cũng vô tác dụng; mọi màu ở đây đi
   qua token khai báo trong app.css, không có literal. */

/*
 * Kiểu cho vùng nội dung do trình biên tập sinh ra (.quata-content).
 *
 * VÌ SAO LÀ CSS THƯỜNG, KHÔNG PHẢI TAILWIND:
 * assets/css/app.css là bản Tailwind ĐÃ BIÊN DỊCH từ quata/src. Viết thêm
 * utility mới trong PHP (kiểu [&_img]:max-w-full) không có tác dụng vì lớp đó
 * không tồn tại trong file đã build. Những quy tắc dưới đây phải chạy ngay,
 * không phụ thuộc bước build, nên viết thẳng bằng CSS.
 *
 * Nạp SAU app.css (xem inc/enqueue.php) để ghi đè được khi cần.
 */

/* --------------------------------------------------------------
 * ẢNH
 * Ảnh chèn qua trình biên tập mang width/height cứng trong HTML
 * (vd width="1024") trong khi cột chữ chỉ rộng 42rem -> tràn ra ngoài.
 * max-width ghi đè thuộc tính đó; height:auto giữ đúng tỉ lệ.
 * -------------------------------------------------------------- */
.quata-content img {
	max-width: 100%;
	height: auto;
	border-radius: var(--radius-card);
}

.quata-content > img,
.quata-content p > img {
	display: block;
	margin-top: 2rem;
	margin-bottom: 2rem;
}

/* figure cũng nhận width cứng từ Gutenberg/Classic editor */
.quata-content figure {
	max-width: 100%;
	width: auto;
	margin: 2.5rem 0;
}

.quata-content figure img {
	margin: 0;
}

.quata-content figcaption,
.quata-content .wp-caption-text {
	margin-top: 0.75rem;
	text-align: center;
	font-size: 14px;
	line-height: 1.6;
	color: var(--color-muted);
}

.quata-content .wp-caption {
	max-width: 100%;
	width: auto !important; /* shortcode caption cũ đặt width inline */
}

/* --------------------------------------------------------------
 * LỚP CANH LỀ CỦA WORDPRESS
 * Không xử lý thì ảnh float ra khỏi cột chữ.
 * -------------------------------------------------------------- */
.quata-content .aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.quata-content .alignnone {
	max-width: 100%;
	height: auto;
}

.quata-content .alignleft {
	float: left;
	margin: 0.5rem 1.75rem 1.25rem 0;
	max-width: 50%;
}

.quata-content .alignright {
	float: right;
	margin: 0.5rem 0 1.25rem 1.75rem;
	max-width: 50%;
}

/* Màn hẹp: bỏ float, ảnh chiếm trọn chiều ngang cho dễ xem */
@media (max-width: 640px) {
	.quata-content .alignleft,
	.quata-content .alignright {
		float: none;
		margin: 2rem 0;
		max-width: 100%;
	}
}

/* Khối rộng hơn cột chữ của Gutenberg */
.quata-content .alignwide,
.quata-content .alignfull {
	max-width: 100%;
	margin-left: 0;
	margin-right: 0;
}

/* --------------------------------------------------------------
 * BẢNG - cuộn ngang thay vì đẩy rộng cả trang
 * -------------------------------------------------------------- */
.quata-content .table-scroll {
	margin: 2rem 0;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.quata-content table {
	width: 100%;
	border-collapse: collapse;
	font-size: 15px;
}

.quata-content th,
.quata-content td {
	border: 1px solid var(--color-line);
	padding: 0.75rem;
	vertical-align: top;
	text-align: left;
}

.quata-content th {
	background: var(--color-paper);
	font-weight: 700;
	color: var(--color-ink);
}

/* --------------------------------------------------------------
 * NHÚNG (YouTube, bản đồ…) và media khác
 * -------------------------------------------------------------- */
.quata-content iframe,
.quata-content embed,
.quata-content object,
.quata-content video {
	max-width: 100%;
	margin: 2rem 0;
	border-radius: var(--radius-card);
}

.quata-content iframe {
	width: 100%;
	aspect-ratio: 16 / 9;
	height: auto;
	border: 0;
}

.quata-content .wp-video,
.quata-content .wp-video-shortcode {
	width: 100% !important;
	max-width: 100%;
}

/* --------------------------------------------------------------
 * MÃ NGUỒN
 * -------------------------------------------------------------- */
.quata-content pre {
	margin: 2rem 0;
	padding: 1.25rem;
	overflow-x: auto;
	border-radius: var(--radius-card);
	background: var(--color-ink);
	color: var(--color-white);
	font-size: 14px;
	line-height: 1.7;
}

.quata-content code {
	word-break: break-word;
}

.quata-content :not(pre) > code {
	padding: 0.15em 0.4em;
	border-radius: 0.375rem;
	background: var(--color-paper);
	font-size: 0.92em;
}

/* --------------------------------------------------------------
 * CHỐNG TRÀN CHUNG
 * URL dài không có dấu cách cũng đủ làm rộng cả cột trên điện thoại.
 * -------------------------------------------------------------- */
.quata-content {
	overflow-wrap: break-word;
}

.quata-content a {
	overflow-wrap: break-word;
}

/* ==============================================================
 * TRANG TÁC GIẢ (author.php)
 *
 * Viết bằng CSS thường vì app.css là bản Tailwind đã biên dịch: các
 * utility cần ở đây (grid-cols tuỳ biến, order-*) không có sẵn trong
 * file đó nên viết class ra cũng không có tác dụng.
 * ============================================================== */

/* Đầu trang: cột chữ bên trái, ảnh đại diện bên phải, cùng canh trên.
   Dùng lưới chứ không phải flex justify-between — với flex, khối chữ co
   theo nội dung và bị đẩy sang phải khi ảnh nhỏ, chừa trống nửa trái. */
.author-head {
	display: grid;
	gap: 1.75rem;
}

.author-head__avatar img {
	border-radius: 9999px;
	width: 88px;
	height: 88px;
}

@media (min-width: 1024px) {
	.author-head {
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: start;
		gap: 3rem;
	}

	.author-head__avatar img {
		width: 120px;
		height: 120px;
	}
}

/* ==============================================================
 * TRẠNG THÁI TƯƠNG TÁC
 * Vòng focus hiện tức thì, tương phản đủ; không dùng transition
 * để nó xuất hiện ngay khi chuyển tab.
 * ============================================================== */
.quata-content a:focus-visible,
.author-head a:focus-visible,
.tacgia-bio a:focus-visible {
	outline: 2px solid var(--color-brand-ink);
	outline-offset: 2px;
	border-radius: 2px;
}

.quata-content a:active,
.author-head a:active,
.tacgia-bio a:active {
	color: var(--color-brand-ink);
}

/* ==============================================================
 * TRANG GIỚI THIỆU TÁC GIẢ (template-tac-gia.php)
 *
 * Viết CSS thường: các utility cần ở đây (grid-cols tuỳ biến, sticky
 * theo breakpoint) không có trong app.css đã biên dịch.
 * ============================================================== */

/* Giới thiệu bên trái, hộp chuyên môn dính bên phải. */
.tacgia-bio {
	display: grid;
	gap: 3rem;
}

@media (min-width: 1024px) {
	.tacgia-bio {
		grid-template-columns: minmax(0, 42rem) 1fr;
		gap: 5rem;
	}

	.tacgia-bio__aside {
		position: sticky;
		top: 7rem;
		align-self: start;
	}
}

/* Hàng chỉ số dưới hồ sơ. */
.tacgia-stats {
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem 3rem;
}

/* ==============================================================
 * PHÂN TRANG
 *
 * Nút số phải rộng tối thiểu bằng chiều cao để một chữ số vẫn ra
 * hình tròn; nhiều chữ số thì nở ngang theo nội dung.
 * min-w-11 không có trong app.css đã biên dịch nên viết ở đây.
 * ============================================================== */
.quata-page-num {
	min-width: 2.75rem; /* = h-11 */
}