/* Mobile vs Figma fixes: single-post template (Elementor library 194, every
   blog post and case study) and the theme footer template 197 (posts +
   privacy policy). Reference: Figma 109:6 "Blog/Case - Mobile", 440x8973,
   which is built on the creator-economy post itself. No PNG of this frame was
   exported, so every value below comes from the frame's node data; line
   heights the node data omits were recovered by re-flowing the frame's own
   copy at its box width (body 22/22, TOC 22/34, headings 45/38).
   All rules are mobile-only; desktop is untouched. */

@media (max-width: 767px) {

	/* ── Header ink ──────────────────────────────────────────────────────
	   custom.css darkens the cream header logo and stag on posts with CSS
	   filters, which land on grey and near-black rather than Figma's #462222
	   (the frame's logo, hairlines and menu stag are all #462222). Use the
	   true dark assets instead and drop the filters. */
	body.single-post .sh-nav > .e-flexbox-base:not(.sh-nav-links):not(.sh-mobile-menu) img {
		content: url('../../img/socialhart-nav-logo-mobile-dark.svg') !important;
		filter: none !important;
	}
	body.single-post .sh-mobile-menu .sh-mobile-logo-row img.e-image-base {
		content: url('../../img/deer-dark.png') !important;
		filter: none !important;
	}

	/* ── Hero ────────────────────────────────────────────────────────────
	   Meta at y=134 (53 under the bar), h1 45/38 at x=28 w=384, byline 50px
	   28 below the h1, TOC box 93 below the byline top, featured image 53
	   below the TOC. The build ran 40px insets, a 70px h1 and a 66px byline. */
	body.single-post .elementor-194 > .elementor-element-b6ad464 {
		padding: 53px 28px 65px !important;
	}
	/* Meta: Figma sets date + categories as three 18px lines (54px). The
	   category pills keep their 24px WCAG 2.5.8 tap height, but lose the
	   extra 2px top/bottom padding and the 6px row gap that pushed the block
	   to 80px. */
	body.single-post .elementor-element-306a43d {
		margin: 0 12px !important;
		width: calc(100% - 24px) !important;
		row-gap: 0 !important;
		column-gap: 6px !important;
	}
	body.single-post .elementor-element-306a43d a[rel="tag"] {
		padding-top: 0 !important;
		padding-bottom: 0 !important;
	}
	body.single-post .elementor-element-b6ad464 > h1 {
		font-size: 45px !important;
		line-height: 38px !important;
		letter-spacing: 0 !important;
		margin-top: 29px !important;
		width: 100% !important;
	}
	/* "Edited By" and the author name stack on two lines (the frame's byline
	   box is two lines tall); at the 384px column they would otherwise fit on
	   one and pull everything below up 36px. */
	body.single-post .sh-byline {
		margin-top: 28px !important;
		width: 100% !important;
		gap: 0 !important;
	}
	body.single-post .sh-byline > .e-paragraph-base {
		flex: 0 0 100% !important;
		text-align: center !important;
	}
	body.single-post .sh-byline .e-paragraph-base {
		font-size: 50px !important;
		line-height: 36px !important;
		letter-spacing: -0.5px !important;
	}
	/* TOC: 384px gold box ruled 1px, label at +29/+19, entries 46px under the
	   label top in a 333px justified measure on a 34px line. */
	body.single-post .sh-toc-box {
		width: 100% !important;
		margin-top: 21px !important;
		padding: 29px 32px 36px 19px !important;
		border: 1px solid #462222 !important;
		box-sizing: border-box !important;
		gap: 0 !important;
	}
	body.single-post .sh-toc-box .sh-toc-label {
		margin: 0 !important;
	}
	body.single-post .sh-toc-links {
		margin-top: 28px !important;
		font-size: 22px !important;
		line-height: 34px !important;
		letter-spacing: -0.66px !important;
		text-align: justify !important;
	}
	body.single-post .elementor-element-b6ad464 > img {
		width: 100% !important;
		max-width: none !important;
		height: 364px !important;
		margin-top: 53px !important;
		object-fit: cover !important;
		border: 1px solid #3B1919 !important;
		box-sizing: border-box !important;
	}

	/* ── Article body ────────────────────────────────────────────────────
	   384px column at x=28. Copy is 22px on a 22px line (Figma's body boxes
	   re-flow to exactly 22.0px per line; the build used 30.8). h2 45/38 with
	   78px above and 36 below. Inline images span the column with the 1px
	   frame rule; in-copy buttons are the 232x51 pink CTA. */
	body.single-post .elementor-194 > .elementor-element-40bade2 {
		padding: 0 28px 78px !important;
	}
	body.single-post .sh-post-content p,
	body.single-post .sh-post-content li {
		font-size: 22px !important;
		line-height: 22px !important;
		letter-spacing: -0.66px !important;
		margin-bottom: 22px !important;
	}
	body.single-post .sh-post-content h2 {
		font-size: 45px !important;
		line-height: 38px !important;
		letter-spacing: 0 !important;
		margin: 78px 0 36px !important;
	}
	body.single-post .sh-post-content h3 {
		font-size: 40px !important;
		line-height: 36px !important;
		letter-spacing: -0.4px !important;
	}
	body.single-post .sh-post-content img {
		width: 100% !important;
		height: auto !important;
		margin: 46px 0 !important;
		border: 1px solid #3B1919;
		box-sizing: border-box;
	}
	body.single-post .sh-post-content .wp-block-button__link {
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
		min-width: 232px !important;
		min-height: 51px !important;
		padding: 0 20px !important;
		border-radius: 4px !important;
		box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.28) !important;
	}

	/* ── Post tail order ─────────────────────────────────────────────────
	   Figma: article -> author bio -> share -> newsletter card. The build
	   rendered newsletter -> bio -> share: the ordering rules in custom.css
	   target the nesting inside .sh-post-content (be4f7fb), but the current
	   render places these blocks directly under .elementor-194. Both
	   nestings are covered here so a cache rebuild cannot silently undo it. */
	body.single-post .elementor-194 {
		display: flex !important;
		flex-direction: column !important;
	}
	body.single-post .elementor-194 > .elementor-element-b6ad464 { order: 0; }
	body.single-post .elementor-194 > .elementor-element-40bade2 { order: 1; }
	body.single-post .elementor-194 > .elementor-element-4b02aba { order: 2; }
	body.single-post .elementor-194 > .elementor-element-fc1c0de { order: 3; }
	body.single-post .elementor-194 > .elementor-element-af2ed9e { order: 4; }
	body.single-post .elementor-element-be4f7fb {
		display: flex !important;
		flex-direction: column !important;
	}

	/* Bio + share wrapper: 28px insets; newsletter card 78px below share. */
	body.single-post .elementor-element-4b02aba {
		padding: 0 28px 78px !important;
		gap: 0 !important;
	}
	/* Author box: 384 wide pink panel ruled 1px, 32px above a 164px round
	   avatar, name 17px below it, bio 109px below the name top in a 341px
	   measure, 50px bottom padding. The build squeezed name and bio into a
	   270px column, wrapping the name onto two lines. */
	body.single-post .sh-author-box {
		width: 100% !important;
		padding: 32px 21px 50px !important;
		border: 1px solid #462222 !important;
		box-sizing: border-box !important;
		gap: 0 !important;
	}
	body.single-post .sh-author-box > img {
		width: 164px !important;
		height: 164px !important;
		border-radius: 50% !important;
	}
	body.single-post .sh-author-box > .e-flexbox-base {
		width: 100% !important;
		align-items: center !important;
	}
	body.single-post .sh-author-box h3 {
		width: auto !important;
		margin: 19px 0 0 !important;
		font-size: 66.6px !important;
		line-height: 58px !important;
		white-space: nowrap !important;
		text-align: center !important;
	}
	body.single-post .sh-author-box p {
		max-width: min(341px, 100%) !important;
		margin: 51px auto 0 !important;
		font-size: 22px !important;
		line-height: 22px !important;
		letter-spacing: -0.66px !important;
	}
	/* Share: 384x133 ruled box 46px under the bio, heading 25px in, the four
	   34px icons centred 11px under it on a ~19.6px gap. */
	body.single-post .sh-share-box {
		width: 100% !important;
		height: 133px !important;
		margin-top: 46px !important;
		padding: 25px 0 0 !important;
		justify-content: flex-start !important;
		border: 1px solid #462222 !important;
		box-sizing: border-box !important;
		gap: 0 !important;
	}
	body.single-post .sh-share-box h4 {
		margin: 0 !important;
		font-size: 40px !important;
		line-height: 36px !important;
		letter-spacing: -0.4px !important;
		text-align: center !important;
	}
	body.single-post .sh-share-box > .e-flexbox-base {
		width: auto !important;
		margin-top: 11px !important;
		justify-content: center !important;
		gap: 19.6px !important;
		flex-wrap: nowrap !important;
	}
	body.single-post .sh-share-box > .e-flexbox-base > .e-flexbox-base {
		width: 34px !important;
		height: 34px !important;
		border-radius: 50% !important;
		overflow: hidden !important;
	}

	/* Newsletter card: 384px gold card ruled 1px, eyebrow at +55/+35,
	   heading 50/38 in a 322px measure 41px under the eyebrow top. (Figma
	   also draws the name/email fields and button inside this card; the
	   template's card carries no form widget, so its bottom padding closes
	   the card after the heading.) */
	body.single-post .sh-post-news-wrap {
		padding: 0 28px !important;
	}
	body.single-post .sh-post-newsletter {
		width: 100% !important;
		padding: 55px 30px 73px 35px !important;
		border: 1px solid #462222 !important;
		box-sizing: border-box !important;
		gap: 0 !important;
	}
	body.single-post .sh-post-news-eyebrow {
		letter-spacing: -0.2px !important;
	}
	body.single-post .sh-post-news-head {
		max-width: min(322px, 100%) !important;
		margin: 23px 0 0 -4px !important;
		font-size: 50px !important;
		line-height: 38px !important;
		letter-spacing: -0.5px !important;
	}

	/* Previous/next link and "Keep reading" are not in the frame; they keep
	   the page's 28px insets and sit 54px under the newsletter card. */
	body.single-post .sh-post-outro {
		padding: 54px 28px 54px !important;
	}

	/* ── Program CTA (Radiance) ──────────────────────────────────────────
	   Figma "Program CTA Section": the photo on top (518px), the tag hanging
	   over the seam, then the red panel: stag 49px in, heading 45/38 at x=24,
	   copy 22/22 38px under the heading, panel ends 58px under the copy. The
	   build stacked text first, photo second in a 260px inset box, with
	   32px/18px type. The frame has no button in this band. */
	body.single-post .sh-inline-cta {
		flex-direction: column !important;
		flex-wrap: nowrap !important;
		margin: 0 !important;
		width: 100% !important;
		max-width: 100% !important;
		position: relative;
	}
	body.single-post .sh-inline-cta-photo {
		order: -1;
		flex: 0 0 auto !important;
		width: 100% !important;
		max-width: 100% !important;
		height: 518px !important;
		margin: 0 !important;
		object-fit: cover !important;
	}
	body.single-post .sh-inline-cta-text {
		padding: 49px 28px 58px 24px !important;
	}
	body.single-post .sh-inline-cta-text::before {
		width: 65px !important;
		height: 98px !important;
		margin-bottom: 5px !important;
	}
	body.single-post .sh-inline-cta-text h3 {
		font-size: 45px !important;
		line-height: 38px !important;
		letter-spacing: 0 !important;
		margin: 0 0 38px !important;
	}
	body.single-post .sh-inline-cta-text p {
		font-size: 22px !important;
		line-height: 22px !important;
		letter-spacing: -0.66px !important;
		max-width: min(388px, 100%) !important;
		margin: 0 !important;
	}
	body.single-post .sh-inline-cta-btn {
		display: none !important;
	}
	body.single-post .sh-inline-cta-tag {
		top: 398px !important;
		inset-inline-end: auto !important;
		inset-inline-start: 19.3% !important;
		width: 62% !important;
		height: auto !important;
		aspect-ratio: 600 / 630;
	}

	/* The footer template's "content coal" band is not part of the blog
	   frame: the program CTA runs straight into the pink newsletter band. */
	body.single-post .elementor-197 .elementor-element-4d148c1 {
		display: none !important;
	}
}

/* ── Footer template 197 (posts and privacy policy) ─────────────────────
   Same geometry as the verified homepage footer (Figma 109:6 repeats it):
   newsletter band 492px, fields 383x55 13px apart 49px under the heading,
   281x51 left button; NAVIGATION x=59 / CONNECT x=274 70px under the band;
   20px links on a 28px pitch; stacked wordmark 376x173 91px under the links;
   one 89px legal row. The build ran 47px insets, a 149px-wide form, a blurb
   squeezed to 156px (432px of wrapped heading), and a two-row legal bar. */
@media (max-width: 767px) {
	/* The band's pink paper backdrop had collapsed to 76px of the 492px band. */
	.elementor-197 .e-bf633d7-77a7bd.e-bf633d7-77a7bd {
		height: 100% !important;
	}
	.elementor-197 .elementor-element-d3acec1 {
		border-top: 1px solid #3B1919;
		border-bottom: 1px solid #3B1919;
	}
	.elementor-197 .elementor-element-310d2c1 {
		padding: 58px 28px 69px !important;
	}
	.elementor-197 .elementor-element-310d2c1 > h2 {
		width: 100% !important;
		font-size: 45px !important;
		line-height: 37.8px !important;
		letter-spacing: -0.5px !important;
	}
	.elementor-197 .sh-newsletter-form {
		width: 100% !important;
		flex: 0 0 100% !important;
		margin-top: 49px !important;
	}
	.elementor-197 .sh-newsletter-form > .elementor-widget,
	.elementor-197 .sh-newsletter-form .elementor-form {
		width: 100% !important;
	}
	.elementor-197 .sh-newsletter-form .elementor-form-fields-wrapper {
		margin-bottom: 0 !important;
	}
	.elementor-197 .sh-newsletter-form .elementor-field-group {
		margin-bottom: 13px !important;
	}
	.elementor-197 .sh-newsletter-form .elementor-field-group.e-form__buttons {
		margin: 14px 0 0 !important;
		justify-content: flex-start !important;
	}
	.elementor-197 .sh-newsletter-form input.elementor-field-textual {
		height: 55px !important;
		min-height: 55px !important;
		padding: 0 19px !important;
		border: 1px solid #3B1919 !important;
		border-radius: 0 !important;
		background: transparent !important;
		font-family: 'Source Serif Pro', Georgia, serif !important;
		font-size: 20px !important;
		letter-spacing: -0.6px !important;
		color: #3B1919 !important;
	}
	.elementor-197 .sh-newsletter-form input.elementor-field-textual::placeholder {
		color: #3B1919 !important;
		opacity: 1 !important;
	}
	.elementor-197 .sh-newsletter-form .e-form__buttons .elementor-button {
		flex: 0 0 auto !important;
		min-width: 281px !important;
		width: 281px !important;
		min-height: 51px !important;
		height: 51px !important;
		padding: 0 20px !important;
		white-space: nowrap !important;
	}
	.elementor-197 .elementor-element-3483d3a {
		padding: 70px 28px 0 !important;
	}
	.elementor-197 .elementor-element-bac630b {
		display: none !important;
	}
	.elementor-197 .elementor-element-ee3a4f6 {
		margin-left: 31px !important;
		gap: 0 !important;
		flex-wrap: nowrap !important;
	}
	.elementor-197 .elementor-element-36db55e {
		flex: 0 0 215px !important;
		width: 215px !important;
	}
	.elementor-197 .elementor-element-ee3a4f6 p:not(:first-child),
	.elementor-197 .elementor-element-ee3a4f6 .e-paragraph-link-base {
		font-size: 20px !important;
		letter-spacing: -0.6px !important;
	}
	.elementor-197 .elementor-element-ee3a4f6 .e-paragraph-link-base {
		min-height: 28px !important;
		line-height: 28px !important;
	}
	.elementor-197 .elementor-element-36db55e > p:not(:first-child) {
		padding-left: 4px !important;
	}
	.elementor-197 .elementor-element-273b02b {
		padding: 91px 28px 27px 33px !important;
		justify-content: flex-start !important;
	}
	.elementor-197 .elementor-element-273b02b > img {
		content: url('../../img/socialhart-wordmark-2line-dark.png');
		width: 376px !important;
		max-width: 100% !important;
		height: 173px !important;
		object-fit: contain !important;
		margin: 0 !important;
	}
	.elementor-197 .elementor-element-32e5c73 {
		padding: 23px 25px 22px !important;
		flex-wrap: nowrap !important;
		justify-content: flex-start !important;
		column-gap: 12px !important;
	}
	.elementor-197 .elementor-element-b650a81 {
		flex: 0 0 auto !important;
		width: auto !important;
		flex-wrap: nowrap !important;
		column-gap: 12px !important;
	}
	.elementor-197 .elementor-element-b659ee6 {
		flex: 0 0 auto !important;
		width: auto !important;
		min-width: 0 !important;
		justify-content: flex-start !important;
	}
}
@media (max-width: 439px) {
	.elementor-197 .elementor-element-32e5c73,
	.elementor-197 .elementor-element-b650a81 {
		flex-wrap: wrap !important;
	}
}

/* Live Figma 109:6 re-check (rendered at 100%, 2026-09-17). The frame sets
   the meta block as centred running text on an 18px line (date, then the
   category list wrapping to two centred lines) and the byline on ONE line
   ("Edited By Claire Dykhoff", ink 48-399 at y=400-441); the earlier pass had
   read the byline's two-line text box from the exported spec and stacked it.
   Tag links keep their 24px tap height via padding-free inline boxes. */
@media (max-width: 767px) {
	body.single-post .elementor-element-306a43d,
	body.single-post .elementor-element-306a43d .e-paragraph-base {
		text-align: center !important;
		justify-content: center !important;
		line-height: 18px !important;
	}
	body.single-post .elementor-element-306a43d a[rel="tag"] {
		display: inline !important;
		min-height: 0 !important;
		padding: 0 !important;
		line-height: 18px !important;
	}
	body.single-post .sh-byline {
		flex-wrap: nowrap !important;
		justify-content: center !important;
		column-gap: 12px !important;
	}
	body.single-post .sh-byline > .e-paragraph-base {
		flex: 0 0 auto !important;
		white-space: nowrap !important;
	}
}
@media (max-width: 767px) {
	/* Frame's meta box: 360px at x=40, so the category list breaks after
	   "Reels" as drawn. Byline ink at y=400, TOC rule at y=490. */
	body.single-post .elementor-element-306a43d {
		width: 360px !important;
		max-width: calc(100% - 24px) !important;
		margin-left: auto !important;
		margin-right: auto !important;
	}
	body.single-post .sh-byline {
		margin-top: 34px !important;
	}
	body.single-post .sh-toc-box {
		margin-top: 51px !important;
	}
}

/* Live Figma 109:6: the page ground is cream behind the header too (the post
   header sat on the body's white), and a compact share rail hugs the left
   edge - a 35x180 outline starting off-canvas at x=-1, y=141, four 22px
   glyphs at y=166/201/238/274 (36px pitch), no label. Desktop hides the rail
   below 1100px; the frame keeps it on mobile. */
@media (max-width: 767px) {
	body.single-post {
		background-color: #EAE4D8 !important;
	}
	body.single-post .sh-share-rail {
		display: flex !important;
		flex-direction: column !important;
		position: absolute !important;
		inset-inline-start: -1px !important;
		top: 141px !important;
		width: 35px !important;
		height: 180px !important;
		padding: 25px 0 0 !important;
		border: 1px solid #462222 !important;
		border-radius: 0 !important;
		box-sizing: border-box !important;
		gap: 0 !important;
		z-index: 5 !important;
	}
	body.single-post .sh-share-rail .sh-rail-label {
		display: none !important;
	}
	body.single-post .sh-share-rail .sh-rail-box {
		gap: 14px !important;
		padding: 0 !important;
		align-items: center !important;
	}
	body.single-post .sh-share-rail .sh-rail-icon {
		width: 22px !important;
		height: 22px !important;
	}
	body.single-post .elementor-element-306a43d {
		width: 330px !important;
	}
}
@media (max-width: 767px) {
	/* Rail is positioned against the post document, which starts under the
	   81px header: y=141 in the frame is 60px into it. Icons match the
	   desktop treatment (FB, YouTube, Pinterest, Instagram, turned -90deg,
	   23px on a 36px pitch). */
	body.single-post .sh-share-rail {
		top: 60px !important;
	}
	body.single-post .sh-share-rail .sh-rail-box {
		flex-direction: column-reverse !important;
		gap: 13px !important;
	}
	body.single-post .sh-share-rail .sh-rail-icon {
		width: 23px !important;
		height: 23px !important;
		transform: rotate(-90deg);
	}
	body.single-post .sh-share-rail .sh-rail-icon svg {
		width: 23px;
		height: 23px;
	}
}
@media (max-width: 767px) {
	/* Each icon cell carried 10px padding and the site-wide 44px link
	   min-width, so glyphs sat off-centre and alternated. The 23px targets are
	   36px apart, which satisfies the WCAG 2.5.8 spacing exception. */
	body.single-post .sh-share-rail .sh-rail-icon {
		padding: 0 !important;
		box-sizing: border-box !important;
	}
	body.single-post .sh-share-rail .sh-rail-icon > p,
	body.single-post .sh-share-rail .sh-rail-icon a {
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		width: 23px !important;
		min-width: 0 !important;
		height: 23px !important;
		min-height: 0 !important;
		margin: 0 !important;
		padding: 0 !important;
	}
}

/* Newsletter card form (styling shared in desktop-pages/single-post.css):
   fields 318x55 start 79px under the heading, 13px apart; the 281x51 button
   27px under the last field; card keeps its 73px bottom padding (Figma 109:6,
   card 6200-6802). Tablet (768-1024) uses the same stacked layout. */
@media (max-width: 1024px) {
	body.single-post .sh-post-newsletter > .sh-post-news-form {
		width: 100% !important;
		max-width: 359px !important;
		margin-top: 79px !important;
	}
	/* Extra specificity: the shared reset in desktop-pages/single-post.css
	   loads later and zeroes this margin. */
	body.single-post .sh-post-newsletter .sh-post-news-form [data-ff-el="root"] [data-ff-el="footer"] {
		margin-top: 27px !important;
	}
}

/* Post hero: same as desktop - show the 2026 covers whole rather than
   cropping their headline. 384 wide, height from the image (341px for a
   1800x1600 cover, 216px for a 2240x1260 case study). */
@media (max-width: 1024px) {
	html body.single img.e-image-base.e-927b715-e3a7af {
		height: auto !important;
		object-fit: contain !important;
	}
}

/* Client QA #49 — body copy reads oddly centred on a phone too, and centred
   bullets were the specific complaint. Headings stay centred as drawn. */
@media (max-width: 1024px) {
	html body.single-post .sh-post-content :is(p, li, ul, ol, blockquote) {
		text-align: left !important;
	}
	html body.single-post .sh-post-content :is(ul, ol) {
		padding-left: 20px !important;
	}
	html body.single-post .sh-post-content li {
		list-style-position: outside !important;
	}
}

/* TOC on phones: the links are inline-block (custom.css), so any title wider
   than the space left on a line dropped below its numeral, leaving "i.",
   "ii." ... stranded alone and the justified lines stretched. Let the links
   flow inline with their numerals, as Figma's justified run does, and skip
   an entry whose heading is empty (a bare "xiv."). */
@media (max-width: 767px) {
	body.single-post .sh-toc-links .sh-toc-item a {
		display: inline !important;
	}
	body.single-post .sh-toc-links .sh-toc-item:has(> a:empty) {
		display: none !important;
	}
}