/* Rich-text styling for rendered petition descriptions.
   Self-contained (declares the CSS vars it depends on) so it can be loaded
   into base templates that don't pull all of static/css/styles.css —
   notably moderation/base_mod.html. Single source of truth for .rich-text:
   both templates/base.html and templates/moderation/base_mod.html link it.

   Sanitized petition descriptions are injected with |safe, but Tailwind's
   Preflight reset strips list bullets, link styling and heading sizes, so
   formatting the user applied in the editor would otherwise render as flat
   plain text. Descendant selectors (specificity 0,1,1) override Preflight's
   bare-element resets (0,0,1) regardless of stylesheet order. */

:root {
  --color-orange-600: #ea580c;
  --color-orange-700: #c2410c;
  --color-blue-gray-100: #f1f5f9;
  --color-blue-gray-200: #e2e8f0;
  --color-blue-gray-600: #475569;
}

.rich-text > :first-child { margin-top: 0; }
.rich-text > :last-child { margin-bottom: 0; }
.rich-text p { margin: 0 0 1rem; }
.rich-text ul,
.rich-text ol { margin: 0 0 1rem; padding-left: 1.5rem; }
.rich-text ul { list-style-type: disc; }
.rich-text ol { list-style-type: decimal; }
.rich-text li { margin: 0.25rem 0; }
.rich-text li > ul,
.rich-text li > ol { margin: 0.25rem 0; }
.rich-text u { text-decoration: underline; }
.rich-text a {
  color: var(--color-orange-600);
  text-decoration: underline;
}
.rich-text a:hover { color: var(--color-orange-700); }
/* h2-h4 are the only headings the sanitizer keeps on the render path.
   .trix-content also styles h1 (for pasted <h1> still visible inside the
   editor); here on the public render path sanitize has already stripped
   <h1>, so a .rich-text h1 rule would fire on zero elements. */
.rich-text h2,
.rich-text h3,
.rich-text h4 {
  font-weight: 600;
  line-height: 1.3;
  margin: 1.5rem 0 0.5rem;
}
.rich-text h2 { font-size: 1.25rem; }
.rich-text h3 { font-size: 1.125rem; }
.rich-text h4 { font-size: 1rem; }
.rich-text blockquote {
  margin: 0 0 1rem;
  padding-left: 1rem;
  border-left: 3px solid var(--color-blue-gray-200);
  color: var(--color-blue-gray-600);
}
.rich-text pre {
  margin: 0 0 1rem;
  padding: 0.75rem 1rem;
  background: var(--color-blue-gray-100);
  border-radius: 0.375rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.875rem;
  white-space: pre-wrap;
}
.rich-text hr {
  margin: 1.5rem 0;
  border: 0;
  border-top: 1px solid var(--color-blue-gray-200);
}