/*
 * Canonical article canvas.
 * The editor, admin preview and public article page all use this file so a
 * saved bodyHtml document is rendered by one visual contract.
 */
.qc-article-content {
  width: 100%;
  max-width: 100%;
  color: #536179;
  font-size: 15px;
  line-height: 1.82;
  overflow-wrap: anywhere;
  word-break: break-word;
  box-sizing: border-box;
}

/* article.html historically used a grid for legacy generated sections. Rich
 * bodyHtml must use the same normal document flow as the editor and preview. */
.article-sections.qc-article-content {
  display: block;
  gap: 0;
}

.qc-article-content *,
.qc-article-content *::before,
.qc-article-content *::after {
  max-width: 100%;
  box-sizing: border-box;
}

.qc-article-content.qc-article-content :where(p) {
  margin: 0 0 14px;
  color: inherit;
  font-size: inherit;
  line-height: inherit;
  overflow-wrap: inherit;
  word-break: inherit;
}

.qc-article-content.qc-article-content :where(h1, h2, h3, h4, h5, h6) {
  margin: 18px 0 10px;
  color: #092b5a;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.qc-article-content.qc-article-content :where(h1) { font-size: 26px; }
.qc-article-content.qc-article-content :where(h2) { font-size: 23px; }
.qc-article-content.qc-article-content :where(h3) { font-size: 20px; }
.qc-article-content.qc-article-content :where(h4) { font-size: 18px; }
.qc-article-content.qc-article-content :where(h5) { font-size: 16px; }
.qc-article-content.qc-article-content :where(h6) { font-size: 15px; }

.qc-article-content.qc-article-content :where(ul, ol) {
  margin: 12px 0 16px;
  padding-left: 1.5em;
}

.qc-article-content.qc-article-content :where(li) {
  margin: 6px 0;
  color: inherit;
  font-size: inherit;
  line-height: 1.75;
}

.qc-article-content.qc-article-content :where(img) {
  display: block;
  max-width: 100% !important;
  height: auto !important;
  margin: 12px auto;
  border-radius: 14px;
}

.qc-article-content.qc-article-content img.qc-inline-image {
  display: inline-block;
  width: auto;
  max-width: 100% !important;
  margin: 0 .2em;
  vertical-align: middle;
}

.qc-article-content.qc-article-content :where(figure) {
  max-width: 100%;
  margin: 14px auto;
}

.qc-article-content.qc-article-content :where(figcaption) {
  margin-top: 7px;
  color: #718198;
  font-size: 12px;
  line-height: 1.55;
  text-align: center;
}

.qc-article-content.qc-article-content :where(blockquote) {
  display: block;
  width: 100%;
  margin: 14px 0;
  padding: 12px 14px;
  border-left: 4px solid #1267ff;
  border-radius: 10px;
  background: #f3f8ff;
  color: #42526a;
}

.qc-article-content.qc-article-content :where(blockquote p:last-child) {
  margin-bottom: 0;
}

.qc-article-content.qc-article-content :where(table) {
  width: 100%;
  max-width: 100% !important;
  margin: 12px 0;
  border-collapse: collapse;
  table-layout: auto;
}

.qc-article-content.qc-article-content :where(th, td) {
  padding: 8px 10px;
  border: 1px solid #dce6f2;
  vertical-align: top;
}

.qc-article-content.qc-article-content :where(video, iframe) {
  display: block;
  max-width: 100%;
  margin: 14px auto;
  border-radius: 14px;
}

.qc-article-content.qc-article-content :where(hr) {
  margin: 22px 0;
  border: 0;
  border-top: 1px solid #dce6f2;
}

.qc-article-content.qc-article-content :where(pre) {
  max-width: 100%;
  overflow: auto;
  padding: 14px;
  border-radius: 10px;
  background: #f5f8fc;
}

.qc-article-content.qc-article-content :where(.rich-paste-content) {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

.qc-article-content.qc-article-content :where(.md-blank-line) {
  min-height: 1em;
}

html[data-theme="dark"] .qc-article-content {
  color: #b9c8d9;
}

html[data-theme="dark"] .qc-article-content.qc-article-content :where(h1, h2, h3, h4, h5, h6) {
  color: #edf6ff;
}

html[data-theme="dark"] .qc-article-content.qc-article-content :where(blockquote) {
  border-left-color: #62a3ff;
  background: #17273d;
  color: #c4d3e4;
}

html[data-theme="dark"] .qc-article-content.qc-article-content :where(th, td),
html[data-theme="dark"] .qc-article-content.qc-article-content :where(hr) {
  border-color: rgba(116, 155, 200, .3);
}

@media (max-width: 520px) {
  .qc-article-content {
    font-size: 15px;
    line-height: 1.78;
  }

  .qc-article-content.qc-article-content :where(h1) { font-size: 24px; }
  .qc-article-content.qc-article-content :where(h2) { font-size: 21px; }
  .qc-article-content.qc-article-content :where(h3) { font-size: 19px; }
}