/* ============================================================================
   CONTENT STYLES — the look of WYSIWYG page/game bodies.
   Loaded BOTH inside the TinyMCE editor (content_css) and on the public pages,
   so the editor preview matches the live result. Scoped to .rte.
   Uses the design tokens from site.css with literal fallbacks (site.css is not
   loaded inside the editor iframe).
   ============================================================================ */
.rte { line-height: 1.6; }

.rte h2 { margin-top: 1.4rem; font-size: 1.5rem; }
.rte h3 { margin-top: 1.1rem; font-size: 1.25rem; }
.rte h4 { margin-top: 1rem; font-size: 1.1rem; }
.rte p  { margin: 0 0 1rem; }
.rte ul, .rte ol { margin: 0 0 1rem 1.25rem; }

.rte a { color: var(--brand, #0d6efd); }

.rte img { max-width: 100%; height: auto; border-radius: 6px; }

.rte blockquote {
  margin: 0 0 1rem;
  padding-left: 1rem;
  border-left: 3px solid var(--border, #ced4da);
  color: var(--muted, #6c757d);
}

/* Named formats offered in the editor toolbar */
.rte .intro {
  font-size: 1.15rem;
  color: var(--muted, #6c757d);
}
.rte .callout {
  display: block;
  margin: 0 0 1rem;
  padding: 0.75rem 1rem;
  border-left: 4px solid var(--brand, #0d6efd);
  background: var(--surface-alt, #f6f6f6);
}

.rte table { border-collapse: collapse; margin: 0 0 1rem; }
.rte table th,
.rte table td {
  border: 1px solid var(--border, #ced4da);
  padding: 0.3rem 0.5rem;
}