/**
 * @file
 * Text section styles. Section padding and max width match the hero and
 * accordion; the copy itself is held at the narrower 763px measure the
 * accordion panels use. Element styles are scoped to .ln-text__body because
 * the content comes from a WYSIWYG.
 */

.ln-text {
  /* 0: this block has no box, so layout.css owns the gap between sections. Kept
     as a token so a one-off placement can still carry its own padding. */
  --ln-text-padding-block: 0;
  --ln-text-padding-inline: var(--ln-container-gutter, 32px);
  --ln-text-max-width: var(--ln-container-max, 1440px);
  --ln-text-measure: 763px;

  --ln-text-fg: #1c1c1c;
  --ln-text-heading-fg: #1c1c1c;
  --ln-text-link: #cf0000;
  --ln-text-link-hover: #961f00;
  /* Transparent: the Layout Builder section paints the background. */
  --ln-text-bg: transparent;

  --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);
  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;
}

/**
 * Copy width. Same specificity as .ln-text, so these must stay below it —
 * source order is what makes them win.
 *
 * "full" is the container's width, which the gutters already inset. No rule for
 * "measure": that is the token's own value.
 */
.ln-text--width-wide {
  --ln-text-measure: 1100px;
}

.ln-text--width-full {
  --ln-text-measure: none;
}

/* Gutter and max-width on the same box, so the 1440 is the outer edge. */
.ln-text__inner {
  max-width: var(--ln-text-max-width);
  margin-inline: auto;
  padding-inline: var(--ln-text-padding-inline);
}

.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;
}

/* Spacing between siblings, so no stray margin at the block's edges. Works
   only because the field template strips Drupal's wrappers. */
.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;
}

.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 group with their own text: more space above than below. */
.ln-text__body > * + :is(h2, h3, h4) {
  margin-top: 2rem;
}

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

/* h2 matches the accordion and comparison-table section headings; h3 and h4
   step down from it. Left-aligned, unlike those two. */
.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:not(.coh-style-text-gray, .coh-style-red-button) {
  color: var(--ln-text-link);
  text-decoration: underline;
}

.ln-text__body a:hover:not(.coh-style-text-gray, .coh-style-red-button),
.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;
  }

  /**
   * Headings and paragraphs centre. Elements are listed rather than centring
   * .ln-text__body, which would also centre list items.
   *
   * The :not(:where(.text-align-*)) exclusion is required: core styles those
   * classes at (0,1,0) and this file loads later, so without it an editor's
   * explicit alignment is silently overridden. The child combinator is correct
   * only because the field template strips Drupal's wrappers.
   */
  .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;
  }
}