/* ============================================
   VIEW STYLES — แสดงผลบทความ (Zero-Dependency)
   ============================================ */

.article-content {
    line-height: 1.8;
    color: var(--fallback-bc, oklch(var(--bc)/0.8));
    font-size: 1.125rem;
    word-break: break-word;
    white-space: pre-wrap;
    overflow-wrap: break-word;

    /* Reading-friendly constraint (736px) */
    max-width: 736px;
    margin-left: auto;
    margin-right: auto;
}

/* ─── Base Elements ─── */
.article-content p {
    margin-top: 1.25em;
    margin-bottom: 1.25em;
}

/* ซ่อน empty paragraphs ที่ไม่มีความหมาย */
.article-content p:empty {
    margin: 0;
    min-height: 0;
    display: none;
}

.article-content p[class*="ql-align"]:empty {
    display: none;
}

/* ─── Headings ─── */
.article-content h1 {
    font-size: 2.25em;
    margin-top: 0;
    margin-bottom: 0.88em;
    line-height: 1.1;
    font-weight: 800;
    color: var(--fallback-bc, oklch(var(--bc)/1));
}

.article-content h2 {
    font-size: 1.5em;
    margin-top: 2em;
    margin-bottom: 1em;
    line-height: 1.33;
    font-weight: 700;
    color: var(--fallback-bc, oklch(var(--bc)/1));
}

.article-content h3 {
    font-size: 1.25em;
    margin-top: 1.6em;
    margin-bottom: 0.6em;
    line-height: 1.6;
    font-weight: 600;
    color: var(--fallback-bc, oklch(var(--bc)/1));
}

.article-content h4 {
    font-size: 1em;
    margin-top: 1.5em;
    margin-bottom: 0.5em;
    line-height: 1.5;
    font-weight: 600;
    color: var(--fallback-bc, oklch(var(--bc)/1));
}

/* ─── Lists (Quill Robust Fix - Refined Margin Pull) ─── */
.article-content ol,
.article-content ul {
    list-style-type: none;
    padding-left: 0;
    margin-top: 1.25em;
    margin-bottom: 1.25em;
}

.article-content ol {
    counter-reset: list-0;
}

.article-content li {
    padding-left: 1.5em;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}

/* Markers for UL (Bullets) */
.article-content ul > li::before {
    content: "\2022";
    display: inline-block;
    width: 1.2em;
    margin-left: -1.5em;
    margin-right: 0.3em;
    text-align: right;
    font-weight: bold;
}

/* Markers for OL (Numbers) */
.article-content ol > li {
    counter-increment: list-0;
}

.article-content ol > li::before {
    content: counter(list-0) ". ";
    display: inline-block;
    width: 1.2em;
    margin-left: -1.5em;
    margin-right: 0.3em;
    text-align: right;
}

/* Nested structural support */
.article-content li > ul,
.article-content li > ol {
    margin-top: 0;
    margin-bottom: 0;
    padding-left: 0;
}

/* Indentation Classes (Flat & Nested) */
.article-content .ql-indent-1 { padding-left: 3em !important; }
.article-content .ql-indent-2 { padding-left: 4.5em !important; }
.article-content .ql-indent-3 { padding-left: 6em !important; }
.article-content .ql-indent-4 { padding-left: 7.5em !important; }
.article-content .ql-indent-5 { padding-left: 9em !important; }
.article-content .ql-indent-6 { padding-left: 10.5em !important; }
.article-content .ql-indent-7 { padding-left: 12em !important; }
.article-content .ql-indent-8 { padding-left: 13.5em !important; }

/* Nested Bullet Styles */
.article-content ul li.ql-indent-1::before { content: "\25CB"; }
.article-content ul li.ql-indent-2::before { content: "\25AA"; }
/* ─── Blockquotes ─── */
.article-content blockquote {
    font-style: italic;
    font-weight: 500;
    border-left: 0.25rem solid var(--fallback-p, oklch(var(--p)/1));
    background-color: var(--fallback-b2, oklch(var(--b2)/0.3));
    padding: 1rem 1.5rem;
    margin: 1.6em 0;
    border-radius: 0.5rem;
    color: var(--fallback-bc, oklch(var(--bc)/1));
}

/* Fix for consecutive blockquotes generated by Quill's flat structure */
.article-content blockquote + blockquote {
    margin-top: -1.6em;
    padding-top: 0.25rem;
}

/* Override inline styles from copy-paste */
.article-content blockquote * {
    color: inherit !important;
    background-color: transparent !important;
}

/* ─── Code ─── */
/* Inline code */
.article-content code:not(pre code) {
    background-color: var(--fallback-b2, oklch(var(--b2)/1));
    color: var(--fallback-bc, oklch(var(--bc)/1));
    padding: 0.2em 0.4em;
    border-radius: 0.375rem;
    font-size: 0.875em;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

/* Code block */
.article-content pre {
    background-color: var(--fallback-b2, oklch(var(--b2)/1));
    color: var(--fallback-bc, oklch(var(--bc)/1));
    padding: 1.25rem 1.5rem;
    border-radius: 0.75rem;
    margin: 1.6em 0;
    overflow-x: auto;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

/* ─── Text Formatting & Links ─── */
.article-content strong, 
.article-content b { 
    font-weight: 700; 
}

.article-content em, 
.article-content i { 
    font-style: italic; 
}

.article-content u { 
    text-decoration: underline; 
}

.article-content s, 
.article-content strike { 
    text-decoration: line-through; 
}

.article-content a {
    color: var(--fallback-p, oklch(var(--p)/1));
    text-decoration: underline;
    text-underline-offset: 4px;
    transition: all 0.2s ease-in-out;
}

.article-content a:hover {
    color: var(--fallback-pf, oklch(var(--pf)/1));
    text-decoration-thickness: 2px;
}


/* ─── Media (Images & Videos) ─── */
/* Base Image Style — inline-block allows side-by-side placement */
.article-content img {
    display: inline-block;
    vertical-align: middle;
    max-width: 100%;
    height: auto;
    margin: 1em 0.5em;
}

/* Video Handling (.ql-video and iframe) */
.article-content .ql-video,
.article-content iframe[src*="youtube"],
.article-content iframe[src*="youtu.be"],
.article-content a[href*="youtube.com/embed"],
.article-content a[href*="youtu.be"] {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: var(--fallback-b3, oklch(var(--b3)/1));
    margin: 2em 0;
    border: none;
}

/* ─── Alignment ─── */
.article-content .ql-align-center { text-align: center !important; }
.article-content .ql-align-right { text-align: right !important; }
.article-content .ql-align-left { text-align: left !important; }
.article-content .ql-align-justify { text-align: justify !important; }

/* ─── Quill Container Override ─── */
.quill-view-override.ql-container {
    height: auto !important;
    border: none !important;
    font-family: inherit !important;
}

.quill-view-override .ql-editor {
    overflow-y: visible !important;
    padding: 0 !important;
    white-space: normal !important;
}

/* ─── ULTIMATE GAP NUKE ─── */
/* 1. Kill container top margin to prevent external collapse */
.article-content,
.article-content .ql-editor { margin-top: 0 !important; }

/* 2. Kill the first/last child MARGIN completely */
.article-content .ql-editor > :first-child { margin-top: 0 !important; }
.article-content .ql-editor > :last-child { margin-bottom: 0 !important; }

/* 3. Kill invisible newline text-nodes from rendering as massive gaps */
.article-content,
.article-content .ql-editor {
    white-space: normal !important; 
}

/* 4. Retain text formatting ONLY inside actual content elements */
.article-content .ql-editor p,
.article-content .ql-editor h1,
.article-content .ql-editor h2,
.article-content .ql-editor h3,
.article-content .ql-editor h4,
.article-content .ql-editor h5,
.article-content .ql-editor h6,
.article-content .ql-editor blockquote,
.article-content .ql-editor li {
    white-space: pre-wrap !important;
}