/**
 * Redesigned single blog post — new components only (hero, key takeaways,
 * two-column reading layout, sticky TOC, stat cards, quote, steps,
 * pros/cons, FAQ accordion, author card, final CTA).
 *
 * All new class names below (.blog-single-hero, -takeaways, -toc, -stats,
 * -quote, -steps, -pros-cons, -faq, -author-card, -final-cta,
 * -layout) are new to this template, so nothing here redefines the existing
 * .blog-single rules in css/blog-archive.css (loaded first) — those still
 * own .blog-single-meta, .blog-single__category, .blog-single__meta-item,
 * .blog-single__body typography (h1-h6/p/ul/ol/a/blockquote/code/pre/
 * table/img), .blog-tags, .blog-related and .blog-grid, all reused as-is.
 * A few selectors below are deliberately prefixed with .blog-single__body
 * or .blog-single-v2 where they need to win a specificity/override fight
 * against one of those existing rules — see the comments at each. Reuses
 * the same brand tokens (--dark-blue, --medi-blue, --gray-color, --white,
 * --font-hurme-*) and the --blog-shadow/--blog-border tokens .blog-listing
 * already defines.
 */

/* single.php no longer renders the generic [sidebar] widget column (see
   single.php for why), so ".blog-single .blog-main__posts" in
   blog-archive.css reserving max-width: calc(100% - 400px - 48px) for that
   now-absent sidebar would otherwise leave the article column squeezed and
   the freed space unused. Same (0,2,0) specificity as that rule, so
   load order (this file loads after blog-archive.css) decides the tie. */
.blog-single-v2 .blog-main__posts {
	max-width: 100%;
}

/* ------------------------------------------------------------------ */
/* Hero — two columns: title/subtitle/meta on the left, a compact        */
/* (not full-width) featured-image card on the right. header.php's       */
/* .hero-header nav is position:fixed with a transparent background      */
/* (see css/style.css) so it visually floats OVER whatever is at the top */
/* of the page's normal flow instead of pushing it down — every other    */
/* hero on this site (.home-banner) clears it via a tall min-height with */
/* flex-centered content; this hero instead just uses a large enough     */
/* padding-top for the same effect, since its content isn't centered.    */
/* ------------------------------------------------------------------ */
.blog-single-hero {
	background: var(--dark-blue);
	padding: 190px 0 64px;
	overflow: hidden;
}

/* Full viewport width — deliberately NOT the same width as the article
   container below (.blog-main__inner); the hero content
   (eyebrow/title/subtitle/meta) centers itself across the whole hero band
   instead of being confined to the article's narrower column. Needs both
   higher specificity AND !important: this element also carries the
   sitewide ".container" class, which the theme constrains to 1280px via
   ".blog-listing .container" (blog-archive.css) and — above 1400px
   viewports — to a hard "max-width:1400px !important" via a Bootstrap-style
   ".single-post .container" breakpoint rule already on this site
   (confirmed live via document.styleSheets — not something this redesign
   added), which a plain non-!important override can't beat. */
.blog-single-hero .blog-single-hero__inner.container {
	max-width: 100% !important;
	margin: 0 auto !important;
	padding-left: 60px !important;
	padding-right: 60px !important;
}

.blog-single-hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 380px);
	gap: 56px;
	align-items: center;
}

.blog-single-hero__grid--no-media {
	grid-template-columns: minmax(0, 1fr);
}

/* Hero no longer carries the featured image (moved to the top of the
   article column below) — a single centered column, matching the
   requested reference layout. */
.blog-single-hero__grid--centered {
	grid-template-columns: minmax(0, 1fr);
	justify-items: center;
	text-align: center;
}
.blog-single-hero__grid--centered .blog-single-hero__subtitle {
	max-width: 100%;
}
.blog-single-hero__grid--centered .blog-single-hero__meta {
	justify-content: center;
}

.blog-single-hero__eyebrow {
	display: inline-block;
	font-family: var(--font-hurme-thd);
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--medi-blue);
	background: rgba(40, 178, 250, 0.12);
	border-radius: 999px;
	padding: 6px 16px;
	margin-bottom: 20px;
	text-decoration: none;
}
a.blog-single-hero__eyebrow:hover {
	color: var(--white);
	background: var(--medi-blue);
}

.blog-single-hero__title {
	font-family: var(--font-hurme-thd);
	font-weight: 700;
	color: var(--white);
	font-size: 42px;
	line-height: 1.2;
	margin: 0 0 18px;
	word-wrap: break-word;
	overflow-wrap: break-word;
}

.blog-single-hero__subtitle {
	font-family: var(--font-hurme-sec);
	font-size: 18px;
	line-height: 1.6;
	color: #cbd5e1;
	max-width: 640px;
	margin: 0 0 26px;
}

.blog-single-hero__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

.blog-single-hero__meta-item {
	display: inline-flex;
	align-items: center;
	font-family: var(--font-hurme-sec);
	font-size: 14px;
	color: #94a3b8;
	text-decoration: none;
}
/* Icon-to-text spacing lives on the icon's own margin (not a `gap` on
   .blog-single-hero__meta-item) so it can't also apply to the ::after
   bullet below, which needs symmetric margin instead. */
.blog-single-hero__meta-item:not(:last-child)::after {
	content: '•';
	margin: 0 12px;
	color: #475569;
}
a.blog-single-hero__meta-item:hover {
	color: var(--medi-blue);
}
.blog-single-hero__meta-item i {
	margin-right: 7px;
	color: var(--medi-blue);
	font-size: 13px;
}

.blog-single-hero__media {
	border-radius: var(--blog-radius-lg, 12px);
	overflow: hidden;
	box-shadow: var(--blog-shadow);
	line-height: 0;
}

.blog-single-hero__img {
	width: 100%;
	height: auto;
	display: block;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

/* ------------------------------------------------------------------ */
/* Featured image — moved out of the hero, now sits at the top of the   */
/* article/left column only (not full page width).                      */
/* ------------------------------------------------------------------ */
.blog-single-featured {
	border-radius: var(--blog-radius-lg, 12px);
	overflow: hidden;
	box-shadow: var(--blog-shadow);
	line-height: 0;
	margin: 0 0 32px;
}

.blog-single-featured__img {
	width: 100%;
	height: auto;
	display: block;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

/* ------------------------------------------------------------------ */
/* Key Takeaways callout                                                */
/* ------------------------------------------------------------------ */
.blog-single-takeaways {
	background: var(--light-blue);
	border: 1px solid var(--blog-border);
	border-left: 4px solid var(--medi-blue);
	border-radius: var(--blog-radius-md, 8px);
	padding: 24px 28px;
	margin: 0 0 36px;
}

.blog-single-takeaways__heading {
	font-family: var(--font-hurme-thd);
	font-weight: 700;
	font-size: 20px;
	color: var(--dark-blue);
	margin: 0 0 12px;
}

.blog-single-takeaways__list {
	margin: 0;
	padding-left: 20px;
}

.blog-single-takeaways__list li {
	font-family: var(--font-hurme-sec);
	font-size: 15.5px;
	line-height: 1.6;
	color: var(--gray-color);
	margin-bottom: 8px;
}
.blog-single-takeaways__list li:last-child {
	margin-bottom: 0;
}

/* ------------------------------------------------------------------ */
/* Two-column reading layout: article + sticky TOC                     */
/* ------------------------------------------------------------------ */
.blog-single-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 280px;
	gap: 48px;
	/* stretch (the grid default — set explicitly here so it can't be
	   mistaken for an oversight): matches stock2shop.com's own reference
	   behavior, confirmed live by inspecting their DOM — their sidebar
	   column (.article-sidebar) is stretched to the same height as the
	   article column via the same mechanism (a Bootstrap row's default
	   equal-height columns), which is what gives their sticky sidebar room
	   to stay visible for nearly the full article instead of detaching as
	   soon as its own short content runs out. .blog-single-toc below is
	   this stretched grid item; .blog-single-toc__sticky inside it is the
	   actual position:sticky element, kept at its own natural (unstretched)
	   height — same two-level split stock2shop.com itself uses. */
	align-items: stretch;
}

.blog-single-main {
	min-width: 0;
}

.blog-single-toc__sticky {
	position: sticky;
	/* header.php's nav (.hero-header) is position:fixed and renders at
	   ~119px tall once scrolled (confirmed live via getBoundingClientRect())
	   — a sticky offset of 24px tucked the TOC box underneath/behind it.
	   132px clears it with a little breathing room. Same root cause as the
	   hero's own padding-top fix above, just for a sticky element instead of
	   one in normal flow. Verified live in Chrome: no overlap at any scroll
	   position, and the scroll-spy active state still tracks correctly. */
	top: 132px;
}

.blog-single-toc__inner {
	background: var(--white);
	border: 1px solid var(--blog-border);
	border-radius: var(--blog-radius-md, 8px);
	padding: 20px;
	margin-bottom: 20px;
}

.blog-single-toc__toggle {
	display: none;
	width: 100%;
	align-items: center;
	justify-content: space-between;
	background: none;
	border: 0;
	font-family: var(--font-hurme-thd);
	font-weight: 700;
	font-size: 14px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--dark-blue);
	cursor: pointer;
	padding: 0;
}

.blog-single-toc__list-wrap::before {
	content: 'In This Article';
	display: block;
	font-family: var(--font-hurme-thd);
	font-weight: 700;
	font-size: 14px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--dark-blue);
	margin-bottom: 12px;
}

.blog-single-toc__list {
	list-style: none;
	margin: 0;
	padding: 0;
	max-height: 60vh;
	overflow-y: auto;
}

.blog-single-toc__item a {
	display: block;
	font-family: var(--font-hurme-sec);
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--gray-color);
	text-decoration: none;
	padding: 6px 0 6px 14px;
	border-left: 2px solid var(--blog-border);
	transition: color 0.15s ease, border-color 0.15s ease;
}

.blog-single-toc__item--h3 a {
	padding-left: 26px;
	font-size: 13px;
}

.blog-single-toc__item a:hover,
.blog-single-toc__item.is-active a {
	color: var(--medi-blue);
	border-left-color: var(--medi-blue);
}

/* ------------------------------------------------------------------ */
/* Stat highlight cards                                                 */
/* ------------------------------------------------------------------ */
.blog-single-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 16px;
	margin: 28px 0;
}

.blog-single-stat-card {
	background: var(--light-blue);
	border-radius: var(--blog-radius-md, 8px);
	padding: 20px;
	text-align: center;
}

.blog-single-stat-card__value {
	display: block;
	font-family: var(--font-hurme-thd);
	font-weight: 900;
	font-size: 32px;
	color: var(--medi-blue);
	line-height: 1.1;
}

.blog-single-stat-card__label {
	display: block;
	font-family: var(--font-hurme-sec);
	font-size: 13.5px;
	color: var(--gray-color);
	margin-top: 6px;
	line-height: 1.4;
}

.blog-single-stat-card__source {
	display: block;
	font-family: var(--font-hurme-sec);
	font-size: 11px;
	color: #94a3b8;
	margin-top: 8px;
}

/* ------------------------------------------------------------------ */
/* Quote                                                                */
/* ------------------------------------------------------------------ */
/* ".blog-single__body blockquote" in blog-archive.css already styles the
   same properties at equal-or-higher specificity — prefixing with
   .blog-single__body here guarantees this still wins instead of depending
   on stylesheet load order. */
.blog-single__body .blog-single-quote {
	border-left: 4px solid var(--medi-blue);
	background: var(--light-blue);
	border-radius: 0 var(--blog-radius-md, 8px) var(--blog-radius-md, 8px) 0;
	padding: 24px 28px;
	margin: 28px 0;
	font-style: normal;
}
.blog-single-quote p {
	font-family: var(--font-hurme-thd);
	font-weight: 600;
	font-size: 19px;
	line-height: 1.5;
	color: var(--dark-blue);
	margin: 0 0 10px;
}
.blog-single-quote cite {
	font-family: var(--font-hurme-sec);
	font-style: normal;
	font-size: 13.5px;
	color: var(--gray-color);
}

/* ------------------------------------------------------------------ */
/* Steps                                                                */
/* ------------------------------------------------------------------ */
.blog-single-steps {
	margin: 28px 0;
}
/* ".blog-single__body ol" in blog-archive.css sets padding-left/margin at
   equal-or-higher specificity — prefixed here so the counter layout below
   (which needs padding-left: 0) isn't overridden regardless of load order. */
.blog-single__body .blog-single-steps__list {
	list-style: none;
	counter-reset: imm-step;
	margin: 16px 0 0;
	padding: 0;
}
.blog-single-steps__list li {
	counter-increment: imm-step;
	position: relative;
	padding: 4px 0 20px 44px;
	border-left: 2px solid var(--blog-border);
	margin-left: 15px;
}
.blog-single-steps__list li:last-child {
	border-left-color: transparent;
	padding-bottom: 0;
}
.blog-single-steps__list li::before {
	content: counter(imm-step);
	position: absolute;
	left: -15px;
	top: 0;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--medi-blue);
	color: var(--white);
	font-family: var(--font-hurme-thd);
	font-weight: 700;
	font-size: 13px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.blog-single-steps__title {
	display: block;
	font-family: var(--font-hurme-thd);
	font-weight: 700;
	font-size: 16.5px;
	color: var(--dark-blue);
}
.blog-single-steps__body {
	display: block;
	font-family: var(--font-hurme-sec);
	font-size: 15px;
	color: var(--gray-color);
	margin-top: 4px;
	line-height: 1.6;
}

/* ------------------------------------------------------------------ */
/* Pros / Cons                                                          */
/* ------------------------------------------------------------------ */
.blog-single-pros-cons {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	margin: 28px 0;
}
.blog-single-pros-cons__col {
	border-radius: var(--blog-radius-md, 8px);
	padding: 20px 22px;
}
.blog-single-pros-cons__col--pros {
	background: #ecfdf5;
}
.blog-single-pros-cons__col--cons {
	background: #fef2f2;
}
.blog-single-pros-cons__col h3 {
	font-family: var(--font-hurme-thd);
	font-weight: 700;
	font-size: 16px;
	margin: 0 0 12px;
	color: var(--dark-blue);
}
.blog-single-pros-cons__col ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.blog-single-pros-cons__col li {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-family: var(--font-hurme-sec);
	font-size: 14.5px;
	color: var(--gray-color);
	margin-bottom: 8px;
	line-height: 1.5;
}
.blog-single-pros-cons__col--pros li i {
	color: #16a34a;
	margin-top: 3px;
}
.blog-single-pros-cons__col--cons li i {
	color: #dc2626;
	margin-top: 3px;
}

/* ------------------------------------------------------------------ */
/* FAQ accordion                                                        */
/* ------------------------------------------------------------------ */
.blog-single-faq {
	margin: 28px 0;
}
.blog-single-faq__item {
	border-bottom: 1px solid var(--blog-border);
}
.blog-single-faq__question {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	background: none;
	border: 0;
	text-align: left;
	font-family: var(--font-hurme-thd);
	font-weight: 600;
	font-size: 16px;
	color: var(--dark-blue);
	padding: 16px 0;
	cursor: pointer;
}
.blog-single-faq__question i {
	color: var(--medi-blue);
	transition: transform 0.2s ease;
	flex-shrink: 0;
}
.blog-single-faq__question[aria-expanded="true"] i {
	transform: rotate(180deg);
}
.blog-single-faq__answer {
	display: grid;
	grid-template-rows: 0fr;
	overflow: hidden;
	transition: grid-template-rows 0.25s ease;
}
.blog-single-faq__answer > p {
	min-height: 0;
	overflow: hidden;
	font-family: var(--font-hurme-sec);
	font-size: 15px;
	line-height: 1.6;
	color: var(--gray-color);
	margin: 0 0 16px;
}
.blog-single-faq__item.is-open .blog-single-faq__answer {
	grid-template-rows: 1fr;
}

/* ------------------------------------------------------------------ */
/* Author card                                                          */
/* ------------------------------------------------------------------ */
.blog-single-author-card {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	background: var(--light-blue);
	border-radius: var(--blog-radius-md, 8px);
	padding: 22px;
	margin-top: 36px;
}
.blog-single-author-card__avatar {
	border-radius: 50%;
	flex-shrink: 0;
}
.blog-single-author-card__label {
	display: block;
	font-family: var(--font-hurme-sec);
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #64748b;
}
.blog-single-author-card__name {
	display: inline-block;
	font-family: var(--font-hurme-thd);
	font-weight: 700;
	font-size: 17px;
	color: var(--dark-blue);
	text-decoration: none;
	margin: 2px 0 6px;
}
.blog-single-author-card__name:hover {
	color: var(--medi-blue);
}
.blog-single-author-card__bio {
	font-family: var(--font-hurme-sec);
	font-size: 14px;
	line-height: 1.6;
	color: var(--gray-color);
	margin: 0;
}

/* ------------------------------------------------------------------ */
/* Responsive                                                           */
/* ------------------------------------------------------------------ */
@media (max-width: 900px) {
	.blog-single-hero__grid {
		grid-template-columns: 1fr;
		gap: 32px;
	}
	.blog-single-hero__media {
		max-width: 420px;
	}
	.blog-single-hero .blog-single-hero__inner.container {
		padding-left: 24px !important;
		padding-right: 24px !important;
	}
}

@media (max-width: 1024px) {
	.blog-single-layout {
		grid-template-columns: 1fr;
	}

	.blog-single-toc {
		order: -1;
		margin-bottom: 28px;
	}

	.blog-single-toc__sticky {
		position: static;
	}

	.blog-single-toc__toggle {
		display: flex;
	}

	.blog-single-toc__list-wrap {
		display: none;
	}
	.blog-single-toc.is-open .blog-single-toc__list-wrap {
		display: block;
		margin-top: 14px;
	}
	.blog-single-toc.is-open .blog-single-toc__toggle i {
		transform: rotate(180deg);
	}

	.blog-single-main {
		max-width: 100%;
	}
}

@media (max-width: 767px) {
	.blog-single-hero {
		/* header.php's fixed transparent nav (see the comment on
		   .blog-single-hero above) keeps the same height on mobile — this
		   still needs to clear it, just slightly less than desktop since
		   the title itself is smaller here. */
		padding: 150px 0 40px;
	}
	.blog-single-hero__title {
		font-size: 28px;
	}
	.blog-single-hero__subtitle {
		font-size: 16.5px;
	}
	.blog-single-hero__meta-item {
		font-size: 13px;
	}

	.blog-single-pros-cons {
		grid-template-columns: 1fr;
	}

	.blog-single-author-card {
		flex-direction: column;
		align-items: flex-start;
	}

	/* Safety net for wide tables/long URLs in old post_content — the same
	   overflow-x: auto guard css/blog-archive.css already gives <pre>, plus
	   long unbroken URLs wrapping instead of forcing page-level horizontal
	   scroll. */
	.blog-single__body table {
		display: block;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
	.blog-single__body a {
		overflow-wrap: break-word;
		word-break: break-word;
	}
}