/* NewsHub Editorial Article Design v37 */

.article-content {
    --article-blue: #214fce;
    --article-dark: #172e78;
    --article-red: #d92742;
    --article-border: #dce5f5;
    font-size: clamp(16px, 1.15vw, 18px);
    line-height: 1.9;
    color: #26334b;
    overflow-wrap: break-word;
}

.article-content > * {
    max-width: 100%;
}

.article-content p {
    margin: 0 0 1.2em;
    line-height: 1.9;
}

.article-content h2 {
    color: #172e78;
    font-size: clamp(23px, 2.4vw, 30px);
    line-height: 1.4;
    font-weight: 800;
    border-inline-start: 4px solid var(--article-blue);
    padding-inline-start: 14px;
    margin: 2em 0 .85em;
    scroll-margin-top: 90px;
}

.article-content h3 {
    color: #2145a3;
    font-size: clamp(19px, 2vw, 24px);
    font-weight: 750;
    margin: 1.7em 0 .7em;
}

.article-content h4 {
    color: #344b80;
    font-weight: 750;
    margin: 1.4em 0 .65em;
}

/* Existing editorial cards and legacy class variants */

.article-content :is(
    .hero-card, .intro-card, .answer-card,
    .quick-answer, .quick-answer-box,
    .summary-card, .summary-box,
    .blue-card, .highlight-box
) {
    background: linear-gradient(125deg, #172e78, #245be2);
    color: #fff;
    border: 1px solid #3766df;
    border-radius: 14px;
    padding: clamp(18px, 3vw, 30px);
    margin: 1.6em 0;
    box-shadow: 0 12px 28px rgba(28, 71, 174, .14);
}

.article-content :is(
    .hero-card, .intro-card, .answer-card,
    .quick-answer, .quick-answer-box,
    .summary-card, .summary-box,
    .blue-card, .highlight-box
) :is(h2, h3, h4, p, strong, span) {
    color: inherit;
}

.article-content :is(
    .hero-card, .intro-card, .answer-card,
    .quick-answer, .quick-answer-box,
    .summary-card, .summary-box,
    .blue-card, .highlight-box
) :is(h2, h3, h4) {
    border: 0;
    padding: 0;
    margin-top: 0;
}

/* Table of contents */

.article-content :is(
    .toc, .toc-box, .table-of-contents,
    .guide-box, .guide-card, .contents-box
) {
    background: #f9fbff;
    border: 1px solid #cbd9f5;
    border-radius: 12px;
    padding: clamp(18px, 3vw, 28px);
    margin: 1.7em 0;
    box-shadow: 0 4px 18px rgba(20, 50, 110, .04);
}

.article-content :is(
    .toc, .toc-box, .table-of-contents,
    .guide-box, .guide-card, .contents-box
) :is(h2, h3) {
    border: 0;
    padding: 0;
    margin-top: 0;
}

.article-content :is(ul, ol) {
    padding-inline-start: 1.6em;
    margin: 1em 0 1.4em;
}

.article-content li {
    margin: .5em 0;
}

.article-content li::marker {
    color: var(--article-red);
}

/* Notes and warnings */

.article-content :is(
    .important, .important-box,
    .warning, .warning-box,
    .notice, .notice-box
) {
    background: #fff6e9;
    border-inline-start: 4px solid #f59e0b;
    border-radius: 10px;
    padding: 18px 22px;
    margin: 1.5em 0;
}

.article-content :is(
    .info-box, .note-box,
    .tip-box, .callout
) {
    background: #f3f7ff;
    border: 1px solid #cbdcfb;
    border-inline-start: 4px solid var(--article-blue);
    border-radius: 10px;
    padding: 18px 22px;
    margin: 1.5em 0;
}

.article-content blockquote {
    background: #f3f7ff;
    border-inline-start: 4px solid var(--article-blue);
    border-radius: 10px;
    padding: 20px 24px;
    margin: 1.7em 0;
    color: #344b70;
    font-style: normal;
}

/* Tables */

.article-content table {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    border-collapse: collapse;
    margin: 1.7em 0;
    border-radius: 8px;
}

.article-content th {
    background: #1c398f;
    color: #fff;
    font-weight: 750;
}

.article-content td,
.article-content th {
    padding: 12px 15px;
    border: 1px solid #dce5f5;
    text-align: start;
}

.article-content tbody tr:nth-child(even) {
    background: #f4f7fe;
}

/* Images and links */

.article-content img {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: 12px;
    margin: 1.6em auto;
}

.article-content a {
    color: #b91c38;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.article-content a:hover {
    color: #8f1630;
}

.article-content pre {
    max-width: 100%;
    overflow-x: auto;
    background: #172033;
    color: #f8fafc;
    padding: 20px;
    border-radius: 12px;
}

@media (max-width: 640px) {
    .article-content {
        font-size: 16px;
        line-height: 1.85;
    }

    .article-content table {
        font-size: 13px;
    }

    .article-content td,
    .article-content th {
        padding: 9px;
    }
}

@media (prefers-reduced-motion: no-preference) {
    .article-content a {
        transition: color .2s ease;
    }
}

/* v38: article-specific restoration without affecting navigation or admin */
.article-wrapper{max-width:100%;min-width:0}
.article-content{font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;letter-spacing:normal}
[dir="rtl"] .article-content{font-family:Tajawal,system-ui,sans-serif}
.article-content :is(.article-hero,.article-intro,.intro-box,.hero-box,.gradient-box,.hero,.intro,.key-takeaways,.key-points){background:linear-gradient(125deg,#122e77,#2863df);color:#fff;border:1px solid #426fe3;border-radius:16px;padding:clamp(18px,3vw,32px);margin:1.5rem 0;box-shadow:0 12px 28px #173c8c20}
.article-content :is(.article-hero,.article-intro,.intro-box,.hero-box,.gradient-box,.hero,.intro,.key-takeaways,.key-points) :is(h1,h2,h3,h4,p,strong,span){color:inherit}
.article-content :is(.article-hero,.article-intro,.intro-box,.hero-box,.gradient-box,.hero,.intro,.key-takeaways,.key-points) :is(h1,h2,h3){border:0;padding:0;margin-top:0}
.article-content :is(.quick-answer,.quick-answer-box,.answer-box,.short-answer,.answer-card){background:#f0f6ff;color:#1d376d;border:1px solid #b8cff9;border-inline-start:5px solid #2563eb;border-radius:12px;padding:clamp(16px,2.5vw,25px);margin:1.5rem 0;box-shadow:0 3px 16px #173c8c0a}
.article-content :is(.quick-answer,.quick-answer-box,.answer-box,.short-answer,.answer-card) :is(h2,h3,h4,p,strong,span){color:inherit}
.article-content :is(.quick-answer,.quick-answer-box,.answer-box,.short-answer,.answer-card) :is(h2,h3){border:0;padding:0;margin-top:0}
.article-content :is(.toc,.toc-box,.toc-container,.table-of-contents,.guide-box,.guide-card,.contents-box,.in-this-guide){background:#f7faff;border:1px solid #c8d9f7;border-radius:14px;padding:clamp(18px,3vw,28px);margin:1.7rem 0}
.article-content :is(.toc,.toc-box,.toc-container,.table-of-contents,.guide-box,.guide-card,.contents-box,.in-this-guide) :is(h2,h3){color:#183e96;border:0;padding:0;margin-top:0}
.article-content :is(.toc,.toc-box,.toc-container,.table-of-contents,.guide-box,.guide-card,.contents-box,.in-this-guide) a{color:#b91c38}
.article-content :is(.important,.important-box,.warning,.warning-box,.notice,.notice-box,.alert-box){background:#fff4e9;color:#713f12;border:1px solid #ffddb7;border-inline-start:5px solid #f59e0b;border-radius:12px;padding:18px 22px;margin:1.5rem 0}
.article-content :is(.important,.important-box,.warning,.warning-box,.notice,.notice-box,.alert-box) :is(h2,h3,h4){color:#92400e;border:0;padding:0;margin-top:0}
.article-content :is(.badge,.pill,.category-pill){display:inline-flex;align-items:center;max-width:100%;border-radius:999px;padding:.28em .85em;font-size:.76em;font-weight:800;letter-spacing:.03em;background:#e9efff;color:#173c8c}
.article-content :is(.article-hero,.article-intro,.intro-box,.hero-box,.gradient-box,.hero,.intro) :is(.badge,.pill,.category-pill){background:#ffffff2b;color:#fff;border:1px solid #ffffff66}
.article-content :is(h2,h3,h4)[id]{scroll-margin-top:100px}
.article-content :is(table,pre){max-width:100%;overflow-x:auto}
.article-content th{background:#193982;color:#fff}
.article-content :is(.quick-answer,.quick-answer-box,.answer-box,.short-answer,.answer-card) th{color:#fff}
.article-content :is(.article-hero,.article-intro,.intro-box,.hero-box,.gradient-box,.hero,.intro) a{color:#fff}
.article-content :is(.article-hero,.article-intro,.intro-box,.hero-box,.gradient-box,.hero,.intro) strong{color:#fff}
@media(max-width:640px){.article-content :is(.article-hero,.article-intro,.intro-box,.hero-box,.gradient-box,.hero,.intro,.quick-answer,.quick-answer-box,.answer-box,.short-answer,.answer-card,.toc,.toc-box,.toc-container,.table-of-contents,.guide-box,.guide-card,.contents-box,.in-this-guide){padding:17px}}

.article-content.article-content :is(.quick-answer,.quick-answer-box,.answer-card){background:#f0f6ff;color:#1d376d;border:1px solid #b8cff9;border-inline-start:5px solid #2563eb;box-shadow:0 3px 16px #173c8c0a}
.article-content.article-content :is(.quick-answer,.quick-answer-box,.answer-card) :is(h2,h3,h4,p,strong,span){color:inherit}