/**
 * -------------------------------------------------------------------------
 *
 * The styles for the Demo pages borrowed from CKEditor examples.
 *
 * -------------------------------------------------------------------------
 *
 * @package    MimimiFramework
 * @subpackage Examples / Static Pages only
 * @license    GPL-2.0
 *             https://opensource.org/license/gpl-2-0/
 * @copyright  2022 MiMiMi Community
 *             https://mimimi.software/
 *
 * -------------------------------------------------------------------------
 */

    @import url( '../reset.css' );
    @import url( '../fonts.css' );
    @import url( '../autoscale.css' );

    :root {
        --ck-color-base-border: #ccced1;
        --ck-spacing-unit: 0.6em;
        --ck-spacing-large: calc( var( --ck-spacing-unit ) * 1.5 );
        --ck-image-style-spacing: 1.5em;
        --ck-inline-image-style-spacing: calc( var( --ck-image-style-spacing ) / 2 );
        --ck-color-image-caption-background: #f7f7f7;
        --ck-color-image-caption-text: #333;

        --textColor: #263238;
        --linkColor: #48f;
        --linkHoverColor: #f44;
    }

    .to-left {
        text-align: left;
    }
    .center {
        text-align: center;
    }
    .to-right {
        text-align: right;
    }
    .justify {
        text-align: justify;
    }

    html {
        background: white;
        display: block;
        font-family: var( --fontName );
        font-size: var( --fontSize );
        width: 100vw;
    }

        body {
            color: var( --textColor );
            display: block;
            width: 100%;
        }

            body > .wrapper {
                padding: 1em;
            }

                body > .wrapper > .content {
                    max-width: 66%;
                    margin: 0 auto;
                }
                body > .wrapper > .content:not(:has(.ck-content)) {
                    border: 1px solid var( --ck-color-base-border );
                    padding: 1em;
                }
                @media (max-width: 959px) {
                    body > .wrapper > .content {
                        max-width: 100%;
                    }
                }

                    body > .wrapper > .content h1 {
                        font-size: 2.3em;
                    }
                    body > .wrapper > .content h2 {
                        font-size: 1.84em;
                    }
                    body > .wrapper > .content h3 {
                        font-size: 1.48em;
                    }
                    body > .wrapper > .content h4 {
                        font-size: 1.22em;
                    }
                    body > .wrapper > .content h5 {
                        font-size: 1.06em;
                    }
                    body > .wrapper > .content h6 {
                        font-size: 1em;
                    }
                    body > .wrapper > .content h1,
                    body > .wrapper > .content h2,
                    body > .wrapper > .content h3,
                    body > .wrapper > .content h4,
                    body > .wrapper > .content h5,
                    body > .wrapper > .content h6 {
                        font-weight: bold;
                        line-height: 1.2em;
                        margin-bottom: 0.4em;
                        overflow: hidden;
                        text-overflow: ellipsis;
                    }
                    body > .wrapper > .content h1:not(:first-child),
                    body > .wrapper > .content h2:not(:first-child),
                    body > .wrapper > .content h3:not(:first-child),
                    body > .wrapper > .content h4:not(:first-child),
                    body > .wrapper > .content h5:not(:first-child),
                    body > .wrapper > .content h6:not(:first-child) {
                        padding-top: 0.8em;
                    }

                    body > .wrapper > .content a {
                        color: var( --linkColor );
                        cursor: pointer;
                        text-decoration: underline;
                        vertical-align: initial;
                        overflow: hidden;
                        text-overflow: ellipsis;
                    }
                    body > .wrapper > .content a:hover,
                    body > .wrapper > .content a:active,
                    body > .wrapper > .content a:focus {
                        color: var( --linkHoverColor );
                    }
                    body > .wrapper > .content a * {
                        cursor: inherit;
                    }

                    body > .wrapper > .content b,
                    body > .wrapper > .content strong {
                        font-weight: bold;
                        vertical-align: initial;
                        overflow: hidden;
                        text-overflow: ellipsis;
                    }

                    body > .wrapper > .content i,
                    body > .wrapper > .content em {
                        font-style: italic;
                        vertical-align: initial;
                        overflow: hidden;
                        text-overflow: ellipsis;
                    }

                    body > .wrapper > .content u {
                        text-decoration: underline;
                        vertical-align: initial;
                        overflow: hidden;
                        text-overflow: ellipsis;
                    }

                    body > .wrapper > .content s {
                        text-decoration: line-through;
                        vertical-align: initial;
                        overflow: hidden;
                        text-overflow: ellipsis;
                    }

                    body > .wrapper > .content code {
                        background: var( --ck-color-base-border );
                        border-radius: 0.5em;
                        font-family: monospace;
                        padding: 0 0.5em;
                        vertical-align: initial;
                        overflow: hidden;
                        text-overflow: ellipsis;
                    }

                    body > .wrapper > .content sup {
                        vertical-align: super;
                        font-size: smaller;
                        overflow: hidden;
                        text-overflow: ellipsis;
                    }

                    body > .wrapper > .content sub {
                        vertical-align: sub;
                        font-size: smaller;
                        overflow: hidden;
                        text-overflow: ellipsis;
                    }

                    body > .wrapper > .content hr {
                        background: transparent;
                        border: none;
                        border-bottom: 0.33em solid #ccc;
                        display: block;
                        width: 100%;
                        height: 1px;
                        margin: 0 0 1rem;
                    }

                    body > .wrapper > .content pre {
                        border-left: 0.33em solid #ccc;
                        font-style: italic;
                        margin-left: 0;
                        margin-right: 0;
                        overflow: hidden;
                        padding-top: 0.2em;
                        padding-left: 1.5em;
                        padding-right: 1.5em;
                        font-family: monospace;
                        font-size: 1em;
                        line-height: 1.6em;
                        margin-bottom: var( --ck-spacing-large );
                    }

                        body > .wrapper > .content pre code {
                            background: transparent;
                            padding: 0;
                        }

                    body > .wrapper > .content blockquote {
                        border-left: 0.33em solid #ccc;
                        font-style: italic;
                        margin-left: 0;
                        margin-right: 0;
                        overflow: hidden;
                        padding-top: 0.2em;
                        padding-left: 1.5em;
                        padding-right: 1.5em;
                        font-size: 1em;
                        line-height: 1.6em;
                        margin-bottom: var( --ck-spacing-large );
                    }

                        body > .wrapper > .content blockquote * {
                            font-style: inherit;
                        }

                    body > .wrapper > .content p {
                        font-size: 1em;
                        line-height: 1.6em;
                        padding-top: 0.2em;
                        margin-bottom: var( --ck-spacing-large );
                    }

                    body > .wrapper > .content ol,
                    body > .wrapper > .content ul {
                        font-size: 1em;
                        line-height: 1.6em;
                        padding-top: 0.2em;
                        margin-bottom: var( --ck-spacing-large );
                        margin-left: 2.5em;
                    }

                    .content .image {
                        clear: both;
                        display: table;
                        margin: .9em auto;
                        min-width: 50px;
                        text-align: center;
                    }
                    .content .image.image-style-side {
                        float: right;
                        margin-left: var( --ck-image-style-spacing );
                        max-width: 50%;
                        width: 50%;
                    }
                    .content .image.image_resized {
                    }

                        .content .image > img {
                            display: block;
                            height: auto;
                            margin: 0 auto;
                            max-width: 100%;
                            min-width: 100%;
                        }

                        .content .image-style-align-left {
                            display: block;
                            height: auto;
                            margin: .9em auto;
                            float: left;
                            margin-right: var( --ck-image-style-spacing );
                            max-width: 50%;
                            width: 50%;
                        }

                        .content .image-style-align-right {
                            display: block;
                            height: auto;
                            margin: .9em auto;
                            float: right;
                            margin-left: var( --ck-image-style-spacing );
                            max-width: 50%;
                            width: 50%;
                        }

                        .content .image > figcaption {
                            background-color: var( --ck-color-image-caption-background );
                            caption-side: bottom;
                            color: var( --ck-color-image-caption-text );
                            display: table-caption;
                            font-size: .75em;
                            outline-offset: -1px;
                            padding: .6em;
                            word-break: break-word;
                            text-align: inherit;
                        }

                    .content .table {
                        clear: both;
                        display: table;
                        margin: .9em auto;
                    }

                body > .wrapper > .footnote {
                    max-width: 66%;
                    margin: 0.5em auto 0;
                    text-align: center;
                }
                body > .wrapper > .footnote:empty {
                    display: none !important;
                }
                @media (max-width: 959px) {
                    body > .wrapper > .footnote {
                        max-width: 100%;
                    }
                }

                    body > .wrapper > .footnote a,
                    body > .wrapper > .footnote summary {
                        color: inherit;
                        cursor: pointer;
                        margin: 0.5em 0.5em 0;
                        padding: 0;
                        text-decoration: none;
                        vertical-align: bottom;
                    }
                    body > .wrapper > .footnote .tools div {
                        background: white;
                        border-color: var( --ck-color-base-border );
                        bottom: 2rem;
                    }
                    body > .wrapper > .footnote a {
                        display: inline-block;
                    }
                    body > .wrapper > .footnote a:hover,
                    body > .wrapper > .footnote a:active,
                    body > .wrapper > .footnote a:focus,
                    body > .wrapper > .footnote summary:hover,
                    body > .wrapper > .footnote summary:active,
                    body > .wrapper > .footnote summary:focus {
                        color: var( --linkHoverColor );
                    }

    .ck.ck-content.ck-editor__editable_inline > :first-child {
        margin-top: 0;
    }

    /* ---- Balloon block editor styles ------------------------------------------------------------------- */
    .ck.ck-block-toolbar-button {
        transform: translateX(calc(var(--ck-spacing-large) * -1));
    }

    /* ---- Cross-editor content styles. --------------------------------------------------------------- */
    .ck.ck-content:not(.ck-style-grid__button__preview):not(.ck-editor__nested-editable) {
        /* Make sure all content containers have some min height to make them easier to locate. */
        min-height: 300px;
        padding: 1em 1.5em;
    }

    /* Fix for editor styles overflowing into comment reply fields */
    .ck-comment__input .ck.ck-content {
        min-height: unset;
        border: 0;
        padding: 0;
    }