/* Shared rendering contract for rich text saved by the administration editor. */
/* Finite percentage classes work under the platform CSP without inline styles. */
figure.content-image-size-1 { width: 1%; }
figure.content-image-size-2 { width: 2%; }
figure.content-image-size-3 { width: 3%; }
figure.content-image-size-4 { width: 4%; }
figure.content-image-size-5 { width: 5%; }
figure.content-image-size-6 { width: 6%; }
figure.content-image-size-7 { width: 7%; }
figure.content-image-size-8 { width: 8%; }
figure.content-image-size-9 { width: 9%; }
figure.content-image-size-10 { width: 10%; }
figure.content-image-size-11 { width: 11%; }
figure.content-image-size-12 { width: 12%; }
figure.content-image-size-13 { width: 13%; }
figure.content-image-size-14 { width: 14%; }
figure.content-image-size-15 { width: 15%; }
figure.content-image-size-16 { width: 16%; }
figure.content-image-size-17 { width: 17%; }
figure.content-image-size-18 { width: 18%; }
figure.content-image-size-19 { width: 19%; }
figure.content-image-size-20 { width: 20%; }
figure.content-image-size-21 { width: 21%; }
figure.content-image-size-22 { width: 22%; }
figure.content-image-size-23 { width: 23%; }
figure.content-image-size-24 { width: 24%; }
figure.content-image-size-25 { width: 25%; }
figure.content-image-size-26 { width: 26%; }
figure.content-image-size-27 { width: 27%; }
figure.content-image-size-28 { width: 28%; }
figure.content-image-size-29 { width: 29%; }
figure.content-image-size-30 { width: 30%; }
figure.content-image-size-31 { width: 31%; }
figure.content-image-size-32 { width: 32%; }
figure.content-image-size-33 { width: 33%; }
figure.content-image-size-34 { width: 34%; }
figure.content-image-size-35 { width: 35%; }
figure.content-image-size-36 { width: 36%; }
figure.content-image-size-37 { width: 37%; }
figure.content-image-size-38 { width: 38%; }
figure.content-image-size-39 { width: 39%; }
figure.content-image-size-40 { width: 40%; }
figure.content-image-size-41 { width: 41%; }
figure.content-image-size-42 { width: 42%; }
figure.content-image-size-43 { width: 43%; }
figure.content-image-size-44 { width: 44%; }
figure.content-image-size-45 { width: 45%; }
figure.content-image-size-46 { width: 46%; }
figure.content-image-size-47 { width: 47%; }
figure.content-image-size-48 { width: 48%; }
figure.content-image-size-49 { width: 49%; }
figure.content-image-size-50 { width: 50%; }
figure.content-image-size-51 { width: 51%; }
figure.content-image-size-52 { width: 52%; }
figure.content-image-size-53 { width: 53%; }
figure.content-image-size-54 { width: 54%; }
figure.content-image-size-55 { width: 55%; }
figure.content-image-size-56 { width: 56%; }
figure.content-image-size-57 { width: 57%; }
figure.content-image-size-58 { width: 58%; }
figure.content-image-size-59 { width: 59%; }
figure.content-image-size-60 { width: 60%; }
figure.content-image-size-61 { width: 61%; }
figure.content-image-size-62 { width: 62%; }
figure.content-image-size-63 { width: 63%; }
figure.content-image-size-64 { width: 64%; }
figure.content-image-size-65 { width: 65%; }
figure.content-image-size-66 { width: 66%; }
figure.content-image-size-67 { width: 67%; }
figure.content-image-size-68 { width: 68%; }
figure.content-image-size-69 { width: 69%; }
figure.content-image-size-70 { width: 70%; }
figure.content-image-size-71 { width: 71%; }
figure.content-image-size-72 { width: 72%; }
figure.content-image-size-73 { width: 73%; }
figure.content-image-size-74 { width: 74%; }
figure.content-image-size-75 { width: 75%; }
figure.content-image-size-76 { width: 76%; }
figure.content-image-size-77 { width: 77%; }
figure.content-image-size-78 { width: 78%; }
figure.content-image-size-79 { width: 79%; }
figure.content-image-size-80 { width: 80%; }
figure.content-image-size-81 { width: 81%; }
figure.content-image-size-82 { width: 82%; }
figure.content-image-size-83 { width: 83%; }
figure.content-image-size-84 { width: 84%; }
figure.content-image-size-85 { width: 85%; }
figure.content-image-size-86 { width: 86%; }
figure.content-image-size-87 { width: 87%; }
figure.content-image-size-88 { width: 88%; }
figure.content-image-size-89 { width: 89%; }
figure.content-image-size-90 { width: 90%; }
figure.content-image-size-91 { width: 91%; }
figure.content-image-size-92 { width: 92%; }
figure.content-image-size-93 { width: 93%; }
figure.content-image-size-94 { width: 94%; }
figure.content-image-size-95 { width: 95%; }
figure.content-image-size-96 { width: 96%; }
figure.content-image-size-97 { width: 97%; }
figure.content-image-size-98 { width: 98%; }
figure.content-image-size-99 { width: 99%; }
figure.content-image-size-100 { width: 100%; }

.content-font-andale-mono {
    font-family: "Andale Mono", Monaco, Consolas, monospace;
}

.content-font-arial {
    font-family: Arial, Helvetica, sans-serif;
}

.content-font-arial-black {
    font-family: "Arial Black", Gadget, sans-serif;
}

.content-font-book-antiqua {
    font-family: "Book Antiqua", "Palatino Linotype", Palatino, serif;
}

.content-font-comic-sans-ms {
    font-family: "Comic Sans MS", "Comic Sans", cursive;
}

.content-font-courier-new {
    font-family: "Courier New", Courier, monospace;
}

.content-font-georgia {
    font-family: Georgia, "Times New Roman", serif;
}

.content-font-helvetica {
    font-family: Helvetica, Arial, sans-serif;
}

.content-font-impact {
    font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
}

.content-font-symbol {
    font-family: Symbol, "Segoe UI Symbol", sans-serif;
}

.content-font-tahoma {
    font-family: Tahoma, Geneva, sans-serif;
}

.content-font-terminal {
    font-family: Terminal, Monaco, Consolas, monospace;
}

.content-font-times-new-roman {
    font-family: "Times New Roman", Times, serif;
}

.content-font-trebuchet-ms {
    font-family: "Trebuchet MS", Geneva, sans-serif;
}

.content-font-verdana {
    font-family: Verdana, Geneva, sans-serif;
}

.content-font-webdings {
    font-family: Webdings, "Segoe UI Symbol", sans-serif;
}

.content-font-wingdings {
    font-family: Wingdings, "Zapf Dingbats", "Segoe UI Symbol", sans-serif;
}

.content-font-size-12 { font-size: 12px; }
.content-font-size-14 { font-size: 14px; }
.content-font-size-16 { font-size: 16px; }
.content-font-size-18 { font-size: 18px; }
.content-font-size-20 { font-size: 20px; }
.content-font-size-24 { font-size: 24px; }
.content-font-size-28 { font-size: 28px; }
.content-font-size-32 { font-size: 32px; }
.content-font-size-36 { font-size: 36px; }

.content-color-black { color: #111827; }
.content-color-gray { color: #6b7280; }
.content-color-red { color: #dc2626; }
.content-color-orange { color: #c2410c; }
.content-color-yellow { color: #a16207; }
.content-color-green { color: #15803d; }
.content-color-teal { color: #0f766e; }
.content-color-blue { color: #2563eb; }
.content-color-indigo { color: #4338ca; }
.content-color-purple { color: #7e22ce; }
.content-color-white { color: #fff; }

.content-media {
    box-sizing: border-box;
    max-width: 100%;
    margin: 1.25rem auto;
}

.content-media-responsive {
    width: min(100%, 960px);
}

.content-media-video video,
.content-media-youtube iframe {
    display: block;
    width: 100%;
    max-width: 100%;
    aspect-ratio: 16 / 9;
    border: 0;
    border-radius: 12px;
    background: #09090b;
}

.content-media-video video {
    object-fit: contain;
}

.content-media-video figcaption,
.content-media-youtube figcaption {
    margin-top: .55rem;
    color: #64748b;
    font-size: .875rem;
    line-height: 1.5;
    text-align: center;
}

.content-media-document {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem .75rem;
    padding: .9rem 1rem;
    border: 1px solid #dbe4e1;
    border-radius: 10px;
    background: #f8faf9;
}

.content-media-document > a {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    gap: .6rem;
    overflow-wrap: anywhere;
    font-weight: 700;
}

.content-media-document > a::before {
    content: "DOC";
    flex: 0 0 auto;
    padding: .2rem .35rem;
    border-radius: 4px;
    background: #166534;
    color: #fff;
    font-size: .65rem;
    line-height: 1.2;
    letter-spacing: .03em;
}

.content-media-document > small {
    color: #64748b;
    font-size: .78rem;
}

/* Public article images open at their original pixel size at every display width.
   The viewer is shared by Platform News, school profiles and every tenant theme. */
.article-image-viewer-trigger {
    cursor: zoom-in;
}

.article-image-viewer-trigger:focus-visible {
    outline: 3px solid #0f766e;
    outline-offset: 5px;
}

.article-image-viewer-host {
    position: relative;
}

span.article-image-viewer-host {
    display: inline-block;
    max-width: 100%;
}

.article-image-viewer__launch-controls {
    position: absolute;
    z-index: 2;
    top: 10px;
    right: 10px;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
    max-width: calc(100% - 20px);
}

.article-image-viewer__launch {
    display: grid;
    width: 44px;
    height: 44px;
    padding: 0;
    place-items: center;
    border: 1px solid rgb(255 255 255 / 72%);
    border-radius: 50%;
    background: rgb(9 52 45 / 88%);
    color: #fff;
    box-shadow: 0 6px 18px rgb(0 0 0 / 24%);
    font: 700 1.25rem/1 Arial, Helvetica, sans-serif;
    cursor: zoom-in;
}

.article-image-viewer__launch:hover,
.article-image-viewer__launch:focus-visible {
    background: #087465;
}

.article-image-viewer__launch:focus-visible {
    outline: 3px solid #0f766e;
    outline-offset: 3px;
}

body.article-image-viewer-open {
    overflow: hidden !important;
}

.article-image-viewer {
    inset: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 0;
    background: #09110f;
    color: #fff;
}

.article-image-viewer[open] {
    display: block;
}

.article-image-viewer::backdrop {
    background: rgb(2 8 6 / 88%);
}

.article-image-viewer__shell {
    display: flex;
    width: 100%;
    height: 100%;
    min-height: 0;
    flex-direction: column;
}

.article-image-viewer__toolbar {
    display: flex;
    min-height: 64px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 10px clamp(12px, 3vw, 28px);
    border-bottom: 1px solid rgb(255 255 255 / 18%);
    background: rgb(9 17 15 / 96%);
    box-sizing: border-box;
}

.article-image-viewer__heading {
    display: grid;
    min-width: 0;
    gap: 2px;
    color: #fff;
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.35;
}

.article-image-viewer__heading strong {
    font-size: .95rem;
}

.article-image-viewer__heading span {
    color: #cbd5d1;
    font-size: .78rem;
}

.article-image-viewer__source {
    width: max-content;
    color: #8fe0c7;
    font-size: .78rem;
    font-weight: 700;
    text-underline-offset: 3px;
}

.article-image-viewer__source[hidden] {
    display: none;
}

.article-image-viewer__controls {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 7px;
}

.article-image-viewer__controls button {
    display: inline-flex;
    min-width: 44px;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    padding: 7px 11px;
    border: 1px solid rgb(255 255 255 / 28%);
    border-radius: 9px;
    background: #18231f;
    color: #fff;
    font: 700 1rem/1 Arial, Helvetica, sans-serif;
    cursor: pointer;
}

.article-image-viewer__controls button:hover,
.article-image-viewer__controls button:focus-visible {
    border-color: #8fe0c7;
    background: #24483d;
}

.article-image-viewer__controls button:focus-visible {
    outline: 3px solid #8fe0c7;
    outline-offset: 2px;
}

.article-image-viewer__controls button:disabled {
    opacity: .42;
    cursor: not-allowed;
}

.article-image-viewer__controls [data-article-image-zoom-reset] {
    min-width: 68px;
    font-size: .82rem;
}

.article-image-viewer__controls .article-image-viewer__close {
    margin-left: 5px;
    border-color: rgb(255 255 255 / 38%);
    font-size: 1.35rem;
}

.article-image-viewer__viewport {
    min-width: 0;
    min-height: 0;
    flex: 1 1 auto;
    overflow: auto;
    overscroll-behavior: contain;
    background:
        linear-gradient(45deg, rgb(255 255 255 / 3%) 25%, transparent 25%) 0 0 / 24px 24px,
        linear-gradient(45deg, transparent 75%, rgb(255 255 255 / 3%) 75%) 0 0 / 24px 24px,
        #101815;
    scrollbar-color: #6d8b81 #17211e;
}

.article-image-viewer__viewport:focus-visible {
    outline: 3px solid #8fe0c7;
    outline-offset: -3px;
}

.article-image-viewer__stage {
    display: grid;
    width: max-content;
    min-width: 100%;
    height: max-content;
    min-height: 100%;
    place-items: center;
    padding: clamp(16px, 4vw, 48px);
    box-sizing: border-box;
}

.article-image-viewer__stage > img {
    display: block;
    max-width: none;
    height: auto;
    margin: 0;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 18px 60px rgb(0 0 0 / 42%);
    user-select: none;
    -webkit-user-drag: none;
}

@media (max-width: 640px) {
    .content-font-size-28 { font-size: 26px; }
    .content-font-size-32 { font-size: 28px; }
    .content-font-size-36 { font-size: 30px; }

    .content-media-video video,
    .content-media-youtube iframe {
        border-radius: 8px;
    }

    .article-image-viewer__toolbar {
        min-height: 60px;
        gap: 8px;
        padding: 8px;
    }

    .article-image-viewer__heading span {
        display: none;
    }

    .article-image-viewer__controls {
        gap: 4px;
    }

    .article-image-viewer__controls button {
        min-width: 42px;
        min-height: 44px;
        padding-inline: 8px;
    }

    .article-image-viewer__controls [data-article-image-zoom-reset] {
        min-width: 58px;
    }

    .article-image-viewer__controls .article-image-viewer__close {
        margin-left: 0;
    }
}