:root {
    --editor-richtext-padding-vertical: 1rem;
    --editor-border-radius: 0.25rem;

    --editor-accent-color-rgb: 34, 70, 136;
    --editor-margin-x: 15%;

    --editor-warning-color-rgb: 255, 0, 0;
    --editor-warning-color-opacity: 5;  /* 100 max / 0 min */

    --editor-info-color-rgb: 0, 21, 114;
    --editor-info-color-opacity: 5;     /* 100 max / 0 min */

    --editor-success-color-rgb: 0, 139, 26;
    --editor-success-color-opacity: 5;  /* 100 max / 0 min */

    --editor-button-text: #f3f3f3;
    --editor-button-bg: 47, 0, 92;
    --editor-button-bg-opacity: 80;     /* 100 max / 0 min */
    --editor-button-text-hover: #f3f3f3;
    --editor-button-bg-hover: 47, 0, 92;
    --editor-button-bg-hover-opacity: 100;     /* 100 max / 0 min */
}
*, *:before, *:after {
    box-sizing: border-box;
}
.wagtail-editorjs-richtext.wagtail-editorjs-richtext > * {
    /* margin: 0.75rem 0; */
    margin-top: 0;
    margin-bottom: 0;
    padding-top: calc(var(--editor-richtext-padding-vertical) / 2);
    padding-bottom: calc(var(--editor-richtext-padding-vertical) / 2);
}
.wagtail-editorjs-richtext.wagtail-editorjs-richtext h1,
.wagtail-editorjs-richtext.wagtail-editorjs-richtext h2,
.wagtail-editorjs-richtext.wagtail-editorjs-richtext h3,
.wagtail-editorjs-richtext.wagtail-editorjs-richtext h4,
.wagtail-editorjs-richtext.wagtail-editorjs-richtext h5,
.wagtail-editorjs-richtext.wagtail-editorjs-richtext h6 {
    margin: 0 0;
    padding: 0;
}
.wagtail-editorjs-richtext.wagtail-editorjs-richtext h1 {
    font-size: 2.5rem;
}
.wagtail-editorjs-richtext.wagtail-editorjs-richtext h2 {
    font-size: 2rem;
    line-height: 30pt;
}
.wagtail-editorjs-richtext.wagtail-editorjs-richtext h3 {
    font-size: 1.75rem;
    color: #555;
}
.wagtail-editorjs-richtext.wagtail-editorjs-richtext h4 {
    font-size: 1.5rem;
}
.wagtail-editorjs-richtext.wagtail-editorjs-richtext h5 {
    font-size: 1.25rem;
}
.wagtail-editorjs-richtext.wagtail-editorjs-richtext h6 {
    font-size: 1rem;
    margin: 0.1rem 0;
    padding: 0;
}
.wagtail-editorjs-richtext p {
    font-size: 1rem;
    margin: 0;
    padding: 0;
}

/* Inline links in text blocks (paragraph, headings, lists, etc.) — not block widgets. */
.wagtail-editorjs-richtext a:not(.editor-button):not(.attaches-link) {
    text-decoration-line: underline;
    text-decoration-style: dotted;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.15em;
    text-decoration-color: rgba(var(--editor-accent-color-rgb), 0.5);
}
.wagtail-editorjs-richtext a:not(.editor-button):not(.attaches-link):hover,
.wagtail-editorjs-richtext a:not(.editor-button):not(.attaches-link):focus-visible {
    text-decoration-color: rgba(var(--editor-accent-color-rgb), 0.9);
}

.wagtail-editorjs-richtext.wagtail-editorjs-richtext > :not(.stretched):is(.bg-stretched) {
    padding-left: calc(var(--editor-margin-x) / 5);
    padding-right: calc(var(--editor-margin-x) / 5);
}

.wagtail-editorjs-color-tuned {
    color: var(--text-color, inherit) !important;
    background-color: var(--background-color, inherit) !important;
}
.wagtail-editorjs-color-tuned * {
    color: var(--text-color, inherit) !important;
}

@media (min-width: 576px) {
    .wagtail-editorjs-richtext.wagtail-editorjs-richtext > :not(.stretched, .bg-stretched) {
        margin-left: calc(var(--editor-margin-x) / 5);
        margin-right: calc(var(--editor-margin-x) / 5);
    }
    .wagtail-editorjs-richtext.wagtail-editorjs-richtext > :not(.stretched):is(.bg-stretched) {
        padding-left: calc(var(--editor-margin-x) / 5);
        padding-right: calc(var(--editor-margin-x) / 5);
    }
}
@media (min-width: 768px) {
    .wagtail-editorjs-richtext.wagtail-editorjs-richtext > :not(.stretched, .bg-stretched) {
        margin-left: calc(var(--editor-margin-x) / 4);
        margin-right: calc(var(--editor-margin-x) / 4);
    }
    .wagtail-editorjs-richtext.wagtail-editorjs-richtext > :not(.stretched):is(.bg-stretched) {
        padding-left: calc(var(--editor-margin-x) / 4);
        padding-right: calc(var(--editor-margin-x) / 4);
    }
}
@media (min-width: 992px) {
    .wagtail-editorjs-richtext.wagtail-editorjs-richtext > :not(.stretched, .bg-stretched) {
        margin-left: calc(var(--editor-margin-x) / 3);
        margin-right: calc(var(--editor-margin-x) / 3);
    }
    .wagtail-editorjs-richtext.wagtail-editorjs-richtext > :not(.stretched):is(.bg-stretched) {
        padding-left: calc(var(--editor-margin-x) / 3);
        padding-right: calc(var(--editor-margin-x) / 3);
    }
}
@media (min-width: 1200px) {
    .wagtail-editorjs-richtext.wagtail-editorjs-richtext > :not(.stretched, .bg-stretched) {
        margin-left: calc(var(--editor-margin-x) / 2);
        margin-right: calc(var(--editor-margin-x) / 2);
    }
    .wagtail-editorjs-richtext.wagtail-editorjs-richtext > :not(.stretched):is(.bg-stretched) {
        padding-left: calc(var(--editor-margin-x) / 2);
        padding-right: calc(var(--editor-margin-x) / 2);
    }
}
@media (min-width: 1400px) {
    .wagtail-editorjs-richtext.wagtail-editorjs-richtext > :not(.stretched, .bg-stretched) {
        margin-left: var(--editor-margin-x);
        margin-right: var(--editor-margin-x);
    }
    .wagtail-editorjs-richtext.wagtail-editorjs-richtext > :not(.stretched):is(.bg-stretched) {
        padding-left: var(--editor-margin-x);
        padding-right: var(--editor-margin-x);
    }
}
.wagtail-editorjs-richtext > *:has(figure, img) {
    padding-top: 0;
    padding-bottom: 0;
}
.wagtail-editorjs-richtext figure {
    margin: 0;
    display: flex;
    flex-direction: column;
}
.wagtail-editorjs-richtext .with-background > img {
    padding: 0.5rem;
}
.wagtail-editorjs-richtext .with-background > figure {
    padding-top: 0.5em;
    background-color: var(--figure-bg);
}
.wagtail-editorjs-richtext :not(.stretched) > figure img {
    width: 60%;
    height: auto;
}
.wagtail-editorjs-richtext figure figcaption {
    padding: 0.5rem 0;
    font-size: 0.8rem;
    text-align: center;
    color: #f3f3f3;
    background-color: rgba(var(--editor-accent-color-rgb), 0.4);
}
.wagtail-editorjs-richtext .with-background > img,
.wagtail-editorjs-richtext .with-background:not(figure) > img {
    padding: 1rem;
}
.wagtail-editorjs-richtext > img,
.wagtail-editorjs-richtext :not(figure) > img {
    padding-top: 0;
    padding-bottom: 0;
    max-height: none;
    overflow: visible;
}
.wagtail-editorjs-richtext img {
    height: auto;
    width: 60%;
    max-width: 100%;
    flex-shrink: 0;
    object-fit: contain;
    cursor: zoom-in;
}
.wagtail-editorjs-richtext img.inline-image {
    height: 1.5em !important;
    width: auto !important;
    max-width: none !important;
    vertical-align: middle;
    display: inline;
    margin: 0 0.15em;
    object-fit: contain;
    cursor: inherit;
}
.wagtail-editorjs-richtext .stretched figure {
    width: 100%;
    max-width: 100%;
    overflow: visible;
}
.wagtail-editorjs-richtext .stretched figure img,
.wagtail-editorjs-richtext .stretched img {
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: none;
    overflow: visible;
    object-fit: contain;
    cursor: zoom-in;
}

.wagtail-editorjs-richtext .align-content-left {
    text-align: left;
}
.wagtail-editorjs-richtext .align-content-center {
    text-align: center;
}
.wagtail-editorjs-richtext .align-content-right {
    text-align: right;
}

.wagtail-editorjs-richtext .align-content-left figure,
.wagtail-editorjs-richtext .align-content-left img {
    display: block;
    margin-left: 0;
    margin-right: auto;
}

.wagtail-editorjs-richtext .align-content-right figure,
.wagtail-editorjs-richtext .align-content-right img {
    margin-left: auto;
    margin-right: 0;

}

.wagtail-editorjs-richtext .align-content-center figure,
.wagtail-editorjs-richtext .align-content-center img {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.wagtail-editorjs-richtext table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    margin: 0.5rem 0;
}
.wagtail-editorjs-richtext table th,
.wagtail-editorjs-richtext table td {
    padding: 0.5rem;
    border: 1px solid rgba(var(--editor-accent-color-rgb), 0.1);
}
.wagtail-editorjs-richtext table th {
    background-color: rgba(var(--editor-accent-color-rgb), 0.1);
}
.wagtail-editorjs-richtext table tr:nth-child(even) {
    background-color: rgba(var(--editor-accent-color-rgb), 0.01);
}
.wagtail-editorjs-richtext table tr:nth-child(odd) {
    background-color: rgba(var(--editor-accent-color-rgb), 0.03);
}


.wagtail-editorjs-richtext .warning {
    background: #e6f4ff;
    padding: 12px 16px 12px 44px;
    margin: 0.5rem 0;
    text-align: left;
    display: block;
    font-size: 1rem;
    font-style: italic;
    opacity: 0.8;
    color: grey;
    border-radius: 11px;
    margin-left: 0;
    position: relative;
    border: none;
}

.wagtail-editorjs-richtext .warning::before {
    content: '';
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    background: url("../../assets/icons/exclamation-annotation.svg") no-repeat center center;
    background-size: contain;
}

.wagtail-editorjs-richtext .warning h2 {
    margin: 0;
    margin-bottom: 0.2rem;
    padding: 0;
    font-size: 1.2rem;
    color: inherit;
    font-style: italic;
}

.wagtail-editorjs-richtext .warning p {
    margin: 0;
    padding: 0;
    color: inherit;
    font-style: italic;
}

/* .cdx-text-variant--details .ce-block__content, */
/* .cdx-text-variant--citation .ce-block__content, */

.wagtail-editorjs-richtext hr {
    margin: 2rem 0;
    border: 0;
    border-top: 1px solid rgba(var(--editor-accent-color-rgb), 0.1);

}

.wagtail-editorjs-richtext .inline-code {
    padding: 0.25rem;
    margin: 0.5rem 0.25rem;
    background-color: rgba(var(--editor-accent-color-rgb), 0.1);
    border-radius: var(--editor-border-radius);
    font-family: monospace;
    font-size: 0.9rem;
}

.wagtail-editorjs-richtext code.code {
    padding: 0.25rem;
    margin: 0.5rem 0;
    display: flex;
    background-color: rgba(var(--editor-accent-color-rgb), 0.1);
    border-radius: var(--editor-border-radius);
    font-family: monospace;
    font-size: 0.9rem;
    white-space: pre-wrap;
}


/* Attaches */
.wagtail-editorjs-richtext .attaches {
    padding: 0.5rem 1rem;
    margin-top: 0.75rem;
    margin-bottom: 0.75rem;
    border: 1px solid rgba(var(--editor-accent-color-rgb), 0.1);
    border-radius: var(--editor-border-radius);
    position: relative;
}
.wagtail-editorjs-richtext .attaches .attaches-title {
    margin: 0;
    padding: 0;
    font-size: 1.2rem;
    font-weight: bold;
}
.wagtail-editorjs-richtext .attaches .attaches-size {
    font-size: 0.8rem;
    color: rgba(var(--editor-accent-color-rgb), 0.5);
}
.wagtail-editorjs-richtext .attaches .attaches-link {
    display: inline-block;
    padding: 0.2rem 0.5rem;
    margin: 0;
    border: 2px solid rgba(var(--editor-accent-color-rgb), 0.1);
    border-radius: var(--editor-border-radius);
    text-decoration: none;
    color: inherit;
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
}
.wagtail-editorjs-richtext .attaches .attaches-link svg {
    vertical-align: middle;
    width: 1.3em;
    height: 1.3em;
}



/* Checklist Feature */
.wagtail-editorjs-richtext .checklist li {
    list-style-type: none;
    position: relative;
    padding-left: 1.5em;
}
.wagtail-editorjs-richtext .checklist li:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 1em;
    height: 1em;
    border: 1px solid rgba(var(--editor-accent-color-rgb), 0.1);
    border-radius: var(--editor-border-radius);
    background-color: rgba(var(--editor-accent-color-rgb), 0.1);
}
.wagtail-editorjs-richtext .checklist li.checked:before {
    content: "✔";
    display: flex;
    justify-content: center;
    align-items: center;
    color: rgba(var(--editor-success-color-rgb), 1);
    background-color: rgba(var(--editor-success-color-rgb), calc(var(--editor-success-color-opacity) / 100));
    border: 1px solid rgba(var(--editor-success-color-rgb), calc(var(--editor-success-color-opacity) / 10));
}


/* Text variant tunes */
.wagtail-editorjs-richtext .text-variant-details {
    margin: 1rem 0;
    padding: 0.5rem 1rem;
    border-radius: var(--editor-border-radius);
    border: 1px solid rgba(var(--editor-info-color-rgb), calc(var(--editor-info-color-opacity) / 10));
    background-color: rgba(var(--editor-info-color-rgb), calc(var(--editor-info-color-opacity) / 100));
    color: rgba(var(--editor-info-color-rgb), 1);
    font-size: 0.9rem;
}
.wagtail-editorjs-richtext .text-variant-call-out {
    font-size: 1.1rem;
    margin: 1rem 0;
    padding: 1rem 1.5rem;
    border-radius: var(--editor-border-radius);
    border: 1px solid rgba(var(--editor-warning-color-rgb), calc(var(--editor-warning-color-opacity) / 10));
    box-shadow: 0 0 0 5px rgba(var(--editor-warning-color-rgb), calc(var(--editor-warning-color-opacity) / 50));
}


/* Blockquote feature / text variant tune [citation] */
.wagtail-editorjs-richtext .text-variant-citation {
    margin: 1rem 0;
    padding: 0.5rem;
    border-radius: var(--editor-border-radius);
    border: 1px solid rgba(var(--editor-accent-color-rgb), 0.5);
    position: relative;
}
.wagtail-editorjs-richtext blockquote {
    padding: 0.5rem 1rem;
    margin: 0.5rem 0;
    border-left: 0.25rem solid rgba(var(--editor-accent-color-rgb), 0.1);
    background-color: rgba(var(--editor-accent-color-rgb), 0.05);
    border-radius: var(--editor-border-radius);
    position: relative;
}
.wagtail-editorjs-richtext blockquote footer {
    font-size: 0.8rem;
    color: rgba(var(--editor-accent-color-rgb), 0.5);
}
.wagtail-editorjs-richtext .text-variant-citation:before,
.wagtail-editorjs-richtext blockquote:before {
    content: "“";
    font-size: 2rem;
    color: rgba(var(--editor-accent-color-rgb), 0.5);
    position: absolute;
    top: 0;
    right: 1rem;
}
.wagtail-editorjs-richtext .align-content-right blockquote:before,
.wagtail-editorjs-richtext blockquote.align-content-right:before {
    left: 1rem;
    right: auto;
}


/* Nested list feature */
.wagtail-editorjs-richtext ol.nested-list {
    --d: var(--depth, 0);
    counter-reset: item;
    list-style-type: none;
    padding-left: calc(var(--d) * 1em);
}
.wagtail-editorjs-richtext ol.nested-list li {
    display: block;
    position: relative;
}
.wagtail-editorjs-richtext ol.nested-list li:before {
    content: counters(item, ".") ". ";
    counter-increment: item;
    position: relative;
    left: 0;
}


/* Image row feature. */
.wagtail-editorjs-richtext .image-row {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    width: 100%;
    gap: 0.5rem;
}
.wagtail-editorjs-richtext .image-row .image-wrapper {
    display: flex;
    flex: 1 0 15%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: visible;
    border: 1px solid rgba(var(--editor-accent-color-rgb), 0.1);
    min-width: 150px;
    min-height: 0;
    max-height: none;
}
.wagtail-editorjs-richtext .image-row .image-wrapper img {
    width: 100%;
    height: auto;
    object-fit: contain;
    margin: 0;
    flex-shrink: 0;
    cursor: zoom-in;
}


.wagtail-editorjs-richtext .editor-button {
    width: 100%;
    padding: 0.5rem;
    margin: 0.5rem 0;
    transition: background-color 0.2s, color 0.2s;
    border-radius: var(--editor-border-radius);
    border: 1px solid rgba(var(--editor-button-bg), min(calc(var(--editor-button-bg-opacity) / 10), 1));
    background-color: rgba(var(--editor-button-bg), calc(var(--editor-button-bg-opacity) / 100));
    color: var(--editor-button-text);
}
.wagtail-editorjs-richtext .editor-button:hover {
    background-color: rgba(var(--editor-button-bg-hover), calc(var(--editor-button-bg-hover-opacity) / 100));
    color: var(--editor-button-text-hover);
}

.wagtail-tooltip {
    cursor: help;
    color: rgba(var(--editor-accent-color-rgb), 1);
    text-decoration: dotted underline;
    text-underline-offset: 0.15em;
}