/* ============================================================================
   LumoAuth blog — additions on top of theme.css (a verbatim copy of
   website/lumotheme/assets/css/theme.css). Keep theme.css untouched and put
   blog-only rules here.
   ========================================================================== */

/* Featured (latest) post on the index */
.post-featured {
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-2xl);
    padding: var(--space-10); box-shadow: var(--shadow-sm);
}
.post-featured__body { display: flex; flex-direction: column; gap: var(--space-4); max-width: 760px; }
.post-featured__title { font-size: clamp(1.75rem, 3.2vw, 2.5rem); line-height: 1.12; letter-spacing: -0.035em; }
.post-featured__title a { color: var(--text-strong); }
.post-featured__title a:hover { color: var(--text-muted); }
.post-featured__excerpt { font-size: var(--fs-lg); line-height: var(--lh-relaxed); color: var(--text-muted); text-wrap: pretty; }
.post-featured__footer { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; padding-top: var(--space-5); border-top: 1px solid var(--border); margin-top: var(--space-2); }
@media (max-width: 720px) { .post-featured { padding: var(--space-6); } }

/* Article body: the pieces kramdown emits that the site stylesheet does not cover */
.article__content h2, .article__content h3, .article__content h4 { scroll-margin-top: calc(var(--nav-height) + var(--space-6)); }
.article__content h4 { font-size: var(--fs-lg); margin-top: var(--space-6); }
.article__content h2 + *, .article__content h3 + *, .article__content h4 + * { margin-top: var(--space-4); }
.article__content hr { margin: var(--space-10) 0; }
.article__content strong { color: var(--text-strong); }
.article__content li > ul, .article__content li > ol { margin-top: var(--space-2); }
.article__content li::marker { color: var(--text-dim); }
.article__content blockquote p + p { margin-top: var(--space-3); }
.article__content .table-wrap { border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--surface); overflow-x: auto; }
.article__content .table-wrap table { min-width: 560px; }
.article__content .table-wrap th, .article__content .table-wrap td { border-left: none; border-right: none; }
.article__content .table-wrap tr:last-child td { border-bottom: none; }
.article__content .table-wrap th { border-top: none; }
.article__content th { font-size: var(--fs-xs); color: var(--text-muted); white-space: nowrap; }
.article__content td { line-height: var(--lh-sm); vertical-align: top; }
.article__content td code, .article__content th code { font-size: 0.8em; white-space: nowrap; }
.article__content figure { margin: 0; }
.article__content figcaption { font-size: var(--fs-xs); color: var(--text-dim); margin-top: var(--space-3); text-align: center; }
.article__content .footnotes { font-size: var(--fs-sm); color: var(--text-muted); border-top: 1px solid var(--border); padding-top: var(--space-6); margin-top: var(--space-10); }

/* Heading permalinks (added by theme.js) */
.heading-anchor {
    margin-left: 0.35em; color: var(--text-dim); text-decoration: none; opacity: 0;
    font-weight: 400; transition: opacity var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
h2:hover .heading-anchor, h3:hover .heading-anchor, h4:hover .heading-anchor, .heading-anchor:focus-visible { opacity: 1; }
.heading-anchor:hover { color: var(--text-strong); }

/* Article footer: tags and the updated line */
.article__footer { margin-top: var(--space-10); padding-top: var(--space-6); border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: var(--space-4); }
.article__tags { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.article__tags .badge { font-family: var(--font-mono); font-weight: 400; text-transform: none; }
.article__updated { font-size: var(--fs-xs); color: var(--text-dim); }

/* Code blocks: Rouge output on the Geist dark surface. Blocks stay dark in both
   colour modes, as on the website and the docs (docs/src/prism/lumoDark.js). */
.article__content pre.highlight, .article__content .highlighter-rouge pre { margin: 0; }
.article__content div.highlighter-rouge, .article__content figure.highlight { position: relative; }
.article__content pre code { font-size: 0.875rem; line-height: 1.65; }
.highlight .c, .highlight .ch, .highlight .cd, .highlight .cm, .highlight .cpf, .highlight .c1, .highlight .cs { color: #8f8f8f; font-style: italic; }
.highlight .p, .highlight .o, .highlight .ow, .highlight .pi { color: #a0a0a0; }
.highlight .k, .highlight .kc, .highlight .kd, .highlight .kn, .highlight .kp, .highlight .kr, .highlight .kv, .highlight .cp { color: #ff4d8d; }
.highlight .kt { color: #c472fb; }
.highlight .s, .highlight .sa, .highlight .sb, .highlight .sc, .highlight .dl, .highlight .sd, .highlight .s2, .highlight .se, .highlight .sh, .highlight .si, .highlight .sx, .highlight .sr, .highlight .s1, .highlight .ss { color: #00ca52; }
.highlight .nf, .highlight .fm, .highlight .nc, .highlight .nn, .highlight .nb, .highlight .bp { color: #c472fb; }
.highlight .m, .highlight .mb, .highlight .mf, .highlight .mh, .highlight .mi, .highlight .il, .highlight .mo, .highlight .mx, .highlight .no, .highlight .ne { color: #ff9900; }
.highlight .na, .highlight .nt, .highlight .nv, .highlight .vc, .highlight .vg, .highlight .vi, .highlight .vm, .highlight .nx, .highlight .py, .highlight .nl { color: #47a8ff; }
.highlight .gd { color: #ff5e63; }
.highlight .gi { color: #00ca52; }
.highlight .gh, .highlight .gu { color: #ededed; font-weight: 600; }
.highlight .ge { font-style: italic; }
.highlight .gs { font-weight: 600; }
.highlight .err { color: #ff5e63; }
.highlight .w { color: inherit; }
.highlight .lineno { color: #4d4d4d; user-select: none; padding-right: 1em; }

/* Meta row on the index cards uses the same tone as the article header */
.post-card__meta time { white-space: nowrap; }

/* The hero on the index and pages: tighter on phones */
@media (max-width: 720px) {
    .display-1 { letter-spacing: -0.035em; }
    .article__content { font-size: var(--fs-base); }
    .article__content h2 { font-size: var(--fs-xl); }
    .article__content h3 { font-size: var(--fs-lg); }
}