/* ==========================================================================
   Blog — article typography and a few small pieces. Colours come from the
   CSS variables in app.css (generated from DESIGN.md), so they follow the theme.
   ========================================================================== */

.blog-card:focus-visible { outline: 3px solid var(--color-primary-container, #496800); outline-offset: 4px; border-radius: 12px; }
.blog-cover { transition: transform .5s ease; }
.blog-card:hover .blog-cover { transform: scale(1.05); }
.blog-card:hover .blog-card-title { color: var(--color-primary, #364e00); }

/* Reading progress: a thin gradient bar fixed just under the 80px header. */
.blog-progress { position: fixed; top: 80px; left: 0; right: 0; height: 3px; z-index: 40; background: transparent; pointer-events: none; }
.blog-progress > div { height: 100%; width: 0; background-image: linear-gradient(90deg, #8DBE24, #F9CF00); transition: width .08s linear; }

.share-btn {
    display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 18px; border-radius: 9999px; cursor: pointer;
    border: 1px solid var(--color-outline-variant, #c4c9b5); background: var(--color-surface-container-lowest, #fff); color: var(--color-on-surface, #1b1c1c);
    font: 600 14px/20px var(--font-sans); transition: background .15s, border-color .15s;
}
.share-btn:hover { background: var(--color-surface-container-low, #f5f3f3); border-color: var(--color-outline, #747968); }
.share-btn:focus-visible { outline: 3px solid var(--color-primary-container, #496800); outline-offset: 2px; }

/* ---------- Article body (server-sanitised HTML from Markdown) ---------- */
.article-body { font: 400 17px/28px var(--font-sans); color: var(--color-on-surface, #1b1c1c); overflow-wrap: anywhere; }
@media (min-width: 768px) { .article-body { font-size: 18px; line-height: 30px; } }

.article-body > * + * { margin-top: 1.25em; }
.article-body h1, .article-body h2 { font: 700 28px/36px var(--font-serif); letter-spacing: -0.01em; margin-top: 2.2em; }
.article-body h3 { font: 700 22px/30px var(--font-serif); margin-top: 1.9em; }
.article-body h4, .article-body h5, .article-body h6 { font: 700 18px/26px var(--font-serif); margin-top: 1.6em; }
.article-body h1 + *, .article-body h2 + *, .article-body h3 + *, .article-body h4 + * { margin-top: .6em; }

.article-body a { color: var(--color-primary, #364e00); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; font-weight: 500; }
.article-body a:hover { color: var(--color-primary-container, #496800); }
.article-body strong, .article-body b { font-weight: 600; }

.article-body ul, .article-body ol { padding-left: 1.4em; }
.article-body ul { list-style: disc; }
.article-body ol { list-style: decimal; }
.article-body li + li { margin-top: .45em; }
.article-body li::marker { color: var(--color-primary-container, #496800); }

.article-body blockquote {
    border-left: 4px solid #8DBE24; padding: .2em 0 .2em 1.1em; margin-left: 0; margin-right: 0;
    font: italic 400 20px/32px var(--font-serif); color: var(--color-on-surface, #1b1c1c);
}
.article-body blockquote p + p { margin-top: .8em; }

.article-body img { display: block; max-width: 100%; height: auto; border-radius: 12px; margin-left: auto; margin-right: auto; background: var(--color-surface-container, #efeded); }
.article-body hr { border: 0; border-top: 1px solid var(--color-outline-variant, #c4c9b5); margin: 2.4em 0; }

.article-body code { font: 500 .9em var(--font-mono); background: var(--color-surface-container, #efeded); padding: .12em .4em; border-radius: 4px; }
.article-body pre { overflow-x: auto; padding: 1em 1.2em; border-radius: 8px; background: var(--color-surface-container, #efeded); }
.article-body pre code { background: transparent; padding: 0; }

.article-body table { display: block; overflow-x: auto; width: 100%; border-collapse: collapse; font-size: .92em; }
.article-body th, .article-body td { border: 1px solid var(--color-outline-variant, #c4c9b5); padding: .55em .8em; text-align: left; vertical-align: top; }
.article-body th { background: var(--color-surface-container-low, #f5f3f3); font-weight: 600; }