/* Guide articles (backend layout "Article", PageView/Pages/Article.html).
   The body comes from the RTE as plain HTML, so the design's utility classes are applied here by element. */

/* overflow-x: hidden on the wrapper would break the sticky sidebar; clip cuts overflow the same way */
.article-page { overflow-x: clip !important; }

.article-featured { --bs-aspect-ratio: 40%; }
.article-featured img { object-fit: cover; object-position: top center; }

.article-body h2 {
    font-size: var(--sizes-heading-h4-size);
    line-height: var(--sizes-heading-h4-lh);
    letter-spacing: var(--sizes-heading-h4-lp);
    margin: 3rem 0 1rem;
    scroll-margin-top: 100px;
}
.article-body h3 {
    font-size: var(--sizes-heading-h5-size);
    line-height: var(--sizes-heading-h5-lh);
    letter-spacing: var(--sizes-heading-h5-lp);
    margin: 2rem 0 .75rem;
    scroll-margin-top: 100px;
}
.article-body h4 { font-size: var(--sizes-heading-h6-size); margin: 1.5rem 0 .5rem; }
@media (min-width: 1200px) {
    .article-body h2 {
        font-size: var(--sizes-heading-h3-size);
        line-height: var(--sizes-heading-h3-lh);
        letter-spacing: var(--sizes-heading-h3-lp);
        margin-bottom: 1.5rem;
    }
    .article-body h3 {
        font-size: var(--sizes-heading-h4-size);
        line-height: var(--sizes-heading-h4-lh);
        letter-spacing: var(--sizes-heading-h4-lp);
    }
}
.article-body > :first-child > :first-child { margin-top: 0; }

.article-body p { margin: 1rem 0 0; }
.article-body ul,
.article-body ol { margin: 1rem 0 0; padding-left: 1.5rem; display: flex; flex-direction: column; gap: .25rem; }
.article-body ul { list-style: disc; }
.article-body ol { list-style: decimal; }
.article-body li > p { margin: 0; }
.article-body a:not(.btn) { color: var(--color-primary); text-decoration: underline; }
/* The generator separates sections with "---"; the headings already do that */
.article-body hr { display: none; }

.article-body blockquote,
.article-body .callout {
    margin: 1.5rem 0 0;
    padding: 1rem 1.25rem;
    border-left: 4px solid var(--color-primary);
    border-radius: .5rem;
    background: rgba(75, 200, 0, .06);
}
.article-body blockquote > :first-child { margin-top: 0; }

/* Tables scroll sideways on small screens (article.js wraps them in .article-table) */
.article-table {
    overflow-x: auto;
    margin: 1.5rem 0 0;
    border: 1px solid var(--color-gray-100, #e5e7eb);
    border-radius: .5rem;
}
.article-body table { width: 100%; border-collapse: collapse; font-size: 1rem; }
.article-body thead { background: var(--color-gray-25, #f9fafb); }
.article-body th,
.article-body td { padding: .5rem .75rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--color-gray-100, #e5e7eb); min-width: 140px; }
.article-body tr:last-child td { border-bottom: 0; }

.article-faq details > summary { list-style: none; }
.article-faq details > summary::-webkit-details-marker { display: none; }
.article-faq details > summary::after { content: "+"; float: right; font-weight: 400; margin-left: 1rem; }
.article-faq details[open] > summary::after { content: "–"; }
.article-faq details p:first-child { margin-top: 0; }

.article-cta p { margin: 0; }
.article-cta .h5 { margin: 0; }

[data-article-toc] a { text-decoration: none; }
[data-article-toc] a:hover,
[data-article-toc] a.is-active { color: var(--color-primary); }