/**
 * CKEditor 5 & FCKEditor Compatibility Styles
 * This file ensures proper rendering of both legacy FCKEditor content
 * and new CKEditor 5 content on the frontend.
 *
 * IMPORTANT: These styles are additive and do not alter existing styles
 * to maintain backward compatibility with legacy content in the database.
 */

/* ========================================
   Legacy FCKEditor Support (HTML attributes)
   ======================================== */

/* Images with align attribute (FCKEditor legacy) */
img[align="left"] {
    float: left;
    margin: 0 15px 15px 0;
    clear: left;
}

img[align="right"] {
    float: right;
    margin: 0 0 15px 15px;
    clear: right;
}

img[align="center"] {
    display: block;
    margin: 15px auto;
    text-align: center;
}

/* Support for images wrapped in paragraphs with align */
p[align="left"] img {
    float: left;
    margin: 0 15px 15px 0;
}

p[align="right"] img {
    float: right;
    margin: 0 0 15px 15px;
}

p[align="center"] img {
    display: block;
    margin: 15px auto;
}

/* ========================================
   CKEditor 5 Support (CSS classes)
   ======================================== */

/* CKEditor 5 image alignment classes */
.ck-content .image {
    display: table;
    clear: both;
    text-align: center;
    margin: 1em auto;
}

.ck-content .image-style-align-left,
.ck-content .image-style-side-left {
    float: left;
    margin-right: 1.5em;
    margin-bottom: 1em;
}

.ck-content .image-style-align-right,
.ck-content .image-style-side {
    float: right;
    margin-left: 1.5em;
    margin-bottom: 1em;
}

.ck-content .image-style-align-center,
.ck-content .image-style-block-align-center {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    display: table;
}

/* CKEditor 5 figure/figcaption support */
figure.image {
    display: table;
    clear: both;
    text-align: center;
    margin: 1em auto;
}

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

figure.image figcaption {
    display: table-caption;
    caption-side: bottom;
    padding: .5em;
    font-size: .875em;
    color: #666;
    text-align: center;
}

/* Alignment for figures */
figure.image-style-align-left,
figure.image-style-side-left {
    float: left;
    margin: 0 1.5em 1em 0;
}

figure.image-style-align-right,
figure.image-style-side {
    float: right;
    margin: 0 0 1em 1.5em;
}

figure.image-style-align-center,
figure.image-style-block-align-center {
    margin: 1em auto;
}

/* ========================================
   Text Formatting
   ======================================== */

/* Ensure bold and italic work */
.ck-content strong,
.ck-content b {
    font-weight: bold;
}

.ck-content em,
.ck-content i {
    font-style: italic;
}

.ck-content u {
    text-decoration: underline;
}

.ck-content s,
.ck-content strike,
.ck-content del {
    text-decoration: line-through;
}

/* ========================================
   Lists
   ======================================== */

.ck-content ul,
.ck-content ol {
    padding-left: 2em;
    margin: 1em 0;
}

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

.ck-content ol {
    list-style-type: decimal;
}

.ck-content li {
    margin: 0.5em 0;
}

/* Nested lists */
.ck-content ul ul {
    list-style-type: circle;
}

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

/* ========================================
   Block Elements
   ======================================== */

.ck-content h1 {
    font-size: 2em;
    font-weight: bold;
    margin: 1em 0 0.5em;
}

.ck-content h2 {
    font-size: 1.5em;
    font-weight: bold;
    margin: 1em 0 0.5em;
}

.ck-content h3 {
    font-size: 1.25em;
    font-weight: bold;
    margin: 1em 0 0.5em;
}

.ck-content h4 {
    font-size: 1.1em;
    font-weight: bold;
    margin: 1em 0 0.5em;
}

.ck-content p {
    margin: 1em 0;
    line-height: 1.6;
}

.ck-content blockquote {
    border-left: 4px solid #ccc;
    padding-left: 1em;
    margin: 1em 0;
    font-style: italic;
    color: #666;
}

.ck-content pre {
    background-color: #f4f4f4;
    border: 1px solid #ddd;
    border-radius: 3px;
    padding: 1em;
    overflow-x: auto;
    font-family: 'Courier New', Courier, monospace;
    white-space: pre-wrap;
}

.ck-content code {
    background-color: #f4f4f4;
    padding: 2px 4px;
    border-radius: 3px;
    font-family: 'Courier New', Courier, monospace;
}

/* ========================================
   Tables
   ======================================== */

.ck-content table {
    border-collapse: collapse;
    width: 100%;
    margin: 1em 0;
}

.ck-content table td,
.ck-content table th {
    border: 1px solid #ddd;
    padding: 0.5em;
    text-align: left;
}

.ck-content table th {
    background-color: #f4f4f4;
    font-weight: bold;
}

.ck-content table tr:nth-child(even) {
    background-color: #f9f9f9;
}

/* Table alignment */
.ck-content table[align="left"] {
    float: left;
    margin: 0 1em 1em 0;
}

.ck-content table[align="right"] {
    float: right;
    margin: 0 0 1em 1em;
}

.ck-content table[align="center"] {
    margin: 1em auto;
}

/* ========================================
   Special Elements
   ======================================== */

.ck-content hr {
    border: none;
    border-top: 2px solid #ddd;
    margin: 2em 0;
}

/* Indentation */
.ck-content .ck-indent-1 {
    margin-left: 2em;
}

.ck-content .ck-indent-2 {
    margin-left: 4em;
}

.ck-content .ck-indent-3 {
    margin-left: 6em;
}

/* ========================================
   Content Container Specific Styles
   ======================================== */

/* Apply to the main content area where articles are displayed */
.centerBoxWide .content .ck-content,
.oneArea div {
    /* Ensure proper spacing */
    line-height: 1.6;
}

/* Clear floats after content */
.centerBoxWide .content::after,
.oneArea div::after {
    content: "";
    display: table;
    clear: both;
}

/* ========================================
   Responsive Adjustments
   ======================================== */

@media (max-width: 768px) {
    /* On mobile, prevent images from floating */
    img[align="left"],
    img[align="right"],
    .ck-content .image-style-align-left,
    .ck-content .image-style-align-right,
    figure.image-style-align-left,
    figure.image-style-align-right {
        float: none;
        margin: 1em auto;
        display: block;
    }

    /* Ensure images don't overflow on mobile */
    .ck-content img,
    figure.image img {
        max-width: 100%;
        height: auto;
    }
}

/* ========================================
   Compatibility Notes
   ======================================== */

/*
 * This stylesheet maintains compatibility with:
 * 1. Legacy FCKEditor content using HTML attributes (align, border, etc.)
 * 2. New CKEditor 5 content using CSS classes
 * 3. Mixed content from database with inline styles
 *
 * Priority order:
 * 1. Inline styles (highest priority - from database)
 * 2. HTML attributes (legacy FCKEditor)
 * 3. CSS classes (new CKEditor 5)
 * 4. Default styles (lowest priority)
 */