/* File: wwwroot/css/rich-content.css
   ------------------------------------------------------------------------------------------
   Shared stylesheet for rendered markdown/HTML content — the site-wide "prose" look.

   Apply by adding class="rich-content" to the element that wraps rendered article/page HTML
   (blog .article-content today; wiki/forum/modules later). The renderers are NOT changed: this
   targets the plain semantic HTML that Markdig already emits.

   Every base rule is written under :where(.rich-content ...) so it carries ZERO specificity.
   That means component classes (blog-media*, blog-gallery*, wiki-*) and Bootstrap utilities
   always win with no need for !important — this sheet only fills in the unclassed elements.

   All values come from theme.css tokens, so the look themes cleanly.
   Aesthetic: Notion-like minimal — sans body, tight headings, soft-grey code/quote blocks,
   generous whitespace, minimal rules.
   ------------------------------------------------------------------------------------------ */

.rich-content {
    color: var(--app-fg);
    font-family: var(--content-font);
    font-size: var(--content-size);
    line-height: var(--content-leading);
    overflow-wrap: break-word;
    word-break: break-word;
}

/* Reading column: keep text/blocks to a comfortable measure, left-aligned (Notion-style),
   but let media, galleries, tables, code and rules break out to full width. */
:where(.rich-content) > * {
    max-width: var(--content-measure);
}
:where(.rich-content) > :where(figure, .blog-media, .blog-media-left, .blog-media-right,
    .blog-gallery, table, pre, hr, img) {
    max-width: 100%;
}

/* Vertical rhythm between top-level blocks */
:where(.rich-content) > * + * { margin-top: var(--content-flow); }

/* ---- Headings (tight hierarchy) ---- */
:where(.rich-content) :is(h1, h2, h3, h4, h5, h6) {
    font-family: var(--content-font);
    font-weight: 600;
    line-height: 1.25;
    color: var(--app-fg);
    margin: 1.6em 0 .6em;
}
:where(.rich-content) > :is(h1, h2, h3, h4, h5, h6):first-child { margin-top: 0; }
:where(.rich-content) h1 { font-size: var(--content-h1); letter-spacing: -.01em; }
:where(.rich-content) h2 { font-size: var(--content-h2); letter-spacing: -.01em; }
:where(.rich-content) h3 { font-size: var(--content-h3); }
:where(.rich-content) h4 { font-size: var(--content-h4); }
:where(.rich-content) :is(h5, h6) {
    font-size: 1rem;
    color: var(--app-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
}

/* ---- Paragraphs & inline ---- */
:where(.rich-content) p { margin: 0; }
:where(.rich-content) a {
    color: var(--app-accent);
    text-decoration: none;
    border-bottom: 1px solid color-mix(in srgb, var(--app-accent) 35%, transparent);
}
:where(.rich-content) a:hover { border-bottom-color: var(--app-accent); }
:where(.rich-content) strong { font-weight: 600; }
:where(.rich-content) mark {
    background: color-mix(in srgb, var(--app-accent) 18%, transparent);
    padding: .05em .2em;
    border-radius: 3px;
}
:where(.rich-content) small { font-size: .875em; color: var(--app-muted); }
:where(.rich-content) sub, :where(.rich-content) sup { font-size: .75em; line-height: 0; }

/* ---- Lists ---- */
:where(.rich-content) :is(ul, ol) { margin: 0; padding-left: 1.4em; }
:where(.rich-content) li + li { margin-top: .3em; }
:where(.rich-content) li > :is(ul, ol) { margin-top: .3em; }
:where(.rich-content) li::marker { color: var(--app-muted); }

/* Task lists: Markdig emits <li> containing <input type="checkbox"> */
:where(.rich-content) li:has(> input[type="checkbox"]) {
    list-style: none;
    margin-left: -1.4em;
    padding-left: 1.4em;
}
:where(.rich-content) input[type="checkbox"] { margin-right: .5em; transform: translateY(1px); }

/* ---- Blockquote (soft, minimal) ---- */
:where(.rich-content) blockquote {
    margin: 0;
    padding: .2em 0 .2em 1em;
    border-left: 3px solid var(--app-border);
    color: var(--app-muted);
}
:where(.rich-content) blockquote > * { max-width: none; }

/* ---- Code ---- */
:where(.rich-content) code {
    font-family: var(--content-font-mono);
    font-size: .9em;
    background: var(--app-surface-soft);
    padding: .15em .4em;
    border-radius: var(--app-radius-sm);
}
:where(.rich-content) pre {
    font-family: var(--content-font-mono);
    background: var(--app-surface-soft);
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius);
    padding: .9em 1.1em;
    overflow-x: auto;
    line-height: 1.5;
    white-space: pre;
}
:where(.rich-content) pre code {
    background: none;
    padding: 0;
    border-radius: 0;
    font-size: .875rem;
}

/* ---- Horizontal rule ---- */
:where(.rich-content) hr {
    border: 0;
    border-top: 1px solid var(--app-border);
    margin: 2em 0;
}

/* ---- Images & figures ---- */
:where(.rich-content) img { max-width: 100%; height: auto; border-radius: var(--app-radius-sm); }
:where(.rich-content) figure { margin: 0; text-align: center; }
:where(.rich-content) figcaption { color: var(--app-muted); font-size: .875rem; margin-top: .4em; }

/* ---- Tables ---- */
:where(.rich-content) table {
    /* Scroll wide tables within their own box instead of pushing the page
       (markdown tables have no wrapper element to scroll). */
    display: block;
    width: max-content;
    max-width: 100%;
    overflow-x: auto;
    border-collapse: collapse;
    font-size: .95em;
}
:where(.rich-content) :is(th, td) {
    border: 1px solid var(--app-border);
    padding: .5em .75em;
    text-align: left;
    vertical-align: top;
}
:where(.rich-content) thead th { background: var(--app-surface-soft); font-weight: 600; }
:where(.rich-content) tbody tr:nth-child(even) {
    background: color-mix(in srgb, var(--app-surface-soft) 50%, transparent);
}
/* In print/PDF there is no scrolling, so let tables lay out normally and wrap to fit
   the page instead of clipping at the box edge. */
@media print {
    :where(.rich-content) table { display: table; width: 100%; overflow-x: visible; }
}

/* ---- Definition lists ---- */
:where(.rich-content) dt { font-weight: 600; }
:where(.rich-content) dd { margin: 0 0 .5em 1.2em; color: var(--app-muted); }

/* ---- Keyboard & abbreviations ---- */
:where(.rich-content) kbd {
    font-family: var(--content-font-mono);
    font-size: .8em;
    background: var(--app-surface-softer);
    border: 1px solid var(--app-border);
    border-bottom-width: 2px;
    border-radius: var(--app-radius-sm);
    padding: .1em .4em;
}
:where(.rich-content) abbr[title] { text-decoration: underline dotted; cursor: help; }

/* ---- Footnotes (Markdig .footnotes block) ---- */
:where(.rich-content) .footnotes { font-size: .9em; color: var(--app-muted); margin-top: 2.5em; }
:where(.rich-content) .footnotes hr { margin-top: 0; }