/*
 * Article content — shared by the public article page (.article-prose) and the
 * admin panel's editor, so what is written in the editor looks the same on the
 * site.
 *
 * Why this file exists: site.css starts with Tailwind's reset, which removes
 * list bullets and numbers (ol, ul { list-style: none }) and makes links look
 * like plain text (a { color: inherit; text-decoration: inherit }). The admin
 * panel has its own "* { margin: 0; padding: 0 }" reset that pushes list
 * markers out of the editor box. The rules below put the article formatting
 * back, scoped to .article-content so nothing else on the site changes.
 *
 * The public page's own typography in site.css (.page-article .article-prose …)
 * is more specific and still decides fonts, sizes and colours there.
 */

.article-content {
  overflow-wrap: break-word;
}

/* ── Paragraphs & headings ─────────────────────────────────────── */

.article-content p { margin: 0 0 1em; }

.article-content h2,
.article-content h3,
.article-content h4 {
  line-height: 1.3;
  font-weight: 700;
  scroll-margin-top: 110px; /* table-of-contents jumps clear the sticky header */
}
.article-content h2 { font-size: 1.6em; margin: 1.4em 0 0.6em; }
.article-content h3 { font-size: 1.3em; margin: 1.2em 0 0.5em; }
.article-content h4 { font-size: 1.1em; margin: 1em 0 0.4em; }
.article-content > :first-child { margin-top: 0; }

/* ── Inline formatting ─────────────────────────────────────────── */

.article-content strong,
.article-content b { font-weight: 700; }
.article-content em,
.article-content i { font-style: italic; }
.article-content u { text-decoration: underline; text-underline-offset: 2px; }
.article-content s { text-decoration: line-through; }
.article-content sub,
.article-content sup { font-size: 0.75em; line-height: 0; position: relative; }
.article-content sup { top: -0.5em; }
.article-content sub { bottom: -0.25em; }
.article-content code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.9em;
  background: #f4f4f5;
  border-radius: 4px;
  padding: 0.1em 0.35em;
}
.article-content pre {
  background: #f4f4f5;
  border-radius: 8px;
  padding: 1em;
  overflow-x: auto;
  margin: 0 0 1.25em;
}
.article-content pre code { background: none; padding: 0; }

/* Links: visible and clearly clickable (the reset makes them plain text). */
.article-content a[href] {
  color: #15803d;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  cursor: pointer;
}
.article-content a[href]:hover { color: #166534; text-decoration-thickness: 2px; }

/* Highlights — the editor's Highlight colours. */
.article-content mark {
  background-color: #fdfd77;
  color: inherit;
  padding: 0 0.1em;
  border-radius: 2px;
}
.article-content mark.marker-yellow { background-color: #fdfd77; }
.article-content mark.marker-green  { background-color: #62f962; }
.article-content mark.marker-pink   { background-color: #fc7899; }
.article-content mark.marker-blue   { background-color: #72ccfd; }
.article-content mark.pen-red   { background-color: transparent; color: #e71313; padding: 0; }
.article-content mark.pen-green { background-color: transparent; color: #128a00; padding: 0; }

/* ── Lists ─────────────────────────────────────────────────────── */

.article-content ul,
.article-content ol {
  margin: 0 0 1.25em;
  padding-left: 1.75em;
}
.article-content ul { list-style-type: disc; }
.article-content ol { list-style-type: decimal; }
.article-content ul ul { list-style-type: circle; }
.article-content ul ul ul { list-style-type: square; }
.article-content ol ol { list-style-type: lower-latin; }
.article-content ol ol ol { list-style-type: lower-roman; }
.article-content li { display: list-item; margin: 0 0 0.4em; padding-left: 0.2em; }
.article-content li > ul,
.article-content li > ol,
.page-article .article-content li > ul,
.page-article .article-content li > ol { margin: 0.4em 0 0.2em; }
.article-content li > p,
.page-article .article-content li > p { margin: 0 0 0.4em; }
.article-content li > p:last-child,
.page-article .article-content li > p:last-child { margin-bottom: 0; }
.article-content li::marker { color: #16a34a; font-weight: 600; }

/* ── Blocks ────────────────────────────────────────────────────── */

.article-content blockquote {
  border-left: 4px solid #16a34a;
  background: #f0fdf4;
  padding: 0.75em 1.25em;
  margin: 1.5em 0;
  border-radius: 0 12px 12px 0;
  font-style: italic;
}
.article-content blockquote > :last-child { margin-bottom: 0; }

.article-content hr {
  border: 0;
  border-top: 1px solid #e5e5e5;
  margin: 2em 0;
}

.article-content table { border-collapse: collapse; width: 100%; }
.article-content th,
.article-content td { border: 1px solid #e5e5e5; padding: 0.5em 0.75em; vertical-align: top; }
.article-content th { background: #f5f5f5; font-weight: 600; text-align: left; }

.article-content figure { margin: 1.5em 0; }
.article-content figure.image { text-align: center; }
.article-content figure.image img { display: block; margin: 0 auto; max-width: 100%; height: auto; }
.article-content figure.image_resized img { width: 100%; }
.article-content figure.image-style-align-left,
.article-content figure.image-style-block-align-left { margin-left: 0; margin-right: auto; }
.article-content figure.image-style-align-right,
.article-content figure.image-style-block-align-right { margin-left: auto; margin-right: 0; }
.article-content figcaption {
  font-size: 0.875em;
  color: #737373;
  margin-top: 0.5em;
  text-align: center;
}

/* ── Table of contents (article page sidebar) ──────────────────── */

.page-article .toc .toc-item { padding-left: 0; }
.page-article .toc .toc-sublist {
  list-style: none;
  margin: 0.375rem 0 0;
  padding: 0 0 0 0.9rem;
  border-left: 1px solid #e5e5e5;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.page-article .toc .toc-h3 > .toc-link { font-size: 0.8125rem; }
.page-article .toc .toc-h4 > .toc-link { font-size: 0.78rem; color: #737373; }
.page-article .toc .toc-h4 > .toc-link:hover { color: #16a34a; }