/* ============================================================
   CORE — .prose : มาตรฐานเนื้อหา rich / บทความ ทั้งเว็บ  [2026-07-06]
   ใช้กับเนื้อหาจาก text editor (Quill / TinyMCE) + หน้าเนื้อหายาว
   ครอบ .ql-rendered / .article-content ด้วย เพื่อให้เนื้อหาเดิมได้มาตรฐานเดียวกัน
   (ขนาด/ฟอนต์/line-height ผูก token → ใหญ่ เท่ากัน responsive สบายตา)
   ============================================================ */
.prose,
.ql-rendered,
.article-content {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 400;
  color: var(--text);
}
.prose > :first-child,
.ql-rendered > :first-child,
.article-content > :first-child { margin-top: 0; }
.prose > :last-child,
.ql-rendered > :last-child,
.article-content > :last-child { margin-bottom: 0; }

.prose p, .ql-rendered p, .article-content p {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  margin: 0 0 1em;
}
.prose li, .ql-rendered li, .article-content li {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  margin: 0 0 .5em;
}
.prose ul, .prose ol,
.ql-rendered ul, .ql-rendered ol,
.article-content ul, .article-content ol { margin: 0 0 1em; padding-left: 1.4em; }

.prose h2, .ql-rendered h2, .article-content h2 { font-size: var(--fs-h3);   line-height: var(--lh-heading); margin: 1.4em 0 .5em; }
.prose h3, .ql-rendered h3, .article-content h3 { font-size: var(--fs-h4);   line-height: var(--lh-heading); margin: 1.3em 0 .5em; }
.prose h4, .ql-rendered h4, .article-content h4,
.prose h5, .ql-rendered h5, .article-content h5 { font-size: var(--fs-lead); line-height: var(--lh-heading); margin: 1.2em 0 .5em; font-family: var(--font-heading); }

.prose img, .ql-rendered img, .article-content img { max-width: 100%; height: auto; border-radius: 10px; }
.prose a, .ql-rendered a, .article-content a { color: var(--primary); text-decoration: underline; }
.prose blockquote, .ql-rendered blockquote, .article-content blockquote {
  margin: 1em 0; padding: .6em 1em; border-left: 4px solid var(--primary);
  background: var(--surface-alt); border-radius: 6px; color: var(--text-muted);
}

/* Quill size classes → map เข้า scale ของระบบ (คุมไม่ให้ผู้ใช้ตั้งขนาดมั่ว/หลุดมาตรฐาน)
   ใช้ทั้งเนื้อหาที่ render แล้ว (.ql-rendered) — หน้า detail ไม่โหลด quill.snow.css ของเราจึงชนะ */
.ql-rendered .ql-size-small { font-size: var(--fs-body-sm); }
.ql-rendered .ql-size-large { font-size: var(--fs-lead); }
.ql-rendered .ql-size-huge  { font-size: var(--fs-h3); }

/* Editor font classes → จำกัดฟอนต์ design system (ใช้ทั้ง TinyMCE + เนื้อหาเดิม) */
.ql-font-anuphan     { font-family: var(--font-body); }
.ql-font-saochingcha { font-family: var(--font-display); }
.ql-font-thsarabun   { font-family: "TH Sarabun New", var(--font-body); }   /* ตัวเลือกฟอนต์ทางการ (โหลด @font-face ใน core/fonts.css) */

/* ป้ายกำกับตัวเลือกฟอนต์ในกล่อง editor (Quill snow) ให้เป็นภาษาไทย */
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="anuphan"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="anuphan"]::before { content: "เนื้อหา"; font-family: var(--font-body); }
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="saochingcha"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="saochingcha"]::before { content: "หัวเรื่อง"; font-family: var(--font-display); }

/* ป้ายกำกับขนาดในกล่อง editor (Quill snow) → ภาษาไทย (เล็ก/ปกติ/ใหญ่/หัวข้อ)
   ต้อง !important เพราะ quill.snow.css โหลดทีหลังและมี label ดีฟอลต์ (Small/Normal/Large/Huge) อยู่แล้ว */
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="small"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="small"]::before { content: "เล็ก"  !important; }
.ql-snow .ql-picker.ql-size .ql-picker-label:not([data-value])::before,
.ql-snow .ql-picker.ql-size .ql-picker-item:not([data-value])::before { content: "ปกติ"  !important; }
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="large"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="large"]::before { content: "ใหญ่"  !important; }
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="huge"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="huge"]::before { content: "หัวข้อ" !important; }