/* ============================================================
   Boundee — Blog article BODY styles (single source)
   Loaded by BOTH the public article page (blogs/show) and the admin
   markdown editor's live preview, so the two cannot drift apart.
   Every rule is scoped under .resource-article-wrap / .resource-article-body
   so loading this file in the admin leaves the rest of that UI untouched.
   --sans comes from frontend-fonts.css (the font single source, loaded on
   the public page and in the editor). --accent comes from v4.css on the
   public page; the admin does not load v4.css, so it carries a fallback.
   ============================================================ */

.resource-article-wrap {
  --article-width: 760px;
  max-width: var(--article-width);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.resource-article-body {
  font-size: 17px;
  color: #1d293d;
  line-height: 1.8;
  word-wrap: break-word;
  font-family: var(--sans, sans-serif);
  /* Inherited properties the public page gets from v4.css's body rule and
     the admin gets different values for (Tailwind preflight / admin body).
     Pinned to the public values so the body renders identically in both. */
  font-weight: 400;
  font-style: normal;
  letter-spacing: normal;
  word-spacing: normal;
  text-transform: none;
  text-align: start;
  hyphens: manual;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
.resource-article-wrap .resource-article-body h1 { font-size: 28px; font-weight: 700; margin: 32px 0 12px; }
.resource-article-wrap .resource-article-body h2 { font-size: 22px; font-weight: 700; margin: 28px 0 10px; }
.resource-article-wrap .resource-article-body h3 { font-size: 18px; font-weight: 600; margin: 24px 0 8px; }
.resource-article-wrap .resource-article-body p  { margin-bottom: 16px; }
.resource-article-wrap .resource-article-body ul,
.resource-article-wrap .resource-article-body ol { padding-left: 22px; margin-bottom: 16px; }
.resource-article-wrap .resource-article-body li { margin-bottom: 6px; }
.resource-article-wrap .resource-article-body a  { color: var(--accent, #5a2bdf); text-decoration: underline; }
.resource-article-wrap .resource-article-body img { border-radius: 10px; margin: 20px 0; max-width: 100%; }
.resource-article-wrap .resource-article-body blockquote {
  border-left: 4px solid var(--accent, #5a2bdf);
  padding-left: 20px;
  color: #475569;
  font-style: italic;
  margin: 24px 0;
}
.resource-article-wrap .resource-article-body code {
  background: #f1f5f9;
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 0.9em;
}
.resource-article-wrap .resource-article-body pre {
  background: #1e293b;
  color: #e2e8f0;
  border-radius: 10px;
  padding: 20px;
  overflow-x: auto;
  margin: 20px 0;
}
.resource-article-wrap .resource-article-body pre code { background: none; padding: 0; color: inherit; }
/* ------------------------------------------------------------
   Self-containment: element defaults the public page gets from
   v4.css's GLOBAL rules (h1-h4, p, img) and the browser's default
   stylesheet (lists, hr, table, code), none of which exist in the
   admin (Tailwind preflight zeroes them). Values = what the public
   page effectively renders today, so public output is unchanged.
   Prefixed with .resource-article-wrap for specificity over the
   editor's own preview CSS (EasyMDE .editor-preview ...).
   ------------------------------------------------------------ */
.resource-article-wrap .resource-article-body p { text-wrap: pretty; }
.resource-article-wrap .resource-article-body h1,
.resource-article-wrap .resource-article-body h2,
.resource-article-wrap .resource-article-body h3,
.resource-article-wrap .resource-article-body h4 {
  letter-spacing: -0.02em;
  line-height: 1.08;
  color: var(--ink, #16131f);
}
.resource-article-wrap .resource-article-body h4 { font-size: 1em; font-weight: 700; margin: 0; }
/* h5/h6: v4 only resets h1-h4, so the public page shows browser defaults. */
.resource-article-wrap .resource-article-body h5 { font-size: 0.83em; font-weight: 700; margin: 1.67em 0; }
.resource-article-wrap .resource-article-body h6 { font-size: 0.67em; font-weight: 700; margin: 2.33em 0; }
.resource-article-wrap .resource-article-body img,
.resource-article-wrap .resource-article-body svg { display: block; }
.resource-article-wrap .resource-article-body ul { list-style: disc; margin-top: 1em; }
.resource-article-wrap .resource-article-body ol { list-style: decimal; margin-top: 1em; }
.resource-article-wrap .resource-article-body ul ul,
.resource-article-wrap .resource-article-body ol ul { list-style: circle; margin-top: 0; }
.resource-article-wrap .resource-article-body ul ul ul,
.resource-article-wrap .resource-article-body ol ul ul,
.resource-article-wrap .resource-article-body ul ol ul { list-style: square; }
.resource-article-wrap .resource-article-body ol ol,
.resource-article-wrap .resource-article-body ul ol { list-style: decimal; margin-top: 0; }
.resource-article-wrap .resource-article-body hr {
  display: block;
  height: auto;
  margin: 0.5em auto;
  border: 1px inset gray;
  color: gray;
  overflow: hidden;
}
.resource-article-wrap .resource-article-body code,
.resource-article-wrap .resource-article-body pre { font-family: monospace; }
.resource-article-wrap .resource-article-body pre { white-space: pre; }
.resource-article-wrap .resource-article-body table { border-collapse: separate; border-spacing: 2px; }
.resource-article-wrap .resource-article-body td,
.resource-article-wrap .resource-article-body th { padding: 1px; border: 0; }
.resource-article-wrap .resource-article-body th { font-weight: 700; text-align: center; }

@media (max-width: 768px) {
  .resource-article-body { font-size: 16px; }
}

/* Editor live preview only: the column is FIXED at the public article width
   (the pane scrolls horizontally when narrower) so line breaks match the
   public page. Same --article-width token as the public max-width above, and
   pinned at the desktop 17px regardless of the editor viewport width. */
.resource-article-wrap.resource-article-wrap--fixed {
  width: var(--article-width);
  min-width: var(--article-width);
  max-width: none;
  flex-shrink: 0;
}
.resource-article-wrap--fixed .resource-article-body { font-size: 17px; }