/* Article Headings – Font, Weight, and Color Only */
.article-content strong.heading-level-1 {
    font-size: 1.3em;
    font-weight: 700;
    color: #1a1a1a;
}

.article-content strong.heading-level-2 {
    font-size: 1.2em;
    font-weight: 700;
    color: #2a2a2a;
}

.article-content strong.heading-level-3 {
    font-size: 1.1em;
    font-weight: 600;
    color: #3a3a3a;
}

.article-content strong.heading-level-4 {
    font-size: 1em;
    font-weight: 600;
    color: #4a4a4a;
}

/* ──────────────────────────────────────────────────
   Inline Article Images (@image2 / @image3 tokens)
   Styling kept here — NO inline styles in HTML
────────────────────────────────────────────────── */
.article-inline-image {
    width: 100%;
    margin: 20px 0;
    text-align: center;
}

.article-inline-image img {
    width: 100%;
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    display: inline-block;
}

@media (max-width: 480px) {
    .article-inline-image img {
        border-radius: 5px;
    }
}

/* ──────────────────────────────────────────────────
   Bullet Line Styling
   Applied by renderArticleContent() in main.js
   Swallows preceding <br> to avoid extra lines
────────────────────────────────────────────────── */
.article-content .bullet-line {
    display: block;
    padding-left: 12px;
    margin: 4px 0;
}

/* ──────────────────────────────────────────────────
   Article Content — Readability Improvements
   Supplements the critical CSS already in article.php
────────────────────────────────────────────────── */
.article-content {
    font-family: 'Times New Roman', Times, Georgia, serif;
    word-break: break-word;
    overflow-wrap: break-word;
    text-align: justify;
}

/* Headings and bullet lines should never be justified */
.article-content strong,
.article-content .bullet-line,
.article-content .highlight-quote {
    text-align: left;
}

/* Spacing logic synced with article.php */
.article-content br {
    display: block;
    content: "";
    margin-top: 4px;
}

.article-content br+br {
    margin-top: 8px;
}

.article-content br+br+br {
    margin-top: 12px;
}

/* Mobile: tighten up font-size for comfortable reading */
@media (max-width: 480px) {
    .article-content {
        font-size: 15px;
        line-height: 1.75;
        text-align: left;
        /* Avoid justify on narrow mobile screens */
    }
}

/* ──────────────────────────────────────────────────
   Quotation Highlighting
   Applied by renderArticleContent() in main.js
   Styles the text INSIDE double quotes — quotes themselves are untouched
────────────────────────────────────────────────── */
.article-content .highlight-quote {
    /* font-style: italic; */
    color: #040404;
    font-weight: 550;
}