/* Active main-menu "pill" highlight.
   The generated blog/product pages were exported from a template whose inline header
   CSS lacks the current-menu-item background rule, so the highlighted "Blog" tab would
   show only the underline and miss its white pill. This restores the theme's exact
   active style (matches the static pages). The base border-radius/padding is already
   present in the header CSS, so we only need the active background here. */
.main-navigation .menu > .menu-item.current-menu-item > a,
.main-navigation .menu > .menu-item.current-menu-parent > a,
.main-navigation .menu > .menu-item.current-menu-ancestor > a {
    background-color: rgba(255, 255, 255, 0.9);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    text-shadow: none;
    color: #000 !important;
}

/* Hero banner for blog listing, category, and detail pages — matches the
   wpc/upvc banner style (full-width photo, dark overlay, gold title, bento badge). */

.blog-banner-wrap {
    width: 100%;
}

.blog-banner {
    width: 100%;
    height: 60vh;
    min-height: 400px;
    background-size: cover;
    background-position: center;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-left: 5%;
    padding-top: 100px;
    box-sizing: border-box;
}

.blog-banner::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
}

.blog-banner-content {
    position: relative;
    z-index: 1;
    color: #fff;
    text-align: left;
    max-width: 80%;
}

.blog-banner .bento-badge {
    margin-bottom: 20px;
    font-size: 13px;
    font-weight: 500;
    color: #fff;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    border-radius: 30px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.blog-banner .bento-badge .antra-icon-dot {
    color: #caa05c;
}

.blog-banner-title {
    color: #caa05c;
    text-transform: none;
    font-size: 64px;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1.1;
    margin: 0;
}

.blog-banner.is-article .blog-banner-title {
    font-size: 44px;
}

.blog-banner-breadcrumb {
    margin-top: 18px;
    font-size: 14px;
    color: #fff;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.blog-banner-breadcrumb a {
    color: #fff;
    opacity: 0.85;
    text-decoration: none;
}

.blog-banner-breadcrumb a:hover {
    opacity: 1;
    color: #caa05c;
}

.blog-banner-breadcrumb .sep {
    font-style: normal;
    opacity: 0.5;
}

.blog-banner-breadcrumb .current {
    color: #caa05c;
}

@media (max-width: 991px) {
    .blog-banner-title {
        font-size: 44px;
    }
    .blog-banner.is-article .blog-banner-title {
        font-size: 32px;
    }
}

@media (max-width: 767px) {
    .blog-banner {
        height: 42vh;
        min-height: 300px;
        padding-top: 80px;
    }
    .blog-banner-title {
        font-size: 32px;
    }
    .blog-banner.is-article .blog-banner-title {
        font-size: 26px;
    }
    .blog-banner-content {
        max-width: 92%;
    }
}