/* ==================================================================
   quill-content.css
   สไตล์สำหรับ "เนื้อหาที่บันทึกจาก Quill" เวลานำไปแสดงบนหน้าเว็บจริง
   (หน้าเว็บไม่ได้โหลด quill.snow.css จึงต้องมีสไตล์ชุดนี้ ไม่งั้น
    การจัดกลาง / ย่อหน้า / ขนาดตัวอักษร / bullet จะหายไปหมด)
   ================================================================== */

/* ---------- การจัดวาง ---------- */
.ql-align-center  { text-align: center; }
.ql-align-right   { text-align: right; }
.ql-align-justify { text-align: justify; }

/* ---------- ย่อหน้า (indent) ---------- */
.ql-indent-1 { padding-left: 3em; }
.ql-indent-2 { padding-left: 6em; }
.ql-indent-3 { padding-left: 9em; }
.ql-indent-4 { padding-left: 12em; }
.ql-indent-5 { padding-left: 15em; }
.ql-indent-6 { padding-left: 18em; }
.ql-indent-7 { padding-left: 21em; }
.ql-indent-8 { padding-left: 24em; }
.ql-indent-9 { padding-left: 27em; }

.ql-direction-rtl.ql-indent-1 { padding-left: 0; padding-right: 3em; }
.ql-direction-rtl.ql-indent-2 { padding-left: 0; padding-right: 6em; }
.ql-direction-rtl.ql-indent-3 { padding-left: 0; padding-right: 9em; }

/* ---------- ขนาดตัวอักษร ---------- */
.ql-size-small { font-size: 0.75em; }
.ql-size-large { font-size: 1.5em; }
.ql-size-huge  { font-size: 2.5em; }

/* ---------- ฟอนต์ ---------- */
.ql-font-serif     { font-family: Georgia, "Times New Roman", serif; }
.ql-font-monospace { font-family: Monaco, "Courier New", monospace; }

/* ---------- ทิศทางข้อความ ---------- */
.ql-direction-rtl { direction: rtl; text-align: inherit; }

/* ---------- รายการ (Quill 2 ใช้ <ol> + data-list ทั้งหมด) ----------
   ถ้าไม่มีสไตล์ชุดนี้ bullet จะกลายเป็นตัวเลข 1. 2. 3. บนหน้าเว็บ     */
ol { counter-reset: ql-l0; }              /* ไม่มีผลกับ <ol> ปกติ */

li[data-list] {
    list-style-type: none;
    position: relative;
    padding-left: 0.3em;
}
li[data-list] > .ql-ui { display: none; } /* span ที่ editor ใส่มา */

li[data-list]::before {
    display: inline-block;
    width: 1.2em;
    margin-left: -1.5em;
    margin-right: 0.3em;
    text-align: right;
    white-space: nowrap;
}

li[data-list="ordered"]         { counter-increment: ql-l0; }
li[data-list="ordered"]::before { content: counter(ql-l0, decimal) ". "; }
li[data-list="bullet"]::before    { content: "\2022"; }   /* • */
li[data-list="checked"]::before   { content: "\2611"; }   /* ☑ */
li[data-list="unchecked"]::before { content: "\2610"; }   /* ☐ */

/* ---------- code block ---------- */
pre.ql-syntax {
    background-color: #23241f;
    color: #f8f8f2;
    overflow: auto;
    padding: 10px 12px;
    border-radius: 4px;
    white-space: pre-wrap;
}

/* ---------- วิดีโอที่ฝังจาก Quill ---------- */
iframe.ql-video {
    width: 100%;
    max-width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
    border: 0;
}

/* ---------- รูปในเนื้อหาไม่ให้ล้นจอ ---------- */
.ql-editor img,
li[data-list] img { max-width: 100%; height: auto; }