/*
 * Rendering for the "safe-but-inert" data-align / data-caption attributes
 * that core.richtext.sanitize_filtered_html (see FILTERED_HTML_ALLOWED_ATTRS
 * in cereview/settings/base.py) lets survive on <img> and <blockquote> tags
 * in Article/Question/Situational rich-text fields — added 2026-08-25,
 * modeled on how Jhun's MATHalino Drupal site (BUEditor + IMCE) rendered
 * the same attributes.
 *
 * Important: a bare data-* attribute does NOTHING in a browser on its own —
 * it's just inert text sitting on the tag, which is exactly why it was
 * safe to let the sanitizer keep it. This stylesheet is what actually
 * gives data-align/data-caption visible meaning. Without it, the attribute
 * would survive in the saved HTML but the page would look no different.
 *
 * Scoped to `.rtf-content` — the wrapper class added around every place an
 * Article.body / Question.*_text / Situation.*_text field is rendered with
 * |safe (templates/content/article_detail.html, templates/admin/questions/
 * {question,situation}_preview.html) — rather than a bare `img[data-align]`
 * selector, so this can never accidentally style structural chrome like
 * the navbar logo image.
 *
 * <img data-caption="..."> additionally needs static/js/richtext_content.js:
 * CSS generated content (::before/::after) is not rendered on replaced
 * elements like <img> in any current browser (Chrome/Firefox/Safari all
 * silently skip it), so a caption below an image can't be pure CSS the way
 * blockquote's caption below is. <blockquote> is an ordinary block element
 * (not "replaced"), so its data-align/data-caption are handled entirely in
 * CSS here — no JS involved for blockquote.
 *
 * Load this after brand.css (same order in every template that includes
 * both) so it can use brand.css's dark-mode custom properties directly.
 */

.rtf-content {
    /* Clearfix: keeps a floated aligned image from collapsing this box to
       zero height when the image is the only/last thing inside it. */
    overflow: auto;
}

/* ---- Article page body panel (2026-08-27, Jhun's request) ---------------
   Article.body used to render straight onto the page's bare --bg-canvas —
   the harshest, deepest-dark background on the site, unlike Question/
   Situational preview text, which already sits inside a Bootstrap .card
   (--bg-card). That made the Article page feel flatter than the rest of
   the site and, more importantly, meant a non-transparent PNG illustration
   pasted into an article would show a mismatched dark square around it.
   .article-body gives it the same --bg-card surface as every other
   rich-text panel on the site, so an illustration whose own background is
   painted --bg-card blends in seamlessly. Only templates/content/
   article_detail.html adds this class — Question/Situational previews
   keep using the surrounding .card for the same background instead, so
   this never doubles up with that (identical color either way, but no
   redundant box-within-a-box). */
.rtf-content.article-body {
    background-color: var(--bg-card, #1c1c1e);
    border: 1px solid var(--border, #2c2c2e);
    border-radius: 0.5rem;
    padding: 1.5rem;
}
@media (max-width: 575.98px) {
    .rtf-content.article-body {
        padding: 1rem;
    }
}

/* ---- Headings inside rich-text content -----------------------------------
   h1-h5 colors are defined once, as CSS custom properties, in
   static/css/brand.css's own "Headings" section (loaded before this file
   in every template) — h2 { color: var(--heading-h2); } there already
   covers every <h2>-<h5> a Filtered/Full HTML author puts inside
   .rtf-content (FILTERED_HTML_ALLOWED_TAGS caps content headings at h2-h5;
   h1 is reserved for the page's own title, e.g. the Article template's
   <h1>{{ article.title }}</h1> outside this wrapper). Nothing
   .rtf-content-specific is needed here. */

/* ---- <code> — VS Code (dark theme)-style inline code -------------------
   Filtered/Full HTML only ever produces inline <code> here (there's no
   <pre> in FILTERED_HTML_ALLOWED_TAGS, and the toolbar's "</>" button
   only wraps the current selection in <code>...</code> — see
   core/editor_widget.py's _SIMPLE_BUTTONS) — so this is sized/padded as
   an inline snippet, not a code block. Colors match VS Code's default
   dark theme (editor background #1e1e1e, foreground #d4d4d4) rather than
   this site's own --bg-card, on purpose — Jhun asked for "the color and
   font style similar to Visual Studio Code" specifically, and a real VS
   Code look needs its own near-black, not the site's slightly lighter
   card surface. */
.rtf-content code {
    font-family: "Cascadia Code", "Fira Code", Consolas, "Courier New", monospace;
    font-size: 0.9em;
    background-color: #1e1e1e;
    color: #d4d4d4;
    padding: 0.15em 0.4em;
    border: 1px solid #333333;
    border-radius: 4px;
}

/* ---- <blockquote> — indented, quote-marked, distinctively set ----------
   Jhun asked for an indent, a quote-left-style icon (fontawesome.com's
   fa-quote-left "or a similar one"), and "a font style that is
   distinctive to be a quote". Implemented as a big serif quotation mark
   via ::before rather than pulling in Font Awesome as a third icon-font
   CDN (this site currently only loads Bootstrap's CSS/JS and MathJax) —
   it recolors with the theme for free (plain `color`, no icon-font
   sprite/mask to keep in sync) and needs no extra network request. The
   quote text itself switches to an italic serif face, distinct from the
   site's default sans-serif body copy, which is the "distinctive font
   style" ask. data-align/data-caption (below) still layer on top of this
   unchanged. */
.rtf-content blockquote {
    position: relative;
    margin: 1.5em 0;
    margin-left: 2.5rem;
    padding: 0.9em 1.25em 0.9em 3.25rem;
    background-color: rgba(123, 156, 245, 0.08);
    border-left: 4px solid var(--link-blue, #7b9cf5);
    border-radius: 0 8px 8px 0;
    font-family: Georgia, "Times New Roman", serif;
    font-style: italic;
    color: var(--text-secondary, #a8a8ad);
}
.rtf-content blockquote::before {
    content: "\201C";
    position: absolute;
    left: 0.6rem;
    top: 0.05em;
    font-family: Georgia, "Times New Roman", serif;
    font-style: normal;
    font-size: 2.75rem;
    line-height: 1;
    color: var(--link-blue, #7b9cf5);
    opacity: 0.85;
}

/* ---- <img> spacing, all alignments including "none" ---------------------
   Jhun's ask: "add some padding and/or margin ... separate padding for
   align left, align right, and align center". box-sizing: border-box on
   the shared base rule keeps that padding from fighting max-width: 50%
   on the floated variants below. A bare <img> with no data-align at all
   previously had NO spacing here — flush against surrounding paragraph
   text — so it now gets the same base padding plus a small margin of its
   own (kept inline rather than switched to display:block, so it doesn't
   change how existing already-authored content flows).
   When an image also carries data-caption, static/js/richtext_content.js
   MOVES that attribute from the <img> onto the .rtf-caption-wrap span it
   builds around it (see that file) — so the [data-align] rules below only
   ever match a bare, uncaptioned <img>, never one that's already inside a
   caption wrapper. That avoids two different rules fighting to
   float/center the same element. */
.rtf-content img {
    box-sizing: border-box;
    max-width: 100%;
    height: auto;
    padding: 0.35em;
}
.rtf-content img:not([data-align]) {
    margin: 0.5em;
}
.rtf-content img[data-align="left"] {
    float: left;
    margin: 0.25em 1.5em 0.75em 0;
    padding: 0.35em 0.35em 0.35em 0;
    max-width: 50%;
}
.rtf-content img[data-align="right"] {
    float: right;
    margin: 0.25em 0 0.75em 1.5em;
    padding: 0.35em 0 0.35em 0.35em;
    max-width: 50%;
}
.rtf-content img[data-align="center"] {
    display: block;
    margin: 0.75em auto;
    padding: 0.35em 0;
    max-width: 100%;
}

/* ---- <img data-caption="...">, with or without data-align ---------------
   Structure built by richtext_content.js:
     <span class="rtf-caption-wrap" data-align="...">   (data-align optional)
       <img ...>                                         (data-align removed)
       <span class="rtf-caption">the caption text</span>
     </span> */
.rtf-content .rtf-caption-wrap {
    display: inline-block;
    max-width: 100%;
    vertical-align: top;
}
.rtf-content .rtf-caption-wrap[data-align="left"] {
    float: left;
    margin: 0.25em 1.25em 0.75em 0;
}
.rtf-content .rtf-caption-wrap[data-align="right"] {
    float: right;
    margin: 0.25em 0 0.75em 1.25em;
}
.rtf-content .rtf-caption-wrap[data-align="center"] {
    display: block;
    margin: 0.75em auto;
    text-align: center;
}
.rtf-content .rtf-caption-wrap img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0;
}
.rtf-content .rtf-caption {
    display: block;
    font-size: 0.875em;
    font-style: italic;
    color: var(--text-secondary, #6c757d);
    margin-top: 0.35em;
    text-align: center;
}

/* ---- <blockquote data-align="..."> / data-caption="..."> ----------------
   blockquote is an ordinary block element, not a "replaced" one like img,
   so both attributes can be handled in pure CSS — no JS wrapping needed. */
.rtf-content blockquote[data-align="left"] {
    text-align: left;
}
.rtf-content blockquote[data-align="right"] {
    text-align: right;
}
.rtf-content blockquote[data-align="center"] {
    text-align: center;
}
.rtf-content blockquote[data-caption]::after {
    content: attr(data-caption);
    display: block;
    font-size: 0.875em;
    font-style: italic;
    color: var(--text-secondary, #6c757d);
    margin-top: 0.5em;
}