/* ==========================================================================
   P77 Game — legal.css
   Privacy policy and terms. Deliberately calm: single column, generous
   whitespace, gold anchor pills, no scroll-triggered motion.
   ========================================================================== */

.legal {
  padding-block: var(--space-md) var(--space-xl);
}

.legal__head {
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-lg);
  border-bottom: 1px solid var(--color-obsidian-border);
}

.legal__title {
  margin-bottom: 10px;
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
}

.legal__meta {
  margin-bottom: var(--space-md);
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.legal__lead {
  font-size: var(--fs-lead);
  color: var(--color-text-secondary);
  margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   Body
   -------------------------------------------------------------------------- */
.legal__section {
  padding-bottom: var(--space-lg);
  margin-bottom: var(--space-lg);
  border-bottom: 1px solid rgba(44, 33, 24, 0.6);
  scroll-margin-top: calc(var(--nav-h) + 24px);
}
.legal__section:last-of-type { border-bottom: 0; }

.legal__section h2 {
  margin-top: 0;
  margin-bottom: var(--space-md);
  font-size: var(--fs-h3);
  color: var(--color-text-primary);
}

.legal__section h3 {
  margin-top: var(--space-md);
  margin-bottom: 10px;
  font-size: var(--fs-h4);
  color: var(--color-gold-podium);
}

.legal__section p,
.legal__section li { color: var(--color-text-secondary); }

.legal__section ul { padding-left: 1.15rem; }
.legal__section ul li::marker { color: var(--color-gold-trophy); }

/* Sections carrying a compliance flag get a burgundy edge and warm panel */
.legal__section--flag {
  padding: var(--space-md);
  border: 1px solid rgba(208, 145, 46, 0.3);
  border-radius: var(--radius-md);
  background: rgba(78, 12, 21, 0.18);
}
.legal__section--flag h2 { color: var(--color-warning); }

.legal__states {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin: 0 0 var(--space-md);
  padding: 0;
  list-style: none;
}
.legal__states li {
  margin: 0;
  padding: 9px 13px;
  border: 1px solid rgba(194, 57, 47, 0.35);
  border-radius: var(--radius-sm);
  background: rgba(11, 9, 8, 0.5);
  font-family: var(--font-display);
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--color-text-primary);
}

/* --------------------------------------------------------------------------
   Related pages aside
   -------------------------------------------------------------------------- */
.legal__aside {
  margin-top: var(--space-lg);
  padding: var(--space-md);
  border: 1px solid var(--color-obsidian-border);
  border-radius: var(--radius-md);
  background: var(--grad-livery);
}
.legal__aside h2 {
  margin-bottom: var(--space-sm);
  font-size: 0.94rem;
  letter-spacing: 0.16em;
  color: var(--color-gold-trophy);
}
.legal__aside ul {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--fs-sm);
}
.legal__aside li { margin-bottom: 9px; }

/* --------------------------------------------------------------------------
   Tablet
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
  .legal { padding-block: var(--space-lg) var(--space-2xl); }
  .legal__states { grid-template-columns: repeat(3, 1fr); }
  .legal__section--flag { padding: var(--space-lg); }
}

/* --------------------------------------------------------------------------
   Desktop
   -------------------------------------------------------------------------- */
@media (min-width: 1200px) {
  .legal__body { font-size: 1.02rem; }
}