/*
 * CKEditor 5 content styles for the PUBLIC site.
 *
 * The admin editor renders rich HTML inside an element with class `ck-content`.
 * On the front-end that class is NOT present unless we add it, and these rules
 * are what give tables their borders, font-size presets their sizes, images
 * their layout, etc. Without this file the stored HTML renders unstyled.
 *
 * Apply by adding class="ck-content" to the wrapper that prints the rich HTML.
 * Trimmed from the official CKEditor 5 content-styles.css to the features
 * enabled in admin/js/ckeditor-init.js.
 */

/* ---- Font size presets (class-based fallback) ---- */
.ck-content .text-tiny  { font-size: .7em; }
.ck-content .text-small { font-size: .85em; }
.ck-content .text-big   { font-size: 1.4em; }
.ck-content .text-huge  { font-size: 1.8em; }

/* ---- Alignment ---- */
.ck-content .image-style-align-left,
.ck-content .image-style-align-right { clear: none; }
.ck-content { }

/* ---- Block quote ---- */
.ck-content blockquote {
    overflow: hidden;
    padding-right: 1.5em;
    padding-left: 1.5em;
    margin-left: 0;
    margin-right: 0;
    font-style: italic;
    border-left: 5px solid #ccc;
}
.ck-content[dir="rtl"] blockquote {
    border-left: 0;
    border-right: 5px solid #ccc;
}

/* ---- Lists ---- */
.ck-content ol { list-style-type: decimal; }
.ck-content ul { list-style-type: disc; }
.ck-content ol,
.ck-content ul { padding-left: 40px; }
.ck-content[dir="rtl"] ol,
.ck-content[dir="rtl"] ul { padding-left: 0; padding-right: 40px; }

/* ---- To-do list ---- */
.ck-content .todo-list { list-style: none; }
.ck-content .todo-list li { margin-bottom: 5px; position: relative; }
.ck-content .todo-list li .todo-list__label > input {
    -webkit-appearance: none;
    display: inline-block;
    position: relative;
    width: var(--ck-todo-list-checkmark-size, 16px);
    height: var(--ck-todo-list-checkmark-size, 16px);
    vertical-align: middle;
    border: 1px solid #333;
    border-radius: 2px;
    margin-right: .5em;
}
.ck-content .todo-list li .todo-list__label > input[checked]::before {
    content: '';
    position: absolute;
    left: 4px;
    top: 1px;
    width: 4px;
    height: 8px;
    border: solid #333;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* ---- Tables ---- */
.ck-content .table {
    margin: 1em auto;
    display: table;
}
.ck-content .table table {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
    height: 100%;
    border: 1px double #b3b3b3;
}
.ck-content .table table td,
.ck-content .table table th {
    min-width: 2em;
    padding: .4em;
    border: 1px solid #bfbfbf;
}
.ck-content .table table th {
    font-weight: bold;
    background: rgba(0, 0, 0, 5%);
}
.ck-content[dir="rtl"] .table th { text-align: right; }
.ck-content[dir="ltr"] .table th { text-align: left; }
.ck-content .table > figcaption {
    display: table-caption;
    caption-side: top;
    word-break: break-word;
    text-align: center;
    color: #333;
    background-color: rgba(0, 0, 0, 5%);
    padding: .6em;
    font-size: .75em;
    outline-offset: -1px;
}

/* ---- Images ---- */
.ck-content .image {
    display: table;
    clear: both;
    text-align: center;
    margin: 0.9em auto;
    min-width: 50px;
}
.ck-content .image img {
    display: block;
    margin: 0 auto;
    max-width: 100%;
    min-width: 100%;
    height: auto;
}
.ck-content .image-inline {
    display: inline-flex;
    max-width: 100%;
    align-items: flex-start;
}
.ck-content .image-inline img { flex-grow: 1; flex-shrink: 1; max-width: 100%; }
.ck-content .image.image_resized { max-width: 100%; display: block; box-sizing: border-box; }
.ck-content .image.image_resized img { width: 100%; }
.ck-content .image > figcaption {
    display: table-caption;
    caption-side: bottom;
    word-break: break-word;
    color: #333;
    background-color: rgba(0, 0, 0, 5%);
    padding: .6em;
    font-size: .75em;
    outline-offset: -1px;
}
.ck-content .image-style-block-align-left,
.ck-content .image-style-block-align-right { max-width: calc(100% - 1.5em); }
.ck-content .image-style-align-left,
.ck-content .image-style-block-align-left { float: left; margin-right: 1.5em; }
.ck-content .image-style-align-right,
.ck-content .image-style-block-align-right { float: right; margin-left: 1.5em; }
.ck-content .image-style-align-center { margin-left: auto; margin-right: auto; }

/* ---- Code ---- */
.ck-content code {
    background-color: rgba(199, 199, 199, .3);
    padding: .15em;
    border-radius: 2px;
}
.ck-content pre {
    padding: 1em;
    color: #353535;
    background: rgba(199, 199, 199, .3);
    border: 1px solid #c4c4c4;
    border-radius: 2px;
    text-align: left;
    direction: ltr;
    tab-size: 4;
    white-space: pre-wrap;
    font-style: normal;
    min-width: 200px;
    overflow-x: auto;
}
.ck-content pre code {
    background: unset;
    padding: 0;
    border-radius: 0;
}

/* ---- Horizontal line ---- */
.ck-content hr {
    margin: 15px 0;
    height: 4px;
    background: #dedede;
    border: 0;
}

/* ---- Links ---- */
.ck-content a { color: #0d6efd; }

/*
 * ---- Consistent, readable typography ----
 * The site uses a 62.5% root + rem headings, and on mobile shrinks the root to
 * 45% while only px-overriding SOME tags (p, h2, h4-h6) — leaving h3 and list
 * items to shrink/mismatch ("some text small, some big"). These fixed-px rules
 * (scoped to .ck-content, higher specificity + !important to beat the global
 * !important) normalise all rich content. span is intentionally NOT forced, so
 * inline font sizes set in the editor still take effect.
 */
.ck-content {
    font-family: "Roboto", sans-serif;
    color: #333;
}
.ck-content p,
.ck-content li,
.ck-content ul,
.ck-content ol,
.ck-content td,
.ck-content th,
.ck-content blockquote {
    /* force the site sans font — some content lists were falling back to serif */
    font-family: "Roboto", sans-serif !important;
}
.ck-content p,
.ck-content li,
.ck-content td,
.ck-content th {
    font-size: 16px !important;
    line-height: 1.7 !important;
}
.ck-content p { margin: 0 0 1rem; }
.ck-content li { margin-bottom: .4rem; }
.ck-content h1,
.ck-content h2,
.ck-content h3,
.ck-content h4,
.ck-content h5,
.ck-content h6 {
    font-family: "Roboto", sans-serif;
    font-weight: 700 !important;
    line-height: 1.3;
    margin: 1.4rem 0 .7rem;
}
.ck-content h1 { font-size: 38px !important; }
.ck-content h2 { font-size: 31px !important; }
.ck-content h3 { font-size: 25px !important; }
.ck-content h4 { font-size: 20px !important; }
.ck-content h5 { font-size: 17px !important; }
.ck-content h6 { font-size: 15px !important; }

/* the editor often wraps heading text in <strong>/<b>; keep the heading size
   (otherwise a global strong{font-size} shrinks every heading to body size) */
.ck-content h1 strong, .ck-content h1 b,
.ck-content h2 strong, .ck-content h2 b,
.ck-content h3 strong, .ck-content h3 b,
.ck-content h4 strong, .ck-content h4 b,
.ck-content h5 strong, .ck-content h5 b,
.ck-content h6 strong, .ck-content h6 b {
    font-size: inherit !important;
    font-weight: inherit !important;
    line-height: inherit !important;
}

@media only screen and (max-width: 576px) {
    .ck-content p,
    .ck-content li,
    .ck-content td,
    .ck-content th { font-size: 15px !important; }
    .ck-content h1 { font-size: 30px !important; }
    .ck-content h2 { font-size: 25px !important; }
    .ck-content h3 { font-size: 21px !important; }
    .ck-content h4 { font-size: 18px !important; }
    .ck-content h5 { font-size: 16px !important; }
    .ck-content h6 { font-size: 15px !important; }
}