/* Reset styles for article-editor */
.article-editor * {
    margin: revert;
}

/* Base styles for content */
.article-editor {
    font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: #333;
}

/* Paragraphs with proper spacing */
.article-editor p,
.article-paragraph {
    margin: 0 0 1.5em 0;
    font-size: 16px;
    line-height: 1.6;
}

/* Headers with proper spacing */
.article-editor h1,
.article-editor h2,
.article-editor h3,
.article-editor h4,
.article-header,
.article-subheader {
    margin: 1.5em 0 0.8em 0;
    padding: 0;
    font-weight: 500;
    color: #222;
    line-height: 1.3;
}

.article-editor h1 {
    font-size: 32px;
}

.article-editor h2,
.article-header {
    font-size: 28px;
}

.article-editor h3,
.article-subheader {
    font-size: 22px;
}

/* Quotes */
.article-editor blockquote,
.article-quote {
    margin: 1.5em 0;
    padding: 0.5em 0 0.5em 1em;
    border-left: 4px solid #6441a4;
    background-color: #f8f9fa;
    font-style: italic;
}

/* Code blocks */
.article-editor pre,
.article-code {
    margin: 1.5em 0;
    padding: 1em;
    background-color: #f5f5f5;
    border-radius: 4px;
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    white-space: pre-wrap;
    font-size: 14px;
    line-height: 1.4;
}

/* Lists */
.article-editor ul,
.article-editor ol {
    margin: 1em 0;
    padding: 0 0 0 2em;
}

.article-editor li {
    margin: 0 0 0.5em 0;
    padding: 0;
}

/* Images */
.article-editor img {
    max-width: 100%;
    height: auto;
    margin: 1.5em 0;
    border-radius: 4px;
    display: block;
}

/* Links */
.article-editor a {
    color: #6441a4;
    text-decoration: none;
}

.article-editor a:hover {
    text-decoration: underline;
}

/* Tables */
.article-editor table {
    width: 100%;
    margin: 1.5em 0;
    border-collapse: collapse;
}

/* First child elements shouldn't have top margin */
.article-editor > *:first-child {
    margin-top: 0;
}

/* Last child elements shouldn't have bottom margin */
.article-editor > *:last-child {
    margin-bottom: 0;
}

/* ===== Тёмная тема: CKEditor контент ===== */
[data-theme="dark"] .article-editor { color: var(--text-main); }
[data-theme="dark"] .article-editor p,
[data-theme="dark"] .article-paragraph { color: var(--text-main); }

[data-theme="dark"] .article-editor h1,
[data-theme="dark"] .article-editor h2,
[data-theme="dark"] .article-editor h3,
[data-theme="dark"] .article-editor h4,
[data-theme="dark"] .article-header,
[data-theme="dark"] .article-subheader { color: var(--text-main); }

[data-theme="dark"] .article-editor blockquote,
[data-theme="dark"] .article-quote {
    border-left-color: var(--brand);
    background-color: var(--surface);
    color: var(--text-main);
}

[data-theme="dark"] .article-editor pre,
[data-theme="dark"] .article-code {
    background-color: var(--card-bg);
    border: 1px solid var(--border);
    color: var(--text-main);
}

[data-theme="dark"] .article-editor a { color: var(--brand); }
[data-theme="dark"] .article-editor a:hover { color: var(--brand-hover); }

[data-theme="dark"] .article-editor table {
    background: var(--card-bg);
    border: 1px solid var(--border);
}
[data-theme="dark"] .article-editor th,
[data-theme="dark"] .article-editor td { border: 1px solid var(--border); }

/* ===== Улучшение читаемости заголовков на тёмной теме с color-mix() (CSS Color 5) ===== */
/* Фолбэк: если color-mix не поддерживается, останется var(--text-main) выше */
@supports (color: color-mix(in oklab, white, black)) {
  [data-theme="dark"] .article-editor {
    /* немного осветляем заголовки относительно основного текста */
    --article-heading-color: color-mix(in oklab, var(--text-main) 88%, white 12%);
  }
  [data-theme="dark"] .article-editor h1,
  [data-theme="dark"] .article-editor h2,
  [data-theme="dark"] .article-editor h3,
  [data-theme="dark"] .article-editor h4,
  [data-theme="dark"] .article-header,
  [data-theme="dark"] .article-subheader {
    color: var(--article-heading-color) !important;
  }
}