/*==================================================================
  Legal pages (Terms & Conditions, Privacy Policy)
  Scoped styles — only loaded on terms.html and privacy-policy.html.
==================================================================*/

/* Numbered body sections. The counter drives the "01, 02, 03 ..."
   markers, so sections can be added or reordered without renumbering. */
.legal-body {
  counter-reset: legal-section;
}

.legal-body__heading {
  /* 30px on mobile -> 45px on large screens, fluid in between.
     1.875rem = 30px, 2.8125rem = 45px, 1.545rem = 24.72px baseline. */
  font-size: clamp(1.875rem, 1.545rem + 1.41vw, 2.8125rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  counter-increment: legal-section;
}

.legal-body__heading::before {
  content: counter(legal-section, decimal-leading-zero);
  flex: 0 0 auto;
  /* Matches the heading exactly. Must be `inherit`, not --at-common-white:
     under [data-bs-theme=dark] that variable is remapped to #1e1e1e. */
  color: inherit;
}

/* Body copy: the global p is line-height 1.2, which is tight for long-form
   legal text. Open it up slightly and add a touch of tracking. */
.legal-body p {
  line-height: 1.7;
  letter-spacing: 0.01em;
}

/* Email / phone links: brighter than the surrounding copy, underlined by
   default, underline removed on hover. --at-neutral-900 is the same value
   the headings inherit, so it stays correct in either theme. */
.legal-body p a {
  color: var(--at-neutral-900);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
  transition: color 0.3s ease, opacity 0.3s ease;
}

.legal-body p a:hover,
.legal-body p a:focus {
  color: var(--at-neutral-900);
  text-decoration: none;
  opacity: 0.75;
}

@media (max-width: 575px) {
  .legal-body__heading {
    gap: 0.5rem;
  }
}