/**
 * @file
 * Authored body copy (node body, hub description, static pages).
 */

.prose {
  max-inline-size: var(--wrapper-prose);
  color: var(--text-primary);
  line-height: var(--leading-loose);
}

.prose > * + * {
  margin-block-start: var(--space-s);
}

/**
 * THE SAME SPACING, THROUGH DRUPAL'S FIELD WRAPPERS.
 *
 * The rule above is a child combinator, and a body field does not render its
 * paragraphs as children of `.prose`. It renders:
 *
 *   <div class="prose">
 *     <div class="field field--name-body … field__item">
 *       <p>…</p>
 *       <p>…</p>
 *
 * So the paragraphs are GRANDchildren, `* + *` never reached them, and with the
 * reset having removed the browser's own paragraph margins they ran together
 * with no gap at all — which is what "Bookings essential" sitting flush under
 * the previous paragraph was.
 *
 * `display: contents` on the wrapper does not help: it changes the box tree,
 * not the DOM tree, and `>` matches on the DOM. So the wrappers are named
 * instead. `.field__item` and `.field` cover the body field, the hub
 * description and every other formatted-text field on the site; a text format
 * that also wraps in `<div class="text-formatted">` is covered too.
 */
.prose .field > * + *,
.prose .field__item > * + *,
.prose .text-formatted > * + * {
  margin-block-start: var(--space-s);
}

/**
 * NOTHING AT THE TOP OF THE BODY GETS A GAP ABOVE IT.
 *
 * `* + *` above is a sibling selector, so in principle the first child never
 * picks up a margin. In practice Drupal does not always put the field wrapper
 * first: a contextual-links placeholder, a quickedit metadata node or any
 * other zero-height element rendered ahead of it makes the wrapper the SECOND
 * child, `* + *` fires, and the whole body drops by --space-s with nothing
 * visible above it to explain why.
 *
 * That is invisible in a hand-built test page, because a test page has no
 * contextual links. It showed up as the event body starting about 8-16px
 * lower on the live site than in the fixture, which is the kind of difference
 * that gets chased in the wrong file for an hour.
 *
 * The body wrapper opens the content, so it never wants a margin above it,
 * whatever Drupal put in front of it. Paragraph spacing INSIDE the wrapper is
 * untouched — this is only the wrapper itself and the genuine first child.
 */
.prose > :first-child,
.prose > .field,
.prose > .field__item,
.prose > .text-formatted {
  margin-block-start: 0;
}

/**
 * Line breaks inside a paragraph.
 *
 * `<br>` cannot take a margin — it is not a box — so an editor who presses
 * Enter once in CKEditor and gets a `<br>` used to see a line with no space
 * around it while the paragraph beside it had 16px. This gives that break the
 * same rhythm without changing what the markup means.
 *
 * Scoped to authored copy only. A `<br>` in an address block or a table cell is
 * deliberate and should stay tight.
 */
.prose br {
  content: "";
  display: block;
  margin-block-end: var(--space-s);
}

.prose > h2 {
  margin-block-start: var(--space-xl);
  font-size: var(--step-2);
}

.prose > h3 {
  margin-block-start: var(--space-l);
  font-size: var(--step-1);
}

.prose > h4 {
  margin-block-start: var(--space-m);
  font-size: var(--step-0);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-secondary);
}

.prose a {
  color: var(--text-accent);
  text-decoration: underline;
}

.prose a:hover {
  color: var(--me-magenta);
}

.prose ul,
.prose ol {
  padding-inline-start: var(--space-m);
}

.prose li + li {
  margin-block-start: var(--space-3xs);
}

.prose li::marker {
  color: var(--me-magenta-300);
}

.prose img {
  border-radius: var(--radius-s);
}

.prose table {
  display: block;
  overflow-x: auto;
}

/* Full-width prose for static pages such as Submission Guidelines. */
.prose--wide {
  max-inline-size: 56rem;
}