/* SM Blog Enhancements: single blog posts only (enqueued on is_singular('post')). */

/* Reading progress bar */
.sm-progress {
	background: var(--bright-blue);
	height: 3px;
	left: 0;
	pointer-events: none;
	position: fixed;
	top: 0;
	transform: scaleX(0);
	transform-origin: 0 50%;
	width: 100%;
	z-index: 10000;
}

/* Breadcrumbs */
.sm-breadcrumbs ol {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	list-style: none;
	margin: 0 0 18px;
	padding: 0;
}

.sm-breadcrumbs li {
	font: 600 calc(12rem / 16)/1.4 var(--body-font);
	letter-spacing: 1px;
	text-transform: uppercase;
}

.sm-breadcrumbs li + li:before {
	color: var(--gray-idle);
	content: '›';
	margin-right: 6px;
}

.sm-breadcrumbs a {
	color: var(--dark-gray);
	text-decoration: none;
}

.sm-breadcrumbs a:hover {
	text-decoration: underline;
}

/* Updated date + reading time */
.sm-post-meta {
	color: var(--dark-gray);
	font: calc(14rem / 16)/1.4 var(--body-font);
	margin: 14px 0 22px;
}

.sm-post-meta .sm-sep {
	margin: 0 8px;
}

/* TL;DR */
.sm-tldr {
	background: var(--light-blue);
	border-radius: 16px;
	margin: 0 0 28px;
	padding: 22px 26px;
}

.page-content .content .sm-tldr-title {
	font: 700 calc(13rem / 16)/1 var(--body-font);
	letter-spacing: 2px;
	margin: 0 0 12px;
	text-transform: uppercase;
}

.page-content .content .sm-tldr ul {
	margin: 0;
}

.page-content .content .sm-tldr p:last-child,
.page-content .content .sm-tldr li:last-child {
	margin-bottom: 0;
}

/* Table of contents */
.sm-toc {
	border: 1px solid var(--light-blue);
	border-radius: 16px;
	margin: 0 0 36px;
	padding: 18px 26px;
}

.sm-toc summary {
	cursor: pointer;
	font: 700 calc(13rem / 16)/1.4 var(--body-font);
	letter-spacing: 2px;
	text-transform: uppercase;
}

.page-content .content .sm-toc ol {
	margin: 14px 0 0;
	padding-left: 20px;
}

.page-content .content .sm-toc li {
	margin: 0 0 8px;
}

.page-content .content .sm-toc a {
	line-break: auto;
}

.page-content .content h2[id] {
	scroll-margin-top: 120px;
}

/* Category pills: room so the 1px outline is never clipped by the scroll container */
.single-post .page-content .blog-tags {
	margin-top: -4px;
	padding: 4px 2px 6px;
}

/*
 * Desktop layout with the sidebar: the article starts on the same line as the
 * hero title (column 1) and the sidebar ends on the hero image's right edge.
 */
@media only screen and (min-width: calc(1201rem / 16)) {
	.single-post .page-content .blog-tags,
	.single-post .page-content .content {
		grid-column: 1 / span 7;
	}
}

.page-content .sm-blog-sidebar {
	align-self: stretch;
	grid-column: 9 / span 4;
	grid-row: 1 / span 2;
}

.sm-sidebar-card {
	background: var(--cream);
	border-radius: 20px;
	margin-left: auto;
	max-width: 340px;
	padding: 28px 24px;
	position: sticky;
	top: 110px;
}

.sm-sidebar-eyebrow,
.sm-end-cta-eyebrow {
	font: 700 calc(11rem / 16)/1.4 var(--body-font);
	letter-spacing: 2px;
	margin: 0 0 10px;
	text-transform: uppercase;
}

.sm-sidebar-heading,
.sm-end-cta-title {
	font: calc(26rem / 16)/1.15 var(--heading-font);
	margin: 0 0 12px;
}

.sm-sidebar-desc,
.sm-end-cta-desc {
	font: calc(15rem / 16)/1.5 var(--body-font);
	margin: 0 0 22px;
}

.sm-sidebar-card .btn.primary,
.sm-end-cta .btn.primary {
	display: block;
	margin: 0 5px 22px 0;
}

.sm-sidebar-link,
.sm-end-cta-link {
	display: block;
	font: 600 calc(14rem / 16)/1.4 var(--body-font);
	margin: 0 0 10px;
	text-decoration: underline;
}

.sm-sidebar-cities {
	color: var(--gray-idle);
	font: calc(12rem / 16)/1.4 var(--body-font);
	margin: 16px 0 0;
}

@media only screen and (max-width: calc(1200rem / 16)) {
	.page-content .sm-blog-sidebar {
		display: none;
	}
}

@media only screen and (max-width: calc(650rem / 16)) {
	.sm-tldr {
		padding: 18px 18px;
	}

	.sm-toc {
		padding: 14px 18px;
	}

	.page-content .content .sm-toc ol {
		padding-left: 18px;
	}

	.sm-helpful {
		margin-top: 28px;
	}
}

/* Was this helpful? */
.sm-helpful {
	align-items: center;
	border-top: 1px solid var(--light-gray);
	display: flex;
	flex-wrap: wrap;
	gap: 14px 20px;
	margin: 40px 0 0;
	padding: 24px 0 0;
}

.page-content .content .sm-helpful-q {
	font-weight: 600;
	margin: 0;
}

.sm-helpful-buttons {
	display: flex;
	gap: 10px;
}

.sm-helpful-buttons button {
	background: var(--white);
	border: 1px solid var(--black);
	border-radius: 9999px;
	cursor: pointer;
	font: 600 calc(14rem / 16)/1 var(--body-font);
	padding: 10px 22px;
}

.sm-helpful-buttons button:hover,
.sm-helpful-buttons button:focus-visible {
	background: var(--light-blue);
}

.page-content .content .sm-helpful-thanks {
	margin: 0;
}

/* Services section below related posts (mirrors the homepage block) */
.sm-blog-services ul {
	gap: 40px;
	grid-template-columns: 1fr 1fr 1fr;
}

.sm-blog-services ul .heading-6 {
	font-size: calc(26rem / 16);
}

.sm-blog-services .image {
	padding: 0;
}

.sm-blog-services .image img {
	aspect-ratio: 451 / 316;
	border-radius: 20px;
	height: auto;
	object-fit: cover;
	width: 100%;
}

@media only screen and (max-width: calc(60.625rem)) {
	.sm-blog-services ul {
		gap: 30px;
		grid-template-columns: 1fr;
	}
}

/* End-of-article CTA: non-modal slide-in */
.sm-end-cta {
	background: var(--white);
	border-radius: 20px;
	bottom: 24px;
	box-shadow: 0 10px 40px rgba(0, 0, 0, .18);
	max-width: 360px;
	padding: 28px 26px 18px;
	position: fixed;
	right: 24px;
	transform: translateY(20px);
	opacity: 0;
	transition: opacity .3s ease, transform .3s ease;
	width: calc(100vw - 48px);
	z-index: 9998;
}

.sm-end-cta.is-visible {
	opacity: 1;
	transform: translateY(0);
}

.sm-end-cta[hidden] {
	display: none;
}

.sm-end-cta-close {
	background: none;
	border: 0;
	cursor: pointer;
	font-size: 28px;
	line-height: 1;
	padding: 4px 8px;
	position: absolute;
	right: 10px;
	top: 8px;
}

@media only screen and (max-width: calc(650rem / 16)) {
	.sm-end-cta {
		border-radius: 20px 20px 0 0;
		bottom: 0;
		max-width: none;
		right: 0;
		width: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sm-end-cta {
		transition: none;
	}
}