/* Blog post content tweaks layered on top of Tailwind Typography (`prose`).
   The typography plugin targets elements via :where() (zero specificity), so the
   plain selectors below override it without needing !important or a CSS rebuild. */

/* ── Inline code: `site_id`, `/historical` … ──
   Default prose renders inline code as bold text wrapped in literal backticks.
   Render it as a proper code chip instead: monospace, subtle background, no backticks. */
.prose code:not(pre code) {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
    font-size: 0.85em;
    font-weight: 500;
    background: #f7fee7;            /* primary-50: subtle brand-tinted chip */
    color: #3f6212;                 /* primary-800: readable on the light tint */
    padding: 0.12em 0.4em;
    border-radius: 0.375rem;
    border: 1px solid #d9f99d;      /* primary-200 */
    white-space: nowrap;
}

.prose code:not(pre code)::before,
.prose code:not(pre code)::after {
    content: none;                  /* drop the literal backticks */
}

.dark .prose code:not(pre code) {
    background: rgba(132, 204, 22, 0.12);   /* primary-500 @ low alpha */
    color: #bef264;                          /* primary-300 */
    border-color: rgba(132, 204, 22, 0.25);
}

/* Links that are themselves code keep the inline-code chip but the link colour */
.prose a code:not(pre code) {
    color: inherit;
}

/* ── Content images: lift them off the page background ──
   Header image (outside .prose) is styled separately in the template. */
.prose img {
    border-radius: 0.75rem;
    border: 1px solid #e5e7eb;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.dark .prose img {
    border-color: rgba(255, 255, 255, 0.10);
    box-shadow: 0 6px 28px rgba(0, 0, 0, 0.55);
}