/* ==========================================================================
   Article body design system (SEOSkit item 5 + blog redesign).

   Scoped entirely to .ndc-article-body (single.php's wrapper around
   the_content() for block-editor posts) — a clean container, not a patch
   on top of main.css's .post/.article__block-text rules. Those two
   stylesheets both claim the same margins/font-sizes at equal CSS
   specificity, which is why spacing used to depend on which legacy
   wrapper a given block happened to land in. Every rule here is prefixed
   `.article.post .ndc-article-body` (3 classes) so it wins outright
   instead of joining that fight — no !important needed.

   Everything here is spelled out explicitly (margin, size, weight,
   color) rather than inherited from main.css, on an 8px rhythm:
   8 / 16 / 24 / 32 / 40 / 56 / 64.
   ========================================================================== */

.article.post {
    --nk-ink: #072650;      /* body text navy — already used sitewide */
    --nk-ink-deep: #1d2761; /* heading gradient start — already used */
    --nk-gold: #a5a089;     /* heading gradient end / brand gold — already used */
    --nk-line: #e4e1d9;     /* hairline rule, warm-neutral */
    --nk-tint: #f6f5f2;     /* quiet warm-grey card fill */
    --nk-muted: #707070;    /* secondary/meta text — already used */
}

.article.post .ndc-article-body {
    font-size: 18px;
    line-height: 1.7;
    color: var(--nk-ink);
}

/* Long-form text stays inside a readable line length even though the page
   container is ~1600px wide — but it doesn't clip the page, it just wraps
   at a sane width and leaves the rest of the row for nothing (no second
   column, no sidebar there — a narrower single fixed-width block on a
   wide page reads as "broken", not "designed"). Elements that are
   naturally wide (image+text pairs, tables) are left alone. */
.article.post .ndc-article-body > h1,
.article.post .ndc-article-body > h2,
.article.post .ndc-article-body > h3,
.article.post .ndc-article-body > h4,
.article.post .ndc-article-body > p,
.article.post .ndc-article-body > ul,
.article.post .ndc-article-body > ol,
.article.post .ndc-article-body > blockquote {
    max-width: 900px;
}

/* ---- Reset: every element owns its own top margin, nothing owns a
   bottom margin. Removes the "depends which wrapper" inconsistency. ---- */
.article.post .ndc-article-body * {
    margin: 0;
}

.article.post .ndc-article-body > * + *,
.article.post .ndc-article-body .article__block-text > * + * {
    margin-top: 24px;
}

/* ---- Headings ---- */
.article.post .ndc-article-body h1,
.article.post .ndc-article-body h2,
.article.post .ndc-article-body h3,
.article.post .ndc-article-body h4 {
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -.01em;
    background: linear-gradient(90deg, var(--nk-ink-deep) 0, var(--nk-gold) 80%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.article.post .ndc-article-body h1 > *,
.article.post .ndc-article-body h2 > *,
.article.post .ndc-article-body h3 > *,
.article.post .ndc-article-body h4 > * {
    font: inherit;
    background: inherit;
    background-clip: inherit;
    -webkit-background-clip: inherit;
    -webkit-text-fill-color: inherit;
}

.article.post .ndc-article-body h2 {
    font-size: 32px;
    margin-top: 56px !important;
}

.article.post .ndc-article-body h3 {
    font-size: 24px;
    margin-top: 40px !important;
}

.article.post .ndc-article-body h4 {
    font-size: 20px;
    margin-top: 32px !important;
}

/* A heading right after another heading (rare, but the source content
   occasionally nests one) shouldn't double the section-break gap. */
.article.post .ndc-article-body h2 + h3,
.article.post .ndc-article-body h3 + h4 {
    margin-top: 8px !important;
}

/* A paragraph immediately under a heading sits closer to it than it does
   to the paragraph before it — the heading already carries the break. */
.article.post .ndc-article-body h2 + *,
.article.post .ndc-article-body h3 + *,
.article.post .ndc-article-body h4 + * {
    margin-top: 16px !important;
}

/* ---- Body copy ---- */
.article.post .ndc-article-body p {
    margin-top: 20px;
}

.article.post .ndc-article-body a {
    color: var(--nk-ink-deep);
    text-decoration: underline;
    text-decoration-color: var(--nk-gold);
    text-underline-offset: 2px;
}

.article.post .ndc-article-body strong {
    color: var(--nk-ink-deep);
    font-weight: 700;
}

.article.post .ndc-article-body blockquote {
    margin-top: 32px;
    padding: 4px 0 4px 24px;
    border-left: 3px solid var(--nk-gold);
    font-size: 20px;
    line-height: 1.6;
    font-style: italic;
    color: var(--nk-ink-deep);
}

/* ---- Lists ---- */
.article.post .ndc-article-body ul,
.article.post .ndc-article-body ol {
    margin-top: 20px;
    padding-left: 22px;
}

.article.post .ndc-article-body li {
    margin: 0;
}

.article.post .ndc-article-body li + li {
    margin-top: 8px;
}

.article.post .ndc-article-body ul {
    list-style: disc;
}

.article.post .ndc-article-body ul ul,
.article.post .ndc-article-body ol ol,
.article.post .ndc-article-body ul ol,
.article.post .ndc-article-body ol ul {
    margin-top: 8px;
}

/* ---- Tables (plain content tables, not the comparison-table block) ---- */
.article.post .ndc-article-body table {
    margin-top: 32px;
    width: 100%;
    border-collapse: collapse;
    font-size: 16px;
}

.article.post .ndc-article-body th,
.article.post .ndc-article-body td {
    border-bottom: 1px solid var(--nk-line);
    padding: 10px 14px;
    text-align: left;
}

/* ---- Loose images (core/image) ---- */
.article.post .ndc-article-body figure,
.article.post .ndc-article-body > img {
    margin-top: 40px;
}

.article.post .ndc-article-body img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
}

/* ==========================================================================
   Content + image pairs (acf/content-image, and legacy content_image html
   embedded verbatim). Reuses main.css's flex layout (.article__block,
   flex + gap:40px) but the image sizing and text typography inside it are
   fully owned here now.
   ========================================================================== */

.article.post .ndc-article-body .article__block {
    margin-top: 48px !important;
}

.article.post .ndc-article-body .article__block-image {
    align-self: flex-start;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 4px;
    flex: 1 1 320px;
}

.article.post .ndc-article-body .article__block-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
}

.article.post .ndc-article-body .article__block-text {
    flex: 1 1 360px;
    min-width: 0;
}

/* ==========================================================================
   New structural blocks — one quiet family, one accent spent (the gold
   rule), everything else disciplined.
   ========================================================================== */

.article.post .ndc-article-body .ndc-block {
    max-width: 900px;
    margin-top: 56px !important;
}

/* Answer block / Key takeaways: the two "read this first" blocks share a
   left-rule card so they read as a matched pair, distinct from prose. */
.article.post .ndc-article-body .ndc-block--answer .article__block-text,
.article.post .ndc-article-body .ndc-block--takeaways .article__block-text {
    border-left: 3px solid var(--nk-gold);
    background: var(--nk-tint);
    padding: 24px 28px;
    border-radius: 0 4px 4px 0;
}

.article.post .ndc-article-body .ndc-block--answer h2,
.article.post .ndc-article-body .ndc-block--takeaways h2 {
    margin-top: 0 !important;
    font-size: 20px;
    background: none;
    -webkit-text-fill-color: var(--nk-ink-deep);
    color: var(--nk-ink-deep);
}

.article.post .ndc-article-body .ndc-block--answer p,
.article.post .ndc-article-body .ndc-takeaways {
    margin-top: 12px !important;
}

/* Table of contents: a quiet index, not a bulleted list. */
.article.post .ndc-article-body .ndc-block--toc .article__block-text {
    border-top: 1px solid var(--nk-line);
    border-bottom: 1px solid var(--nk-line);
    padding: 20px 0;
}

.article.post .ndc-article-body .ndc-block--toc h2 {
    margin-top: 0 !important;
    font-size: 14px;
    font-weight: 700;
    background: none;
    -webkit-text-fill-color: var(--nk-muted);
    color: var(--nk-muted);
}

.article.post .ndc-article-body .ndc-toc {
    margin-top: 12px !important;
}

.article.post .ndc-article-body .ndc-toc ul {
    margin-top: 0;
    padding-left: 0;
    list-style: none;
}

.article.post .ndc-article-body .ndc-toc li {
    margin: 0 !important;
    padding: 5px 0;
}

.article.post .ndc-article-body .ndc-toc__item--h3 {
    padding-left: 1.2em;
}

.article.post .ndc-article-body .ndc-toc a {
    color: var(--nk-ink);
    text-decoration: none;
    font-size: 16px;
}

.article.post .ndc-article-body .ndc-toc a:hover {
    color: var(--nk-ink-deep);
    text-decoration: underline;
}

/* Comparison table: hairline rules, no shadow, no zebra striping. */
.article.post .ndc-article-body .ndc-comparison-table {
    margin-top: 0;
    width: 100%;
    border-collapse: collapse;
    font-size: 16px;
}

.article.post .ndc-article-body .ndc-comparison-table th,
.article.post .ndc-article-body .ndc-comparison-table td {
    border-bottom: 1px solid var(--nk-line);
    padding: 12px 16px;
    text-align: left;
}

.article.post .ndc-article-body .ndc-comparison-table thead th {
    border-bottom: 2px solid var(--nk-gold);
    color: var(--nk-ink-deep);
    font-weight: 700;
}

.article.post .ndc-article-body .ndc-comparison-table tbody th {
    font-weight: 600;
    color: var(--nk-ink);
}

/* References: a numbered citation list is a real sequence, dense and
   compact rather than prose-spaced. */
.article.post .ndc-article-body .ndc-references {
    margin-top: 12px !important;
    font-size: 15px;
    color: var(--nk-muted);
    line-height: 1.6;
    padding-left: 20px;
}

.article.post .ndc-article-body .ndc-references li {
    margin: 0 !important;
}

.article.post .ndc-article-body .ndc-references li + li {
    margin-top: 8px !important;
}

.article.post .ndc-article-body .ndc-references a {
    color: var(--nk-ink);
}

/* Author box / review line / disclaimer: quiet metadata band that closes
   the article — a hairline above signals "content ends here". Grouped
   tighter than the 56px block rhythm since they belong together. */
.article.post .ndc-article-body .ndc-block--author {
    border-top: 1px solid var(--nk-line);
    padding-top: 28px;
}

.article.post .ndc-article-body .ndc-block--review-line,
.article.post .ndc-article-body .ndc-block--disclaimer {
    margin-top: 16px !important;
}

.article.post .ndc-article-body .ndc-author-box {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.article.post .ndc-article-body .ndc-author-box__avatar {
    border-radius: 50%;
    flex-shrink: 0;
}

.article.post .ndc-article-body .ndc-author-box__name {
    font-weight: 700;
    color: var(--nk-ink-deep);
}

.article.post .ndc-article-body .ndc-author-box__bio {
    color: var(--nk-muted);
    font-size: 15px;
    margin-top: 4px !important;
}

.article.post .ndc-article-body .ndc-author-box--fallback {
    color: var(--nk-muted);
    font-size: 15px;
}

.article.post .ndc-article-body .ndc-review-line {
    font-size: 14px;
    color: var(--nk-muted);
}

.article.post .ndc-article-body .ndc-disclaimer {
    font-size: 13px;
    color: var(--nk-muted);
    line-height: 1.6;
}

@media (max-width: 782px) {
    .article.post .ndc-article-body {
        font-size: 17px;
    }

    .article.post .ndc-article-body h2 {
        font-size: 26px;
    }

    .article.post .ndc-article-body h3 {
        font-size: 21px;
    }

    .article.post .ndc-article-body .article__block {
        flex-direction: column;
    }

    .article.post .ndc-article-body .article__block-image {
        aspect-ratio: 16 / 9;
    }
}