/* CKEditor 5 content styles for the public site.
   The editor only ships these styles inside the admin, so HTML saved from it
   (posts, events, promotions, abouts, categories) loses image alignment,
   resizing, captions and table layout on the frontend. The selectors below
   target the classes CKEditor writes into the saved HTML, so they work
   wherever that HTML is printed; wrap it in .ck-content to also pick up the
   general typography rules at the bottom. */

/* ---------- Images ---------- */

figure.image {
    display: table;
    clear: both;
    text-align: center;
    margin: 0.9em auto;
    min-width: 50px;
}

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

/* Inline images (imageStyle:inline) */
img.image_resized,
span.image-inline img,
.image-inline img {
    max-width: 100%;
    height: auto;
}

.image-inline {
    display: inline-flex;
    max-width: 100%;
    align-items: flex-start;
}

.image-inline img {
    flex-grow: 1;
    flex-shrink: 1;
    max-width: 100%;
}

/* Resized images: CKEditor puts the width on the figure (or on an inline img) */
figure.image.image_resized {
    max-width: 100%;
    display: block;
    box-sizing: border-box;
}

figure.image.image_resized img {
    width: 100%;
}

figure.image.image_resized > figcaption {
    display: block;
}

img.image_resized {
    height: auto;
}

/* Captions */
figure.image > figcaption {
    display: table-caption;
    caption-side: bottom;
    word-break: break-word;
    color: #555;
    background-color: #f7f7f7;
    padding: 0.6em;
    font-size: 0.75em;
    outline-offset: -1px;
}

/* imageStyle:side */
figure.image.image-style-side,
.image-style-side {
    float: right;
    margin-left: 1.5em;
    max-width: 50%;
}

/* imageStyle:wrapText (align left / right, text flows around) */
.image-style-align-left {
    float: left;
    margin-right: 1.5em;
}

.image-style-align-right {
    float: right;
    margin-left: 1.5em;
}

/* imageStyle:breakText (block left / centre / right, no text around) */
.image-style-block-align-left,
.image-style-block-align-right {
    max-width: calc(100% - 1.5em);
}

.image-style-block-align-left {
    margin-left: 0;
    margin-right: auto;
}

.image-style-block-align-right {
    margin-right: 0;
    margin-left: auto;
}

.image-style-align-center {
    margin-left: auto;
    margin-right: auto;
}

p + .image-style-align-left,
p + .image-style-align-right,
p + .image-style-side {
    margin-top: 0;
}

.image-inline.image-style-align-left,
.image-inline.image-style-align-right {
    margin-top: 0.75em;
    margin-bottom: 0.75em;
}

.image-inline.image-style-align-left {
    margin-right: 0.75em;
}

.image-inline.image-style-align-right {
    margin-left: 0.75em;
}

/* Contain floated images so they don't spill out of the content block */
.ck-content::after {
    content: "";
    display: table;
    clear: both;
}

/* On phones, stop floats so text isn't squeezed beside the image */
@media (max-width: 575.98px) {
    figure.image.image-style-side,
    .image-style-side,
    .image-style-align-left,
    .image-style-align-right {
        float: none;
        margin-left: auto;
        margin-right: auto;
        max-width: 100%;
    }

    figure.image.image_resized {
        width: 100% !important;
    }
}

/* ---------- Tables ---------- */
/* CKEditor wraps tables in <figure class="table">, which collides with
   Bootstrap's .table class, so reset that first. */

figure.table {
    display: table;
    width: auto;
    margin: 0.9em auto;
    color: inherit;
    vertical-align: initial;
    border-color: initial;
    overflow-x: auto;
    max-width: 100%;
}

figure.table > :not(caption) > * > * {
    padding: 0;
    background-color: transparent;
    border-bottom-width: 0;
    box-shadow: none;
}

figure.table > :not(caption) > * {
    border-width: 0;
}

figure.table table {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
    height: 100%;
    border: 1px double #b3b3b3;
}

figure.table table td,
figure.table table th {
    min-width: 2em;
    padding: 0.4em;
    border: 1px solid #bfbfbf;
}

figure.table table th {
    font-weight: bold;
    background: rgba(0, 0, 0, 0.05);
}

figure.table > figcaption {
    display: table-caption;
    caption-side: top;
    word-break: break-word;
    text-align: center;
    color: #333;
    background-color: #f7f7f7;
    padding: 0.6em;
    font-size: 0.75em;
}

@media (max-width: 767.98px) {
    figure.table {
        display: block;
        width: 100% !important;
    }
}

/* ---------- Media embed ---------- */

figure.media {
    clear: both;
    margin: 0.9em 0;
    display: block;
    min-width: 15em;
}

figure.media iframe {
    max-width: 100%;
}

/* ---------- Font size presets ---------- */

.text-tiny { font-size: 0.7em; }
.text-small { font-size: 0.85em; }
.text-big { font-size: 1.4em; }
.text-huge { font-size: 1.8em; }

/* ---------- Highlight markers ---------- */

.marker-yellow { background-color: #fdfd77; }
.marker-green { background-color: #62f962; }
.marker-pink { background-color: #fc7899; }
.marker-blue { background-color: #72ccfd; }
.pen-red { color: #e71313; background-color: transparent; }
.pen-green { color: #128a00; background-color: transparent; }

/* ---------- General typography (inside .ck-content) ---------- */

.ck-content blockquote {
    overflow: hidden;
    padding-right: 1.5em;
    padding-left: 1.5em;
    margin-left: 0;
    margin-right: 0;
    font-style: italic;
    border-left: 5px solid #ccc;
}

.ck-content pre {
    padding: 1em;
    color: #353535;
    background: rgba(199, 199, 199, 0.3);
    border-radius: 2px;
    text-align: left;
    direction: ltr;
    tab-size: 4;
    white-space: pre-wrap;
    font-style: normal;
    min-width: 200px;
}

.ck-content pre code {
    background: unset;
    padding: 0;
    border-radius: 0;
}

.ck-content ul,
.ck-content ol {
    padding-left: 2em;
    margin-bottom: 1em;
}

.ck-content ul { list-style-type: disc; }
.ck-content ul ul { list-style-type: circle; }
.ck-content ul ul ul { list-style-type: square; }
.ck-content ol { list-style-type: decimal; }
.ck-content ol ol { list-style-type: lower-latin; }
.ck-content ol ol ol { list-style-type: lower-roman; }

.ck-content a {
    text-decoration: underline;
}

.ck-content hr {
    margin: 15px 0;
    height: 4px;
    background: #ddd;
    border: 0;
    opacity: 1;
}

.ck-content p:empty {
    min-height: 1em;
}