/* ============================================
   BLOG FULL-WIDTH FIX
   Edge-to-edge backgrounds, contained content
   + Breadcrumb gap fix (no space after nav)
   Dev: Paul .Y 20260202

   Technique: width: 100vw + margin-left: calc(-50vw + 50%)
   breaks elements out of ANY parent container
   so backgrounds hit viewport edges.
   Inner containers keep their max-width / padding.
   ============================================ */


/* ===== BLOG ARCHIVE (SHORTCODE in Elementor) =====
   The entire shortcode output breaks out of
   the Elementor widget / page-builder container.    */

.blog-archive-shortcode {
    width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
    overflow-x: hidden;
}


/* ===== SINGLE BLOG POST =====
   Each section breaks out independently.             */

/* Breadcrumb — flush to nav, no gap */
.blog-breadcrumb-section {
    width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
    margin-top: 0 !important;   /* REMOVE the 50px gap after nav */
}

/* Hero image — full-width */
.blog-hero-section {
    width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
}

.blog-hero-image {
    max-width: 100% !important;
    width: 100% !important;
}

/* Post header — white bg edge-to-edge */
.blog-post-header {
    width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
}

/* Post content — white bg edge-to-edge */
.blog-post-content {
    width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
}

/* Related posts — #FAF9F7 bg edge-to-edge */
.blog-related-posts {
    width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
}