/*
 * Company Description content: one look everywhere it appears.
 *   - the public listing page (single-provider.php, "About This Provider")
 *   - the provider dashboard Preview box (Description.jsx), and the editor itself via .ca-rich-text-editor
 *     (Quill draws its own list bullets, so the editor gets the fonts, headings and spacing but not list-style)
 *   - the Write with AI modal preview (WriteWithAIModal.jsx)
 * Matches the listing page: Roboto, grey body text, dark bold headings, real bullets.
 *
 * Selectors are deliberately strong. On the dashboard, `.tab-content h3` and
 * `.ca_v3_regular_body h2` (v3/build/index.css) style every heading in a tab as an
 * orange or teal section title with a rule, and the add-ons plugin sets a global h2; Quill
 * adds `.ql-snow .ql-editor h2`. None of that may reach description content.
 * Inline styles typed into a description (colors, sizes) still win, as they always have.
 */

.ca-rich-text.ca-rich-text,
.ca-rich-text-editor .ql-editor.ql-editor {
  font-family: Roboto, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: #666;
}

.ca-rich-text.ca-rich-text :is(h2, h3, h4),
.ca-rich-text-editor .ql-editor.ql-editor :is(h2, h3, h4) {
  font-family: Roboto, Arial, sans-serif;
  color: #333;
  font-weight: 700;
  line-height: 1.3;
  border: 0;
  padding: 0;
  text-decoration: none;
  text-transform: none;
  letter-spacing: normal;
}

.ca-rich-text.ca-rich-text h2,
.ca-rich-text-editor .ql-editor.ql-editor h2 { font-size: 22px; margin: 1.2em 0 0.5em; }

.ca-rich-text.ca-rich-text h3,
.ca-rich-text-editor .ql-editor.ql-editor h3 { font-size: 18px; margin: 1.1em 0 0.4em; }

.ca-rich-text.ca-rich-text h4,
.ca-rich-text-editor .ql-editor.ql-editor h4 { font-size: 16px; margin: 1em 0 0.3em; }

.ca-rich-text.ca-rich-text p,
.ca-rich-text-editor .ql-editor.ql-editor p { margin: 0 0 0.8em; }

.ca-rich-text.ca-rich-text :is(ul, ol),
.ca-rich-text-editor .ql-editor.ql-editor :is(ul, ol) { margin: 0 0 0.8em; padding-left: 1.5em; }

.ca-rich-text.ca-rich-text ul { list-style: disc outside; }
.ca-rich-text.ca-rich-text ol { list-style: decimal outside; }
.ca-rich-text.ca-rich-text li { display: list-item; margin: 0 0 0.25em; }
.ca-rich-text-editor .ql-editor.ql-editor li { margin: 0 0 0.25em; }

/*
 * A few older descriptions (pasted from a provider's own site) draw their bullets with a small
 * image, and put each image in its own list item with the text in the next one. Pair them back
 * up: no dots, the image and its text side by side on one line.
 */
.ca-rich-text.ca-rich-text ul:has(> li > img:first-child) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  list-style: none;
  padding-left: 0;
}
.ca-rich-text.ca-rich-text ul:has(> li > img:first-child) > li { list-style: none; flex: 1 1 calc(100% - 3em); }
.ca-rich-text.ca-rich-text ul:has(> li > img:first-child) > li:has(> img:first-child) { flex: 0 0 auto; margin-right: 0.5em; }
.ca-rich-text-editor .ql-editor.ql-editor li:has(> img:first-child)::before { content: none; }

/* Quill indents both the list and each item; keep one indent so the editor lines up with the preview. */
.ca-rich-text-editor .ql-editor.ql-editor :is(ul, ol) { padding-left: 0; }

.ca-rich-text.ca-rich-text :is(strong, b),
.ca-rich-text-editor .ql-editor.ql-editor :is(strong, b) { font-weight: 700; color: #333; }

.ca-rich-text.ca-rich-text :is(em, i),
.ca-rich-text-editor .ql-editor.ql-editor :is(em, i) { font-style: italic; }

.ca-rich-text.ca-rich-text a { color: #007a7a; text-decoration: underline; }

/* No extra space above the first thing in the box. */
.ca-rich-text.ca-rich-text > :first-child,
.ca-rich-text-editor .ql-editor.ql-editor > :first-child { margin-top: 0; }