/*
|--------------------------------------------------------------------------
| Word Intelligence article content
|--------------------------------------------------------------------------
|
| Shared presentation rules for HTML produced by CKEditor 5.
| The public article page already supplies the light/dark colour variables.
|
*/

.blog-text {
    min-width: 0;
    overflow-wrap: anywhere;
}

.blog-text > :first-child {
    margin-top: 0;
}

.blog-text > :last-child {
    margin-bottom: 0;
}

.blog-text p,
.blog-text ul,
.blog-text ol,
.blog-text blockquote,
.blog-text pre,
.blog-text figure,
.blog-text table,
.blog-text hr {
    margin-top: 0;
    margin-bottom: 1.25em;
}

.blog-text h2,
.blog-text h3,
.blog-text h4,
.blog-text h5,
.blog-text h6 {
    margin: 1.55em 0 0.55em;
    color: var(--text-color);
    font-family: "pt-serif-pro", serif;
    font-weight: 400;
    line-height: 1.22;
}

.blog-text h2 {
    font-size: 1.75em;
    font-style: normal;
}

.blog-text h3 {
    font-size: 1.42em;
    font-style: normal;
}

.blog-text h4 {
    font-size: 1.18em;
    font-style: normal;
}

.blog-text ul,
.blog-text ol {
    padding-left: 1.55em;
}

.blog-text li + li {
    margin-top: 0.35em;
}

.blog-text a {
    color: #bd7700;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.blog-text a:hover {
    color: #8d5800;
}

.blog-text blockquote {
    padding: 4px 0 4px 22px;
    border-left: 4px solid #ffb534;
    color: var(--text-secondary, #666666);
    font-style: italic;
}

.blog-text blockquote > :last-child {
    margin-bottom: 0;
}

.blog-text figure {
    max-width: 100%;
    margin-right: auto;
    margin-left: auto;
}

.blog-text img,
.blog-text figure img {
    display: block;
    max-width: 100%;
    height: auto;
    margin-right: auto;
    margin-left: auto;
    border-radius: 10px;
}

.blog-text figcaption {
    margin-top: 8px;
    color: var(--text-secondary, #777777);
    font-family: "Inter", sans-serif;
    font-size: 0.76rem;
    line-height: 1.5;
    text-align: center;
}

.blog-text figure.table {
    max-width: 100%;
    overflow-x: auto;
}

.blog-text table {
    width: 100%;
    min-width: 520px;
    border-collapse: collapse;
    font-family: "Inter", sans-serif;
    font-size: 0.84rem;
}

.blog-text th,
.blog-text td {
    padding: 10px 12px;
    border: 1px solid var(--border-line, #dddddd);
    text-align: left;
    vertical-align: top;
}

.blog-text th {
    background: var(--card-bg, #f3f3f3);
    font-weight: 700;
}

.blog-text pre {
    max-width: 100%;
    overflow-x: auto;
    padding: 16px;
    border: 1px solid var(--border-line, #dddddd);
    border-radius: 9px;
    background: var(--card-bg, #f3f3f3);
    color: var(--text-color);
    font: 0.82rem/1.65 Consolas, Monaco, monospace;
    white-space: pre;
}

.blog-text code {
    font-family: Consolas, Monaco, monospace;
}

.blog-text :not(pre) > code {
    padding: 0.12em 0.35em;
    border-radius: 4px;
    background: var(--card-bg, #f3f3f3);
    font-size: 0.86em;
}

.blog-text hr {
    border: 0;
    border-top: 1px solid var(--border-line, #dddddd);
}

.dark-mode .blog-text a {
    color: #ffbf52;
}

.dark-mode .blog-text a:hover {
    color: #ffd388;
}

@media (max-width: 680px) {
    .blog-text {
        font-size: 1.08rem;
    }

    .blog-text h2 {
        font-size: 1.52em;
    }

    .blog-text h3 {
        font-size: 1.3em;
    }

    .blog-text table {
        min-width: 460px;
    }
}