/* Content pages (policies, FAQ, Our Story — partials/page.php): readable prose on the light
   surface. Tokens only. */
@layer components {
  .content-page {
    background-color: var(--cream-100);
    padding-block: var(--section-pad);
    min-height: 60vh;
  }

  .content-page__draft {
    max-width: 68ch;
    margin: 0 auto var(--space-6);
    padding: var(--space-3) var(--space-4);
    border: 1px dashed var(--cocoa-600);
    background-color: var(--cream-50);
    color: var(--cocoa-700);
  }

  .content-page__body {
    max-width: 68ch;
    margin: var(--space-7) auto 0;
    color: var(--ca-body);
    font-size: var(--fs-body);
    line-height: 1.75;

    & :where(h2, h3, h4) {
      margin: var(--space-7) 0 var(--space-3);
      color: var(--ca-heading);
      font-family: var(--font-display);
      font-weight: 600;
      letter-spacing: var(--ls-title);
      line-height: 1.25;
    }

    & h2 { font-size: var(--fs-h2); }
    & h3 { font-size: var(--fs-card-title); }
    & > :first-child { margin-top: 0; }

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

    & ul,
    & ol {
      padding-left: var(--space-5);
    }

    & ul { list-style: disc; }
    & ol { list-style: decimal; }

    & li + li {
      margin-top: var(--space-2);
    }

    & a {
      color: var(--cocoa-700);
      text-underline-offset: 3px;

      &:hover {
        color: var(--gold-600);
      }
    }

    & strong {
      color: var(--ca-heading);
    }
  }

  /* FAQ: each question is a rule-separated block. */
  .content-page__body--faq {
    & h3 {
      margin: 0;
      padding-top: var(--space-5);
      border-top: 1px solid var(--sand-300);
    }

    & h3 + p {
      margin-top: var(--space-2);
    }

    & p:last-child {
      padding-bottom: var(--space-5);
      border-bottom: 1px solid var(--sand-300);
    }
  }

  .content-page__gap {
    padding-inline: var(--space-1);
    background-color: var(--sand-200);
    color: var(--cocoa-700);
    outline: 1px dashed var(--cocoa-600);
  }

  .content-page__body--center {
    text-align: center;
  }
}