/* Saved blog and project content, plus the article layout around it. Loaded only by
   the two detail pages, via {% block extra_css %}.

   The HTML inside .blog-content is stored in the database, written in TinyMCE.
   `normalize_content_html` rewrote it once to the site's current FAQ, code block and
   class conventions, so most of what follows is just prose typography. A handful of
   plain wrapper classes from pasted-in call-to-action blocks (surface-card, btn-white,
   anchor-menu) are still restyled here rather than renamed, since new content can
   still use them. Both blog posts and project case studies use this file. */

@layer content {

    /* ---------- Layout: contents list beside a reading column ---------- */

    .article {
        display: grid;
        gap: var(--space-6);
        max-width: 46rem;
        margin-inline: auto;
    }

    .article-toc {
        max-height: 16rem;
        padding: var(--space-4);
        overflow-y: auto;
        border: var(--line);
        border-radius: var(--radius);
        background: var(--surface-muted);
    }

    /* With a contents list, it sits beside the text and follows the reader down */
    @media (min-width: 1100px) {
        .article-with-toc {
            grid-template-columns: 15rem minmax(0, 46rem);
            align-items: start;
            gap: var(--space-9);
            max-width: none;
            justify-content: center;
        }

        .article-with-toc .article-toc {
            position: sticky;
            top: calc(var(--header-height) + var(--space-6));
            max-height: calc(100dvh - var(--header-height) - var(--space-8));
            padding: 0 var(--space-1);
            border: 0;
            background: none;
        }
    }

    .article-main {
        min-width: 0;
    }

    .article-main > * + * {
        margin-top: var(--space-7);
    }

    .article-meta {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-1) var(--space-4);
        color: var(--text-muted);
        font-size: var(--text-sm);
    }

    .author-head {
        display: flex;
        align-items: center;
        gap: var(--space-3);
    }

    .draft-banner {
        padding: var(--space-3) var(--gutter);
        border-bottom: 1px solid var(--warning);
        background: var(--warm-strong);
        color: var(--warning);
        font-size: var(--text-sm);
        font-weight: var(--weight-semibold);
        text-align: center;
    }

    /* ---------- Contents list, built by schema_markup.py ---------- */

    .ww-toc > strong {
        display: block;
        margin-bottom: var(--space-3);
        color: var(--heading);
        font-size: var(--text-sm);
    }

    .ww-toc-list,
    .ww-toc-sublist {
        display: grid;
        gap: var(--space-2);
    }

    .ww-toc-sublist {
        margin-top: var(--space-2);
        padding-left: var(--space-4);
    }

    .ww-toc a {
        color: var(--text-muted);
        font-size: var(--text-sm);
        line-height: var(--leading-snug);
        text-decoration: none;
    }

    .ww-toc a:hover {
        color: var(--green);
    }

    /* ---------- Reading text ---------- */

    .blog-content {
        font-size: var(--text-lg);
        overflow-wrap: break-word;
    }

    .blog-content :where(p, ul, ol, table, blockquote, pre, figure, dl, .code-block, .faq, .surface-card, .anchor-menu) {
        margin-top: var(--space-4);
    }

    .blog-content > :first-child {
        margin-top: 0;
    }

    .blog-content :where(h2, h3, h4, h5) {
        scroll-margin-top: calc(var(--header-height) + var(--space-4));
    }

    .blog-content h2 {
        margin-top: var(--space-8);
    }

    .blog-content h3 {
        margin-top: var(--space-6);
    }

    .blog-content :where(h4, h5, h6) {
        margin-top: var(--space-5);
    }

    .blog-content h5,
    .blog-content h6 {
        font-size: var(--text-base);
    }

    .blog-content :where(ul, ol) {
        display: grid;
        gap: var(--space-2);
        padding-left: var(--space-6);
    }

    .blog-content ul {
        list-style: disc;
    }

    .blog-content ol {
        list-style: decimal;
    }

    .blog-content :where(ul, ol) :where(ul, ol) {
        margin-top: var(--space-2);
    }

    .blog-content li::marker {
        color: var(--text-muted);
    }

    .blog-content img {
        border-radius: var(--radius);
    }

    .blog-content blockquote {
        padding-left: var(--space-5);
        border-left: 3px solid var(--green);
        color: var(--text-muted);
    }

    .blog-content :not(pre) > code {
        padding: 0.1em 0.4em;
        border-radius: var(--radius-sm);
        background: var(--surface-muted);
        color: var(--heading);
    }

    /* Tables cannot be wrapped in saved HTML, so the table itself scrolls sideways */
    .blog-content table {
        display: block;
        max-width: 100%;
        overflow-x: auto;
        border: var(--line);
        border-radius: var(--radius-sm);
        font-size: var(--text-sm);
    }

    .blog-content :where(th, td) {
        min-width: 8rem;
        padding: var(--space-2) var(--space-3);
        border-bottom: var(--line);
        text-align: left;
        vertical-align: top;
    }

    .blog-content th {
        background: var(--surface-muted);
        color: var(--heading);
    }

    .blog-content tr:last-child :where(th, td) {
        border-bottom: 0;
    }

    .blog-content caption {
        padding: var(--space-2);
        color: var(--text-muted);
    }

    /* ---------- Code ---------- */

    .blog-content pre {
        padding: var(--space-5);
        overflow-x: auto;
        border-radius: var(--radius);
        background: var(--dark-surface);
        color: var(--dark-text);
        font-family: var(--font-mono);
        font-size: var(--text-sm);
        line-height: var(--leading-snug);
    }

    .blog-content pre code {
        background: none;
        color: inherit;
    }

    /* The dark box; the copy button sits in its top corner. */
    .code-block {
        position: relative;
        padding: var(--space-8) var(--space-5) var(--space-5);
        border-radius: var(--radius);
        background: var(--dark-surface);
    }

    .code-block pre {
        margin: 0;
        padding: 0;
        overflow-x: auto;
        border-radius: 0;
        background: none;
    }

    .copy-btn {
        position: absolute;
        top: var(--space-3);
        right: var(--space-3);
        padding: 0.25rem 0.75rem;
        border: 1px solid rgb(255 255 255 / 0.2);
        border-radius: var(--radius-full);
        background: rgb(255 255 255 / 0.08);
        color: var(--dark-text);
        font-size: var(--text-xs);
        font-weight: var(--weight-semibold);
        transition:
            background-color var(--fast) var(--ease),
            border-color var(--fast) var(--ease);
    }

    .copy-btn:hover {
        border-color: rgb(255 255 255 / 0.4);
        background: rgb(255 255 255 / 0.16);
    }

    /* ---------- Call-to-action blocks pasted into posts ----------
       FAQ accordions, badge-soft/badge-green and the Bootstrap utility
       classes are gone from the database (normalize_content_html), so
       only the plain wrapper classes below are still needed. */

    .blog-content .surface-card,
    .blog-content .section-surface {
        padding: var(--space-6);
        border-radius: var(--radius-lg);
        background: var(--warm);
    }

    .blog-content .surface-card h2,
    .blog-content .section-surface h2 {
        margin-top: var(--space-3);
        font-size: var(--text-2xl);
    }

    .blog-content .surface-card > * > * + *,
    .blog-content .section-surface > * > * + * {
        margin-top: var(--space-3);
    }

    .blog-content .custom-container {
        margin-top: var(--space-6);
    }

    .blog-content .anchor-menu {
        padding: var(--space-4) var(--space-5);
        border-radius: var(--radius);
        background: var(--warm);
        font-size: var(--text-base);
    }

    .blog-content .btn-white {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: var(--space-2);
        min-height: 2.75rem;
        padding: 0.55rem 1.15rem;
        border: 1px solid var(--border-strong);
        border-radius: var(--radius-full);
        background: var(--surface);
        color: var(--heading);
        font-size: var(--text-sm);
        font-weight: var(--weight-semibold);
        line-height: 1.2;
        text-decoration: none;
        transition:
            background-color var(--fast) var(--ease),
            border-color var(--fast) var(--ease);
    }

    .blog-content .btn-white:hover {
        border-color: var(--border-strong);
        background: var(--surface-muted);
        color: var(--heading);
    }
}