/*  Copyright (C) Bitstem GmbH
 *  All rights reserved.
 *
 *  This source code is proprietary and confidential.
 *  Unauthorized copying, distribution, or disclosure of this file,
 *  in whole or in part, is strictly prohibited unless explicitly
 *  permitted in writing by Bitstem GmbH.
 *
 *  Author: Klaus Kuehnhammer <klaus@bitstem.com>
 */

/* Long-form CMS pages (imprint, privacy, FAQ, …). The design's product
   text (.produkt-detail__body) is centred at 42ch; legal and reference
   text with headings and lists reads better left-aligned and a little
   wider, so this keeps its type, size and rhythm but not its alignment. */

@layer components {
  .page-prose {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    max-inline-size: 62ch;
    margin-inline: auto;
    font-size: var(--text-base);
    line-height: var(--line-height-normal);
  }

  /* Headings take the display serif, echoing the wordmark, for hierarchy. */
  .page-prose h2,
  .page-prose h3 {
    margin-block-start: var(--space-4);
    font-family: var(--font-display);
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-tight);
  }

  .page-prose h2 {
    font-size: var(--text-xl);
  }

  .page-prose h3 {
    font-size: var(--text-lg);
  }

  .page-prose h2 + *,
  .page-prose h3 + * {
    margin-block-start: calc(-1 * var(--space-2));
  }

  .page-prose ul,
  .page-prose ol {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding-inline-start: var(--space-5);
  }

  .page-prose a {
    text-decoration: underline;
    text-underline-offset: 0.2em;
  }

  .page-prose hr {
    border: 0;
    border-top: 1px dotted var(--color-divider-dotted);
    margin-block: var(--space-4);
  }
}