/* ═══════════════════════════════════════════════════════════════════════
   SVAMZ — ARTICLE PROSE
   The single definition of how a published article body looks.

   Loaded by BOTH:
     article.html            → .article-content   (the public page)
     admin-urejevalnik.html  → .prev-body         (Predogled overlay)
                             → .ql-editor         (live canvas — subset)

   ── THE CONTRACT ──────────────────────────────────────────────────────
   .prev-body and .article-content are handed the SAME string
   (quill.getSemanticHTML() via getCleanHtml(), admin-urejevalnik.html).
   Every rule below names them together, so what the admin approves in
   Predogled is what the reader gets. They cannot drift apart.

   .ql-editor holds Quill's INTERNAL markup instead: ql-code-block-container
   divs, <ol><li data-list="bullet"> with .ql-ui marker spans, li.ql-indent-N.
   It shares the type scale, colour, spacing and block chrome from here; its
   LIST and CODE-BLOCK chrome stays owned by quill.snow.css.
   → Do NOT add .ql-editor to the list, code-block or indent selectors.

   ── WHY LITERAL VALUES, NEVER var(--text) ─────────────────────────────
   This file also runs on admin-urejevalnik.html, whose :root declares a
   DARK chrome palette — --text is #f2f2f4 there. Writing
   `color: var(--text, #26262a)` would NOT fall back: the token exists, just
   inverted, so the prose would render near-white on the white paper.
   Everything here is therefore a self-owned --prose-* with a literal value.
   That is also what guarantees both surfaces resolve identically.

   Values follow the editor canvas (it is the WYSIWYG source of truth);
   reds are snapped to the brand ramp in style.css (--red / --red-dark).
   ═══════════════════════════════════════════════════════════════════════ */

.article-content,
.prev-body,
.ql-editor {
  --prose-fs:         16px;   /* the ribbon's px size presets assume this base */
  --prose-lh:         1.85;
  --prose-gap:        0.9em;  /* rhythm between blocks */
  --prose-ink:        #26262a;
  --prose-head:       #141416;
  --prose-ink-2:      #55555c;
  --prose-rule:       #e4e4e8;
  --prose-surface:    #f4f4f6;
  --prose-accent:     #d32f2f;  /* = style.css --red      */
  --prose-link:       #b71c1c;  /* = style.css --red-dark */
  --prose-img-radius: 8px;
  --prose-serif: "Playfair Display", Georgia, serif;
  --prose-sans:  "Poppins", system-ui, -apple-system, sans-serif;
  --prose-mono:  ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  font-family: var(--prose-sans);
  font-size:   var(--prose-fs);
  line-height: var(--prose-lh);
  color:       var(--prose-ink);
  overflow-wrap: break-word;
}

/* A floated image must not escape the article body.
   Not on .ql-editor — a block ::after inside a contenteditable shows up as a
   phantom line the admin can put a caret on. */
.article-content::after,
.prev-body::after { content: ""; display: block; clear: both; }

/* ═══ HEADINGS ═══
   Sized in em so all three surfaces land on the same pixel from --prose-fs.
   Without an explicit size the public page inherits style.css's section-title
   scale (h2 = --fs-7 = up to 46px) — nearly double the editor. */
.article-content h1, .prev-body h1, .ql-editor h1,
.article-content h2, .prev-body h2, .ql-editor h2,
.article-content h3, .prev-body h3, .ql-editor h3,
.article-content h4, .prev-body h4, .ql-editor h4 {
  font-family: var(--prose-serif);
  font-weight: 700;
  color: var(--prose-head);
  line-height: 1.25;
  letter-spacing: -0.012em;
  margin: 1.4em 0 0.5em;
  clear: both;              /* a heading ends any float wrap above it */
  text-wrap: balance;
}
.article-content h1, .prev-body h1, .ql-editor h1 { font-size: 2.2em; }
.article-content h2, .prev-body h2, .ql-editor h2 { font-size: 1.6em; }
.article-content h3, .prev-body h3, .ql-editor h3 { font-size: 1.3em; }
.article-content h4, .prev-body h4, .ql-editor h4 { font-size: 1.1em; }

.article-content > :is(h1,h2,h3,h4):first-child,
.prev-body      > :is(h1,h2,h3,h4):first-child { margin-top: 0; }

/* ═══ BLOCKS ═══ */
.article-content p, .prev-body p, .ql-editor p { margin: 0 0 var(--prose-gap); }

.article-content blockquote, .prev-body blockquote, .ql-editor blockquote {
  border-left: 4px solid var(--prose-accent);
  padding-left: 18px;
  margin: 1.2em 0;
  font-style: italic;
  color: var(--prose-ink-2);
  clear: both;
}
.article-content blockquote p:last-child,
.prev-body blockquote p:last-child { margin-bottom: 0; }

/* The divider button. style.css's global `*{margin:0;padding:0}` reset and the
   admin's own reset both zero <hr>, so it has to be declared in full. */
.article-content hr, .prev-body hr, .ql-editor hr {
  border: 0;
  height: 0;
  border-top: 1px solid var(--prose-rule);
  width: 40%;
  margin: 2em auto;
  clear: both;
}

/* ═══ INLINE ═══ */
.article-content a, .prev-body a, .ql-editor a {
  color: var(--prose-link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.article-content a:hover, .prev-body a:hover, .ql-editor a:hover { color: var(--prose-accent); }

.article-content strong, .prev-body strong, .ql-editor strong { font-weight: 700; }
.article-content em,     .prev-body em,     .ql-editor em     { font-style: italic; }

/* Pinned so the sub/sup buttons never push the line box open. */
.article-content sub, .prev-body sub, .ql-editor sub,
.article-content sup, .prev-body sup, .ql-editor sup {
  font-size: 0.75em;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
.article-content sup, .prev-body sup, .ql-editor sup { top: -0.5em; }
.article-content sub, .prev-body sub, .ql-editor sub { bottom: -0.25em; }

/* Inline <code> has no ribbon button, but is reachable by paste. */
.article-content code, .prev-body code {
  font-family: var(--prose-mono);
  font-size: 0.88em;
  background: var(--prose-surface);
  border: 1px solid var(--prose-rule);
  border-radius: 4px;
  padding: 0.1em 0.35em;
}
.article-content pre code, .prev-body pre code {
  background: none; border: 0; padding: 0; font-size: inherit;
}

/* ═══ LISTS ═══
   getSemanticHTML() emits real <ul>/<ol> ("ordered"===type?"ol":"ul") and turns
   indent levels into real NESTING, so native markers are correct and <ol>
   counters nest by themselves — no counter-reset needed.
   .ql-editor is deliberately absent: quill.snow.css owns the canvas markers. */
.article-content ul, .article-content ol,
.prev-body ul, .prev-body ol {
  margin: 0 0 var(--prose-gap);
  padding-left: 1.6em;      /* the global *{padding:0} reset kills the default */
}
/* A nested list belongs to its parent item, not to the block flow. */
.article-content li > ul, .article-content li > ol,
.prev-body li > ul, .prev-body li > ol { margin: 0.35em 0 0.15em; }

.article-content li, .prev-body li { margin: 0 0 0.4em; }
.article-content li::marker, .prev-body li::marker { color: var(--prose-ink-2); }

.article-content ul,       .prev-body ul       { list-style-type: disc; }
.article-content ul ul,    .prev-body ul ul    { list-style-type: circle; }
.article-content ul ul ul, .prev-body ul ul ul { list-style-type: square; }
.article-content ol,       .prev-body ol       { list-style-type: decimal; }
.article-content ol ol,    .prev-body ol ol    { list-style-type: lower-alpha; }
.article-content ol ol ol, .prev-body ol ol ol { list-style-type: lower-roman; }

/* Canvas: spacing only. Never touch padding or list-style here — quill.snow.css
   renders markers with .ql-ui spans and does its own indent maths. */
.ql-editor ul, .ql-editor ol { margin-bottom: var(--prose-gap); }

/* ── Legacy list compat ──
   Content pasted from Quill 1/2, or saved through the quill.root.innerHTML
   fallback in getCleanHtml(), puts bullets AND numbers inside one <ol> and
   tells them apart with data-list. A counter (rather than ::before plus
   list-style) keeps bullet items from consuming numbers. */
.article-content ol, .prev-body ol { counter-reset: ql-num; }
.article-content ol > li[data-list],
.prev-body      ol > li[data-list] { list-style-type: none; }
.article-content ol > li[data-list="ordered"],
.prev-body      ol > li[data-list="ordered"] { counter-increment: ql-num; }
.article-content ol > li[data-list="ordered"]::before,
.prev-body      ol > li[data-list="ordered"]::before { content: counter(ql-num) ". "; }
.article-content ol > li[data-list="bullet"]::before,
.prev-body      ol > li[data-list="bullet"]::before { content: "\2022"; }
.article-content ol > li[data-list]::before,
.prev-body      ol > li[data-list]::before {
  display: inline-block;
  width: 1.4em;
  margin-left: -1.4em;
  color: var(--prose-ink-2);
}
/* Quill's editing-only marker span, should it ever reach saved HTML. */
.article-content .ql-ui, .prev-body .ql-ui { display: none; }

/* ═══ INDENT ═══
   ql-indent-N survives serialization on paragraphs, headings and blockquotes
   (that branch reuses the element's own start tag). On list items it becomes
   nesting instead, so it never appears there. 3em per level mirrors
   quill.snow.css. margin-left, not padding-left: padding would sit inside a
   blockquote's red rule instead of moving the whole block. */
.article-content .ql-indent-1, .prev-body .ql-indent-1 { margin-left:  3em; }
.article-content .ql-indent-2, .prev-body .ql-indent-2 { margin-left:  6em; }
.article-content .ql-indent-3, .prev-body .ql-indent-3 { margin-left:  9em; }
.article-content .ql-indent-4, .prev-body .ql-indent-4 { margin-left: 12em; }
.article-content .ql-indent-5, .prev-body .ql-indent-5 { margin-left: 15em; }
.article-content .ql-indent-6, .prev-body .ql-indent-6 { margin-left: 18em; }
.article-content .ql-indent-7, .prev-body .ql-indent-7 { margin-left: 21em; }
.article-content .ql-indent-8, .prev-body .ql-indent-8 { margin-left: 24em; }

/* Class-based alignment. The editor registers the STYLE attributor, so these
   are only reachable via paste or content written before that change. */
.article-content .ql-align-center,  .prev-body .ql-align-center  { text-align: center; }
.article-content .ql-align-right,   .prev-body .ql-align-right   { text-align: right; }
.article-content .ql-align-justify, .prev-body .ql-align-justify { text-align: justify; }

/* ═══ CODE BLOCK ═══
   Serialized as <pre data-language="plain">. The UA gives white-space:pre and a
   mono family, but both resets zero its margin and padding. */
.article-content pre, .prev-body pre {
  font-family: var(--prose-mono);
  font-size: 0.85em;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
  tab-size: 2;
  background: var(--prose-surface);
  border: 1px solid var(--prose-rule);
  border-left: 3px solid var(--prose-accent);
  border-radius: 8px;
  padding: 14px 16px;
  margin: 1em 0;
  overflow-x: auto;
  clear: both;
}

/* ═══ IMAGES ═══
   No box-shadow and no hard radius override here: rounding and shadow are
   PER-IMAGE toggles in the editor and arrive as inline styles, which must win.
   Declaring a shadow on every image is exactly what made that toggle a no-op.
   The width attribute (25/50/75/100%) and float+margin also arrive inline. */
.article-content img, .prev-body img, .ql-editor img {
  max-width: 100%;
  height: auto;
  display: inline-block;
  border-radius: var(--prose-img-radius);
  margin: 0.6em 0;
}

/* ═══ VIDEO ═══ */
.article-content iframe, .prev-body iframe,
.ql-editor iframe.ql-video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  border: 0;
  border-radius: 8px;
  margin: 0.6em 0;
  clear: both;
}

/* ═══ DEFENSIVE ═══
   No ribbon button produces these, but the HTML view and paste can. */
.article-content table, .prev-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.2em 0;
  font-size: 0.95em;
  display: block;
  overflow-x: auto;
  clear: both;
}
.article-content :is(th, td), .prev-body :is(th, td) {
  border: 1px solid var(--prose-rule);
  padding: 0.55em 0.8em;
  text-align: left;
}
.article-content th, .prev-body th { background: var(--prose-surface); font-weight: 600; }

.article-content figure, .prev-body figure { margin: 1.2em 0; clear: both; }
.article-content figcaption, .prev-body figcaption {
  font-size: 0.8125em;
  color: var(--prose-ink-2);
  text-align: center;
  margin-top: 0.5em;
}

/* ═══ CANVAS: OUT-SPECIFY quill.snow.css ═══
   snow ships `.ql-snow .ql-editor h2 { font-size: 1.5em }` and
   `.ql-snow .ql-editor blockquote { border-left: 4px solid #ccc }` at
   specificity (0,2,1), which beats the (0,1,1) selectors above no matter the
   load order. The Studio's own inline CSS had the same problem, so the canvas
   has always shown Quill's heading scale and a grey quote bar while Predogled
   and the live page used ours. Match the specificity to settle it.
   These are duplicates of the values above, deliberately — keep them in sync. */
.ql-snow .ql-editor h1 { font-size: 2.2em; }
.ql-snow .ql-editor h2 { font-size: 1.6em; }
.ql-snow .ql-editor h3 { font-size: 1.3em; }
.ql-snow .ql-editor h4 { font-size: 1.1em; }
.ql-snow .ql-editor blockquote {
  border-left: 4px solid var(--prose-accent);
  padding-left: 18px;
  margin: 1.2em 0;
}
/* Snow renders code blocks as a dark terminal plate; the preview and the live
   page use a light one. Same treatment on all three. */
.ql-snow .ql-editor .ql-code-block-container {
  font-family: var(--prose-mono);
  font-size: 0.85em;
  background: var(--prose-surface);
  color: var(--prose-ink);
  border: 1px solid var(--prose-rule);
  border-left: 3px solid var(--prose-accent);
  border-radius: 8px;
  padding: 14px 16px;
  margin: 1em 0;
}

/* ═══ SMALL SCREENS ═══ */
@media (max-width: 600px) {
  .article-content, .prev-body { --prose-gap: 0.8em; }

  /* Deep indents cannot survive a phone's measure. */
  .article-content [class*="ql-indent-"],
  .prev-body [class*="ql-indent-"] { margin-left: 1.5em; }

  /* Text wrapping around a 45% image is unreadable at this width. */
  .article-content img[style*="float"],
  .prev-body img[style*="float"] {
    float: none !important;
    width: 100% !important;
    margin: 1.2em 0 !important;
  }
}