/* Single blog post — editorial layout on Hello Elementor's own single template (no Theme
   Builder template exists on this site). mu-plugins/bp-single-post.php suppresses the theme's
   .page-header and prepends its own block, so the article reads:

     header.bp-post-head (tan panel: h1 + date)
     figure.bp-post-hero
     div.bp-post-body   ← the client's copy, with runs of short h3 sections wrapped as .bp-cards
     aside.bp-post-more ← three more posts, same card as the Blog grid

   Measure is held on the prose elements themselves, not the body, so the card grid and the
   related rail can use the full 1120px while paragraphs stay at a readable ~70ch.
   Comments are off site-wide in the same mu-plugin; the display:none below is only a belt for
   cached markup. Tokens come from the Elementor kit (post-6.css), which loads on posts too. */

/* The site header is an absolutely positioned overlay (99px tall on desktop, sitting under
   the announcement bar), so the article has to clear it itself. */
body.single-post .site-main{
	max-width:1120px;margin:0 auto;
	padding:140px var(--space-sm,24px) var(--space-section,150px);
}
body.single-post .page-content{overflow:hidden;} /* contains the floated hero */

/* ---- header panel ---- */
body.single-post .bp-post-head{
	background:var(--band-tan,#FAF5EB);border-radius:var(--radius-lg,22px);
	padding:var(--space-lg,60px);margin:0 0 var(--space-md,40px);
}
body.single-post .bp-post-title{
	font-family:Nunito, sans-serif;font-weight:500;color:var(--ink,#52815F);
	font-size:56px;line-height:1.12;margin:0 0 16px;max-width:18ch;text-wrap:balance;
}
body.single-post .bp-post-meta{
	font-family:"Nunito",sans-serif;font-weight:600;font-size:13px;
	letter-spacing:.1em;text-transform:uppercase;color:var(--label-green,#4B5F4F);
}

/* ---- featured image ---- */
body.single-post .bp-post-hero{
	margin:0 0 var(--space-lg,60px);
	aspect-ratio:16 / 9;overflow:hidden;border-radius:var(--radius-md,16px);
	background:var(--band-tan,#FAF5EB);
}
/* Posts that open on running prose get the magazine treatment instead: the image sits beside
   the opening copy. Posts that open on a subhead or a card grid keep the full-width image,
   which is why this is scoped with :has() rather than applied to every post. */
@supports selector(:has(*)){
	@media (min-width:1025px){
		body.single-post .bp-post-hero:has(+ .bp-post-body > :first-child:is(p)){
			float:right;width:44%;margin:6px 0 var(--space-sm,24px) var(--space-lg,60px);
			aspect-ratio:4 / 5;
		}
	}
}
/* Two classes: Elementor's `.elementor img{height:auto}` outranks a single class, and Hello
   Elementor's theme.css caps `.post .wp-post-image` at max-height:500px - the single template
   puts that `post` class on the wrapper, so it reaches every post image on this page. */
body.single-post .bp-post-hero .bp-post-hero-img,
body.single-post .bp-carousel-media .bp-carousel-img{max-height:none;}
/* The related rail's cards are inside .bp-main, whose `img{height:auto}` above outranks
   bp-blog-carousel.css's own `.bp-carousel-media .bp-carousel-img` - restate it here. */
body.single-post .bp-carousel-media .bp-carousel-img{height:100%;object-fit:cover;}
body.single-post .bp-post-hero .bp-post-hero-img{
	width:100%;height:100%;object-fit:cover;object-position:center;display:block;
}

/* ---- prose ---- */
body.single-post .bp-main{
	font-family:"Nunito",sans-serif;font-size:18px;line-height:1.75;color:var(--body,#604327);
}
body.single-post .bp-post-body > p,
body.single-post .bp-post-body > ul,
body.single-post .bp-post-body > ol,
body.single-post .bp-post-body > h2,
body.single-post .bp-post-body > h3,
body.single-post .bp-post-body > blockquote{max-width:70ch;}
body.single-post .bp-main p{margin:0 0 var(--space-xs,20px);}
body.single-post .bp-main h2{font-family:Nunito, sans-serif;font-weight:500;color:var(--ink,#52815F);font-size:34px;line-height:1.2;margin:var(--space-md,40px) 0 12px;}
body.single-post .bp-main h3{font-family:Nunito, sans-serif;font-weight:500;color:var(--ink,#52815F);font-size:24px;line-height:1.3;margin:var(--space-sm,24px) 0 8px;}
body.single-post .bp-post-body > *:first-child{margin-top:0;}
body.single-post .bp-main ul,
body.single-post .bp-main ol{margin:0 0 var(--space-xs,20px);padding-inline-start:22px;}
body.single-post .bp-main li{margin-bottom:6px;}
body.single-post .bp-main a{color:var(--label-green,#4B5F4F);}
body.single-post .bp-main a:hover{color:var(--accent-hover,#604327);}
body.single-post .bp-main img{max-width:100%;height:auto;border-radius:var(--radius-md,16px);}

/* Drop cap only when the copy actually opens on a paragraph — several posts open on a
   subhead, where a mid-article drop cap would read as a mistake. */
body.single-post .bp-post-body > p:first-child::first-letter{
	float:left;font-family:Nunito, sans-serif;font-weight:500;color:var(--ink,#52815F);
	font-size:68px;line-height:.82;padding:4px 10px 0 0;
}

body.single-post .bp-main blockquote{
	margin:var(--space-md,40px) 0;padding:var(--space-sm,24px) var(--space-md,40px);
	background:var(--band-tan,#FAF5EB);border-radius:var(--radius-md,16px);
	font-family:Nunito, sans-serif;font-size:24px;line-height:1.4;color:var(--ink,#52815F);
}
body.single-post .bp-main blockquote p:last-child{margin-bottom:0;}

/* ---- card grid (built by bp_single_cardify) ---- */
body.single-post .bp-cards{
	display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
	gap:var(--space-sm,24px);margin:var(--space-md,40px) 0;clear:both;
}
body.single-post .bp-card{
	background:var(--card,#FFFFFF);border:1px solid var(--border,#DFD9D4);
	border-radius:var(--radius-md,16px);padding:var(--space-sm,24px);
}
body.single-post .bp-card :is(h2,h3){font-size:22px;line-height:1.3;letter-spacing:normal;margin:0 0 10px;}
body.single-post .bp-card p{font-size:16px;line-height:1.6;margin:0 0 12px;}
body.single-post .bp-card > *:last-child{margin-bottom:0;}
body.single-post .bp-card ul{margin:0;padding-inline-start:18px;}
body.single-post .bp-card li{font-size:16px;line-height:1.5;}

/* ---- related posts ---- */
body.single-post .bp-post-more{
	display:block;clear:both;margin-top:var(--space-xl,80px);
	padding-top:var(--space-md,40px);border-top:1px solid var(--border,#DFD9D4);
}

body.single-post .post-tags{
	margin-top:var(--space-md,40px);font-family:"Nunito",sans-serif;font-size:14px;
	color:var(--body,#604327);
}

body.single-post .comments-area,
body.single-post #comments,
body.single-post .comment-respond{display:none !important;}

@media (max-width:1024px){
	body.single-post .bp-post-hero{aspect-ratio:3 / 2;margin-bottom:var(--space-md,40px);}
	body.single-post .bp-post-title{font-size:42px;max-width:none;}
	body.single-post .bp-post-head{padding:var(--space-md,40px);}
}
@media (max-width:767px){
	body.single-post .site-main{padding-top:120px;padding-bottom:var(--space-xl,80px);}
	body.single-post .bp-post-head{
		padding:var(--space-sm,24px);border-radius:var(--radius-md,16px);
		margin-bottom:var(--space-sm,24px);
	}
	body.single-post .bp-post-title{font-size:32px;}
	body.single-post .bp-main{font-size:17px;}
	body.single-post .bp-main h2{font-size:26px;}
	body.single-post .bp-main h3{font-size:20px;}
	body.single-post .bp-card :is(h2,h3){font-size:20px;}
	body.single-post .bp-post-body > p:first-child::first-letter{font-size:52px;}
	body.single-post .bp-post-more{margin-top:var(--space-lg,60px);}
}

/* 14 Sep 2026 audit #26: the related rail inherits .bp-main's h2/p rules (40px heading margins,
   20px paragraph margins, underlined links) - restate the card's own values. Title panel H1
   wrapped at 18ch inside a 1090px panel. Checklist cards flex so a 3+2 run fills its last row. */
body.single-post .bp-post-more .bp-carousel-title{margin:0;font-size:26px;line-height:1.25;}
body.single-post .bp-post-more .bp-carousel-title a{text-decoration:none;}
body.single-post .bp-post-more p{margin:0;}
body.single-post .bp-post-title{max-width:26ch;}
body.single-post .bp-cards{display:flex;flex-wrap:wrap;}
body.single-post .bp-card{flex:1 1 260px;}
@media (max-width:767px){ body.single-post .bp-post-more .bp-carousel-title{font-size:22px;} }