/* ===========================================
   pagePartials/richTextBody.css — published Quill rich text

   Shared by every container that renders a body authored in the Quill editors
   (About text blocks, Portfolio descriptions). Those bodies are sanitized by one
   function server-side (utils/richText.js), so they must be rendered by one set
   of rules here — the list markers below used to be copied into aboutModal.css
   and portfolioModal.css, which is exactly how the two sanitize allowlists had
   already drifted apart before they were merged.

   Per-surface typography (font size, colours, heading scale) stays in each
   modal's own stylesheet; only the Quill-specific structure lives here.
   =========================================== */

/* Quill 2 puts BOTH list kinds inside a single <ol> and tells them apart only by
   li[data-list], drawing each marker from a .ql-ui span that the sanitizer strips
   (span isn't allowlisted). Native list markers therefore can't work: a bullet
   <li> is still a list item, so it advances the ordered counter and an authored
   "• • 1. 2." publishes as "• • 3. 4.". Mirror Quill's own counter scheme so the
   published page matches what the editor showed.
   Only one counter level is needed — ql-indent-* is not allowlisted, so lists
   are always flat. */

.fd-rich-text {
    counter-reset: fd-list;
    /* Quill's own .ql-editor is pre-wrap, so runs of spaces survive in the
       editor; render them the same way. Safe: neither render path puts
       whitespace text nodes between the block tags. */
    white-space: pre-wrap;
    tab-size: 4;
}

/* Spacing model: NONE. Quill zeroes every block margin inside the editor, so
   the only vertical rhythm an author ever sees is the blank lines they typed
   (<p><br></p>). Any margin added here on top of that renders spacing the
   editor never showed — the portfolio surface once had `p { margin: 0 0 12px }`
   and published paragraph gaps at 2x the editor. Per-surface files own
   font-size/weight/colour of these blocks, never their margins. */
.fd-rich-text p,
.fd-rich-text h1,
.fd-rich-text h2 {
    margin: 0;
}

.fd-rich-text ul,
.fd-rich-text ol {
    margin: 0;
    padding-inline-start: 1.5em;
}

.fd-rich-text ul {
    list-style: disc;
}

.fd-rich-text ol {
    list-style: decimal;
}

.fd-rich-text li {
    margin-bottom: 0;
}

/* Scoped to li[data-list] so a bare <li> keeps its native marker from the rules
   above. */
.fd-rich-text li[data-list] {
    list-style-type: none;
    padding-inline-start: 1.5em;
    position: relative;
}

/* Defaults to a bullet, so any value that isn't "ordered" still gets a marker —
   including the empty data-list="" that sanitize-html leaves behind when it
   rejects a value like "checked". Drawn as an inline ::before (rather than a
   native marker) so it travels with the text on a centred or right-aligned item,
   which is what the editor does. */
.fd-rich-text li[data-list]::before {
    display: inline-block;
    margin-inline-start: -1.5em;
    margin-inline-end: 0.3em;
    text-align: end;
    white-space: nowrap;
    width: 1.2em;
    content: '\2022';
}

.fd-rich-text li[data-list="ordered"] {
    counter-increment: fd-list;
}

.fd-rich-text li[data-list="ordered"]::before {
    content: counter(fd-list, decimal) '. ';
}

/* A non-list block restarts numbering — this is what stops two separate lists in
   one body from running 1, 2 then 3, 4, and is exactly what Quill does in the
   editor. counter-set only touches an existing counter; the fallback creates a
   fresh one, which reaches following siblings via normal counter scoping. */
.fd-rich-text p,
.fd-rich-text h1,
.fd-rich-text h2 {
    counter-set: fd-list 0;
}

@supports not (counter-set: none) {
    .fd-rich-text p,
    .fd-rich-text h1,
    .fd-rich-text h2 {
        counter-reset: fd-list;
    }
}

/* Alignment classes are emitted by the editors' align buttons. Justify is
   deliberately absent: neither toolbar offers it and the sanitizer strips it. */
.fd-rich-text .ql-align-center {
    text-align: center;
}

.fd-rich-text .ql-align-right {
    text-align: right;
}