/* ==========================================================================
   Olivae Blog — Dynamic additions
   Loaded ONLY on blog.php and the generated /blog/{slug}.php pages.
   This file never overrides the original design — it only fixes the
   featured-image box sizes (so one uploaded image always looks correct
   in all 3 places) and adds small bits the static template didn't have
   (excerpt text, live view counter, empty/no-post states).
   ========================================================================== */

/* ---- Featured image: blog listing card (uses the "card" 700x467 size) ---- */
.blogpage6-img,
.blogpage8-wrapper .blogpage6-img {
    aspect-ratio: 3 / 2;
    overflow: hidden;
    display: block;
}

.blogpage6-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ---- Featured image: single post hero (uses the "hero" 1200x675 size) ---- */
.singleblog-img-sec {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    display: block;
}

.singleblog-img-sec img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ---- Featured image: related posts (uses the "card" size) ---- */
.singleblogpage1-img-sec {
    aspect-ratio: 3 / 2;
    overflow: hidden;
    display: block;
}

.singleblogpage1-img-sec img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ---- Featured image: sidebar "Popular Posts" widget (uses the "thumb" 160x160 size) ---- */
.blog2-post-img {
    width: 70px;
    height: 70px;
    flex-shrink: 0;
    overflow: hidden;
}

.blog2-post-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ---- Excerpt text under blog listing card title ---- */
.olivae-card-excerpt {
    color: #f1f1f1;
    font-family: Lexend, sans-serif;
    font-size: 15px;
    line-height: 22px;
    margin-top: 12px;
    opacity: 0.85;
}

/* ---- Live view counter badge ---- */
.olivae-views-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #f1f1f1;
    font-family: Lexend, sans-serif;
    font-size: 14px;
    margin-left: 12px;
    opacity: 0.85;
}

.olivae-views-badge svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* ---- Active / current category & tag highlight in sidebar ---- */
.blog-categroy.is-active {
    color: #eee3d4;
    font-weight: 500;
}

ul.blog2-tag-list li.is-active {
    background: #eee3d4;
}

ul.blog2-tag-list li.is-active a {
    color: #0b1315;
}

/* ---- Pagination current page ---- */
ul.pagination-blog-2 li.is-active .page-link {
    background: #eee3d4;
    color: #0b1315;
}

/* ---- Empty state (no posts found) ---- */
.olivae-empty-state {
    padding: 60px 20px;
    text-align: center;
}

.olivae-empty-state p {
    color: #f1f1f1;
    font-family: Lexend, sans-serif;
    font-size: 18px;
    opacity: 0.85;
}

/* ---- Rich text body of a blog post (content typed in the admin editor) ----
   Paragraphs and headings get the SAME classes the original static
   single-blogpage1.php template used (.singleblog1-txt2 / .singleblog1-txt3
   alternating on paragraphs, .singleblog1-txt4 on headings) — applied by
   apply_singleblog_content_classes() in includes/blog/functions.php, and
   already styled by the site's own style.css. Only list/image/link/quote
   styling is added here, since the original template never had editor-
   generated lists or blockquotes to style. */
.singleblog1-richtext {
    margin-top: 20px;
}

.singleblog1-richtext ul,
.singleblog1-richtext ol {
    color: #f1f1f1;
    font-family: Lexend, sans-serif;
    font-size: 16px;
    line-height: 24px;
    padding-left: 22px;
    margin-top: 20px;
}

.singleblog1-richtext li {
    margin-bottom: 8px;
}

.singleblog1-richtext img {
    max-width: 100%;
    height: auto;
    margin: 20px 0;
}

.singleblog1-richtext a {
    color: #eee3d4;
    text-decoration: underline;
}

.singleblog1-richtext blockquote {
    border-left: 3px solid #841a1b;
    padding-left: 20px;
    color: #eee3d4;
    font-style: italic;
    margin: 20px 0;
}

/* ---- Excerpt shown on the listing card (kept subtle, brand-consistent) ---- */

/* ---- Clear filter chip on blog listing ---- */
.olivae-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #0b1315;
    background: #eee3d4;
    font-family: Lexend, sans-serif;
    font-size: 14px;
    padding: 8px 14px;
    margin-bottom: 30px;
}

.olivae-filter-chip a {
    color: #841a1b;
    font-weight: 600;
}