/* ============================================================
   PAGE — privacy-policy.html + terms.html  (shared legal styles)
   Figma: node 87:43 (page 12) and node 89:344 (page 13)
   Two-column newspaper layout, 25px body text.
   ============================================================ */

/* ============================================================
   SECTION WRAPPER
   ============================================================ */
.legal-section {
  padding-top: var(--space-xl);
  padding-bottom: var(--space-2xl);
}

/* ============================================================
   HEADING + DIVIDER
   ============================================================ */
.legal-header {
  text-align: center;
  padding-inline: var(--space-lg);
  margin-bottom: var(--space-xl); /* matches .legal-section's header→title padding-top */
}

.legal-header .section-heading {
  margin-bottom: var(--space-md);
}

/* terms.html has an extra centered subheading between the divider
   and the content — it reads as the first piece of content, so
   divider→subheading is the gap that must match .legal-section's
   header→title padding-top. subheading→content is a separate, fixed
   "label hugging its content" gap (like .section-heading's own
   margin-bottom above), not part of that equalized pair. */
.legal-header--with-subheading {
  margin-bottom: var(--space-xl);
}

.legal-subheading {
  font-size: var(--text-sub);
  font-weight: 400;
  color: var(--color-text-dark);
  text-align: center;
  padding-inline: var(--space-lg);
  margin-bottom: var(--space-lg);
}

/* ============================================================
   TWO-COLUMN NEWSPAPER TEXT LAYOUT
   Figma: 2×573px columns + 36px gap = 1182px total, centered.
   CSS columns flow text automatically from col 1 to col 2.
   ============================================================ */
.legal-content {
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--space-lg);
  column-count: 2;
  column-gap: 40px;
  font-size: var(--text-body);
  font-weight: 400;
  color: var(--color-text-dark);
  line-height: 1.6;
  text-align: left;
}

/* ============================================================
   BODY PARAGRAPHS
   ============================================================ */
.legal-content p {
  margin-bottom: var(--space-sm);
  orphans: 3;
  widows: 3;
}

.legal-content p a {
  color: var(--color-text-dark);
  text-decoration: underline;
}

.legal-content p a:hover {
  color: var(--color-red);
}

/* ============================================================
   SECTION HEADINGS — same size as body, bold + uppercase
   (Figma shows them as inline uppercase text; bold added here
   for visual hierarchy in HTML flow)
   ============================================================ */
.legal-content h2 {
  font-size: var(--text-body);
  font-weight: 700;
  color: var(--color-text-dark);
  text-transform: uppercase;
  margin-top: var(--space-md);
  margin-bottom: var(--space-xs);
  break-after: avoid;
  line-height: 1.4;
}

/* No top margin for the very first heading */
.legal-content h2:first-child {
  margin-top: 0;
}

/* ============================================================
   INTRO LIST — bullet-style paragraphs in the intro
   ============================================================ */
.legal-content .legal-intro-list {
  padding-left: 0;
  margin-bottom: var(--space-sm);
}

.legal-content .legal-intro-list li {
  margin-bottom: 4px;
  break-inside: avoid;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1024px) {
  .legal-content {
    max-width: 820px;
  }
}

@media (max-width: 768px) {
  .legal-section {
    padding-top: var(--space-lg);
    padding-bottom: var(--space-xl);
  }

  .legal-header {
    padding-inline: var(--space-md);
    margin-bottom: var(--space-lg);
  }

  .legal-header--with-subheading {
    margin-bottom: var(--space-lg);
  }

  .legal-subheading {
    font-size: var(--text-nav);
    padding-inline: var(--space-md);
  }

  .legal-content {
    column-count: 1;
    padding-inline: var(--space-md);
  }
}

@media (max-width: 375px) {
  .legal-header {
    padding-inline: var(--space-sm);
  }

  .legal-subheading {
    padding-inline: var(--space-sm);
  }

  .legal-content {
    padding-inline: var(--space-sm);
    font-size: var(--text-footer);
  }
}