/*
 * Article body styling.
 *
 * The theme has no styles for long-form prose — it was built for marketing
 * sections — so this covers what a writer can now insert: images, pull quotes,
 * embedded video, code and tables. It only adds rules under .rich-content and
 * borrows the theme's own custom properties, so nothing outside an article body
 * is affected.
 */

.rich-content {
  color: var(--para-color, #9193a8);
  font-size: 16px;
  line-height: 2.1;
}

.rich-content > *:first-child {
  margin-top: 0;
}

.rich-content p {
  margin-bottom: 1.4rem;
}

.rich-content h2,
.rich-content h3,
.rich-content h4,
.rich-content h5,
.rich-content h6 {
  color: var(--title-color, #fff);
  margin: 2.2rem 0 1rem;
  line-height: 1.5;
}

.rich-content h2 { font-size: 28px; }
.rich-content h3 { font-size: 23px; }
.rich-content h4 { font-size: 19px; }

.rich-content a {
  color: var(--primary-color, #ff8a00);
  text-decoration: underline;
}

.rich-content ul,
.rich-content ol {
  margin: 0 0 1.4rem;
  padding-inline-start: 1.6rem;
}

.rich-content li {
  margin-bottom: 0.5rem;
}

/* Images and video sit in the text column and never overflow it. */
.rich-content img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 1.8rem auto;
  border-radius: 12px;
}

/*
 * Quill emits a bare <iframe class="ql-video">. Wrapping is not available, so
 * the aspect ratio is held on the element itself.
 */
.rich-content iframe,
.rich-content .ql-video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  min-height: 220px;
  margin: 1.8rem 0;
  border: 0;
  border-radius: 12px;
}

/* A pull quote, marked on the side the language reads from. */
.rich-content blockquote {
  margin: 1.8rem 0;
  padding: 1rem 1.4rem;
  border-inline-start: 3px solid var(--primary-color, #ff8a00);
  background: rgba(255, 255, 255, 0.03);
  border-radius: 8px;
  color: var(--title-color, #fff);
  font-size: 17px;
}

.rich-content blockquote p:last-child {
  margin-bottom: 0;
}

.rich-content pre,
.rich-content .ql-syntax {
  margin: 1.8rem 0;
  padding: 1rem 1.2rem;
  background: rgba(0, 0, 0, 0.35);
  border-radius: 10px;
  overflow-x: auto;
  direction: ltr;
  text-align: left;
  font-size: 14px;
  line-height: 1.7;
}

.rich-content code {
  padding: 0.15em 0.4em;
  background: rgba(255, 255, 255, 0.07);
  border-radius: 5px;
  direction: ltr;
  display: inline-block;
  font-size: 0.92em;
}

/* Tables scroll rather than stretching the page on a narrow screen. */
.rich-content table {
  width: 100%;
  margin: 1.8rem 0;
  border-collapse: collapse;
  display: block;
  overflow-x: auto;
}

.rich-content th,
.rich-content td {
  padding: 0.65rem 0.9rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.rich-content th {
  color: var(--title-color, #fff);
  text-align: start;
}

.rich-content hr {
  margin: 2.2rem 0;
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* The editor's alignment classes, kept meaningful on the public page. */
.rich-content .ql-align-center { text-align: center; }
.rich-content .ql-align-right { text-align: right; }
.rich-content .ql-align-justify { text-align: justify; }
.rich-content .ql-indent-1 { padding-inline-start: 2rem; }
.rich-content .ql-indent-2 { padding-inline-start: 4rem; }
.rich-content .ql-indent-3 { padding-inline-start: 6rem; }

/* A centred image should still be centred, not floated by the margin rule. */
.rich-content .ql-align-center img { margin-inline: auto; }