/* Fixes for Lexxy + Tailwind CSS compatibility
 * https://github.com/basecamp/lexxy/issues/485
 *
 * Lexxy uses :where() selectors with zero specificity, which Tailwind's
 * Preflight normalizer overrides. These fixes restore proper toolbar styling.
 */
.lexxy-highlight-button { font: initial; }
lexxy-highlight-dropdown button { line-height: normal; }
lexxy-link-dropdown input[type="url"] {
  min-inline-size: 30ch;
  line-height: normal;
}
summary.lexxy-editor__toolbar-button { display: grid; }
ul.lexxy-prompt-menu { padding-left: var(--lexxy-prompt-padding); }

/* Editor content styling - Tailwind Preflight resets these
 * https://github.com/basecamp/lexxy/issues/485
 *
 * Same root cause as toolbar issues above. Without these fixes:
 * - Headings appear as regular text (no size/weight)
 * - Lists have no bullets or indentation
 * - Links are black with no underline
 */
lexxy-editor [contenteditable="true"] h1 {
  font-size: 2em;
  font-weight: 700;
  line-height: 1.1;
  margin-block: 0.5em;
}

lexxy-editor [contenteditable="true"] h2 {
  font-size: 1.5em;
  font-weight: 700;
  line-height: 1.1;
  margin-block: 0.5em;
}

lexxy-editor [contenteditable="true"] h3 {
  font-size: 1.17em;
  font-weight: 700;
  line-height: 1.1;
  margin-block: 0.5em;
}

lexxy-editor [contenteditable="true"] ul,
lexxy-editor [contenteditable="true"] ol {
  padding-inline-start: 2em;
  margin-block: 0.5em;
}

lexxy-editor [contenteditable="true"] ul {
  list-style-type: disc;
}

lexxy-editor [contenteditable="true"] ol {
  list-style-type: decimal;
}

lexxy-editor [contenteditable="true"] blockquote {
  border-inline-start: 0.25em solid var(--color-gray-300, #d1d5db);
  padding-inline-start: 1em;
  margin-inline-start: 0;
  font-style: italic;
}

lexxy-editor [contenteditable="true"] a {
  color: var(--color-blue-600, #2563eb);
  text-decoration: underline;
}

lexxy-editor [contenteditable="true"] a:hover {
  color: var(--color-blue-800, #1e40af);
}