/* Lexxy Editor & Content Styles
 * ==========================================================================
 * All custom styling for Lexxy editor and content rendering
 * Consolidated from multiple files to prevent variable conflicts
 */

/* Lexxy Editor Element
 * -------------------------------------------------------------------------- */

lexxy-editor {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  border: none;
}

/* Lexxy Editor Content (editable area)
 * -------------------------------------------------------------------------- */

.lexxy-editor__content {
  padding: 2rem 3rem;
  font-size: var(--font-size-medium);
  line-height: 1.75;
  max-width: 50rem;
  margin: 0 auto;
  border: 1px solid var(--color-border);
  max-height: calc(100% - 65px);
  overflow-y: auto;
  background-color: var(--color-bg--canvas);
  color: var(--color-ink--surface);
}

/* Responsive adjustments for editor */
@media (max-width: 64em) {
  .lexxy-editor__content {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

@media (max-width: 48em) {
  .lexxy-editor__content {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

/* Lexxy Content (rendered/published content)
 * -------------------------------------------------------------------------- */

.lexxy-content {
  max-width: 65ch !important;
  margin-inline: auto;
  color: var(--color-ink);
  width: min(95%, 65ch);
  line-height: 1.6;
}



/* Prose Content Styling (Rich Text)
 * -------------------------------------------------------------------------- */

.prose {
  line-height: 1.8;
  color: var(--color-ink);
  max-width: none;
}

.prose p {
  margin-bottom: var(--size-4);
}

.prose p:last-child {
  margin-bottom: 0;
}

.prose h1,
.prose h2,
.prose h3,
.prose h4,
.prose h5,
.prose h6 {
  margin-top: var(--size-6);
  margin-bottom: var(--size-3);
  font-weight: 600;
}

.prose ul,
.prose ol {
  margin-bottom: var(--size-4);
  padding-left: var(--size-6);
}

.prose li {
  margin-bottom: var(--size-2);
}

.prose blockquote {
  border-left: 3px solid var(--color-primary);
  padding-left: var(--size-4);
  margin: var(--size-4) 0;
  font-style: italic;
  color: var(--color-ink--muted);
}