/* ----------------------------------------------------------------------------
   Markdown prose styles for .Content output.

   The nojs theme ships a minimal main.css that covers page chrome but
   leaves goldmark output unstyled. This file fills the gap with reading-
   focused rules: heading rhythm/scale, horizontal rules, blockquote,
   inline tags (mark, kbd, del, ins), and collapsible blocks.

   Scope notes:
   - Headings are scoped to <main> so the navbar / brand / footer keep
     their own typography. main.html structure: <h1> title, optional
     metadata, then goldmark content.
   - Inline tags (blockquote, mark, kbd, del, ins, hr, details, summary)
     only appear in markdown output, so they stay unscoped.
   - Light/dark handled through the vars.css custom properties (--fg1/2,
     --bg2, --link) plus light-dark() for the mark background.

   When the theme gains more styling, prefer merging these rules into the
   upstream theme rather than growing this file further.
---------------------------------------------------------------------------- */

main {
    line-height: 1.65;
}

/* ---- Headings ------------------------------------------------------------ */

main :is(h2, h3, h4, h5, h6) {
    margin-top: 1.8em;
    margin-bottom: 0.5em;
    line-height: 1.25;
    letter-spacing: -0.01em;
    font-weight: 600;
}

main h1 {
    font-size: 1.75em;
    line-height: 1.2;
    letter-spacing: -0.02em;
    font-weight: 600;
    margin-top: 0;
    margin-bottom: 0.6em;
}

main h2 {
    font-size: 1.5em;
}

main h3 {
    font-size: 1.25em;
}

main h4 {
    font-size: 1.05em;
}

main h5 {
    font-size: 0.85em;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--fg2);
}

main h6 {
    font-size: 0.85em;
    color: var(--fg2);
}

/* ---- Inline & prose-only tags -------------------------------------------- */

hr {
    border: 0;
    height: 1px;
    width: 4em;
    margin: 2.5em auto;
    background-color: var(--fg2);
    opacity: 0.5;
}

blockquote {
    font-style: italic;
    color: var(--fg2);
    margin-inline: 1.5em;
    padding-inline-start: 1em;
    border-inline-start: 2px solid currentColor;
}

mark {
    background-color: light-dark(#fff3a3, #6b5500);
    color: inherit;
    padding: 0 0.2em;
    border-radius: 2px;
}

kbd {
    font-family: monospace;
    font-size: 0.9em;
    background-color: var(--bg2);
    border: 1px solid var(--fg2);
    border-radius: 3px;
    padding: 0.05em 0.4em;
}

del {
    color: var(--fg2);
}

ins {
    text-decoration: underline;
    text-decoration-color: var(--link);
    text-underline-offset: 2px;
}

details {
    border-inline-start: 2px solid var(--fg2);
    padding-inline-start: 1em;
    margin-block: 1em;
}

summary {
    cursor: pointer;
    color: var(--link);
}

/* Nested lists: tighten the gap so prose doesn't visually bloat */
main li+li {
    margin-top: 0.25em;
}

main li> :is(ul, ol) {
    margin-block: 0.3em;
}