/**
 * CKEditor 5 ? Froala Editor Compatibility Styles
 *
 * This CSS file provides visual compatibility between CKEditor 5 and Froala Editor
 * to ensure consistent rendering of migrated content.
 *
 * Apply these styles to both the editor (.fr-element) and view (.fr-view) contexts
 * to maintain consistency between editing and display modes.
 */

/* ------- FIGURE ELEMENTS ------- */

/* Base figure styling - CKEditor style margins */
.fr-element figure,
.fr-view figure {
    margin: 1em auto;
    display: block;
}

/* Clear floats after figure blocks to prevent layout issues */
.fr-element figure::after,
.fr-view figure::after {
    content: "";
    display: block;
    clear: both;
}

/* ------- IMAGE FIGURES ------- */

/* Images: CKE wraps images in <figure class="image"> with optional <figcaption> */
.fr-element figure.image,
.fr-view figure.image {
    display: block; /* use block by default for consistent centering */
    max-width: 100%;
    text-align: center;
}

/* Let images handle their own positioning via Froala classes (fr-fil, fr-fir, fr-fic) */
/* Figure is just a semantic container - no positioning interference */
.fr-element figure.image > img,
.fr-view figure.image > img {
    display: block;
    max-width: 100%;
    height: auto;
    /* Remove any default centering - let Froala classes handle positioning */
}

/* Center alignment: when Froala applies fr-fic, center the image within the figure */
.fr-element figure.image > img.fr-fic,
.fr-view figure.image > img.fr-fic {
    margin-left: auto;
    margin-right: auto;
    display: block;
    float: none;
}

/* Center alignment: when image has only fr-dii or fr-dib (without left/right alignment) */
.fr-element figure.image > img.fr-dii:not(.fr-fil):not(.fr-fir),
.fr-view figure.image > img.fr-dii:not(.fr-fil):not(.fr-fir),
.fr-element figure.image > img.fr-dib:not(.fr-fil):not(.fr-fir),
.fr-view figure.image > img.fr-dib:not(.fr-fil):not(.fr-fir) {
    margin-left: auto;
    margin-right: auto;
    display: block;
    float: none;
}

.fr-element figure.image > figcaption,
.fr-view figure.image > figcaption {
    font-size: 0.875rem;
    color: #666;
    text-align: center;
    margin-top: 0.5em;
    font-style: italic;
    line-height: 1.4;
}

/* ------- IMAGE ALIGNMENT CLASSES ------- */

.fr-element .image-style-side,
.fr-view .image-style-side {
    float: right;
    max-width: 50%;
    margin: 0.25em 0 0.25em 1em;
}

/* ------- RESIZED IMAGES ------- */

/* Resized images (CKE adds .image_resized on the figure) */
.fr-element figure.image.image_resized img,
.fr-view figure.image.image_resized img {
    width: 100%;
}

/* ------- RESPONSIVE IMAGES ------- */

/* Picture/srcset responsive images (if your CKE pipeline uses them) */
.fr-element picture,
.fr-view picture {
    display: block;
    max-width: 100%;
}

.fr-element picture img,
.fr-view picture img {
    width: 100%;
    height: auto;
}

/* ------- TABLE FIGURES ------- */

/* Tables: CKE wraps as <figure class="table"><table>…</table><figcaption>…</figcaption></figure> */
.fr-element figure.table,
.fr-view figure.table {
    display: block;
    overflow-x: auto;
    margin: 1em 0;
}

.fr-element figure.table table,
.fr-view figure.table table {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
}

.fr-element figure.table th,
.fr-element figure.table td,
.fr-view figure.table th,
.fr-view figure.table td {
    border: 1px solid #ddd;
    padding: 0.5em;
    text-align: left;
    vertical-align: top;
}

.fr-element figure.table th,
.fr-view figure.table th {
    background-color: #f8f9fa;
    font-weight: bold;
}

.fr-element figure.table > figcaption,
.fr-view figure.table > figcaption {
    caption-side: bottom;
    text-align: center;
    font-size: 0.875rem;
    color: #666;
    padding-top: 0.5em;
    font-style: italic;
}

/* ------- MEDIA EMBEDS ------- */

/* Media embeds: CKE uses <figure class="media"><oembed url="…"></oembed></figure> */
.fr-element figure.media,
.fr-view figure.media {
    text-align: center;
    margin: 1em auto;
}

.fr-element figure.media oembed,
.fr-view figure.media oembed,
.fr-element figure.media iframe,
.fr-view figure.media iframe {
    display: block;
    width: 100%;
    min-height: 300px;
    border: none;
    border-radius: 4px;
}

/* Ensure <video> embeds are sized consistently like iframes */
.fr-element figure.media video,
.fr-view figure.media video {
    display: block;
    width: 100%;
    height: auto;
    border: none;
    border-radius: 4px;
}


/* ------- TEXT FORMATTING ------- */

/* Highlight (CKE Highlight feature) */
.fr-element mark,
.fr-view mark {
    background: #fff59d;
    padding: 0 0.1em;
    border-radius: 2px;
}

/* Underline styling */
.fr-element u,
.fr-view u {
    text-decoration: underline;
}

/* Strikethrough styling */
.fr-element s,
.fr-view s {
    text-decoration: line-through;
}

/* ------- CODE BLOCKS ------- */

/* Code blocks (CKE Code Block: <pre><code class="language-…">…</code></pre>) */
.fr-element pre,
.fr-view pre {
    background: #f6f8fa;
    padding: 0.75em;
    overflow: auto;
    border-radius: 4px;
    border: 1px solid #e1e4e8;
    margin: 1em 0;
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.9em;
    line-height: 1.4;
}

.fr-element pre code,
.fr-view pre code {
    display: block;
    white-space: pre;
    background: transparent;
    padding: 0;
    border: none;
    font-family: inherit;
}

/* Inline code */
.fr-element code,
.fr-view code {
    background: #f1f3f4;
    padding: 0.1em 0.3em;
    border-radius: 3px;
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.9em;
}

/* ------- BLOCKQUOTES ------- */

/* Blockquote styling to match CKEditor */
.fr-element blockquote,
.fr-view blockquote {
    border-left: 4px solid #ddd;
    margin: 1em 0;
    padding-left: 1em;
    color: #666;
    font-style: italic;
    background: #f9f9f9;
    padding: 0.5em 1em;
    border-radius: 0 4px 4px 0;
}

/* ------- LISTS ------- */

/* List styling consistency */
.fr-element ul,
.fr-element ol,
.fr-view ul,
.fr-view ol {
    margin: 1em 0;
    padding-left: 2em;
}

.fr-element li,
.fr-view li {
    margin: 0.25em 0;
    line-height: 1.5;
}

/* ------- RESPONSIVE DESIGN ------- */

/* Mobile responsiveness for figures */
@media (max-width: 768px) {
    .fr-element .image-style-align-left,
    .fr-element .image-style-align-right,
    .fr-element .image-style-side,
    .fr-view .image-style-align-left,
    .fr-view .image-style-align-right,
    .fr-view .image-style-side {
        float: none;
        display: block;
        margin: 1em auto;
        max-width: 100%;
    }

    .fr-element figure.table,
    .fr-view figure.table {
        font-size: 0.9em;
    }

    .fr-element figure.media oembed,
    .fr-view figure.media oembed,
    .fr-element figure.media iframe,
    .fr-view figure.media iframe {
        min-height: 200px;
    }
}

/* ------- PRINT STYLES ------- */

@media print {
    .fr-element figure,
    .fr-view figure {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    .fr-element figure.image,
    .fr-view figure.image {
        max-width: 100%;
    }
}