@font-face {
    font-family: 'Opus';
    src: url("../fonts/Opus.9b9f7babcadb.otf") format('opentype'),
         url("../fonts/Opus.b299238dc1d3.ttf") format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap; /* Improves loading behavior on iOS */
}

/* Set Arial as the default font for CKEditor content */
.ck-content {
    font-family: Arial, Helvetica, sans-serif;
    font-size: inherit;
}

/* Only apply Opus font when explicitly set via inline style or class */
.ck-content [style*="font-family: Opus"],
.ck-content [style*="font-family:'Opus"],
.ck-content [style*='font-family: "Opus'],
.ck-content .opus-font {
    font-family: "Opus", sans-serif !important;
}

/* static/css/custom.css */
.ck-content a {
    color: #007bff;
    text-decoration: underline;
    cursor: pointer;
}
.ck-content a:hover {
    color: #0056b3;
}

/* Improve font rendering on iOS Safari */
.description {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Image styling within CKEditor */
.ck-content .image {
    min-width: 0 !important;
    min-height: 0 !important;
    display: block;
    clear: both;
}

/* Only use table display for centered images to support captions */
.ck-content .image-style-align-center,
.ck-content .image-style-block-align-center {
    display: table;
}

.ck-content .image img {
    min-width: 0 !important;
    min-height: 0 !important;
    display: block;
    height: auto;
    max-width: 100%;
}

/* Support for resized images with inline width */
.ck-content .image img[style*="width"] {
    width: 100%;
}

/* REMOVED - was preventing CKEditor alignment buttons from working */

/* Ensure outer figures don't interfere - ONLY in rendered content, not in editor */
/* Exclude resized images which need to maintain their width */
.ck-content:not(.ck-editor__editable) figure:has(> figure.image:not(.image_resized)),
.ck-content:not(.ck-editor__editable) figure > figure.image:not(.image_resized),
.prose figure:has(> figure.image:not(.image_resized)),
.prose figure > figure.image:not(.image_resized) {
    display: contents !important; /* Makes wrapper transparent */
}

/* Default margins for non-aligned images */
.ck-content figure.image:not(.image-style-align-left):not(.image-style-align-right):not(.image-style-side):not(.image-style-block-align-left):not(.image-style-block-align-right) {
    margin: 1em 0;
}

/* Resized images default to left alignment - override prose defaults */
.ck-content figure.image.image_resized:not(.image-style-align-left):not(.image-style-align-right):not(.image-style-align-center):not(.image-style-side),
.prose figure.image.image_resized:not(.image-style-align-left):not(.image-style-align-right):not(.image-style-align-center):not(.image-style-side) {
    margin-left: 0 !important;
    margin-right: auto !important;
    display: block !important;
}

/* Outer figure wrappers containing resized images should also be left-aligned */
.ck-content figure:has(> figure.image.image_resized),
.prose figure:has(> figure.image.image_resized) {
    margin-left: 0 !important;
    margin-right: auto !important;
}

/* Full width only for non-aligned, non-resized images */
.ck-content figure.image:not(.image-style-align-left):not(.image-style-align-right):not(.image-style-side):not(.image_resized) img {
    width: 100%;
}

/* Image alignment styles - Let CKEditor's inline styles work, only override prose/defaults */
figure.image.image-style-align-left,
figure.image.image-style-side,
.ck-content figure.image.image-style-align-left,
.ck-content figure.image.image-style-side,
.prose figure.image.image-style-align-left,
.prose figure.image.image-style-side {
    float: left;
    margin: 0.5em 1.5em 0.5em 0;
    max-width: 50%;
}

figure.image.image-style-align-right,
.ck-content figure.image.image-style-align-right,
.prose figure.image.image-style-align-right {
    float: right;
    margin: 0.5em 0 0.5em 1.5em;
    max-width: 50%;
}

figure.image.image-style-align-center,
.ck-content figure.image.image-style-align-center,
.prose figure.image.image-style-align-center {
    margin-left: auto;
    margin-right: auto;
    margin-top: 1em;
    margin-bottom: 1em;
    float: none;
}

figure.image.image-style-block-align-right,
.ck-content figure.image.image-style-block-align-right,
.prose figure.image.image-style-block-align-right {
    margin-left: auto;
    margin-right: 0;
    margin-top: 1em;
    margin-bottom: 1em;
    float: none;
}

figure.image.image-style-block-align-left,
.ck-content figure.image.image-style-block-align-left,
.prose figure.image.image-style-block-align-left {
    margin-right: auto;
    margin-left: 0;
    margin-top: 1em;
    margin-bottom: 1em;
    float: none;
}

/* Image captions */
.ck-content .image > figcaption {
    display: block;
    word-break: break-word;
    color: #333;
    background-color: #f7f7f7;
    padding: 0.6em;
    font-size: 0.75em;
    outline-offset: -1px;
    text-align: center;
}

/* Custom time signature styling */
.custom-time-signature {
    width: 3px !important;
    max-width: 3px !important;
}

.custom-time-signature img {
    width: 100% !important;
    height: auto !important;
}

/* Accordion styling */
.accordion-header {
    background-color: #f4f4f4;
    padding: 10px;
    cursor: pointer;
    border: none;
    text-align: left;
    outline: none;
    font-size: 16px;
    transition: background-color 0.2s;
}

.accordion-header:hover {
    background-color: #ddd;
}

.accordion-content {
    display: none;
    padding: 10px;
    background-color: #fff;
    border-top: 1px solid #ddd;
}

.accordion-content.active {
    display: block;
}

/* Table Styling for CKEditor Content */
.ck-content figure.table {
    display: table;
    margin: 1em 0; /* Default to left-aligned instead of centered */
}

/* Explicitly left-align tables without alignment styles (CKEditor omits styles for left-align) */
.ck-content figure.table:not([style*="float"]):not([style*="margin"]) {
    margin-left: 0;
    margin-right: auto;
}

.ck-content .ck-table,
.ck-content figure.table > table {
    width: 100%;
    max-width: 600px;
    border-collapse: collapse;
}

/* Allow CKEditor to override width when resizing */
.ck-content .ck-table[style*="width"],
.ck-content figure.table[style*="width"] > table {
    width: auto !important;
    max-width: none !important;
}

/* Table alignment - Applied to figure.table wrapper */
.ck-content figure.table[style*="margin-left:auto"][style*="margin-right:auto"],
.ck-content figure.table[style*="margin-left: auto"][style*="margin-right: auto"] {
    margin-left: auto !important;
    margin-right: auto !important;
}

.ck-content figure.table[style*="margin-left:0"][style*="margin-right:auto"],
.ck-content figure.table[style*="margin-left: 0"][style*="margin-right: auto"] {
    margin-left: 0 !important;
    margin-right: auto !important;
}

.ck-content figure.table[style*="margin-left:auto"][style*="margin-right:0"],
.ck-content figure.table[style*="margin-left: auto"][style*="margin-right: 0"] {
    margin-left: auto !important;
    margin-right: 0 !important;
}

/* Table cell styling */
.ck-content .ck-table td,
.ck-content .ck-table th {
    padding: 5px;
    border: 1px solid #000;
    vertical-align: middle;
}

/* Image alignment inside table cells - use figure classes */
/* Center-aligned images in table cells */
.ck-content table figure.image.image-style-align-center,
.ck-content.prose table figure.image.image-style-align-center,
.prose .ck-content table figure.image.image-style-align-center {
    margin-left: auto !important;
    margin-right: auto !important;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    display: block;
}

/* Left-aligned images in table cells (including image-style-side) */
.ck-content table figure.image.image-style-align-left,
.ck-content table figure.image.image-style-side,
.ck-content.prose table figure.image.image-style-align-left,
.ck-content.prose table figure.image.image-style-side,
.prose .ck-content table figure.image.image-style-align-left,
.prose .ck-content table figure.image.image-style-side {
    margin-left: 0 !important;
    margin-right: auto !important;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    display: block;
}

/* Right-aligned images in table cells */
.ck-content table figure.image.image-style-align-right,
.ck-content.prose table figure.image.image-style-align-right,
.prose .ck-content table figure.image.image-style-align-right {
    margin-left: auto !important;
    margin-right: 0 !important;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    display: block;
}

/* Images without alignment class default to left */
.ck-content table figure.image:not(.image-style-align-center):not(.image-style-align-left):not(.image-style-align-right):not(.image-style-side),
.ck-content.prose table figure.image:not(.image-style-align-center):not(.image-style-align-left):not(.image-style-align-right):not(.image-style-side),
.prose .ck-content table figure.image:not(.image-style-align-center):not(.image-style-align-left):not(.image-style-align-right):not(.image-style-side) {
    margin-left: 0 !important;
    margin-right: auto !important;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    display: block;
}

/* Images inside figure elements in table cells */
.ck-content table figure.image img {
    max-width: 100%;
    height: auto;
    display: block;
}

.ck-content .ck-table audio {
    width: 100%;
    height: 30px;
}

/* Table cell styling - Override prose defaults to allow CKEditor inline styles */
.prose .ck-content table,
.ck-content.prose table {
    border-collapse: collapse !important;
    width: 100% !important;
}

.prose .ck-content td,
.ck-content.prose td,
.prose .ck-content th,
.ck-content.prose th {
    padding: 5px !important;
}

/* CRITICAL: Provide border-style for all cells (CKEditor omits this property) */
/* This must come BEFORE the default border so it doesn't get overridden */
.prose .ck-content td,
.ck-content.prose td,
.prose .ck-content th,
.ck-content.prose th {
    border-style: solid !important;
}

/* Default border ONLY for cells without any inline border styles */
.prose .ck-content td:not([style*="border"]),
.ck-content.prose td:not([style*="border"]),
.prose .ck-content th:not([style*="border"]),
.ck-content.prose th:not([style*="border"]) {
    border-width: 1px;
    border-color: #ddd;
}

/* If border-color is set but no width, provide default width */
.prose .ck-content td[style*="border-color"]:not([style*="border-width"]),
.ck-content.prose td[style*="border-color"]:not([style*="border-width"]),
.prose .ck-content th[style*="border-color"]:not([style*="border-width"]),
.ck-content.prose th[style*="border-color"]:not([style*="border-width"]) {
    border-width: 1px;
}

/* Default text alignment ONLY for cells without inline text-align styles */
/* CKEditor outputs inline styles for center/right alignment, but not for left (default) */
.prose .ck-content td:not([style*="text-align"]),
.ck-content.prose td:not([style*="text-align"]),
.prose .ck-content th:not([style*="text-align"]),
.ck-content.prose th:not([style*="text-align"]) {
    text-align: left !important;
}

/* CRITICAL: Allow inline text-align styles to override defaults */
/* This ensures CKEditor's center/right alignment displays in view mode */
.prose .ck-content td[style*="text-align"],
.ck-content.prose td[style*="text-align"],
.prose .ck-content th[style*="text-align"],
.ck-content.prose th[style*="text-align"] {
    /* Inline styles will apply naturally - this selector just increases specificity */
}

/* Heading Styles - Override Tailwind prose and other styles */
.ck-content h1,
.ck-content.prose h1,
.prose .ck-content h1 {
    font-size: 2em !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    margin: 0.67em 0 !important;
}

.ck-content h2,
.ck-content.prose h2,
.prose .ck-content h2 {
    font-size: 1.5em !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    margin: 0.75em 0 !important;
}

.ck-content h3,
.ck-content.prose h3,
.prose .ck-content h3 {
    font-size: 1.17em !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
    margin: 0.83em 0 !important;
}

.ck-content h4,
.ck-content.prose h4,
.prose .ck-content h4 {
    font-size: 1em !important;
    font-weight: 700 !important;
    line-height: 1.5 !important;
    margin: 1.12em 0 !important;
}

.ck-content h5,
.ck-content.prose h5,
.prose .ck-content h5 {
    font-size: 0.83em !important;
    font-weight: 700 !important;
    line-height: 1.5 !important;
    margin: 1.5em 0 !important;
}

.ck-content h6,
.ck-content.prose h6,
.prose .ck-content h6 {
    font-size: 0.67em !important;
    font-weight: 700 !important;
    line-height: 1.5 !important;
    margin: 1.67em 0 !important;
}

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

/* Responsive Adjustments for Tables in CKEditor */
@media (max-width: 600px) {
    .ck-content .ck-table {
        max-width: 100%;
    }
    .ck-content .ck-table td,
    .ck-content .ck-table th {
        width: 80px !important;
        height: 40px !important;
    }
    .ck-content .ck-table img {
        width: 80px;
        height: auto;
    }
}