/* Typography for long-form content (news articles, CMS pages). The theme CSS resets headings, lists and links. */
.article-body { color: #2b2b3a; font-size: 18px; line-height: 1.85; word-wrap: break-word; }
.article-body > *:first-child { margin-top: 0; }
.article-body > *:last-child { margin-bottom: 0; }
.article-body p { margin: 0 0 1.3em; }
.article-body h2, .article-body h3, .article-body h4 { color: #1d056e; font-weight: 700; line-height: 1.3; margin: 2em 0 .7em; }
.article-body h2 { font-size: 30px; position: relative; padding-bottom: .45em; }
.article-body h2::after { content: ""; position: absolute; left: 0; bottom: 0; width: 56px; height: 3px; border-radius: 3px; background: #706290; }
.article-body h3 { font-size: 23px; }
.article-body h4 { font-size: 19px; }
.article-body ul, .article-body ol { margin: 0 0 1.5em; padding-left: 1.6em; }
.article-body ul { list-style: none; padding-left: 0; }
.article-body ul > li { position: relative; padding-left: 1.7em; }
.article-body ul > li::before { content: ""; position: absolute; left: .2em; top: .78em; width: 8px; height: 8px; border-radius: 50%; background: #706290; }
.article-body ol { list-style: decimal; }
.article-body ol > li::marker { color: #706290; font-weight: 700; }
.article-body li { margin: 0 0 .65em; }
.article-body li > p { margin: 0; }
.article-body strong, .article-body b { color: #1d056e; font-weight: 700; }
.article-body a { color: #1d056e; text-decoration: underline; text-decoration-color: #b9b0d0; text-underline-offset: 3px; transition: color .2s, text-decoration-color .2s; }
.article-body a:hover { color: #706290; text-decoration-color: currentColor; }
.article-body img { display: block; max-width: 100%; height: auto; margin: 2em auto; border-radius: 10px; }
.article-body figure { margin: 2em 0; }
.article-body figcaption { margin-top: .6em; text-align: center; font-size: 14px; color: #706290; }
.article-body blockquote { margin: 2em 0; padding: 1.1em 1.5em; border-left: 4px solid #706290; background: #f8f7f9; border-radius: 0 10px 10px 0; font-style: italic; color: #1d056e; }
.article-body table { width: 100%; border-collapse: collapse; margin: 2em 0; font-size: 16px; display: block; overflow-x: auto; }
.article-body th, .article-body td { padding: 10px 14px; border: 1px solid #e3e0ea; text-align: left; }
.article-body th { background: #f8f7f9; color: #1d056e; }
.article-body hr { border: 0; height: 1px; background: #e3e0ea; margin: 2.5em 0; }
.article-body iframe, .article-body video { max-width: 100%; border-radius: 10px; }

@media (max-width: 768px) {
    .article-body { font-size: 16px; line-height: 1.75; }
    .article-body h2 { font-size: 24px; }
    .article-body h3 { font-size: 20px; }
}

/* Article page chrome */
.article-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; color: rgba(255, 255, 255, .8); font-size: 15px; }
.article-meta i { margin-right: 6px; opacity: .8; }
.article-card { background: #fff; border: 1px solid #e3e0ea; border-radius: 14px; box-shadow: 0 30px 80px -40px rgba(29, 5, 110, .25); }
.article-cta { background: linear-gradient(135deg, #1d056e, #2c3d97); color: #fff; border-radius: 14px; }
.article-related { display: flex; flex-direction: column; justify-content: space-between; background: #fff; border: 1px solid #e3e0ea; border-radius: 12px; overflow: hidden; transition: transform .25s, box-shadow .25s, border-color .25s; }
.article-related:hover { transform: translateY(-4px); border-color: #1d056e; box-shadow: 0 24px 50px -28px rgba(29, 5, 110, .45); }
.article-related .thumb { aspect-ratio: 16 / 10; background: #f8f7f9; overflow: hidden; }
.article-related .thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.article-related:hover .thumb img { transform: scale(1.05); }
.share-btn { width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; border: 1px solid #e3e0ea; color: #1d056e; background: #fff; transition: all .2s; cursor: pointer; }
.share-btn:hover { background: #1d056e; color: #fff; border-color: #1d056e; }
