/*
  Article styles, shared by the public article page and the admin editor
  preview (which loads this file from the public site). Served as-is from
  /article.css, so keep it plain CSS.
*/

.article-body {
  font-family: "Source Serif 4", Georgia, serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--text, #202020);
  max-width: 680px;
  margin: 0 auto;
  padding: 0 20px;
  overflow-wrap: break-word;
}
.article-body p {
  margin: 0 0 18px;
}
/* old articles used empty paragraphs as spacers */
.article-body p:empty {
  display: none;
}
.article-body h2,
.article-body h3 {
  line-height: 1.25;
}
.article-body h2 {
  font-size: 22px;
  margin: 36px 0 8px;
}
.article-body h3 {
  font-size: 22px;
  margin: 32px 0 16px;
}
/* body is 500, so bold needs an explicit 700 (loaded with the font) */
.article-body strong,
.article-body b {
  font-weight: 700;
}
.article-body a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.article-body ul,
.article-body ol {
  padding-left: 1.4em;
  margin: 0 0 18px;
}
.article-body li > p {
  margin: 0 0 6px;
}
.article-body blockquote {
  margin: 24px 0;
  padding-left: 18px;
  border-left: 3px solid #d9d4cc;
}
.article-body hr {
  border: none;
  border-top: 1px solid #d9d4cc;
  margin: 32px 0;
}

/* Images */
.article-body figure {
  margin: 28px 0;
}
.article-body figure[data-size="full"] {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
.article-body img {
  max-width: 100%;
  height: auto;
  display: block;
}
.article-body figure[data-size="full"] img {
  width: 100%;
}
.article-body figcaption,
.article-body .sources {
  font-family: "Inter", system-ui, sans-serif;
  font-size: 14px;
  color: var(--muted, #5f5f5f);
  margin-top: 8px;
}
.article-body figure[data-size="full"] figcaption {
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 20px;
}
.article-body figcaption .credit::before {
  content: " · ";
}

/* Video and YouTube */
.article-body video {
  display: block;
  width: 100%;
  max-height: 80vh;
  margin: 24px 0;
  border-radius: 8px;
  background: #000;
}
.article-body [data-youtube-video] {
  margin: 24px 0;
}
.article-body iframe {
  display: block;
  max-width: 100%;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border: 0;
}

/* Pull quote and fact box */
.article-body .pull-quote {
  border-left: 4px solid #b3352a;
  margin: 32px 0;
  padding: 4px 0 4px 20px;
  font-size: 1.3em;
  font-weight: 600;
  line-height: 1.35;
}
.article-body .pull-quote p:last-child,
.article-body .fact-box > :last-child {
  margin-bottom: 0;
}
.article-body .fact-box {
  background: #f6f2ec;
  border: 1px solid #e3dcd1;
  border-radius: 6px;
  padding: 16px 20px;
  margin: 28px 0;
  font-size: 0.94em;
}

/* Checklist */
.article-body ul[data-type="taskList"] {
  list-style: none;
  padding-left: 0;
}
.article-body ul[data-type="taskList"] li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.article-body ul[data-type="taskList"] li > label {
  margin-top: 4px;
}
.article-body ul[data-type="taskList"] li > div {
  flex: 1;
}
.article-body ul[data-type="taskList"] input {
  pointer-events: none;
}

/* Tables (wrapped in .table-wrap at render time) */
.article-body .table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 28px 0;
}
.article-body table {
  border-collapse: collapse;
  width: 100%;
  min-width: 480px;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.4;
}
.article-body th,
.article-body td {
  border: 1px solid #ddd6cc;
  padding: 8px 10px;
  text-align: left;
  vertical-align: top;
}
.article-body th {
  background: #f3efe8;
  font-weight: 600;
}
.article-body td p,
.article-body th p {
  margin: 0;
}
.article-body td[data-color="green"],
.article-body th[data-color="green"] {
  background: #dcebd5;
  color: #22451a;
}
.article-body td[data-color="yellow"],
.article-body th[data-color="yellow"] {
  background: #f5e2a8;
  color: #5a4206;
}
.article-body td[data-color="red"],
.article-body th[data-color="red"] {
  background: #f4d3cf;
  color: #6e1d17;
}

.article-body pre {
  overflow-x: auto;
  background: #f3efe8;
  padding: 12px 14px;
  border-radius: 6px;
  font-size: 14px;
}

@media (min-width: 768px) {
  .article-body {
    font-size: 20px;
  }
  .article-body h2 {
    font-size: 26px;
  }
}

/* Header parts shown above the article */
.blog-detail-standfirst {
  font-family: "Source Serif 4", Georgia, serif;
  font-style: normal;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.4;
  color: #202020;
}
.blog-detail-byline {
  font-family: "Inter", sans-serif;
  font-size: 14px;
  color: #5a5a5a;
  font-weight: 500;
}