/*
 * Shared styling for WYSIWYG-authored HTML content (Casino reviews, Guides,
 * News articles, Blacklist write-ups). Used by:
 *   - admin/src/components/content/RichTextEditor.tsx (the editable area, so
 *     what the editor shows while typing matches what the public site renders)
 *   - web/'s casino/guide/news/blacklist detail pages (the rendered, sanitized
 *     HTML body)
 * Kept plain CSS (not a Tailwind Typography plugin) so both apps can import
 * it identically without adding a new Tailwind plugin dependency to either.
 */
.rich-text-content h2 {
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.3;
}
.rich-text-content h3 {
  margin-top: 1.25rem;
  margin-bottom: 0.5rem;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.3;
}
.rich-text-content p {
  margin-bottom: 0.75rem;
  line-height: 1.6;
}
.rich-text-content ul {
  list-style: disc;
  padding-left: 1.5rem;
  margin-bottom: 0.75rem;
}
.rich-text-content ol {
  list-style: decimal;
  padding-left: 1.5rem;
  margin-bottom: 0.75rem;
}
.rich-text-content li {
  margin-bottom: 0.25rem;
}
.rich-text-content blockquote {
  border-left: 3px solid var(--color-border);
  padding-left: 1rem;
  margin-bottom: 0.75rem;
  font-style: italic;
  color: var(--color-text-muted);
}
.rich-text-content a {
  color: var(--color-primary-600);
  text-decoration: underline;
}
.rich-text-content strong {
  font-weight: 700;
}
.rich-text-content code {
  background: var(--color-surface-muted);
  border-radius: 0.25rem;
  padding: 0.125rem 0.375rem;
  font-size: 0.875em;
}
.rich-text-content > *:last-child {
  margin-bottom: 0;
}

:root[data-theme="dark"] .rich-text-content blockquote,
.dark .rich-text-content blockquote {
  border-left-color: var(--color-border-dark);
  color: var(--color-text-muted-dark);
}
:root[data-theme="dark"] .rich-text-content code,
.dark .rich-text-content code {
  background: var(--color-surface-muted-dark);
}