/*
 * ARTICLE TYPOGRAPHY -- shared by the public article page and the Quill editor.
 *
 * Every rule targets BOTH `.article-body` (public) and `.ql-editor` (the
 * editor's writing surface). That pairing is the point of this file: if the
 * editor used Bootstrap's default type while articles published in the site's
 * type, the writer's headings, line lengths and image placement would all
 * differ from the result -- WYSIWYG that isn't.
 *
 * PLACEHOLDER VALUES. When the real energysafety.africa CSS arrives, replace
 * the values here with the site's actual fonts, sizes and colours. Keep the
 * paired selectors intact and both surfaces stay in step automatically.
 */

.article-body,
.ql-editor {
    /* Replace with the site's body font once known. */
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.0625rem;
    line-height: 1.7;
    color: #22262b;
    /* Measure, not layout width -- keeps lines readable at any container size. */
    max-width: 42rem;
}

.article-body > *:first-child,
.ql-editor > *:first-child {
    margin-top: 0;
}

.article-body p,
.ql-editor p {
    margin: 0 0 1.15em;
}

.article-body h1, .ql-editor h1,
.article-body h2, .ql-editor h2,
.article-body h3, .ql-editor h3,
.article-body h4, .ql-editor h4 {
    /* Replace with the site's heading font once known. */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    font-weight: 700;
    line-height: 1.25;
    color: #14181d;
    margin: 1.9em 0 0.55em;
}

.article-body h1, .ql-editor h1 { font-size: 1.9rem; }
.article-body h2, .ql-editor h2 { font-size: 1.5rem; }
.article-body h3, .ql-editor h3 { font-size: 1.25rem; }
.article-body h4, .ql-editor h4 { font-size: 1.08rem; }

.article-body a,
.ql-editor a {
    color: #0b6bb3;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.article-body ul, .ql-editor ul,
.article-body ol, .ql-editor ol {
    margin: 0 0 1.15em;
    padding-left: 1.5em;
}

.article-body li,
.ql-editor li {
    margin-bottom: 0.4em;
}

.article-body blockquote,
.ql-editor blockquote {
    margin: 1.6em 0;
    padding: 0.15em 0 0.15em 1.1em;
    border-left: 3px solid #d8dde3;
    color: #4a5158;
    font-style: italic;
}

.article-body pre, .ql-editor pre,
.article-body code, .ql-editor code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.9em;
}

.article-body pre,
.ql-editor pre {
    background: #f4f6f8;
    padding: 0.9em 1em;
    border-radius: 4px;
    overflow-x: auto;
}

.article-body img,
.ql-editor img {
    max-width: 100%;
    height: auto;
    border-radius: 3px;
}

.article-body hr,
.ql-editor hr {
    border: 0;
    border-top: 1px solid #e2e6ea;
    margin: 2.2em 0;
}

/*
 * Quill's own alignment and indent classes. Allowlisted in clean_html(), so
 * they survive sanitisation and must be styled on the public side too --
 * otherwise a centred paragraph in the editor publishes left-aligned.
 */
.article-body .ql-align-center,  .ql-editor .ql-align-center  { text-align: center; }
.article-body .ql-align-right,   .ql-editor .ql-align-right   { text-align: right; }
.article-body .ql-align-justify, .ql-editor .ql-align-justify { text-align: justify; }
.article-body .ql-indent-1,      .ql-editor .ql-indent-1      { padding-left: 3em; }
.article-body .ql-indent-2,      .ql-editor .ql-indent-2      { padding-left: 6em; }
.article-body .ql-indent-3,      .ql-editor .ql-indent-3      { padding-left: 9em; }