/* Legacy-parity text rendering: the old Creditas site sets
 * -webkit-font-smoothing: antialiased globally, which renders type
 * lighter/thinner on macOS. Webflow Code Components live in isolated
 * shadow roots, so this must be declared per-component on :host to
 * inherit into the shadow tree (the property does not cross the
 * shadow boundary). Without it, Blink defaults to subpixel smoothing
 * and identical 400-weight text looks heavier than the old site. */
:host {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/**
 * PureText — centered text-only section (title + body paragraphs).
 * Ports legacy `creditas-site/src/sections/PureText`.
 *
 * Class naming: no BEM `__`; elements nested under `.pure-text`. Background /
 * alignment modifiers bared to `&.bg-*` / `&.align-*`. The CTA slot wrapper is
 * `.cta-slot` (not `.cta`) to avoid the global `.cta` block (Cta component).
 *
 * Tokens inlined from @creditas-ui standard:
 *   colors.neutral.80 = #3b4540  (body)
 *   colors.neutral.90 = #292929  (title)
 *   colors.primary.60 = #4f9e00  (links)
 *   spacingY.5xl  = 20px   spacingY.16xl = 64px   spacingY.20xl = 80px
 *   spacingY.6xl  = 24px   spacingY.10xl = 40px
 *   heading.md = 28/36/0.5 · heading.xl = 40/52/0.5 (>=1024)
 *   body.md = 16/24/0.3
 *   breakpoints.5xl = 1024px
 */

.pure-text,
.pure-text *,
.pure-text *::before,
.pure-text *::after {
  box-sizing: border-box;
}

.pure-text {
  display: block;
  width: 100%;
  background: #ffffff;
  padding: 20px 24px;
  font-family: 'Helvetica Now Display', 'Helveticanowdisplay', sans-serif;

  @media (min-width: 1024px) {
    padding: 64px 24px 80px;
  }

  &.bg-white {
    background: #ffffff;
  }

  &.bg-gray {
    background: #f1f3f2; /* neutral.lighter */
  }

  &.bg-dark {
    background: #292929; /* neutral.darkest */

    .title {
      color: #ffffff;
    }

    .body {
      color: #f1f3f2;
    }

    .body a {
      color: #8edb00; /* primary.40 — readable on dark */
    }
  }

  &.align-center {
    text-align: center;
  }

  &.align-left {
    text-align: left;
  }

  .inner {
    max-width: 760px;
    margin: 0 auto;
  }

  .title {
    margin: 0 0 40px;
    color: #292929; /* neutral.90 */
    font-family: 'Maison Neue Extended', 'Maisonneueextended Book',
      'Maisonneueextended', 'Helvetica Now Display', 'Helveticanowdisplay',
      sans-serif;
    font-weight: 400;
    font-size: 28px;
    line-height: 36px;
    letter-spacing: 0.5px;

    @media (min-width: 1024px) {
      font-size: 40px;
      line-height: 52px;
    }
  }

  .body {
    /* Lay the body/slot items out in a column with a 24px gap between them.
     * `gap` (not per-item margins) is what spaces the slotted RichText items:
     * when the body is a Webflow slot, its content is projected as light DOM,
     * so shadow rules like `.body p` can't reach the paragraphs — but `gap` on
     * the flex container still applies to the projected flat-tree children.
     * See the `::slotted` flatten rule below for the wrapper quirk. */
    display: flex;
    flex-direction: column;
    gap: 24px; /* spacingY.6xl */
    color: #3b4540; /* neutral.80 */
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.3px;

    p {
      margin: 0; /* spacing handled by the flex `gap` above */
    }

    a {
      color: #4f9e00; /* primary.60 */
    }

    strong,
    b {
      font-weight: 700;
    }
  }

  .cta-slot {
    margin-top: 32px;
  }
}

/* Slotted CTA (kept flat — ::slotted only resolves in the shadow tree; inherits
   the section's text-align left/center). */
.pure-text .cta-slot ::slotted(*) {
  display: contents;
}

/* Webflow quirk: slotted body content is projected wrapped in a single
   `<div slot=...>`. Flatten that wrapper so the individual items become the
   direct flex children of `.body` and pick up its 24px `gap`. (No-op when the
   RichText renders as real shadow children instead of a slot.) */
.pure-text .body ::slotted(*) {
  display: contents;
}