/* ─────────────────────────────────────────────────────────────────────────
 * Article typography — ONE stylesheet for two places:
 *   .article-body              the published article (frontend/blog/show)
 *   .blog-canvas .ck-content   the admin editor's writing surface
 * so what an editor sees while writing is what readers get.
 *
 * The selectors are the markup CKEditor 5 produces and BlogContentRenderer
 * derives (heading ids, figure.image / figure.table / figure.media, the
 * curated "Style" classes lead / callout-* / pull-quote / button-link and the
 * highlight markers). The class list is mirrored in
 * App\Support\Blog\BlogAttributeSanitizer — a class not listed there never
 * reaches this stylesheet.
 *
 * Colours come from the site tokens (partials/site/styles); the fallbacks let
 * the admin canvas, which has its own token set, render the same.
 *
 * Scoped with :is(), not :where(): the site's base reset (`p, h2 { margin: 0 }`)
 * would otherwise out-rank these zero-specificity rules.
 * ───────────────────────────────────────────────────────────────────────── */

:is(.article-body, .blog-canvas .ck-content) {
    --a-ink: var(--ink, #0E1A33);
    --a-text: var(--text, #26324B);
    --a-muted: var(--muted, #5A6479);
    --a-line: var(--line-2, #E1E4EC);
    --a-soft: var(--surface-2, #F7F8FB);
    --a-accent: var(--gold, #F5A623);
    --a-accent-ink: var(--gold-ink, #B87304);
    --a-accent-soft: var(--gold-soft, #FFF0D1);
    --a-code-bg: #0E1A33;
    --a-code-ink: #E7ECF7;

    color: var(--a-text);
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    font-size: 18px;
    line-height: 1.78;
    overflow-wrap: break-word;
    font-feature-settings: 'cv11', 'ss01';
}

:is(.article-body, .blog-canvas .ck-content) > :first-child { margin-top: 0; }
:is(.article-body, .blog-canvas .ck-content) > :last-child { margin-bottom: 0; }

:is(.article-body, .blog-canvas .ck-content) :where(p, ul, ol, blockquote, figure, pre, .table-scroll, details) {
    margin: 0 0 1.35em;
}

/* ── Headings ──────────────────────────────────────────────────────────── */
:is(.article-body, .blog-canvas .ck-content) :where(h2, h3, h4, h5, h6) {
    position: relative;
    margin: 2.1em 0 0.65em;
    color: var(--a-ink);
    font-family: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
    font-weight: 800;
    letter-spacing: -0.022em;
    line-height: 1.22;
    text-wrap: balance;
    /* Clear the fixed header when a table-of-contents link jumps here. */
    scroll-margin-top: 104px;
}
:is(.article-body, .blog-canvas .ck-content) h2 { font-size: clamp(25px, 1.4vw + 18px, 32px); }
:is(.article-body, .blog-canvas .ck-content) h3 { font-size: clamp(21px, 0.8vw + 16px, 25px); }
:is(.article-body, .blog-canvas .ck-content) h4 { font-size: 19.5px; }
:is(.article-body, .blog-canvas .ck-content) :where(h5, h6) {
    font-size: 15px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--a-muted);
}

/* Heading anchor (added by blog.js on the public page). */
.article-body .b-anchor {
    position: absolute; left: -1.25em; top: 50%; transform: translateY(-50%);
    width: 1em; height: 1em; display: grid; place-items: center;
    border: 0; padding: 0; background: none; color: var(--a-muted);
    opacity: 0; transition: opacity 0.2s ease, color 0.2s ease;
    font-size: 0.75em; cursor: pointer;
}
.article-body .b-anchor svg { width: 0.9em; height: 0.9em; }
.article-body :where(h2, h3, h4):hover .b-anchor,
.article-body .b-anchor:focus-visible { opacity: 1; }
.article-body .b-anchor:hover { color: var(--a-accent-ink); }
@media (max-width: 760px) { .article-body .b-anchor { display: none; } }

/* ── Inline ────────────────────────────────────────────────────────────── */
:is(.article-body, .blog-canvas .ck-content) a {
    color: var(--a-ink);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, var(--a-accent) 70%, transparent);
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
    transition: text-decoration-color 0.2s ease, color 0.2s ease;
}
:is(.article-body, .blog-canvas .ck-content) a:hover {
    color: var(--a-accent-ink);
    text-decoration-color: currentColor;
}
:is(.article-body, .blog-canvas .ck-content) :where(strong, b) { font-weight: 700; color: var(--a-ink); }
:is(.article-body, .blog-canvas .ck-content) :where(sub, sup) { font-size: 0.72em; line-height: 0; }
:is(.article-body, .blog-canvas .ck-content) kbd {
    font: 600 0.82em 'JetBrains Mono', ui-monospace, monospace;
    padding: 0.12em 0.45em; border-radius: 6px;
    border: 1px solid var(--a-line); border-bottom-width: 2px; background: var(--a-soft);
}

/* ── Lists ─────────────────────────────────────────────────────────────── */
:is(.article-body, .blog-canvas .ck-content) :where(ul, ol) { padding-left: 1.4em; }
:is(.article-body, .blog-canvas .ck-content) li { margin: 0.4em 0; padding-left: 0.25em; }
:is(.article-body, .blog-canvas .ck-content) li::marker { color: var(--a-accent); font-weight: 700; }
:is(.article-body, .blog-canvas .ck-content) :where(ul ul, ol ol, ul ol, ol ul) { margin: 0.4em 0; }

:is(.article-body, .blog-canvas .ck-content) .todo-list { list-style: none; padding-left: 0.2em; }
:is(.article-body, .blog-canvas .ck-content) .todo-list__label { display: inline-flex; align-items: baseline; gap: 0.65em; }
:is(.article-body, .blog-canvas .ck-content) .todo-list input[type='checkbox'] {
    accent-color: var(--a-accent); width: 1.05em; height: 1.05em; transform: translateY(2px);
}

/* ── Quotes & curated styles ───────────────────────────────────────────── */
:is(.article-body, .blog-canvas .ck-content) blockquote {
    position: relative;
    padding: 0.2em 0 0.2em 1.3em;
    border-left: 4px solid var(--a-accent);
    color: var(--a-ink);
    font-style: italic;
}
:is(.article-body, .blog-canvas .ck-content) blockquote.pull-quote {
    border: 0; margin: 2em 0; padding: 0.4em 1em;
    text-align: center; font-style: normal;
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
    font-size: clamp(22px, 1.2vw + 16px, 28px); font-weight: 800; line-height: 1.35; letter-spacing: -0.02em;
}
:is(.article-body, .blog-canvas .ck-content) blockquote.pull-quote::before {
    content: '“'; display: block; height: 0.55em; margin-bottom: 0.15em;
    font-size: 2.6em; line-height: 1; color: var(--a-accent);
}

:is(.article-body, .blog-canvas .ck-content) p.lead {
    font-size: 1.2em; line-height: 1.62; color: var(--a-ink); font-weight: 500;
}

:is(.article-body, .blog-canvas .ck-content) p:is(.callout, .callout-info, .callout-tip, .callout-warning) {
    position: relative;
    padding: 1em 1.2em 1em 3.1em;
    border-radius: 16px;
    border: 1px solid var(--a-line);
    background: var(--a-soft);
    color: var(--a-ink);
    font-size: 0.96em;
    line-height: 1.65;
}
:is(.article-body, .blog-canvas .ck-content) p:is(.callout, .callout-info, .callout-tip, .callout-warning)::before {
    position: absolute; left: 1.05em; top: 0.95em;
    width: 1.35em; height: 1.35em; border-radius: 50%;
    display: grid; place-items: center;
    font: 800 0.8em/1 'Inter', sans-serif; color: #fff;
    content: 'i'; background: #3B82F6;
}
:is(.article-body, .blog-canvas .ck-content) p.callout-info { background: var(--tint-blue, #E9F1FE); border-color: color-mix(in srgb, #3B82F6 28%, transparent); }
:is(.article-body, .blog-canvas .ck-content) p.callout-tip { background: var(--tint-green, #E3F6EC); border-color: color-mix(in srgb, #16A34A 28%, transparent); }
:is(.article-body, .blog-canvas .ck-content) p.callout-tip::before { content: '✓'; background: #16A34A; }
:is(.article-body, .blog-canvas .ck-content) p.callout-warning { background: var(--a-accent-soft); border-color: color-mix(in srgb, var(--a-accent) 45%, transparent); }
:is(.article-body, .blog-canvas .ck-content) p.callout-warning::before { content: '!'; background: #E08A0B; }

:is(.article-body, .blog-canvas .ck-content) a.button-link {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 0.7em 1.45em; border-radius: 999px;
    background: linear-gradient(180deg, #FFD966 0%, #FBC02D 100%); color: #0E1A33;
    font-weight: 700; text-decoration: none;
    box-shadow: 0 14px 30px -12px rgba(245, 166, 35, 0.6);
    transition: transform 0.2s ease;
}
:is(.article-body, .blog-canvas .ck-content) a.button-link:hover { transform: translateY(-2px); color: #0E1A33; }

/* Highlighter (CKEditor Highlight). */
:is(.article-body, .blog-canvas .ck-content) :is(mark, .marker-yellow) { background: #FFE58A; color: #0E1A33; border-radius: 0.2em; padding: 0 0.15em; }
:is(.article-body, .blog-canvas .ck-content) .marker-green { background: #BFF0D2; color: #0E1A33; }
:is(.article-body, .blog-canvas .ck-content) .marker-pink { background: #FBD0E2; color: #0E1A33; }
:is(.article-body, .blog-canvas .ck-content) .marker-blue { background: #CFE3FC; color: #0E1A33; }
:is(.article-body, .blog-canvas .ck-content) .pen-red { color: #D23A2E; background: none; }
:is(.article-body, .blog-canvas .ck-content) .pen-green { color: #138A47; background: none; }

:is(.article-body, .blog-canvas .ck-content) .text-align-center { text-align: center; }
:is(.article-body, .blog-canvas .ck-content) .text-align-right { text-align: right; }
:is(.article-body, .blog-canvas .ck-content) .text-align-justify { text-align: justify; }

/* ── Code ──────────────────────────────────────────────────────────────── */
:is(.article-body, .blog-canvas .ck-content) code {
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.86em;
    padding: 0.12em 0.42em; border-radius: 6px;
    background: var(--a-accent-soft); color: var(--a-ink);
}
:is(.article-body, .blog-canvas .ck-content) pre {
    position: relative;
    overflow-x: auto;
    padding: 1.15em 1.3em;
    border-radius: 16px;
    background: var(--a-code-bg); color: var(--a-code-ink);
    font-size: 14.5px; line-height: 1.7;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
    tab-size: 4;
}
:is(.article-body, .blog-canvas .ck-content) pre code { padding: 0; background: none; color: inherit; font-size: inherit; }
/* Language label + copy button (blog.js wraps each <pre> in .b-code). */
.article-body .b-code { position: relative; margin: 0 0 1.35em; }
.article-body .b-code pre { margin: 0; padding-top: 2.6em; }
.article-body .b-code-bar {
    position: absolute; inset: 0 0 auto 0; z-index: 1;
    display: flex; align-items: center; justify-content: space-between;
    padding: 0.55em 0.7em 0 1.3em;
    font: 600 11.5px/1 'JetBrains Mono', monospace; letter-spacing: 0.08em; text-transform: uppercase;
    color: rgba(231, 236, 247, 0.55);
}
.article-body .b-code-copy {
    display: inline-flex; align-items: center; gap: 6px;
    height: 28px; padding: 0 10px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.06); color: rgba(231, 236, 247, 0.85);
    font: 600 12px/1 'Inter', sans-serif; letter-spacing: 0; text-transform: none; cursor: pointer;
}
.article-body .b-code-copy:hover { background: rgba(255, 255, 255, 0.12); }
.article-body .b-code-copy svg { width: 14px; height: 14px; }

:is(.article-body, .blog-canvas .ck-content) hr {
    height: 0; border: 0; margin: 2.6em auto; overflow: visible; text-align: center;
}
:is(.article-body, .blog-canvas .ck-content) hr::after {
    content: '✦ ✦ ✦'; display: inline-block; transform: translateY(-0.7em);
    color: var(--a-accent); letter-spacing: 0.6em; font-size: 14px;
}

/* ── Images (CKEditor figure classes) ──────────────────────────────────── */
:is(.article-body, .blog-canvas .ck-content) figure { margin-inline: 0; }
:is(.article-body, .blog-canvas .ck-content) img { max-width: 100%; height: auto; border-radius: 16px; }
:is(.article-body, .blog-canvas .ck-content) figure.image {
    display: table; clear: both; margin: 1.8em auto; text-align: center;
}
:is(.article-body, .blog-canvas .ck-content) figure.image img { display: block; margin-inline: auto; width: 100%; }
:is(.article-body, .blog-canvas .ck-content) figure.image_resized { max-width: 100%; }
:is(.article-body, .blog-canvas .ck-content) figcaption {
    display: table-caption; caption-side: bottom;
    padding-top: 0.75em; font-size: 14.5px; line-height: 1.5; color: var(--a-muted);
}
:is(.article-body, .blog-canvas .ck-content) :is(.image-style-side, .image-style-align-right, .image-style-block-align-right) {
    float: right; margin: 0.3em 0 1em 1.6em; max-width: 50%;
}
:is(.article-body, .blog-canvas .ck-content) :is(.image-style-align-left, .image-style-block-align-left) {
    float: left; margin: 0.3em 1.6em 1em 0; max-width: 50%;
}
:is(.article-body, .blog-canvas .ck-content) :is(.image-style-block-align-left, .image-style-block-align-right) { float: none; display: table; }
:is(.article-body, .blog-canvas .ck-content) .image-style-block-align-left { margin-left: 0; margin-right: auto; }
:is(.article-body, .blog-canvas .ck-content) .image-style-block-align-right { margin-left: auto; margin-right: 0; }
:is(.article-body, .blog-canvas .ck-content) .image-inline { display: inline-flex; max-width: 100%; }
.article-body::after { content: ''; display: table; clear: both; }
.article-body figure.image img { cursor: zoom-in; }
@media (max-width: 640px) {
    :is(.article-body, .blog-canvas .ck-content) :is(.image-style-side, .image-style-align-left, .image-style-align-right) {
        float: none; max-width: 100%; margin: 0 0 1.2em;
    }
}

/* ── Tables (wrapped in .table-scroll by the renderer) ─────────────────── */
:is(.article-body, .blog-canvas .ck-content) .table-scroll {
    overflow-x: auto; border-radius: 16px; border: 1px solid var(--a-line);
    -webkit-overflow-scrolling: touch;
}
:is(.article-body, .blog-canvas .ck-content) figure.table { margin-inline: 0; display: block; }
:is(.article-body, .blog-canvas .ck-content) table {
    width: 100%; border-collapse: collapse; font-size: 15.5px; line-height: 1.55;
}
:is(.article-body, .blog-canvas .ck-content) :where(th, td) {
    padding: 0.75em 0.95em; border-bottom: 1px solid var(--a-line); text-align: left; vertical-align: top;
}
:is(.article-body, .blog-canvas .ck-content) th { background: var(--a-soft); color: var(--a-ink); font-weight: 700; }
:is(.article-body, .blog-canvas .ck-content) tr:last-child > :where(td, th) { border-bottom: 0; }
:is(.article-body, .blog-canvas .ck-content) table caption {
    caption-side: top; padding: 0.8em 0.95em 0.25em; text-align: left; font-size: 14px; color: var(--a-muted);
}

/* ── Video embeds (server-built iframes) ───────────────────────────────── */
.article-body figure.media { margin: 1.8em 0; }
.article-body figure.media .embed {
    position: relative; aspect-ratio: 16 / 9; overflow: hidden;
    border-radius: 18px; background: #0B0C10; box-shadow: 0 30px 60px -36px rgba(14, 26, 51, 0.6);
}
.article-body figure.media iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ── Dark theme touches ────────────────────────────────────────────────── */
[data-theme="dark"] :where(.article-body) {
    --a-code-bg: #060A15;
}
[data-theme="dark"] :where(.article-body) img { opacity: 0.94; }