/* 
  Global Typography System 
  Ensures headings and lists look correct in both Frontend and CKEditor
*/

.prose,
.ck-content,
.editor-content {
    line-height: 1.8;
    color: var(--text-light, #4b5563);
    font-family: var(--font-main, inherit);
}

/* Fluid Heading Scale - Standardized and Consistent */
.prose h1,
.ck-content h1,
.editor-content h1,
.prose h2,
.ck-content h2,
.editor-content h2,
.prose h3,
.ck-content h3,
.editor-content h3,
.prose h4,
.ck-content h4,
.editor-content h4,
.prose h5,
.ck-content h5,
.editor-content h5,
.prose h6,
.ck-content h6,
.editor-content h6 {
    font-family: var(--font-heading, inherit);
    color: var(--text-dark, #111827);
    margin-top: 1.5em;
    margin-bottom: 0.8em;
    line-height: 1.25;
    font-weight: 800;
    letter-spacing: -0.015em;
}

.prose h1,
.ck-content h1,
.editor-content h1 {
    font-size: clamp(2.25rem, 5vw, 3rem);
}

.prose h2,
.ck-content h2,
.editor-content h2 {
    font-size: clamp(1.75rem, 4vw, 2.25rem);
}

.prose h3,
.ck-content h3,
.editor-content h3 {
    font-size: clamp(1.4rem, 3vw, 1.75rem);
}

.prose h4,
.ck-content h4,
.editor-content h4 {
    font-size: clamp(1.2rem, 2vw, 1.4rem);
}

.prose h5,
.ck-content h5,
.editor-content h5 {
    font-size: 1.1rem;
}

.prose h6,
.ck-content h6,
.editor-content h6 {
    font-size: 1rem;
}

/* Fix List Images (Markers) Visibility */
.prose ul,
.ck-content ul,
.editor-content ul {
    list-style-type: disc !important;
    padding-left: 1.5em !important;
    margin: 1.5em 0 !important;
}

.prose ol,
.ck-content ol,
.editor-content ol {
    list-style-type: decimal !important;
    padding-left: 1.5em !important;
    margin: 1.5em 0 !important;
}

.prose li,
.ck-content li,
.editor-content li {
    margin-bottom: 0.6em;
    padding-left: 0.4em;
}

/* Marker Styling */
.prose ul li::marker,
.ck-content ul li::marker,
.editor-content ul li::marker {
    color: var(--primary);
}

.prose ol li::marker,
.ck-content ol li::marker,
.editor-content ol li::marker {
    color: var(--primary);
    font-weight: 800;
}

.prose p,
.ck-content p,
.editor-content p {
    margin-top: 1.25em;
    margin-bottom: 1.25em;
}

.prose strong,
.ck-content strong,
.editor-content strong {
    font-weight: 700;
}

.prose blockquote,
.ck-content blockquote,
.editor-content blockquote {
    font-weight: 500;
    font-style: italic;
    color: var(--text-dark);
    border-left: 4px solid var(--primary);
    padding-left: 1.5em;
    margin: 2em 0;
    background: rgba(var(--primary-rgb, 198, 40, 40), 0.03);
    padding-top: 1rem;
    padding-bottom: 1rem;
    border-radius: 0 1rem 1rem 0;
}

/* Dark Mode Overrides */
.dark .prose,
.dark .ck-content,
.dark .editor-content {
    color: #9ca3af;
}

.dark .prose h1,
.dark .prose h2,
.dark .prose h3,
.dark .prose h4,
.dark .prose h5,
.dark .prose h6,
.dark .ck-content h1,
.dark .ck-content h2,
.dark .ck-content h3,
.dark .ck-content h4,
.dark .ck-content h5,
.dark .ck-content h6,
.dark .editor-content h1,
.dark .editor-content h2,
.dark .editor-content h3,
.dark .editor-content h4,
.dark .editor-content h5,
.dark .editor-content h6 {
    color: #ffffff;
}

.dark .prose blockquote,
.dark .ck-content blockquote,
.dark .editor-content blockquote {
    color: #e5e7eb;
    background: rgba(255, 255, 255, 0.03);
}