/* assets/css/rich-content.css
   Shared typography for WYSIWYG content. Loaded both as a normal stylesheet
   on public pages (course details, journeys, blog, lesson player) and as
   TinyMCE's `content_css` inside the editor iframe, so the editing surface
   and the rendered page always look the same. */

.rich-content {
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
    color: #334155;
    font-size: 15px;
    line-height: 1.75;
    word-wrap: break-word;
}
.rich-content > *:first-child { margin-top: 0; }
.rich-content > *:last-child { margin-bottom: 0; }

.rich-content p { margin: 0 0 1em; }

.rich-content h1, .rich-content h2, .rich-content h3, .rich-content h4 {
    font-weight: 800;
    color: #0f172a;
    line-height: 1.3;
}
.rich-content h1 { font-size: 1.85em; margin: 1.4em 0 .5em; }
.rich-content h2 { font-size: 1.5em; margin: 1.3em 0 .5em; }
.rich-content h3 { font-size: 1.25em; font-weight: 700; margin: 1.2em 0 .5em; }
.rich-content h4 { font-size: 1.05em; font-weight: 700; margin: 1.1em 0 .4em; }

.rich-content strong, .rich-content b { font-weight: 700; color: #1e293b; }
.rich-content em, .rich-content i { font-style: italic; }

.rich-content a { color: #2563eb; text-decoration: underline; text-underline-offset: 2px; }
.rich-content a:hover { color: #1d4ed8; }

.rich-content ul, .rich-content ol { margin: 0 0 1em; padding-left: 1.4em; }
.rich-content li { margin: .3em 0; }
.rich-content ul { list-style-type: disc; }
.rich-content ol { list-style-type: decimal; }
.rich-content { overflow-wrap: anywhere; display: flow-root; }
.rich-content table { display: block; max-width: 100%; overflow-x: auto; }
/* Keep imported comparison tables readable on phones; scroll within the table. */
@media (max-width: 640px) {
    .rich-content th, .rich-content td {
        min-width: 10rem;
        overflow-wrap: normal;
        word-break: normal;
    }
}
.rich-content li.ql-indent-1, .rich-content .ql-indent-1 { margin-left: 1.5em; }
.rich-content li.ql-indent-2, .rich-content .ql-indent-2 { margin-left: 3em; }
.rich-content li.ql-indent-3, .rich-content .ql-indent-3 { margin-left: 4.5em; }
.rich-content .ql-align-center { text-align: center; }
.rich-content .ql-align-right { text-align: right; }
.rich-content .ql-align-justify { text-align: justify; }

/* Checklist (matches TinyMCE's native checklist markup) */
.rich-content ul:is(.tox-checklist, .ec-checklist) { list-style: none; padding-left: .2em; }
.rich-content ul:is(.tox-checklist, .ec-checklist) li { position: relative; padding-left: 1.6em; }
.rich-content ul:is(.tox-checklist, .ec-checklist) li::before {
    content: '';
    position: absolute; left: 0; top: .2em;
    width: 1.05em; height: 1.05em;
    border: 1.5px solid #cbd5e1; border-radius: 4px; background: #fff;
}
.rich-content ul:is(.tox-checklist, .ec-checklist) li:is(.tox-checklist--checked, .ec-checklist-checked) { color: #94a3b8; text-decoration: line-through; }
.rich-content ul:is(.tox-checklist, .ec-checklist) li:is(.tox-checklist--checked, .ec-checklist-checked)::before {
    background-color: #2563eb; border-color: #2563eb;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'%3E%3Cpath d='M13.7 4.3a1 1 0 0 1 0 1.4l-6 6a1 1 0 0 1-1.4 0l-3-3a1 1 0 1 1 1.4-1.4L7 9.6l5.3-5.3a1 1 0 0 1 1.4 0z'/%3E%3C/svg%3E");
    background-size: 70%; background-position: center; background-repeat: no-repeat;
}

.rich-content blockquote {
    margin: 1.2em 0; padding: .6em 1.2em;
    border-left: 3px solid #E50914; background: #fef2f2;
    color: #475569; font-style: italic; border-radius: 0 .5rem .5rem 0;
}

.rich-content hr { border: none; border-top: 1px solid #e2e8f0; margin: 2em 0; }

.rich-content img { max-width: 100%; height: auto; border-radius: .5rem; }
.rich-content figure { margin: 1.4em 0; }
.rich-content figure.image { text-align: center; }
.rich-content figcaption { font-size: .85em; color: #94a3b8; margin-top: .4em; text-align: center; }

.rich-content table { width: 100%; border-collapse: collapse; margin: 1.2em 0; font-size: .95em; }
.rich-content th, .rich-content td { border: 1px solid #e2e8f0; padding: .6em .8em; text-align: left; vertical-align: top; }
.rich-content th { background: #f8fafc; font-weight: 700; color: #0f172a; }

.rich-content code { background: #f1f5f9; color: #E50914; padding: .15em .4em; border-radius: .25rem; font-size: .9em; }
.rich-content pre { background: #0f172a; color: #e2e8f0; padding: 1em; border-radius: .6rem; overflow-x: auto; }
.rich-content pre code { background: none; color: inherit; padding: 0; }

.rich-content iframe { max-width: 100%; width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; border-radius: .5rem; }
.rich-content video, .rich-content audio { max-width: 100%; border-radius: .5rem; }

.rich-content sup, .rich-content sub { font-size: .75em; }

/* Inside the TinyMCE editor iframe, body_class="rich-content" is applied
   directly to <body>, so give it a touch of breathing room to match the
   padding a real content block would have. */
body.rich-content { padding: 12px 16px; }