/**
 * token ทั้งเว็บของบล็อกตารางข้อมูล (--czt-*) — spec blocks-v2 §4.6 · §7
 *
 * ค่าเริ่ม = ห่วงโซ่ CSS ล้วน (ไม่ตรวจธีมด้วย PHP): ค่าที่ตั้งในหน้า "ธีมตารางข้อมูล" (--czt-set-*)
 *   → Kadence (--global-*) → theme.json (--wp--preset--*) → ดำ/เทา/ขาว · ไม่มีสีแบรนด์ของ CIRNEY
 * ตั้งที่ :root และ .editor-styles-wrapper — var() ในตัวแปรคำนวณตรงที่ประกาศ ธีมที่ตั้งตัวแปรใต้ตัวห่อของ editor จึงยังถูกอ่าน
 * ค่าต่อบล็อก (--cz-{ชิ้นส่วน}-*) ทับ token เหล่านี้ใน CSS ของบล็อก
 */
:root,
.editor-styles-wrapper {
	--czt-font: var(--czt-set-font, var(--global-body-font-family, var(--wp--preset--font-family--body, system-ui, sans-serif)));
	--czt-font-weight: var(--czt-set-font-weight); /* ไม่ตั้ง = ตัวแปรใช้ไม่ได้ → font-weight สืบทอดจากที่วาง */
	--czt-text: var(--czt-set-text); /* ไม่ตั้ง = สีตัวอักษรของธีมตรงจุดที่วาง (สืบทอด) */
	--czt-muted: var(--czt-set-muted, var(--global-palette5, var(--wp--preset--color--contrast-2, #6b6b6b)));
	--czt-line: var(--czt-set-line, var(--global-palette7, #d0d0d0));
	--czt-field-bg: var(--czt-set-field-bg, var(--global-palette9, var(--wp--preset--color--base, #ffffff)));
	--czt-surface: var(--czt-set-surface, transparent);
	--czt-accent: var(--czt-set-accent, var(--global-palette-btn-bg, var(--wp--preset--color--primary, var(--wp--preset--color--contrast, #111111))));
	--czt-accent-ink: var(--czt-set-accent-ink, var(--global-palette-btn, var(--wp--preset--color--base, #ffffff)));
	--czt-focus: var(--czt-set-focus, var(--czt-accent));
	--czt-sale: var(--czt-set-sale, #b42318);
	--czt-radius-field: var(--czt-set-radius-field, 6px);
	--czt-radius-button: var(--czt-set-radius-button, 6px);
	--czt-radius-card: var(--czt-set-radius-card, 8px);
	--czt-gap: var(--czt-set-gap, 1rem);
	--czt-anchor-offset: var(--czt-set-anchor-offset, 6rem); /* ระยะเผื่อ header ติดบนเมื่อเลื่อนไปที่ anchor (#ตาราง-รหัส) */
	--czt-placeholder: var(--czt-muted); /* ข้อความตัวอย่างในช่อง — เบราว์เซอร์ที่รองรับ color-mix ได้สีที่จางกว่า (ข้างล่าง) */
}

/* color-mix (Chrome 111 · Safari 16.2 · Firefox 113) — เบราว์เซอร์ที่รองรับได้ตัวอักษรรอง/เส้นขอบจากสีตัวอักษรของจุดที่วาง (เมื่อธีมไม่มี palette) */
@supports (color: color-mix(in srgb, red 50%, transparent)) {
	:root,
	.editor-styles-wrapper {
		--czt-muted: var(--czt-set-muted, var(--global-palette5, var(--wp--preset--color--contrast-2, color-mix(in srgb, currentColor 65%, transparent))));
		--czt-line: var(--czt-set-line, var(--global-palette7, color-mix(in srgb, currentColor 22%, transparent)));
		/* สีรองของ Kadence (palette5) ใกล้สีตัวอักษรจนค่าต่ำสุด/สูงสุดในช่องช่วงดูเหมือนค่าที่พิมพ์ไว้ → จางลง 30% (R303) */
		--czt-placeholder: color-mix(in srgb, var(--czt-muted) 70%, transparent);
	}
}

/* รากของบล็อกรอบ 2 (Cirney_Blocks_Kit::wrap) — ฟอนต์จาก token · ตัวควบคุมด้านในสืบทอดจากราก (spec §6.4) */
.cz-b {
	font-family: var(--czt-font);
	font-weight: var(--czt-font-weight);
}

.cz-b :is(select, input, button, textarea) {
	font-family: inherit;
}

/*
 * ตัวควบคุม (ตัวกรอง · เรียงตาม · จำนวนผล · ปุ่ม — คลาส cz-ctl) — คำตัดสิน R100
 * หัวข้อ: ค่าเริ่ม "อยู่บนช่อง" ทุกบล็อก · cz-lp-left = หัวข้อซ้ายของช่อง (CSS ของบล็อกอ่านระยะใต้หัวข้อจาก --_cz-lm)
 * วางเรียงในแถว (กลุ่มแนวนอน/กริดของ WordPress): ชิดล่าง = ช่องของทุกตัวอยู่แนวเดียวกันแม้บางตัวมีหัวข้อบางตัวไม่มี
 */
.cz-b.cz-lp-left[class] {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	column-gap: 0.6em;
	--_cz-lm: 0;
}
.cz-b.cz-lp-left[class] > .cz-b__label {
	grid-column: 1;
}
.cz-b.cz-lp-left[class] > :not(.cz-b__label) {
	grid-column: 2;
}
:where(.is-layout-flex:not(.is-vertical)) > .cz-ctl {
	align-self: flex-end;
}
:where(.is-layout-grid) > .cz-ctl {
	align-self: end;
}

/* ซ่อนตามอุปกรณ์ (czHide · แท็บ ขั้นสูง) — จุดตัดเท่า Kadence (คำตัดสิน R26) · ในหน้าแก้ไขแสดงจางแทนการซ่อน */
@media (min-width: 1025px) {
	.cz-hide-d { display: none !important; }
}
@media (min-width: 768px) and (max-width: 1024px) {
	.cz-hide-t { display: none !important; }
}
@media (max-width: 767px) {
	.cz-hide-m { display: none !important; }
}
.editor-styles-wrapper :is(.cz-hide-d, .cz-hide-t, .cz-hide-m) {
	display: revert !important;
	opacity: 0.45;
}