/**
 * Public blog body: styles for HTML produced by Quill (v1.3 + v2),
 * scoped under .article-body (no .ql-editor wrapper in the database).
 */

.article-body {
  counter-reset: list-0 list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
}

.article-body p,
.article-body h1,
.article-body h2,
.article-body h3,
.article-body h4,
.article-body h5,
.article-body h6 {
  counter-reset: list-0 list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
}

/* ── Alignment & direction ─────────────────────────────────── */
.article-body .ql-align-center {
  text-align: center;
}
.article-body .ql-align-right {
  text-align: right;
}
.article-body .ql-align-justify {
  text-align: justify;
}
.article-body .ql-direction-rtl {
  direction: rtl;
  text-align: inherit;
}

/* ── Typography (toolbar font / size) ─────────────────────── */
.article-body .ql-font-serif {
  font-family: Georgia, "Times New Roman", Times, serif;
}
.article-body .ql-font-monospace {
  font-family: Consolas, Monaco, "Courier New", monospace;
}
.article-body .ql-size-small {
  font-size: 0.85em;
}
.article-body .ql-size-large {
  font-size: 1.35em;
}
.article-body .ql-size-huge {
  font-size: 2em;
  line-height: 1.2;
}

/* Quill palette classes (toolbar colors) */
.article-body .ql-bg-black { background-color: #000; }
.article-body .ql-bg-red { background-color: #e60000; }
.article-body .ql-bg-orange { background-color: #f90; }
.article-body .ql-bg-yellow { background-color: #ff0; }
.article-body .ql-bg-green { background-color: #008a00; }
.article-body .ql-bg-blue { background-color: #06c; }
.article-body .ql-bg-purple { background-color: #93f; }
.article-body .ql-color-white { color: #fff; }
.article-body .ql-color-red { color: #e60000; }
.article-body .ql-color-orange { color: #f90; }
.article-body .ql-color-yellow { color: #cc0; }
.article-body .ql-color-green { color: #008a00; }
.article-body .ql-color-blue { color: #06c; }
.article-body .ql-color-purple { color: #93f; }

/* ── Indent (blocks + list items) ────────────────────────── */
.article-body .ql-indent-1:not(.ql-direction-rtl) { padding-left: 3em; }
.article-body li.ql-indent-1:not(.ql-direction-rtl) { padding-left: 4.5em; }
.article-body .ql-indent-1.ql-direction-rtl.ql-align-right { padding-right: 3em; }
.article-body li.ql-indent-1.ql-direction-rtl.ql-align-right { padding-right: 4.5em; }
.article-body .ql-indent-2:not(.ql-direction-rtl) { padding-left: 6em; }
.article-body li.ql-indent-2:not(.ql-direction-rtl) { padding-left: 7.5em; }
.article-body .ql-indent-2.ql-direction-rtl.ql-align-right { padding-right: 6em; }
.article-body li.ql-indent-2.ql-direction-rtl.ql-align-right { padding-right: 7.5em; }
.article-body .ql-indent-3:not(.ql-direction-rtl) { padding-left: 9em; }
.article-body li.ql-indent-3:not(.ql-direction-rtl) { padding-left: 10.5em; }
.article-body .ql-indent-3.ql-direction-rtl.ql-align-right { padding-right: 9em; }
.article-body li.ql-indent-3.ql-direction-rtl.ql-align-right { padding-right: 10.5em; }
.article-body .ql-indent-4:not(.ql-direction-rtl) { padding-left: 12em; }
.article-body li.ql-indent-4:not(.ql-direction-rtl) { padding-left: 13.5em; }
.article-body .ql-indent-4.ql-direction-rtl.ql-align-right { padding-right: 12em; }
.article-body li.ql-indent-4.ql-direction-rtl.ql-align-right { padding-right: 13.5em; }
.article-body .ql-indent-5:not(.ql-direction-rtl) { padding-left: 15em; }
.article-body li.ql-indent-5:not(.ql-direction-rtl) { padding-left: 16.5em; }
.article-body .ql-indent-5.ql-direction-rtl.ql-align-right { padding-right: 15em; }
.article-body li.ql-indent-5.ql-direction-rtl.ql-align-right { padding-right: 16.5em; }
.article-body .ql-indent-6:not(.ql-direction-rtl) { padding-left: 18em; }
.article-body li.ql-indent-6:not(.ql-direction-rtl) { padding-left: 19.5em; }
.article-body .ql-indent-6.ql-direction-rtl.ql-align-right { padding-right: 18em; }
.article-body li.ql-indent-6.ql-direction-rtl.ql-align-right { padding-right: 19.5em; }
.article-body .ql-indent-7:not(.ql-direction-rtl) { padding-left: 21em; }
.article-body li.ql-indent-7:not(.ql-direction-rtl) { padding-left: 22.5em; }
.article-body .ql-indent-7.ql-direction-rtl.ql-align-right { padding-right: 21em; }
.article-body li.ql-indent-7.ql-direction-rtl.ql-align-right { padding-right: 22.5em; }
.article-body .ql-indent-8:not(.ql-direction-rtl) { padding-left: 24em; }
.article-body li.ql-indent-8:not(.ql-direction-rtl) { padding-left: 25.5em; }
.article-body .ql-indent-8.ql-direction-rtl.ql-align-right { padding-right: 24em; }
.article-body li.ql-indent-8.ql-direction-rtl.ql-align-right { padding-right: 25.5em; }
.article-body .ql-indent-9:not(.ql-direction-rtl) { padding-left: 27em; }
.article-body li.ql-indent-9:not(.ql-direction-rtl) { padding-left: 28.5em; }
.article-body .ql-indent-9.ql-direction-rtl.ql-align-right { padding-right: 27em; }
.article-body li.ql-indent-9.ql-direction-rtl.ql-align-right { padding-right: 28.5em; }

/* ── Quill 2 lists (<ol> + li[data-list]) ─────────────────── */
.article-body ol:has(> li[data-list]) {
  list-style: none;
  padding-left: 1.5em;
  margin: 0 0 18px;
  counter-reset: list-0 list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
}

.article-body ol:has(> li[data-list]) > li[data-list] {
  list-style-type: none;
  padding-left: 1.5em;
  position: relative;
  margin-bottom: 6px;
}

.article-body li[data-list] > .ql-ui {
  position: absolute;
  user-select: none;
}

.article-body li.ql-direction-rtl[data-list] > .ql-ui {
  right: 0;
  left: auto;
}

.article-body li[data-list] > .ql-ui::before {
  display: inline-block;
  margin-left: -1.5em;
  margin-right: 0.3em;
  text-align: right;
  white-space: nowrap;
  width: 1.2em;
}

.article-body li.ql-direction-rtl[data-list] > .ql-ui::before {
  margin-left: 0.3em;
  margin-right: -1.5em;
  text-align: left;
}

.article-body li[data-list="checked"] > .ql-ui,
.article-body li[data-list="unchecked"] > .ql-ui {
  color: #777;
}

.article-body li[data-list="bullet"] > .ql-ui::before {
  content: "\2022";
}

.article-body li[data-list="checked"] > .ql-ui::before {
  content: "\2611";
}

.article-body li[data-list="unchecked"] > .ql-ui::before {
  content: "\2610";
}

.article-body li[data-list="ordered"] {
  counter-increment: list-0;
}

.article-body li[data-list="ordered"] > .ql-ui::before {
  content: counter(list-0, decimal) ". ";
}

.article-body li[data-list].ql-indent-1 {
  counter-reset: list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
}

.article-body li[data-list="ordered"].ql-indent-1 {
  counter-increment: list-1;
}

.article-body li[data-list="ordered"].ql-indent-1 > .ql-ui::before {
  content: counter(list-1, lower-alpha) ". ";
}

.article-body li[data-list].ql-indent-2 {
  counter-reset: list-3 list-4 list-5 list-6 list-7 list-8 list-9;
}

.article-body li[data-list="ordered"].ql-indent-2 {
  counter-increment: list-2;
}

.article-body li[data-list="ordered"].ql-indent-2 > .ql-ui::before {
  content: counter(list-2, lower-roman) ". ";
}

.article-body li[data-list].ql-indent-3 {
  counter-reset: list-4 list-5 list-6 list-7 list-8 list-9;
}

.article-body li[data-list="ordered"].ql-indent-3 {
  counter-increment: list-3;
}

.article-body li[data-list="ordered"].ql-indent-3 > .ql-ui::before {
  content: counter(list-3, decimal) ". ";
}

.article-body li[data-list].ql-indent-4 {
  counter-reset: list-5 list-6 list-7 list-8 list-9;
}

.article-body li[data-list="ordered"].ql-indent-4 {
  counter-increment: list-4;
}

.article-body li[data-list="ordered"].ql-indent-4 > .ql-ui::before {
  content: counter(list-4, lower-alpha) ". ";
}

.article-body li[data-list].ql-indent-5 {
  counter-reset: list-6 list-7 list-8 list-9;
}

.article-body li[data-list="ordered"].ql-indent-5 {
  counter-increment: list-5;
}

.article-body li[data-list="ordered"].ql-indent-5 > .ql-ui::before {
  content: counter(list-5, lower-roman) ". ";
}

.article-body li[data-list].ql-indent-6 {
  counter-reset: list-7 list-8 list-9;
}

.article-body li[data-list="ordered"].ql-indent-6 {
  counter-increment: list-6;
}

.article-body li[data-list="ordered"].ql-indent-6 > .ql-ui::before {
  content: counter(list-6, decimal) ". ";
}

.article-body li[data-list].ql-indent-7 {
  counter-reset: list-8 list-9;
}

.article-body li[data-list="ordered"].ql-indent-7 {
  counter-increment: list-7;
}

.article-body li[data-list="ordered"].ql-indent-7 > .ql-ui::before {
  content: counter(list-7, lower-alpha) ". ";
}

.article-body li[data-list].ql-indent-8 {
  counter-reset: list-9;
}

.article-body li[data-list="ordered"].ql-indent-8 {
  counter-increment: list-8;
}

.article-body li[data-list="ordered"].ql-indent-8 > .ql-ui::before {
  content: counter(list-8, lower-roman) ". ";
}

.article-body li[data-list="ordered"].ql-indent-9 {
  counter-increment: list-9;
}

.article-body li[data-list="ordered"].ql-indent-9 > .ql-ui::before {
  content: counter(list-9, decimal) ". ";
}

/* Fallback when .ql-ui was stripped: markers on the <li> */
.article-body ol:has(> li[data-list]) > li[data-list]:not(:has(> .ql-ui))::before {
  position: absolute;
  left: 0;
  width: 1.2em;
  text-align: right;
  white-space: nowrap;
}

.article-body ol:has(> li[data-list]) > li[data-list="bullet"]:not(:has(> .ql-ui))::before {
  content: "\2022";
}

.article-body ol:has(> li[data-list]) > li[data-list="checked"]:not(:has(> .ql-ui))::before {
  content: "\2611";
  color: #777;
}

.article-body ol:has(> li[data-list]) > li[data-list="unchecked"]:not(:has(> .ql-ui))::before {
  content: "\2610";
  color: #777;
}

.article-body ol:has(> li[data-list]) > li[data-list="ordered"]:not(:has(> .ql-ui)) {
  counter-increment: list-0;
}

.article-body ol:has(> li[data-list]) > li[data-list="ordered"]:not(:has(> .ql-ui))::before {
  content: counter(list-0, decimal) ". ";
}

/* ── Quill 1.3 lists (no data-list) ───────────────────────── */
.article-body ol:not(:has(> li[data-list])) > li {
  list-style-type: decimal;
}

.article-body ul:not(:has(> li[data-list])) > li {
  list-style-type: disc;
}

.article-body ol:not(:has(> li[data-list])),
.article-body ul:not(:has(> li[data-list])) {
  list-style-position: outside;
}

.article-body ol:not(:has(> li[data-list])) > li,
.article-body ul:not(:has(> li[data-list])) > li {
  display: list-item;
  padding-left: 0.25em;
}

/* Quill 1.3 checklist: ul[data-checked] */
.article-body ul[data-checked="true"] > li::before,
.article-body ul[data-checked="false"] > li::before {
  content: "\2611";
  color: #777;
  display: inline-block;
  width: 1.2em;
  margin-left: -1.5em;
  margin-right: 0.3em;
  text-align: right;
}

.article-body ul[data-checked="false"] > li::before {
  content: "\2610";
}

.article-body ul[data-checked="true"],
.article-body ul[data-checked="false"] {
  list-style: none;
  padding-left: 1.75em;
}

.article-body ul[data-checked="true"] > li,
.article-body ul[data-checked="false"] > li {
  list-style: none;
  position: relative;
  padding-left: 1.5em;
}

/* ── Code & syntax ─────────────────────────────────────────── */
.article-body pre,
.article-body .ql-code-block-container {
  font-family: Consolas, Monaco, "Courier New", monospace;
  font-size: 0.88rem;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
  margin: 16px 0;
  padding: 14px 18px;
  border-radius: 8px;
  background: #f4f5f7;
  border: 1px solid #dde3ef;
  color: #2d3340;
}

.article-body pre.ql-syntax,
.article-body .ql-code-block-container {
  background: #23241f;
  color: #f8f8f2;
  border-color: #1a1d18;
}

.article-body code {
  font-family: Consolas, Monaco, "Courier New", monospace;
  font-size: 0.88em;
  padding: 0.15em 0.4em;
  border-radius: 4px;
  background: #f0f2f5;
  color: #1a3a8f;
}

.article-body pre code,
.article-body .ql-code-block-container code {
  padding: 0;
  background: transparent;
  color: inherit;
  font-size: inherit;
}

/* ── Blockquote (match site; Quill default is lighter) ─────── */
.article-body blockquote {
  border-left: 4px solid #3ab8b8;
  margin: 20px 0;
  padding: 12px 20px;
  background: #eaf8f8;
  color: #4a5a7a;
  font-style: italic;
}

.article-body blockquote p:last-child {
  margin-bottom: 0;
}

/* ── Headings inside body ─────────────────────────────────── */
.article-body h1 {
  font-size: 2em;
  margin-top: 28px;
}
.article-body h2 {
  font-size: 1.5em;
}
.article-body h3 {
  font-size: 1.17em;
}
.article-body h4 {
  font-size: 1.05em;
}
.article-body h5 {
  font-size: 0.95em;
}
.article-body h6 {
  font-size: 0.9em;
  color: #5a6a8a;
}

/* ── Media & embeds ───────────────────────────────────────── */
.article-body .ql-video {
  display: block;
  max-width: 100%;
  margin: 20px 0;
  border-radius: 8px;
  overflow: hidden;
  background: #0d0d0d;
}

.article-body .ql-video.ql-align-center {
  margin-left: auto;
  margin-right: auto;
}

.article-body .ql-video.ql-align-right {
  margin-left: auto;
  margin-right: 0;
}

.article-body .ql-video iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  min-height: 200px;
  border: 0;
}

.article-body iframe[src*="youtube"],
.article-body iframe[src*="vimeo"] {
  display: block;
  max-width: 100%;
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  min-height: 200px;
  margin: 16px 0;
  border: 0;
  border-radius: 8px;
}

/* ── Tables (Quill 2) ───────────────────────────────────────── */
.article-body table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  margin: 20px 0;
  font-size: 0.92rem;
}

.article-body th,
.article-body td {
  border: 1px solid #dde3ef;
  padding: 8px 10px;
  vertical-align: top;
  word-wrap: break-word;
}

.article-body th {
  background: #eaf5fb;
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  color: #1a3a8f;
}

/* ── Links ─────────────────────────────────────────────────── */
.article-body a {
  color: #06c;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.article-body a:hover {
  color: #3ab8b8;
}

/* ── Horizontal rule ───────────────────────────────────────── */
.article-body hr {
  border: 0;
  border-top: 1px solid #dde3ef;
  margin: 28px 0;
}