/* ==========================================================================
   1. FORCE COVER IMAGE AND OVERRIDE ALL PREVIOUS BACKGROUNDS
   ========================================================================== */
/* Targets every possible banner, header, or top section variant on the blog page */
.blog .page-header, 
.blog .archive-header, 
.blog main header,
.blog .elementor-section-wrap > section:first-of-type,
.blog #masthead + div,
.blog [class*="-header"],
.blog [class*="banner"] {
    background-image: url('https://batoulhotels.com/wp-content/uploads/2022/07/WhatsApp-Image-2022-06-19-at-2.33.28-PM-2.jpeg') !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
}

/* Safety rule: If the old image was placed inside an inner container or background overlay, this blocks it */
.blog .page-header *, 
.blog .archive-header *, 
.blog .elementor-section-wrap > section:first-of-type * {
    background-image: none !important; 
}

/* Re-allow the background image ONLY for the top main containers themselves */
.blog .page-header, 
.blog .archive-header, 
.blog .elementor-section-wrap > section:first-of-type {
    background-image: url('https://batoulhotels.com/wp-content/uploads/2022/07/WhatsApp-Image-2022-06-19-at-2.33.28-PM-2.jpeg') !important;
}

/* Forces text inside that top header area to stay crisp and visible */
.blog .page-header h1, 
.blog .archive-title,
.blog .entry-title,
.blog .elementor-heading-title {
    color: #ffffff !important;
}

/* ==========================================================================
   2. HIDE BREADCRUMBS COMPLETELY ON THE BLOG PAGE
   ========================================================================== */
/* Combines almost all major breadcrumb classes from themes, Elementor, Yoast, and Rank Math */
.blog .breadcrumb, 
.blog .breadcrumbs,
.blog .rank-math-breadcrumb,
.blog .ast-breadcrumbs,
.blog .oceanwp-breadcrumbs,
.blog [class*="breadcrumb"] {
    display: none !important;
}

/* ==========================================================================
   3. REPLACE ALL DEFAULT HEADERS WITH "THE BATOUL JOURNAL"
   ========================================================================== */
/* Hides standard titles and subtitles (h1, h2, h3) inside the blog header area */
.blog .page-header h1, .blog .page-header h2, .blog .page-header h3,
.blog .archive-title, .blog .entry-title,
.blog h1.elementor-heading-title, .blog h2.elementor-heading-title, .blog h3.elementor-heading-title {
    font-size: 0 !important;
    visibility: hidden;
    margin: 0;
    padding: 0;
}

/* Injects your premium title ONLY onto the primary heading slot */
.blog .page-header h1::after, 
.blog .archive-title::after, 
.blog h1.elementor-heading-title::after {
    content: "The Batoul Journal" !important;
    font-family: 'Playfair Display', Georgia, serif !important;
    font-size: 3rem !important;
    color: #ffffff !important;
    visibility: visible;
    display: block;
    letter-spacing: 1px;
    font-weight: 400;
    text-transform: capitalize;
    margin-bottom: 15px;
}

/* Mobile adjustments for the main title */
@media (max-width: 768px) {
    .blog .page-header h1::after, 
    .blog .archive-title::after, 
    .blog h1.elementor-heading-title::after {
        font-size: 2.25rem !important;
    }
}

/* ==========================================================================
   4. CLEAN OUT AND REPLACE ALL DESCRIPTION BLOCKS
   ========================================================================== */
/* Completely silences all old paragraphs, excerpts, and generic text blocks in the banner */
.blog .page-header p,
.blog .archive-description,
.blog .elementor-text-editor,
.blog .elementor-text-editor p {
    font-size: 0 !important;
    visibility: hidden;
    margin: 0 !important;
    padding: 0 !important;
}

/* Injects the new description cleanly underneath our title */
.blog .page-header p::after,
.blog .archive-description::after,
.blog .elementor-text-editor::after {
    content: "Your curated window into luxury travel, modern hospitality innovations, and the fine art of seamless guest experiences." !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 1rem !important;
    line-height: 1.6 !important;
    color: #E0E0E0 !important;
    visibility: visible;
    display: block;
    max-width: 700px;
    margin: 15px auto 0 auto !important;
    font-weight: 300;
    letter-spacing: 0.5px;
}