@import url('./global.css');
@import url('./components/app-page.css');

.legal-content > :not(.legal-header) {
  max-width: 100%;
}

.legal-section,
.legal-text,
.legal-list,
.legal-meta {
  break-inside: avoid;
}

.legal-section {
  margin: var(--spacing-sm) 0 var(--spacing-xs);
  padding-bottom: 2px;
  border-bottom: 1px solid var(--app-line);
  color: var(--app-accent);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
}

.legal-text {
  margin: 0 0 var(--spacing-xs);
  color: var(--app-text);
  font-size: var(--font-size-sm);
  line-height: 1.5;
}

.legal-list {
  margin: 0 0 var(--spacing-xs) var(--spacing-md);
  padding: 0;
}

.legal-list li {
  margin-bottom: 2px;
  color: var(--app-text);
  font-size: var(--font-size-sm);
  line-height: 1.5;
}

.legal-link {
  color: var(--app-accent);
  text-decoration: underline;
}

.legal-meta {
  margin-top: var(--spacing-sm);
  padding-top: var(--spacing-xs);
  border-top: 1px solid var(--app-line);
  color: var(--app-muted);
  font-size: var(--font-size-xs);
}

.legal-meta a {
  color: var(--app-muted);
  text-decoration: underline;
}

/* Two-column "newspaper" reading on wide screens via CSS multi-column, NOT a
   grid: multicol flows in document order (down the left column, then the right),
   so the text stays readable. A 2-col *grid* auto-places items row-by-row, which
   scrambles the reading order. `break-inside: avoid` (above) keeps each section
   whole across the column break. The header and footer meta span both columns.
   The leaderboard reuses .legal-content but resets `column-count: auto`, so it is
   unaffected. */
@media (min-width: 760px) {
  .legal-content {
    display: block;
    column-count: 2;
    column-gap: clamp(1.25rem, 2.4vw, 2rem);
  }

  .legal-header,
  .legal-meta {
    column-span: all;
  }
}