/* =====================================================================
   MM Blog Grid  ·  single post  ·  v1.2.1
   Loaded automatically on every single post by mm-blog-grid.php.
   Turn it off with: add_filter( 'mm_blog_grid_single_assets', '__return_false' );
   Every rule is scoped to .single-post, so nothing else on the site moves.
   ===================================================================== */

.single-post {
	--mms-ink: #24382b;
	--mms-body: #3c4a40;
	--mms-gold: #9e642b;
	--mms-gold-light: #d4a24c;
	--mms-measure: 66ch;
}

/* ---------------------------------------------------------------------
   1. Remove the leftover Divi footer
   The Elementor single template pulls the Mindful Millions footer in as a
   template widget, so the theme's own footer still prints underneath with
   the outdated SoulTree copyright.
   ------------------------------------------------------------------ */

.single-post #main-footer,
.single-post #footer-bottom {
	display: none !important;
}

/* ---------------------------------------------------------------------
   2. Hero
   The one place this page is allowed to be bold. A taller frame, a scrim
   so the title holds against any photo, and a title set at display size.
   ------------------------------------------------------------------ */

.single-post .elementor-location-single > .e-con:first-child {
	position: relative;
	min-height: clamp(300px, 40vw, 460px) !important;
	display: flex;
	align-items: flex-end;
	overflow: hidden;
}

.single-post .elementor-location-single > .e-con:first-child::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	border-radius: inherit;
	background: linear-gradient(180deg, rgba(16, 26, 20, 0) 34%, rgba(16, 26, 20, .74) 100%);
	pointer-events: none;
}

.single-post .elementor-location-single > .e-con:first-child > .e-con-inner,
.single-post .elementor-location-single > .e-con:first-child .e-con-inner > * {
	position: relative;
	z-index: 1;
}

.single-post .templately-heading-title {
	margin: 0 0 12px;
	font-size: clamp(28px, 4vw, 50px) !important;
	line-height: 1.1 !important;
	letter-spacing: -.015em;
	max-width: 22ch;
	text-wrap: balance;
	overflow-wrap: break-word;
	text-shadow: 0 2px 26px rgba(10, 18, 13, .45);
}

.single-post .elementor-post-info .elementor-icon-list-item {
	font-size: 13.5px;
	letter-spacing: .01em;
	opacity: .94;
}

/* The publish time adds nothing next to the date. Hidden here; you can also
   delete the field on the Post Info widget in Elementor. */
@supports selector(:has(*)) {
	.single-post .elementor-post-info .elementor-icon-list-item:has(.elementor-post-info__item--type-time) {
		display: none;
	}
}

/* ---------------------------------------------------------------------
   3. Reading measure and rhythm
   The body copy currently spans the full width of the content card, which
   is roughly twice a comfortable line length.
   ------------------------------------------------------------------ */

.single-post .elementor-widget-tl-post-content .elementor-widget-text-editor,
.single-post .elementor-widget-theme-post-content .elementor-widget-text-editor {
	max-width: var(--mms-measure) !important;
	margin-inline: auto !important;
}

.single-post .elementor-widget-text-editor p {
	line-height: 1.78 !important;
	margin: 0 0 1.1em;
	overflow-wrap: break-word;
}

.single-post .elementor-widget-text-editor p:last-child {
	margin-bottom: 0;
}

/* Bold sub-headings sit tight to the paragraph they introduce. */
.single-post .elementor-widget-text-editor strong {
	display: inline-block;
	line-height: 1.25;
	letter-spacing: -.005em;
}

.single-post .elementor-widget-text-editor a:not(.elementor-button) {
	color: var(--mms-gold);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	transition: color .2s ease;
}

.single-post .elementor-widget-text-editor a:not(.elementor-button):hover {
	color: var(--mms-ink);
}

.single-post .elementor-widget-text-editor ul,
.single-post .elementor-widget-text-editor ol {
	margin: 0 0 1.2em;
	padding-left: 1.35em;
}

.single-post .elementor-widget-text-editor li {
	line-height: 1.72;
	margin-bottom: .5em;
	color: var(--mms-body);
}

.single-post .elementor-widget-text-editor blockquote {
	margin: 1.6em 0;
	padding: 4px 0 4px 22px;
	border-left: 3px solid var(--mms-gold);
	font-style: italic;
	color: var(--mms-ink);
}

.single-post .elementor-widget-text-editor hr {
	margin: 2.2em auto;
	max-width: 120px;
	border: 0;
	border-top: 1px solid rgba(36, 56, 43, .18);
}

/* ---------------------------------------------------------------------
   4. Content card and media
   ------------------------------------------------------------------ */

.single-post .elementor-widget-tl-post-content > .elementor-widget-container,
.single-post .elementor-widget-theme-post-content > .elementor-widget-container {
	border-radius: 24px;
}

.single-post .elementor-widget-tl-post-content img,
.single-post .elementor-widget-theme-post-content img {
	border-radius: 14px;
	max-width: 100%;
	height: auto;
}

/* ---------------------------------------------------------------------
   5. Reading progress bar (built by mm-single.js)
   ------------------------------------------------------------------ */

.mm-progress {
	position: fixed;
	top: 0;
	left: 0;
	width: 0;
	height: 3px;
	z-index: 99990;
	background: linear-gradient(90deg, var(--mms-gold, #9e642b), var(--mms-gold-light, #d4a24c));
	transition: width .12s linear;
	pointer-events: none;
}

body.admin-bar .mm-progress {
	top: 32px;
}

@media screen and (max-width: 782px) {
	body.admin-bar .mm-progress {
		top: 46px;
	}
}

/* ---------------------------------------------------------------------
   6. Mobile
   ------------------------------------------------------------------ */

@media (max-width: 767px) {
	.single-post .elementor-location-single > .e-con:first-child {
		min-height: 260px;
	}

	.single-post .templately-heading-title {
		font-size: clamp(24px, 7vw, 34px) !important;
		max-width: none;
	}

	.single-post .elementor-post-info.elementor-inline-items {
		row-gap: 6px;
	}

	.single-post .elementor-widget-text-editor p {
		line-height: 1.72;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mm-progress {
		transition: none;
	}
}

/* ---------------------------------------------------------------------
   7. OPTIONAL — only if the site header markup exists but is hidden.
   Confirm first: view source on a single post and search for "main-header".
   ------------------------------------------------------------------ */

/*
.single-post #main-header,
.single-post #top-header {
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
}
*/