/* Blog article typography — scoped to .post-content.
 *
 * Style register: shadcn/ui. Single font family (Geist, inherited
 * from base), differentiation through weight, size, color, and
 * spacing only. No serif body, no prose-plugin, no theme override —
 * the existing design tokens (--foreground, --muted-foreground,
 * --border, --muted) carry the contrast.
 *
 * Vertical rhythm: every direct child gets `margin-top` via the
 * adjacent-sibling combinator. Headings override their own top
 * margin. First child resets to 0. This is the "lobotomized owl"
 * pattern (`> * + *`), which avoids margin collapse footguns.
 */

.post-content {
    color: hsl(var(--foreground) / 0.85);
    font-size: 1rem;
    line-height: 1.7;
}

.post-content > * + * {
    margin-top: 1.5rem;
}

/* Lead paragraph — bigger, muted, sets the tone before the body
   starts. shadcn pattern: `text-xl text-muted-foreground`. */
.post-content .lead {
    font-size: 1.25rem;
    line-height: 1.6;
    color: hsl(var(--muted-foreground));
    margin-top: 0;
    margin-bottom: 2rem;
}

/* Headings — same family as body, differentiated by weight + size +
   tighter tracking. h2 gets a hairline rule to delineate sections. */
.post-content h2 {
    font-size: 1.875rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.2;
    color: hsl(var(--foreground));
    margin-top: 3rem;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid hsl(var(--border));
    scroll-margin-top: 5rem;
}

.post-content h2:first-child {
    margin-top: 0;
}

.post-content h3 {
    font-size: 1.375rem;
    font-weight: 600;
    letter-spacing: -0.015em;
    line-height: 1.3;
    color: hsl(var(--foreground));
    margin-top: 2rem;
    margin-bottom: 0.5rem;
    scroll-margin-top: 5rem;
}

/* Paragraph after a heading sits closer than between paragraphs. */
.post-content h2 + p,
.post-content h3 + p,
.post-content h2 + ul,
.post-content h3 + ul,
.post-content h2 + ol,
.post-content h3 + ol {
    margin-top: 1rem;
}

/* Lists — left-aligned with body text, comfortable line height,
   enough item gap to scan but not feel airy. */
.post-content ul,
.post-content ol {
    padding-left: 1.5rem;
}

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

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

.post-content li {
    padding-left: 0.25rem;
}

.post-content li + li {
    margin-top: 0.5rem;
}

.post-content li::marker {
    color: hsl(var(--muted-foreground));
}

/* Inline code — shadcn pattern: subtle muted background, no border,
   slightly heavier weight to compensate for the smaller monospace
   x-height. */
.post-content code {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 0.875em;
    font-weight: 500;
    background-color: hsl(var(--muted));
    color: hsl(var(--foreground));
    padding: 0.125rem 0.375rem;
    border-radius: 0.25rem;
}

/* Code blocks (figure > pre > code). Override the inline-code style
   for code INSIDE pre — block code is plain, no per-token background. */
.post-content pre {
    background-color: hsl(var(--muted) / 0.5);
    border: 1px solid hsl(var(--border));
    border-radius: 0.5rem;
    padding: 1rem 1.25rem;
    overflow-x: auto;
    font-size: 0.875rem;
    line-height: 1.6;
    color: hsl(var(--foreground));
}

.post-content pre code {
    background: transparent;
    padding: 0;
    border-radius: 0;
    font-weight: 400;
    font-size: inherit;
    color: inherit;
}

/* Code figure (pre + caption) — caption picks up muted-foreground. */
.post-content .code-figure {
    margin-top: 1.5rem;
}

.post-content .code-figure figcaption {
    margin-top: 0.625rem;
    font-size: 0.75rem;
    color: hsl(var(--muted-foreground));
    text-align: left;
}

/* Blockquote — shadcn: 2px left rule, italic body, no background. */
.post-content blockquote {
    border-left: 2px solid hsl(var(--foreground) / 0.25);
    padding-left: 1.25rem;
    color: hsl(var(--foreground) / 0.85);
    font-style: italic;
}

.post-content blockquote footer {
    margin-top: 0.5rem;
    font-style: normal;
    font-size: 0.875rem;
    color: hsl(var(--muted-foreground));
}

/* Callout — colored left bar + tinted background. Variants set the
   --accent on the wrapper element so we don't need per-variant CSS. */
.post-content .callout {
    border-left: 4px solid var(--callout-bar, hsl(var(--border)));
    background-color: var(--callout-bg, hsl(var(--muted) / 0.4));
    padding: 1rem 1.25rem;
    border-radius: 0 0.5rem 0.5rem 0;
}

.post-content .callout > * + * {
    margin-top: 0.5rem;
}

.post-content .callout-title {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--callout-fg, hsl(var(--foreground)));
}

.post-content .callout-note    { --callout-bar: rgb(59 130 246);  --callout-bg: rgb(59 130 246 / 0.05);  --callout-fg: rgb(29 78 216); }
.post-content .callout-warning { --callout-bar: rgb(245 158 11);  --callout-bg: rgb(245 158 11 / 0.05);  --callout-fg: rgb(180 83 9); }
.post-content .callout-history { --callout-bar: rgb(139 92 246);  --callout-bg: rgb(139 92 246 / 0.05);  --callout-fg: rgb(109 40 217); }
.post-content .callout-tip     { --callout-bar: rgb(16 185 129);  --callout-bg: rgb(16 185 129 / 0.05);  --callout-fg: rgb(4 120 87); }

/* Dark theme: shift the foreground accents lighter for legibility. */
.dark .post-content .callout-note    { --callout-fg: rgb(147 197 253); }
.dark .post-content .callout-warning { --callout-fg: rgb(252 211 77); }
.dark .post-content .callout-history { --callout-fg: rgb(196 181 253); }
.dark .post-content .callout-tip     { --callout-fg: rgb(110 231 183); }

/* Tables (compare). Same border + muted header treatment as a card. */
.post-content .table-figure {
    border: 1px solid hsl(var(--border));
    border-radius: 0.5rem;
    overflow: hidden;
}

.post-content .table-figure table {
    width: 100%;
    font-size: 0.875rem;
    border-collapse: collapse;
}

.post-content .table-figure thead {
    background-color: hsl(var(--muted) / 0.5);
}

.post-content .table-figure th {
    text-align: left;
    padding: 0.625rem 1rem;
    font-weight: 500;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: hsl(var(--muted-foreground));
}

.post-content .table-figure td {
    padding: 0.75rem 1rem;
    vertical-align: top;
    border-top: 1px solid hsl(var(--border));
    color: hsl(var(--foreground) / 0.85);
}

.post-content .table-figure td:first-child {
    font-weight: 500;
    color: hsl(var(--foreground));
}

.post-content .table-figure figcaption {
    background-color: hsl(var(--muted) / 0.2);
    border-top: 1px solid hsl(var(--border));
    padding: 0.625rem 1rem;
    font-size: 0.75rem;
    color: hsl(var(--muted-foreground));
}

/* Figures (images). Caption is small + muted + centered. */
.post-content figure:not(.code-figure):not(.table-figure) img {
    width: 100%;
    border-radius: 0.5rem;
    border: 1px solid hsl(var(--border));
}

.post-content figure:not(.code-figure):not(.table-figure) figcaption {
    margin-top: 0.75rem;
    text-align: center;
    font-size: 0.75rem;
    color: hsl(var(--muted-foreground));
}

/* Hyperlinks inside body — underlined for affordance, color picks
   up the primary token. */
.post-content a:not(.no-underline) {
    color: hsl(var(--foreground));
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
    text-decoration-color: hsl(var(--muted-foreground));
}

.post-content a:hover:not(.no-underline) {
    text-decoration-color: hsl(var(--foreground));
}