/* Rich text content styling for rendered Action Text
 * Based on: https://github.com/basecamp/fizzy/blob/main/app/assets/stylesheets/rich-text-content.css
 *
 * Styles rendered Action Text content with proper typography and spacing.
 * Note: Editor styling is in lexxy-overrides.css (different selectors needed).
 */

.lexxy-content {
  --block-margin: 1em;
}

/* Headings - matches project's font-bold (700) pattern */
.lexxy-content h1,
.lexxy-content h2,
.lexxy-content h3,
.lexxy-content h4,
.lexxy-content h5,
.lexxy-content h6 {
  font-weight: 700;
  line-height: 1.1;
  text-wrap: balance;
  margin-block: 0 var(--block-margin);
}

.lexxy-content h1 { font-size: 2em; }
.lexxy-content h2 { font-size: 1.5em; }
.lexxy-content h3 { font-size: 1.17em; }

/* Block elements */
.lexxy-content p,
.lexxy-content ul,
.lexxy-content ol,
.lexxy-content blockquote,
.lexxy-content figure,
.lexxy-content pre {
  margin-block: 0 var(--block-margin);
  overflow-wrap: anywhere;
}

/* Lists */
.lexxy-content ul,
.lexxy-content ol {
  padding-inline-start: 3ch;
}

.lexxy-content ul {
  list-style-type: disc;
}

.lexxy-content ol {
  list-style-type: decimal;
}

.lexxy-content ul ul,
.lexxy-content ul ol,
.lexxy-content ol ul,
.lexxy-content ol ol {
  padding-inline-start: 2ch;
}

/* Blockquotes */
.lexxy-content blockquote {
  border-inline-start: 0.25em solid var(--color-gray-300, #d1d5db);
  padding-inline-start: 2ch;
  font-style: italic;
}

/* Code blocks */
.lexxy-content code {
  font-family: ui-monospace, monospace;
  font-size: 0.875em;
  background: var(--color-gray-100, #f3f4f6);
  padding: 0.125em 0.25em;
  border-radius: 0.3em;
}

.lexxy-content pre {
  background: var(--color-gray-100, #f3f4f6);
  padding: 1em;
  border-radius: 0.5em;
  overflow-x: auto;
}

.lexxy-content pre code {
  background: transparent;
  padding: 0;
}

/* Links - uses project's black button-primary color with focus ring */
.lexxy-content a {
  color: var(--color-button-primary, #000000);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  border-radius: 0.125rem;
}

.lexxy-content a:hover {
  text-decoration-thickness: 2px;
}

.lexxy-content a:focus-visible {
  outline: 2px solid var(--color-button-primary, #000000);
  outline-offset: 2px;
}

/* Images and attachments */
.lexxy-content img,
.lexxy-content video {
  max-block-size: 32rem;
  object-fit: contain;
}