/*
 * CKEditor content styles for the frontend.
 * Mirrors the class-based rules from public/assets/ckeditor/contents.css so that
 * content authored in the backend CKEditor (e.g. <span class="marker">, styled
 * images, figures, embeds) renders the same way on public pages.
 *
 * Only class/attribute-based rules are copied here — bare element restyles from
 * contents.css (body, a, h1-h6, blockquote, hr, ul/ol) are intentionally left out
 * to avoid overriding the site's own typography.
 */

/* Text highlight marker (Styles dropdown → "Marker") */
.marker {
    background-color: Yellow;
}

/* Language spans */
span[lang] {
    font-style: italic;
}

/* Styled images (Styles dropdown → "Styled Image left/right") */
img.right {
    border: 1px solid #ccc;
    float: right;
    margin-left: 15px;
    padding: 5px;
}

img.left {
    border: 1px solid #ccc;
    float: left;
    margin-right: 15px;
    padding: 5px;
}

/* Figures with captions.
   :not(.figure) so Bootstrap's <figure class="figure"> component is left untouched;
   CKEditor outputs bare <figure>, which is what we want to style here. */
figure:not(.figure) {
    text-align: center;
    outline: solid 1px #ccc;
    background: rgba(0, 0, 0, 0.05);
    padding: 10px;
    margin: 10px 20px;
    display: inline-block;
}

figure > figcaption {
    text-align: center;
    display: block;
}

/* Image widget styles */
.image-clean {
    border: 0;
    background: none;
    padding: 0;
}

.image-clean > figcaption {
    font-size: .9em;
    text-align: right;
}

.image-grayscale {
    background-color: white;
    color: #666;
}

.image-grayscale img,
img.image-grayscale {
    filter: grayscale(100%);
}

/* Code / formula widget styles */
.code-featured {
    border: 5px solid red;
}

.math-featured {
    padding: 20px;
    box-shadow: 0 0 2px rgba(200, 0, 0, 1);
    background-color: rgba(255, 0, 0, 0.05);
    margin: 10px;
}

/* Embedded media sizes */
.embed-240p {
    max-width: 426px;
    max-height: 240px;
    margin: 0 auto;
}

.embed-360p {
    max-width: 640px;
    max-height: 360px;
    margin: 0 auto;
}

.embed-480p {
    max-width: 854px;
    max-height: 480px;
    margin: 0 auto;
}

.embed-720p {
    max-width: 1280px;
    max-height: 720px;
    margin: 0 auto;
}

.embed-1080p {
    max-width: 1920px;
    max-height: 1080px;
    margin: 0 auto;
}