/**
 * TipTap editor content for published-site TipTap surfaces.
 * Uses `--su-*` tokens so tenant ThemeRoot theming applies.
 * Scope: `.su-wysiwyg-content` (and nested `.tiptap` / ProseMirror).
 */
.su-wysiwyg-content {
  max-width: 100%;
  color: var(--su-color-foreground);
  font-size: var(--su-font-size-sm);
  line-height: 1.625;
}

.su-wysiwyg-content.tiptap,
.su-wysiwyg-content .tiptap,
.su-wysiwyg-content .ProseMirror {
  padding: var(--su-space-2);
  outline: none;
}

.su-wysiwyg-content p.is-editor-empty:first-child::before {
  color: var(--su-color-muted-foreground);
  content: attr(data-placeholder);
  float: left;
  height: 0;
  pointer-events: none;
}

.su-wysiwyg-content :where(p) {
  margin-top: var(--su-space-2);
  margin-bottom: var(--su-space-2);
  margin-left: 0;
  margin-right: 0;
}

.su-wysiwyg-content :where(h2) {
  margin-top: var(--su-space-4);
  margin-bottom: var(--su-space-2);
  margin-left: 0;
  margin-right: 0;
  padding: 0;
  font-family: var(--su-font-family-heading);
  font-size: var(--su-font-size-xl);
  font-weight: 600;
  line-height: 1.25;
  color: var(--su-color-foreground);
}

.su-wysiwyg-content :where(h3) {
  margin-top: var(--su-space-4);
  margin-bottom: var(--su-space-2);
  margin-left: 0;
  margin-right: 0;
  padding: 0;
  font-family: var(--su-font-family-heading);
  font-size: var(--su-font-size-lg);
  font-weight: 600;
  line-height: 1.25;
  color: var(--su-color-foreground);
}

.su-wysiwyg-content :where(h4),
.su-wysiwyg-content :where(h5),
.su-wysiwyg-content :where(h6) {
  margin-top: var(--su-space-4);
  margin-bottom: var(--su-space-2);
  margin-left: 0;
  margin-right: 0;
  padding: 0;
  font-family: var(--su-font-family-heading);
  font-size: var(--su-font-size-base);
  font-weight: 600;
  line-height: 1.4;
  color: var(--su-color-foreground);
}

.su-wysiwyg-content :where(ul),
.su-wysiwyg-content :where(ol) {
  margin-top: var(--su-space-2);
  margin-bottom: var(--su-space-2);
  padding-left: var(--su-space-6);
}

.su-wysiwyg-content :where(ul) {
  list-style-type: disc;
}

.su-wysiwyg-content :where(ol) {
  list-style-type: decimal;
}

.su-wysiwyg-content :where(li) {
  margin-top: var(--su-space-1);
  margin-bottom: var(--su-space-1);
  padding-left: var(--su-space-1);
}

.su-wysiwyg-content :where(li > p) {
  margin: 0;
}

.su-wysiwyg-content :where(li > ul),
.su-wysiwyg-content :where(li > ol) {
  margin-top: var(--su-space-1);
  margin-bottom: var(--su-space-1);
}

.su-wysiwyg-content :where(a) {
  color: var(--su-color-primary);
  font-weight: 500;
}

.su-wysiwyg-content :where(strong) {
  font-weight: 600;
  color: var(--su-color-foreground);
}

.su-wysiwyg-content ::selection {
  background-color: color-mix(
    in srgb,
    var(--su-color-primary) 28%,
    transparent
  );
  color: var(--su-color-foreground);
}

.su-wysiwyg-content .wysiwyg-rich-node {
  border: 1px solid transparent;
  border-radius: var(--su-radius-surface);
  padding: var(--su-space-1-5);
  transition:
    border-color 140ms ease,
    box-shadow 140ms ease;
}

.su-wysiwyg-content .wysiwyg-rich-node:hover {
  border-color: var(--su-color-border);
}

.su-wysiwyg-content .wysiwyg-rich-node:focus-within,
.su-wysiwyg-content .wysiwyg-rich-node.is-selected,
.su-wysiwyg-content .ProseMirror-selectednode.wysiwyg-rich-node {
  border-color: var(--su-color-focus-ring);
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--su-color-focus-ring) 22%, transparent),
    0 10px 24px color-mix(in srgb, var(--su-color-foreground) 8%, transparent);
}