/*
 * WebCMS shared rich-text content styles.
 *
 * This stylesheet is the contract between TinyMCE's iframe and public
 * content. Themes provide the --content-* tokens; the fallbacks keep the
 * editor readable before a theme stylesheet is available.
 */
.richtext {
    overflow-x: auto;
    font-family: var(--bs-font-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
    font-size: var(--content-font-size, 15px);
    line-height: var(--content-line-height, 1.85);
    color: var(--content-text, #334155);
}

.richtext h1, .richtext h2, .richtext h3,
.richtext h4, .richtext h5, .richtext h6 {
    margin-top: 1.6em;
    margin-bottom: .75em;
    font-weight: 700;
    line-height: 1.2;
    color: var(--content-heading, #0f172a);
}

.richtext h1 { font-size: calc(1.375rem + 1.5vw); }
.richtext h2 { font-size: calc(1.325rem + .9vw); }
.richtext h3 { font-size: calc(1.3rem + .6vw); }
.richtext h4 { font-size: calc(1.275rem + .3vw); }
.richtext h5 { font-size: 1.25rem; }
.richtext h6 { font-size: 1rem; }

.richtext > :first-child {
    margin-top: 0;
}

.richtext h2 {
    position: relative;
    padding-bottom: .4em;
    border-bottom: 2px solid var(--content-border, #e2e8f0);
}

.richtext h2::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 52px;
    height: 2px;
    background: var(--content-gradient, linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%));
}

.richtext p {
    margin-top: 0;
    margin-bottom: 1.25em;
    text-indent: var(--content-paragraph-indent, 0);
}

.richtext p:has(> img) {
    text-indent: 0;
}

.richtext a {
    color: var(--content-accent, #4f46e5);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.richtext a:hover { color: var(--content-accent-hover, #7c3aed); }

.richtext img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 1.5em auto;
}

.richtext video {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 1.5em 0;
    border-radius: var(--content-radius-sm, .625rem);
}

.richtext audio {
    display: block;
    width: 100%;
    margin: 1.5em 0;
}

.richtext iframe {
    display: block;
    max-width: 100%;
    margin: 1.5em auto;
    border: 0;
}

.richtext blockquote {
    margin: 1.5em 0;
    padding: 1em 1.4em;
    border-left: 4px solid var(--content-accent, #4f46e5);
    border-radius: 0 var(--content-radius-sm, .625rem) var(--content-radius-sm, .625rem) 0;
    background: var(--content-soft-bg, rgba(79, 70, 229, .08));
    color: var(--content-text, #334155);
}

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

.richtext pre {
    overflow-x: auto;
    margin: 1.5em 0;
    padding: 1.3em;
    border-radius: var(--content-radius-sm, .625rem);
    background: var(--content-code-bg, #0f172a);
    color: var(--content-code-text, #e2e8f0);
    font-size: .875rem;
    line-height: 1.65;
}

.richtext code {
    padding: .2em .45em;
    border-radius: .3rem;
    background: var(--content-inline-code-bg, rgba(79, 70, 229, .1));
    color: var(--content-accent-hover, #7c3aed);
    font-family: "SF Mono", "Fira Code", "Fira Mono", "Roboto Mono", monospace;
    font-size: .875em;
}

.richtext pre code {
    padding: 0;
    background: none;
    color: inherit;
}

.richtext ul, .richtext ol {
    margin-top: 0;
    margin-bottom: 1.25em;
    padding-left: 1.5em;
}

.richtext li { margin-bottom: .5em; }

.richtext table {
    width: 100%;
    margin-bottom: 1.5em;
    border-collapse: collapse;
}

.richtext th, .richtext td {
    padding: .75em;
    border: 0;
    text-align: center;
    vertical-align: middle;
}

.richtext td img {
    display: block;
    margin-inline: auto;
}

.richtext th {
    background: var(--content-soft-bg, rgba(79, 70, 229, .08));
    font-weight: 600;
}

.richtext figure {
    display: table;
    max-width: 100%;
    margin: 1rem auto;
}

.richtext figcaption {
    display: table-caption;
    caption-side: bottom;
    padding: .5rem 0;
    color: var(--content-muted, #64748b);
    font-size: .875em;
    text-align: center;
}

.richtext hr {
    margin: 2em 0;
    border: 0;
    border-top: 1px solid var(--content-border, #e2e8f0);
}

@media (max-width: 640px) {
    .richtext table { min-width: max-content; }
}

@media (min-width: 1200px) {
    .richtext h1 { font-size: 2.5rem; }
    .richtext h2 { font-size: 2rem; }
    .richtext h3 { font-size: 1.75rem; }
    .richtext h4 { font-size: 1.5rem; }
}
.richtext .task-list {
    padding-left: 0;
    list-style: none;
}

.richtext .task-list-item {
    position: relative;
    padding-left: 1.75em;
    list-style: none;
}

.richtext .task-list-item::before {
    position: absolute;
    top: .35em;
    left: 0;
    width: 1em;
    height: 1em;
    border: 1px solid var(--content-border, #cbd5e1);
    border-radius: .2em;
    background: transparent;
    content: "";
}

.richtext .task-list-item[data-checked="true"]::before {
    border-color: var(--content-accent, #4f46e5);
    background: var(--content-accent, #4f46e5);
    box-shadow: inset 0 0 0 .2em var(--content-soft-bg, #fff);
}