/* Rich text (T15). Running text in one readable column: guides, legal pages, "What happens next".
   Tokens only; colours come from the surface (white). Mobile first.
   Prototype (guide article): section heading 30 px / 400, body 17 px / 1.65 in slate, 48 px between sections.
   Consecutive Rich text blocks read as one article: the second and later drop their top space
   (.section--follows after a white section, base/layout.css), and a block followed by another
   Rich text block ends with a 48 px gap instead of the full section space. */

.rich-text__inner {
  max-width: 760px;
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body);
  color: var(--color-text);
}

.rich-text:has(+ .rich-text) {
  padding-bottom: var(--space-12);
}

.rich-text__heading {
  margin: 0 0 var(--space-4);
  font-size: var(--fs-h2);
  font-weight: var(--fw-regular);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  color: var(--color-heading);
  scroll-margin-top: var(--space-24);   /* clears the sticky header when "On this page" jumps here */
}

.rich-text__inner h3 {
  margin: var(--space-8) 0 var(--space-3);
  font-size: var(--fs-h3);
  font-weight: var(--fw-regular);
  line-height: var(--lh-heading);
}
.rich-text__inner h3:first-child { margin-top: 0; }

.rich-text__inner p,
.rich-text__inner ul,
.rich-text__inner ol { margin: 0 0 var(--space-4); }

.rich-text__inner ul,
.rich-text__inner ol { padding-left: 1.3em; }
.rich-text__inner li { margin-bottom: var(--space-2); padding-left: var(--space-1); }
.rich-text__inner li > p { margin: 0; }   /* the editor wraps each list item in a paragraph */
.rich-text__inner li > ul,
.rich-text__inner li > ol { margin: var(--space-2) 0 0; }
.rich-text__inner li::marker { color: var(--color-heading); }

.rich-text__inner > :last-child { margin-bottom: 0; }

/* Links inside running text are underlined (base/elements.css: .prose a) so they don't rely on colour. */
.rich-text__inner a { overflow-wrap: anywhere; }

.rich-text__image { margin: var(--space-8) 0; }
.rich-text__image:last-child { margin-bottom: 0; }
.rich-text__img {
  width: 100%;
  border-radius: var(--radius-media);
}