/**
 * @file
 * Text section styles.
 *
 * Section padding, max width and font match the hero and accordion so sections
 * line up down the page. The text itself is held at a narrower measure: 1440px
 * of body copy is well past a comfortable line length, and the same 763px
 * measure is used by the accordion panels, so the two align visually.
 *
 * Element styles are scoped to .ln-text__body because the content comes from a
 * WYSIWYG and can be any mix of paragraphs, headings, lists and links.
 */

.ln-text {
  /**
   * 0, deliberately. This block has no box of its own, so the whitespace around
   * it in the design *is* the gap between sections — which css/layout.css now
   * supplies. An 80px padding here was measured from the standalone component
   * frame, where the surrounding page whitespace looked like part of the
   * component; on a real page it double-counted, and the gap came out at almost
   * twice what the full-page design shows.
   *
   * Kept as a token rather than deleted so a one-off placement can still carry
   * its own padding. Blocks that *do* have a box — the carousel's grey band,
   * the accordion card, the tabs panel, the form's rounded card — keep theirs,
   * because the designer draws 80-95px inside those.
   */
  --ln-text-padding-block: 0;
  --ln-text-padding-inline: clamp(1.25rem, 12.5vw, 240px);
  --ln-text-max-width: 1440px;
  --ln-text-measure: 763px;

  --ln-text-fg: #1c1c1c;
  --ln-text-heading-fg: #1c1c1c;
  --ln-text-link: #cf0000;
  --ln-text-link-hover: #961f00;
  --ln-text-bg: #ffffff;

  --ln-text-font: Outfit, sans-serif;
  --ln-text-size: 18px;
  --ln-text-flow: 1rem;

  /* Section-heading scale, shared with .ln-accordion__heading (stacked) and
     .ln-comparison__heading. Keep these three in step. */
  --ln-text-h2-size: clamp(2rem, 3.5vw, 48px);
  --ln-text-h3-size: clamp(1.5rem, 2.5vw, 32px);
  --ln-text-h4-size: 24px;

  box-sizing: border-box;
  padding-block: var(--ln-text-padding-block);
  padding-inline: var(--ln-text-padding-inline);
  background-color: var(--ln-text-bg);
  color: var(--ln-text-fg);
  font-family: var(--ln-text-font);
}

.ln-text *,
.ln-text *::before,
.ln-text *::after {
  box-sizing: inherit;
}

.ln-text__inner {
  max-width: var(--ln-text-max-width);
  margin-inline: auto;
}

.ln-text__body {
  max-width: var(--ln-text-measure);
  margin-inline: auto;
  font-size: var(--ln-text-size);
  font-weight: 300;
  line-height: 1.5;
}

/**
 * Vertical flow. Spacing goes between siblings rather than on every element, so
 * the block never carries stray margin at its top or bottom edge. This relies on
 * field--block-content--body--text.html.twig stripping the field wrapper — with a
 * wrapper div in between there would be only one child and no siblings to space.
 */
.ln-text__body > * + * {
  margin-top: var(--ln-text-flow);
}

.ln-text__body > :first-child {
  margin-top: 0;
}

.ln-text__body > :last-child {
  margin-bottom: 0;
}

/* Headings get more space above than below, so they group with their own text. */
.ln-text__body > :is(h2, h3, h4) {
  margin-bottom: 0;
  color: var(--ln-text-heading-fg);
  font-weight: 500;
  line-height: 1.3;
  text-wrap: balance;
}

/* Headings need more air above them than the default flow spacing. */
.ln-text__body > * + :is(h2, h3, h4) {
  margin-top: 2rem;
}

.ln-text__body > :is(h2, h3, h4) + * {
  margin-top: 0.5rem;
}

/**
 * h2 is the section-heading treatment, identical to the accordion and comparison
 * table headings: same clamp, weight 500, line-height 1.3 and balanced wrapping.
 * h3 and h4 step down from it so the ramp stays even — a 48px h2 next to a 24px
 * h3 reads as two unrelated scales.
 *
 * Alignment is deliberately left, unlike those two: their headings are centred
 * over centred content, whereas this sits above left-aligned body copy.
 */
.ln-text__body > h2 {
  font-size: var(--ln-text-h2-size);
}

.ln-text__body > h3 {
  font-size: var(--ln-text-h3-size);
}

.ln-text__body > h4 {
  font-size: var(--ln-text-h4-size);
}

.ln-text__body :is(ul, ol) {
  padding-left: 1.25rem;
}

.ln-text__body li + li {
  margin-top: 0.25rem;
}

.ln-text__body a {
  color: var(--ln-text-link);
  text-decoration: underline;
}

.ln-text__body a:hover,
.ln-text__body a:focus {
  color: var(--ln-text-link-hover);
}

.ln-text__body strong,
.ln-text__body b {
  font-weight: 600;
}

@media (max-width: 48rem) {
  .ln-text {
    --ln-text-padding-block: 0;
    --ln-text-size: 16px;

    /* 16px, the page gutter. The clamp this replaces resolves to 12.5vw at
       phone widths — 50px at 401px — which is a desktop indent applied to a
       screen that has no room for it. */
    --ln-text-padding-inline: 16px;
  }

  /**
   * Headings and paragraphs centre.
   *
   * This only works because of the container-inherit rule in
   * css/editor-styles.css. Cohesion sets text-align on h2 through h6 and on p
   * directly, and a rule on the element beats an inherited value however specific
   * the ancestor — so before that rule existed, centring anything from here was
   * silently ignored.
   *
   * Listed elements rather than `text-align: center` on .ln-text__body, which
   * would be shorter but would also reach list items. Centred bullets read as
   * broken, and this is a generic block — the same bundle renders any standalone
   * rich text on any page, so a rule here reaches all of them. Blockquotes stay
   * left regardless: Cohesion sets that on the element and this rule does not
   * name it.
   *
   * The child combinator is correct here, unusually.
   * templates/field--block-content--body--text.html.twig prints the field with no
   * wrapper markup, so the paragraphs and headings really are direct children —
   * which is also what makes the first-child and flow rules above work.
   *
   * The same :not() escape hatch as the container-inherit rule in
   * css/editor-styles.css, for the same reason: at (0,1,1) this would otherwise
   * beat CKEditor's own .text-align-* classes at (0,1,0) and quietly discard an
   * alignment the author chose deliberately. A breakpoint default should give way
   * to an explicit decision, not the other way round.
   */
  .ln-text__body > :is(h2, h3, h4, p):not(:where(
    .text-align-left,
    .text-align-center,
    .text-align-right,
    .text-align-justify
  )) {
    text-align: center;
  }
}