/* Editorial styling for the guides: /blog and /blog/<slug>.
   Registered only on those pages (views/site/blog.php, views/site/article.php). */

/* ---------- article page ---------- */

.article-page article {
    max-width: 720px;
    font-family: 'Merriweather', Georgia, 'Times New Roman', serif;
    color: #2f353d;
    font-size: 15px;
    line-height: 1.75;
}

.article-page article h1 {
    font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: 700;
    font-size: 2.3em;
    line-height: 1.25;
    letter-spacing: -0.015em;
    color: #1d2129;
    margin-bottom: 0.3em;
}

.article-page article .article-meta,
.article-page article > p.type--fine-print {
    font-family: 'Open Sans', sans-serif;
    color: #8a919c;
    font-size: 0.78em;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-bottom: 1px solid #e8ecf1;
    padding-bottom: 1.4em;
    margin-bottom: 2em;
}

.article-page article h2 {
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
    font-size: 1.55em;
    line-height: 1.3;
    color: #1d2129;
    margin: 1.9em 0 0.7em;
    padding-top: 0.9em;
    border-top: 1px solid #e8ecf1;
}

.article-page article h3 {
    font-family: 'Open Sans', sans-serif;
    font-weight: 600;
    font-size: 1.18em;
    color: #1d2129;
    margin: 1.6em 0 0.5em;
}

.article-page article p,
.article-page article li {
    margin-bottom: 1.05em;
}

.article-page article > p:first-of-type {
    font-size: 1.12em;
    color: #444b54;
}

.article-page article ul,
.article-page article ol {
    padding-left: 1.4em;
    margin-bottom: 1.4em;
}

.article-page article li {
    margin-bottom: 0.55em;
    padding-left: 0.2em;
}

.article-page article li::marker {
    color: #4a90e2;
    font-weight: 600;
}

.article-page article a {
    color: #3a7bc8;
    text-decoration: none;
    border-bottom: 1px solid rgba(74, 144, 226, 0.35);
    transition: color 0.15s ease, border-color 0.15s ease;
}

.article-page article a:hover {
    color: #2c5f9e;
    border-bottom-color: #2c5f9e;
}

.article-page article strong {
    color: #1d2129;
}

/* code */

.article-page article code {
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    font-size: 0.82em;
    background: #f2f5f9;
    border: 1px solid #e3e9f0;
    border-radius: 4px;
    padding: 0.12em 0.4em;
    color: #35507a;
    word-break: break-word;
}

.article-page article pre {
    background: #f7f9fc;
    border: 1px solid #e3e9f0;
    border-left: 4px solid #4a90e2;
    border-radius: 6px;
    padding: 1.1em 1.3em;
    margin: 1.4em 0 1.6em;
    overflow-x: auto;
}

.article-page article pre code {
    background: none;
    border: 0;
    padding: 0;
    font-size: 0.86em;
    line-height: 1.6;
    color: #2f3c4e;
    white-space: pre;
    word-break: normal;
}

/* boxes after the article (CTA / related) */

.article-page .boxed {
    max-width: 720px;
}

.article-page .boxed ul {
    margin-bottom: 0;
}

/* ---------- blog index ---------- */

.blog-index .article-card {
    display: block;
    height: 100%;
    padding: 1.8em 1.8em 1.5em;
    border: 1px solid #e8ecf1;
    border-radius: 8px;
    background: #fff;
    transition: box-shadow 0.18s ease, transform 0.18s ease, border-color 0.18s ease;
    margin-bottom: 30px;
}

.blog-index .article-card:hover {
    border-color: #cfe0f5;
    box-shadow: 0 10px 28px rgba(29, 33, 41, 0.09);
    transform: translateY(-2px);
}

.blog-index .article-card h2 {
    font-size: 1.15em;
    line-height: 1.4;
    margin-bottom: 0.5em;
}

.blog-index .article-card h2 a {
    color: #1d2129;
}

.blog-index .article-card h2 a:hover {
    color: #3a7bc8;
    text-decoration: none;
}

.blog-index .article-card p {
    color: #5b6470;
    font-size: 0.95em;
    line-height: 1.6;
    margin-bottom: 1em;
}

.blog-index .article-card .article-card__more {
    font-weight: 600;
    color: #3a7bc8;
    font-size: 0.92em;
}

.blog-index .article-card .article-card__tag {
    display: inline-block;
    font-size: 0.72em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #4a90e2;
    background: #eef4fc;
    border-radius: 3px;
    padding: 0.25em 0.7em;
    margin-bottom: 1em;
}

@media (max-width: 767px) {
    .article-page article {
        font-size: 14px;
    }
    .article-page article h1 {
        font-size: 1.8em;
    }
}