/*
 * Custom styling for rendered Action Text content produced by the Lexxy editor.
 * The base editor/content styles ship in the `lexxy` stylesheet; this file only
 * holds our app-specific overrides. Content is wrapped in `.lexxy-content`
 * (see app/views/layouts/action_text/contents/_content.html.erb).
*/

/*
 * We need to override the image gallery styles to accommodate the
 * <action-text-attachment> element we wrap around attachments. Otherwise,
 * images in galleries will be squished by the max-width: 33%; rule.
*/
.lexxy-content .attachment-gallery > action-text-attachment,
.lexxy-content .attachment-gallery > .attachment {
  flex: 1 0 33%;
  padding: 0 0.5em;
  max-width: 33%;
}

.lexxy-content .attachment-gallery.attachment-gallery--2 > action-text-attachment,
.lexxy-content .attachment-gallery.attachment-gallery--2 > .attachment, .lexxy-content .attachment-gallery.attachment-gallery--4 > action-text-attachment,
.lexxy-content .attachment-gallery.attachment-gallery--4 > .attachment {
  flex-basis: 50%;
  max-width: 50%;
}

.lexxy-content action-text-attachment .attachment {
  padding: 0 !important;
  max-width: 100% !important;
}

/*
 * Every editor renders through FormFieldComponent with `border-0 ring-1
 * ring-gray-300` to match the sibling text/number inputs (border via the ring,
 * green on focus-within). Lexxy's own `:where(lexxy-editor)` host border used to
 * be zeroed by `border-0`, but under Tailwind v4's native cascade layers an
 * unlayered vendor rule beats layered utilities regardless of specificity, so
 * `border-0` no longer wins and the lexxy border stacked on top of the ring (a
 * bolder doubled grey outline). Drop it here for all editors — this selector
 * (0,0,1) outranks lexxy's `:where()` (0,0,0).
*/
lexxy-editor {
  border: 0;
}

/*
 * The toolbar-less comment editors (report/event/course) are short note fields.
 * Lexxy defaults the editor to 8 rows tall (--lexxy-editor-rows: 8lh), which
 * dominates the form grid, so shrink these to a compact, still-growable height.
 * `toolbar="false"` uniquely marks exactly these editors.
*/
lexxy-editor[toolbar="false"] {
  --lexxy-editor-rows: 3lh;
}

/*
 * Lexxy focuses an inner .lexxy-editor__content element, which would otherwise
 * pick up the app-wide green :focus-visible outline and produce a second ring
 * on top of the editor host's own focus indicator. Suppress the inner outline.
*/
.lexxy-editor__content:focus,
.lexxy-editor__content:focus-visible {
  outline: none;
}

/*
 * Tailwind's preflight resets list styling (list-style: none; margin/padding: 0),
 * which strips bullets and numbers from rich-text content — both while editing and
 * when displayed. Restore sensible defaults for rich-text content.
*/
.lexxy-content ul {
  list-style: disc;
  margin: 0.5em 0;
  padding-left: 1.5em;
}

.lexxy-content ol {
  list-style: decimal;
  margin: 0.5em 0;
  padding-left: 1.5em;
}

.lexxy-content ul ul {
  list-style: circle;
}

.lexxy-content li {
  margin: 0.25em 0;
}

.lexxy-content h1 {
  font-size: 1.25em;
  font-weight: 600;
  margin: 0.5em 0;
}

.lexxy-content blockquote {
  border-left: 3px solid #d1d5db;
  padding-left: 0.75em;
  color: #4b5563;
}

.lexxy-content a {
  color: #1d4ed8;
  text-decoration: underline;
}