/* CKEditor 5 content styles (v41.4.2 GPL build) for CMS HTML rendered on public pages.
   Rules are copied from the .ck-content block of Content/ckeditor5.css and re-scoped to
   .content-html so published pages match what the editor shows in ContentAdmin.
   Keep in sync with Content/ckeditor5.css when the CKEditor build is upgraded. */

.content-html {
    --ck-content-image-style-spacing: 1.5em;
    --ck-content-inline-image-style-spacing: calc(var(--ck-content-image-style-spacing) / 2);
    --ck-content-table-style-spacing: 1.5em;
    --ck-content-color-image-caption-background: #f7f7f7;
    --ck-content-color-image-caption-text: #333;
    --ck-content-font-size-tiny: 0.7em;
    --ck-content-font-size-small: 0.85em;
    --ck-content-font-size-big: 1.4em;
    --ck-content-font-size-huge: 1.8em;
}

/* Contain floated figures so they do not spill out of the content column. */
.content-html:after {
    content: "";
    display: table;
    clear: both;
}

/* Block images */
.content-html .image {
    clear: both;
    display: table;
    margin: .9em auto;
    min-width: 50px;
    text-align: center;
}

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

/* Inline images */
.content-html .image-inline {
    align-items: flex-start;
    display: inline-flex;
    max-width: 100%;
}

.content-html .image-inline picture {
    display: flex;
}

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

/* Captions */
.content-html .image > figcaption {
    background-color: var(--ck-content-color-image-caption-background);
    caption-side: bottom;
    color: var(--ck-content-color-image-caption-text);
    display: table-caption;
    font-size: .75em;
    outline-offset: -1px;
    overflow-wrap: anywhere;
    padding: .6em;
    word-break: normal;
}

/* Resized images (the figure carries an inline width from the resize handles) */
.content-html img.image_resized {
    height: auto;
}

.content-html .image.image_resized {
    box-sizing: border-box;
    display: block;
    max-width: 100%;
}

.content-html .image.image_resized img {
    width: 100%;
}

.content-html .image.image_resized > figcaption {
    display: block;
}

/* Image alignment styles */
.content-html .image.image-style-block-align-left,
.content-html .image.image-style-block-align-right {
    max-width: calc(100% - var(--ck-content-image-style-spacing));
}

.content-html .image.image-style-align-left,
.content-html .image.image-style-align-right {
    clear: none;
}

.content-html .image.image-style-side {
    float: right;
    margin-left: var(--ck-content-image-style-spacing);
    max-width: 50%;
}

.content-html .image.image-style-align-left {
    float: left;
    margin-right: var(--ck-content-image-style-spacing);
}

.content-html .image.image-style-align-right {
    float: right;
    margin-left: var(--ck-content-image-style-spacing);
}

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

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

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

.content-html .image-style-align-left {
    float: left;
    margin-right: var(--ck-content-image-style-spacing);
}

.content-html .image-style-align-right {
    float: right;
    margin-left: var(--ck-content-image-style-spacing);
}

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

.content-html .image-inline.image-style-align-left,
.content-html .image-inline.image-style-align-right {
    margin-bottom: var(--ck-content-inline-image-style-spacing);
    margin-top: var(--ck-content-inline-image-style-spacing);
}

.content-html .image-inline.image-style-align-left {
    margin-right: var(--ck-content-inline-image-style-spacing);
}

.content-html .image-inline.image-style-align-right {
    margin-left: var(--ck-content-inline-image-style-spacing);
}

/* Table alignment styles. Base table borders/width live in css/style.css. */
.content-html .table.table-style-align-left {
    float: left;
    margin-right: var(--ck-content-table-style-spacing);
}

.content-html .table.table-style-align-right {
    float: right;
    margin-left: var(--ck-content-table-style-spacing);
}

.content-html .table.table-style-align-center {
    margin-left: auto;
    margin-right: auto;
}

.content-html .table.table-style-block-align-left {
    margin-left: 0;
    margin-right: auto;
}

.content-html .table.table-style-block-align-right {
    margin-left: auto;
    margin-right: 0;
}

/* Media embeds */
.content-html .media {
    clear: both;
    display: block;
    margin: .9em 0;
    min-width: 15em;
}

/* Horizontal line, block quote and inline code */
.content-html hr {
    background: #dedede;
    border: 0;
    height: 4px;
    margin: 15px 0;
}

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

.content-html code {
    background-color: hsla(0, 0%, 78%, .3);
    border-radius: 2px;
    padding: .15em;
}

/* Nested list markers */
.content-html ol {
    list-style-type: decimal;
}

.content-html ol ol {
    list-style-type: lower-latin;
}

.content-html ol ol ol {
    list-style-type: lower-roman;
}

.content-html ol ol ol ol {
    list-style-type: upper-latin;
}

.content-html ol ol ol ol ol {
    list-style-type: upper-roman;
}

.content-html ul {
    list-style-type: disc;
}

.content-html ul ul {
    list-style-type: circle;
}

.content-html ul ul ul,
.content-html ul ul ul ul {
    list-style-type: square;
}

/* Font size classes */
.content-html .text-tiny {
    font-size: var(--ck-content-font-size-tiny);
}

.content-html .text-small {
    font-size: var(--ck-content-font-size-small);
}

.content-html .text-big {
    font-size: var(--ck-content-font-size-big);
}

.content-html .text-huge {
    font-size: var(--ck-content-font-size-huge);
}