/* ==========================================================================
   Blog detail — restore the featured image
   --------------------------------------------------------------------------
   BUG THIS FIXES
   The xpert-job-opening plugin ships this rule in assets/css/frontend.css:

       .single-xpert_job #site-header,
       .section-post-header { display: none !important; }

   The last selector is missing its `.single-xpert_job ` prefix, so it hides
   `.section-post-header` on EVERY page (the plugin CSS is enqueued globally).
   On blog posts that header holds the featured image, so the banner vanished.

   The proper fix is to scope that selector in the plugin, but the plugin file
   is not writable from the theme. This override re-shows the header on blog
   posts only, using higher specificity + !important so it beats the plugin
   rule regardless of load order. Job/portfolio singles are left untouched.

   The featured image then renders at Betheme's default (its original size,
   not stretched or cropped).
   ========================================================================== */

body.single-post .section-post-header {
	display: block !important;
}

/* Hide the prev/next post navigation and the byline/meta row above the image,
   so the blog detail reads: subheader -> featured image -> content. */
body.single-post .section-post-header .post-nav,
body.single-post .section-post-header .post-header {
	display: none !important;
}

/* ==========================================================================
   Match the featured image width to the post content width
   --------------------------------------------------------------------------
   Both the image and the content live inside a .section_wrapper with the same
   inner width. But Betheme renders the image frame as inline-block (so it
   shrinks to the image's natural size — small images look narrow), and the
   content text has a tiny side gutter. These rules make BOTH fill the full
   inner box, so the image and the text always share the exact same width and
   left/right edges, at every screen size.
   ========================================================================== */

/* Image: fill the column instead of collapsing to the image's natural size. */
body.single-post .section-post-header .single-photo-wrapper .image_frame,
body.single-post .section-post-header .single-photo-wrapper .image_wrapper {
	display: block;
	width: 100%;
	max-width: 100%;
	margin: 0;
}
body.single-post .section-post-header .single-photo-wrapper .image_wrapper img.wp-post-image {
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
}

.single-photo-wrapper .mcb-column-inner{
	margin-left:0px;
	margin-right:0px;
}

/* Content: Betheme gives .the_content_wrapper width:98% (a ~1% side gutter).
   Force it to 100% with no side margin so the text spans the same inner box
   as the image. */
body.single-post .post-wrapper-content .the_content_wrapper {
	width: 100%;
	max-width: 100%;
	margin-left: 0;
	margin-right: 0;
}

/* ==========================================================================
   Post title under the featured image
   --------------------------------------------------------------------------
   Injected at the top of the content by xl_blog_title_under_image() in
   functions.php, so it renders directly beneath the banner and aligns with
   both the image and the body text.
   ========================================================================== */
body.single-post .the_content_wrapper .xl-blog-single-title {
	margin: 30px 0 20px;
	padding: 0;
	font-size: 34px;
	line-height: 1.25;
	font-weight: 700;
}

@media (max-width: 767px) {
	body.single-post .the_content_wrapper .xl-blog-single-title {
		margin: 20px 0 15px;
		font-size: 26px;
	}
}