/* Blogs page: white theme, single hero (no slideshow), card section light mode */

/* Smooth scroll when clicking "Kthehu në krye" (anchor #top) */
html.blogs-page {
    scroll-behavior: smooth;
}

/* Hide slideshow arrows and progress bar (blogs has single hero only) */
.blogs-page .slide-arrow,
.blogs-page .slide-progress-bar {
    display: none !important;
}

/* Single hero: ensure one slide fills */
.blogs-page .hero-slide-single {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Hero header text white */
.blogs-page .hero-content .hero-title,
.blogs-page .hero-content .hero-subtitle {
    color: #ffffff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.blogs-page .hero-content .hero-button {
    background: #ffffff;
    color: #111111;
    border: none;
}

.blogs-page .hero-content .hero-button:hover {
    background: #0062ff;
    color: #ffffff;
}

/* Body and main content: white background */
.blogs-page {
    background: #ffffff;
    color: #111111;
}

/* Remove quick links section entirely */
.blogs-page .quick-links {
    display: none !important;
}

/* Categories bar: light gray (whiter than cards); cards body: same as footer (#e8e8e8) */
.blogs-page .blog-section {
    background: #e8e8e8;
}

.blogs-page .blog-categories {  
    background: #f5f5f5;
    padding: 52px 56px 56px;
    border-bottom: 1px solid #e0e0e0;
}

.blogs-page .blog-category {
    color: #111111;
}

.blogs-page .blog-category:hover,
.blogs-page a.blog-category:hover {
    color: #000 !important;
}

.blogs-page .blog-category.active {
    color: #111111;
    font-family: "BMWMotorradW01-Bold", Arial, sans-serif;
}

/* Category arrow: points into cards area (footer color) */
.blogs-page .blog-category.active .category-arrow {
    border-bottom-color: #e8e8e8;
}

.blogs-page .blog-cards-container {
    background: #e8e8e8;
    padding: 40px 43px 60px;
}
    
.blogs-page .show-more-wrap {
    background: #e8e8e8;
    border-top: 1px solid #ddd;
}

.blogs-page .show-more-wrap .show-more-btn {
    background: #111111;
    color: #ffffff;
}

.blogs-page .show-more-wrap .show-more-btn:hover {
    background: #0062ff;
    color: #ffffff;
}

/* Mobile category dropdown: merged with body, no box/borders (desktop) */
.blogs-page .mobile-category-dropdown .mobile-category-btn {
    background: transparent;
    color: #111111;
    border: none;
}

.blogs-page .mobile-category-btn span:first-child {
    color: #555555;
}

.blogs-page .mobile-category-selected {
    color: #111111;
}

.blogs-page .mobile-category-arrow {
    fill: #111111;
}

.blogs-page .mobile-category-list {
    background: transparent;
    border: none;
}

.blogs-page .mobile-category-dropdown.is-open .mobile-category-list {
    border-top: none;
}

.blogs-page .mobile-category-option {
    color: #111111;
}

.blogs-page .mobile-category-option:hover,
.blogs-page .mobile-category-option.active {
    background: rgba(0, 0, 0, 0.05);
    color: #111111;
}

/* Back to top section – same color as categories bar, longer, text + arrow at bottom */
.back-to-top-section {
    background: #f5f5f5;
    min-height: 180px;
    padding: 64px 24px 40px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    text-align: center;
}

.back-to-top-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #333333;
    text-decoration: none;
    font-family: "BMWMotorradW01-Regular", Arial, sans-serif;
    font-size: 15px;
    letter-spacing: 0.3px;
    transition: color 0.2s ease;
}

.back-to-top-link:hover {
    color: #111111;
}

.back-to-top-icon {
    width: 20px;
    height: 20px;
    object-fit: contain;
    filter: brightness(0);
}

.back-to-top-link:hover .back-to-top-icon {
    filter: brightness(0);
}

.back-to-top-text {
    text-transform: uppercase;
}

/* ========== Mobile (640px) – same logic as index.php, blogs colors and no quick links ========== */
@media (max-width: 640px) {
    /* Hero: same layout as index – image area then content below (style.css sets hero height auto, slide padding-top 84vh, hero-content below with #16171a) */
    .blogs-page .hero {
        height: auto;
        min-height: auto;
        display: block;
        overflow: visible;
    }

    .blogs-page .hero-slide-single {
        display: block;
        padding-top: 84vh;
        min-height: 0;
        background-size: cover;
        background-position: 63% center;  /*pozita e photos ne header image */
    }

    .blogs-page .hero-content {
        position: relative;
        background: #16171a;
        padding: 36px 20px 40px 28px;
        max-width: 100%;
        transform: none !important;
        opacity: 1 !important;
        top: 0;
        left: 0;
    }

    .blogs-page .hero-content .hero-title {
        font-size: 26px;
        line-height: 1.3;
        margin-bottom: 16px;
        color: #ffffff;
    }

    .blogs-page .hero-content .hero-subtitle {
        font-size: 15px;
        margin-bottom: 26px;
        color: #ffffff;
    }

    .blogs-page .hero-content .hero-button {
        font-size: 13px;
        padding: 14px 24px;
        background: #ffffff;
        color: #111111;
        border: none;
    }

    .blogs-page .hero-content .hero-button:hover {
        background: #0062ff;
        color: #ffffff;
    }

    /* Quick links: already hidden globally */
    .blogs-page .quick-links {
        display: none !important;
    }

    /* Mobile category dropdown: merged with body (#e8e8e8), no box/borders/shadows */
    .blogs-page .mobile-category-dropdown {
        display: block;
        background: #e8e8e8;
        padding: 24px 20px;
        border: none;
        box-shadow: none;
    }

    .blogs-page .mobile-category-dropdown .mobile-category-btn {
        background: transparent;
        border: none;
    }

    .blogs-page .mobile-category-list {
        background: #e8e8e8;
        border: none;
    }

    .blogs-page .mobile-category-dropdown.is-open .mobile-category-list {
        border-top: none;
        box-shadow: none;
    }

    .blogs-page .mobile-category-option:hover,
    .blogs-page .mobile-category-option.active {
        background: rgba(0, 0, 0, 0.06);
    }

    .blogs-page .blog-section {
        background: #e8e8e8;
    }

    .blogs-page .blog-cards-container {
        background: #e8e8e8;
        padding: 28px 24px 40px;
    }

    .blogs-page .show-more-wrap {
        background: #e8e8e8;
        border-top: 1px solid #ddd;
    }

    /* Back-to-top section: slightly smaller on mobile */
    .back-to-top-section {
        min-height: 140px;
        padding: 48px 20px 32px;
        background: #f5f5f5;
    }

    .back-to-top-link {
        font-size: 14px;
    }

    .back-to-top-icon {
        width: 18px;
        height: 18px;
    }
}