/**
 * STEMAIDE Typography - Prose Content Styles
 * This file defines the look and feel of rich-text content generated by TinyMCE.
 */

.prose {
    color: #475569; /* slate-600 */
    line-height: 1.8;
    font-size: 1.125rem; /* text-lg */
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
}

/* Headings */
.prose h1, .prose h2, .prose h3, .prose h4, .prose h5, .prose h6 {
    color: #010f4d; /* secondary */
    font-family: 'Poppins', sans-serif;
    font-weight: 800;
    margin-top: 2.5rem;
    margin-bottom: 1.25rem;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.prose h1 { font-size: 3rem; }
.prose h2 { font-size: 2.25rem; border-bottom: 2px solid #f1f5f9; padding-bottom: 0.75rem; }
.prose h3 { font-size: 1.875rem; }
.prose h4 { font-size: 1.5rem; }
.prose h5 { font-size: 1.25rem; }
.prose h6 { font-size: 1.125rem; }

/* Text elements */
.prose p {
    margin-bottom: 1.5rem;
}

.prose strong, .prose b {
    color: #010f4d;
    font-weight: 700;
}

.prose em, .prose i {
    font-style: italic;
}

.prose a {
    color: #1cb0c4; /* primary */
    text-decoration: underline;
    text-underline-offset: 4px;
    font-weight: 600;
    transition: color 0.2s;
}

.prose a:hover {
    color: #010f4d;
}

/* Lists */
.prose ul, .prose ol {
    margin-bottom: 1.5rem;
    padding-left: 1.75rem;
}

.prose ul { list-style-type: disc; }
.prose ol { list-style-type: decimal; }

.prose li {
    margin-bottom: 0.75rem;
    padding-left: 0.25rem;
}

.prose li::marker {
    color: #1cb0c4;
    font-weight: bold;
}

/* Blockquotes */
.prose blockquote {
    border-left: 4px solid #1cb0c4;
    padding: 1rem 0 1rem 1.5rem;
    font-style: italic;
    color: #64748b; /* slate-500 */
    background-color: #f8fafc;
    border-radius: 0 1rem 1rem 0;
    margin: 2.5rem 0;
}

.prose blockquote p {
    margin-bottom: 0;
}

/* Images & Media */
.prose img {
    max-width: 100%;
    height: auto; /* Default Proportional */
    border-radius: 1.5rem;
    margin: 2.5rem 0;
    box-shadow: 0 10px 25px -5px rgba(1, 15, 77, 0.1);
}

/* Fix for TinyMCE scaled images: 
   If TinyMCE adds width/height as attributes or inline styles, 
   we want to respect them but keep them responsive.
*/
.prose img[width], .prose img[style*="width"] {
    width: auto; /* Fallback to attribute/style width */
    max-width: 100%;
}

/* Tables */
.prose table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 2.5rem 0;
    border-collapse: collapse;
    font-size: 0.95rem;
}

.prose th {
    background-color: #f8fafc;
    text-align: left;
    font-weight: 700;
    color: #010f4d;
    padding: 0.75rem 1rem;
    border-bottom: 2px solid #e2e8f0;
}

.prose td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #f1f5f9;
}

/* Code */
.prose code {
    background-color: #f1f5f9;
    color: #e11d48; /* rose-600 */
    padding: 0.2rem 0.4rem;
    border-radius: 0.4rem;
    font-family: ui-monospace, monospace;
    font-size: 0.9em;
}

.prose pre {
    background-color: #0f172a;
    color: #f8fafc;
    padding: 1.5rem;
    border-radius: 1rem;
    overflow-x: auto;
    margin: 2rem 0;
}

.prose pre code {
    background-color: transparent;
    color: inherit;
    padding: 0;
}

/* Clearfix */
.prose::after {
    content: "";
    display: table;
    clear: both;
}