@layer components {
  /* ==========================================================================
     Legal Pages (Privacy Policy & Legal Notice)
     Shared prose typography for long-form legal content
     ========================================================================== */

  /* Legal header: light background, centered text */
  .legal-header {
    background: var(--color-lab-50);
    text-align: center;
    padding-block: var(--spacing-xl) var(--spacing-lg);

    & h1 {
      font-size: clamp(2rem, 4vw, 3rem);
    }
  }

  /* Last updated date */
  .legal-updated {
    font-size: var(--font-size-sm);
    color: var(--color-gray-500);
    margin-block-start: var(--spacing-xs);
  }

  /* Legal sections with border separation */
  .legal-section {
    padding-block: var(--spacing-lg);

    & + .legal-section {
      border-top: 1px solid var(--color-gray-200);
    }

    & h2 {
      text-align: left;
      font-size: var(--font-size-2xl);
      margin-block-end: var(--spacing-sm);
    }
  }

  /* Core legal prose typography for readable long-form content */
  .legal-prose {
    max-width: 42rem;
    line-height: 1.75;
    color: var(--color-gray-700);

    & p {
      margin-block-end: var(--spacing-sm);
    }

    & ul,
    & ol {
      padding-inline-start: 1.5rem;
      margin-block-end: var(--spacing-sm);
    }

    & li {
      margin-block-end: 0.5rem;
    }

    & strong {
      color: var(--color-gray-900);
    }

    & a {
      text-decoration: underline;
    }

    & dl {
      margin-block-end: var(--spacing-sm);
    }

    & dt {
      font-weight: 600;
      color: var(--color-gray-900);
    }

    & dd {
      margin-inline-start: 0;
      margin-block-end: var(--spacing-xs);
    }
  }

  /* Footer legal navigation links */
  .footer-legal {
    display: flex;
    justify-content: center;
    gap: var(--spacing-sm);
    margin-block: var(--spacing-xs);
    font-size: var(--font-size-sm);

    & a {
      color: var(--color-gray-500);
      text-decoration: none;
      transition: color var(--transition-fast);

      &:hover {
        color: var(--color-dark-violet);
      }
    }

    @media (min-width: 48rem) {
      justify-content: flex-end;
    }
  }
}