@import url("/application/themes/mathiasmars/css/main.css");

/*
 * MMDB CKEditor mapping only.
 *
 * ALL design values come from the canonical Mathias Mars main.css.
 * Do not duplicate typography values here.
 */

.cke_wysiwyg_div.cke_editable,
.cke_wysiwyg_div.cke_editable_themed {
    box-sizing: border-box !important;
    min-height: 200px !important;
    padding: 20px !important;

    background: var(--color-bg-main) !important;
    color: var(--color-text-body) !important;
    caret-color: var(--color-text-heading) !important;

    font-family: "Jost", sans-serif !important;
    font-size: var(--mmdb-rich-text-font-size) !important;
    font-weight: 400 !important;
    line-height: var(--mmdb-rich-text-line-height) !important;

    outline: 0 !important;
}

.cke_wysiwyg_div.cke_editable h1 {
    margin-top: var(--site-h1-margin-top) !important;
    margin-bottom: var(--site-h1-margin-bottom) !important;

    color: var(--site-heading-color) !important;

    font-family: "Jost", sans-serif !important;
    font-size: var(--site-h1-size) !important;
    font-weight: var(--site-h1-weight) !important;
    line-height: var(--site-h1-line-height) !important;
    letter-spacing: var(--site-h1-letter-spacing) !important;

    text-wrap: balance;
}

.cke_wysiwyg_div.cke_editable h2,
.cke_wysiwyg_div.cke_editable h3,
.cke_wysiwyg_div.cke_editable h4 {
    margin: var(--site-subheading-margin) !important;

    color: var(--site-heading-color) !important;

    font-family: "Jost", sans-serif !important;
    font-weight: var(--site-subheading-weight) !important;
    line-height: var(--site-subheading-line-height) !important;
    letter-spacing: var(--site-subheading-letter-spacing) !important;
}

.cke_wysiwyg_div.cke_editable h2 {
    font-size: var(--site-h2-size) !important;
}

.cke_wysiwyg_div.cke_editable h3 {
    font-size: var(--site-h3-size) !important;
}

.cke_wysiwyg_div.cke_editable h4 {
    font-size: var(--site-h4-size) !important;
}

.cke_wysiwyg_div.cke_editable h1 + h2 {
    margin-top: 0.19em !important;
}

.cke_wysiwyg_div.cke_editable p,
.cke_wysiwyg_div.cke_editable ul,
.cke_wysiwyg_div.cke_editable ol,
.cke_wysiwyg_div.cke_editable blockquote {
    margin-top: 0 !important;
    margin-bottom: var(--mmdb-rich-text-block-spacing) !important;
}

.cke_wysiwyg_div.cke_editable ul,
.cke_wysiwyg_div.cke_editable ol {
    padding-left: var(--mmdb-rich-text-list-padding) !important;
}

.cke_wysiwyg_div.cke_editable li {
    margin: var(--mmdb-rich-text-list-item-spacing) 0 !important;
}

.cke_wysiwyg_div.cke_editable > :first-child {
    margin-top: 0 !important;
}

.cke_wysiwyg_div.cke_editable > :last-child {
    margin-bottom: 0 !important;
}

.cke_wysiwyg_div.cke_editable a {
    display: inline !important;
    margin: 0 !important;
    padding: 0 !important;

    color: var(--color-text-link) !important;

    text-decoration-color: var(--color-border-link) !important;
    text-decoration-thickness: 1px !important;
    text-underline-offset: 0.18em !important;
}

.cke_wysiwyg_div.cke_editable a:hover,
.cke_wysiwyg_div.cke_editable a:focus {
    text-decoration-color: var(--color-text-link-hover) !important;
}

.cke_wysiwyg_div.cke_editable strong,
.cke_wysiwyg_div.cke_editable b {
    color: var(--color-text-emphasis) !important;
    font-weight: 500 !important;
}

.cke_wysiwyg_div.cke_editable blockquote {
    padding-left: var(--mmdb-rich-text-blockquote-padding) !important;
    color: var(--color-text-main) !important;
    border-left: 2px solid var(--color-border-emphasis) !important;
}

.cke_wysiwyg_div.cke_editable img,
.cke_wysiwyg_div.cke_editable video,
.cke_wysiwyg_div.cke_editable iframe {
    max-width: 100% !important;
    border-radius: clamp(10px, 1.3vw, 18px) !important;
}

.cke_wysiwyg_div.cke_editable span {
    font-family: inherit;
}

@media (max-width: 800px) {
    .cke_wysiwyg_div.cke_editable {
        font-size: var(--mmdb-rich-text-mobile-font-size) !important;
        line-height: var(--mmdb-rich-text-mobile-line-height) !important;
    }
}