/* ========================================
   HTML EDITOR CONTENT
   Shared by the website (.edhtml) and the WSM5 html editor (TinyMCE body .mce-content-body,
   loaded through Triesen.Website.Web/wwwroot/styles/editor.css).
   ======================================== */

:is(.edhtml, .mce-content-body) {
    --content-line-height: 2rem;
    line-height: var(--content-line-height);
}

@media (min-width: 64rem) {
    :is(.edhtml, .mce-content-body) {
        --content-line-height: 2.25rem;
    }
}

:is(.edhtml, .mce-content-body) p {
    font-size: 1.25rem;
    font-style: normal;
    font-weight: 400;
    letter-spacing: 0.4px;
}

:is(.edhtml, .mce-content-body) :is(p, li) {
    line-height: var(--content-line-height);
}

/* "Titel": the same look as the title of a content block. h1/h2 only occur in old content. */
.contentblock_title,
:is(.edhtml, .mce-content-body) :is(h1, h2, h3) {
    color: var(--blue-4);
    font-family: var(--font-family-heading);
    font-size: 2.25rem;
    font-style: normal;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.76px;
    hyphens: auto;
}

.contentblock_title {
    padding-bottom: 0.75rem;
}

/* "Zwischentitel". h5/h6 only occur in old content. */
:is(.edhtml, .mce-content-body) :is(h4, h5, h6) {
    color: var(--gray-aa);
    font-family: var(--font-family-body);
    font-size: 1.5rem;
    font-style: normal;
    font-weight: 600;
    line-height: 2.25rem;
    letter-spacing: 0.48px;
}

/* ========================================
   SPACING
   Every block gets its space above it from the previous sibling, so the first block never has one.
   ======================================== */

:is(.edhtml, .mce-content-body) :is(p, h1, h2, h3, h4, h5, h6, ul, ol, table) {
    margin-top: 0;
    margin-bottom: 0;
}

:is(.edhtml, .mce-content-body) :is(p, h1, h2, h3, h4, h5, h6, ul, ol, table) + :is(p, h1, h2, h3, h4, h5, h6, ul, ol, table) {
    margin-top: var(--content-line-height);
}

:is(.edhtml, .mce-content-body) p + :is(ul, ol) {
    margin-top: 0;
}

:is(.edhtml, .mce-content-body) :is(h1, h2, h3, h4, h5, h6) + :is(p, h4, h5, h6, ul, ol, table) {
    margin-top: 0.75rem;
}

:is(.edhtml, .mce-content-body) :is(p, h1, h2, h3, h4, h5, h6, ul, ol, table) + :is(h1, h2, h3) {
    margin-top: var(--content-section-gap);
}

/* ======================================== */

:is(.edhtml, .mce-content-body) strong {
    font-weight: bold;
}

:is(.edhtml, .mce-content-body) :is(sub, sup) {
    line-height: 0;
}

:is(.edhtml, .mce-content-body) tr {
    line-height: normal;
}

/* Editor content is often rendered inside a layout <ul>, so the browser would treat its lists as nested. */
:is(.edhtml, .mce-content-body) ul {
    list-style-type: disc;
}

:is(.edhtml, .mce-content-body) ul ul {
    list-style-type: circle;
}

:is(.edhtml, .mce-content-body) ul ul ul {
    list-style-type: square;
}

/* Website only: the editor iframe is narrower than the breakpoint and would always scroll tables. */
@media (max-width: 63.99rem) {
    .edhtml table {
        display: block;
        max-width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }

    .edhtml th,
    .edhtml td {
        white-space: nowrap;
    }
}