/* ==========================================================================
   TextCRM — Blog Details (textcrm-blog-detail)
   Renders a single WordPress post (created from the standard wp-admin editor)
   inside an editorial article layout. Layout mirrors the original RewardRace
   blog-details view 1:1 (centre article column flanked by an optional sticky
   share rail and an auto-built Table of Contents). The colour system,
   typography, radius, shadow and hover tokens follow the TextCRM design
   language (Inter, #0b1326 surface, #00f5a0 accent, white-tinted glass).
   The __content block carries a full prose stylesheet so classic and
   Gutenberg post content drops in seamlessly.
   ========================================================================== */

.textcrm-blog-detail {
	/* ---- Typography ---- */
	--tcbd-font: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--tcbd-fs-h2:  clamp(1.875rem, 1.2rem + 2.4vw, 3rem);   /* 30–48 */
	--tcbd-fs-h3:  clamp(1.5rem, 1rem + 1.2vw, 1.875rem);   /* 24–30 */
	--tcbd-fs-h4:  clamp(1.125rem, 1rem + .5vw, 1.375rem);  /* 18–22 */
	--tcbd-fs-lg:  1.125rem;   /* 18 */
	--tcbd-fs-md:  1rem;       /* 16 */
	--tcbd-fs-sm:  .9375rem;   /* 15 */
	--tcbd-fs-xs:  .8125rem;   /* 13 */
	--tcbd-fs-2xs: .75rem;     /* 12 */
	--tcbd-lh-tight:   1.1;
	--tcbd-lh-snug:    1.25;
	--tcbd-lh-normal:  1.5;
	--tcbd-lh-relaxed: 1.6;
	--tcbd-tracking-tight: -.02em;
	--tcbd-tracking-snug:  -.01em;
	--tcbd-tracking-wide:  .05em;

	/* ---- Radius ---- */
	--tcbd-radius-xs:   8px;
	--tcbd-radius-sm:   10px;
	--tcbd-radius-md:   12px;
	--tcbd-radius-lg:   16px;
	--tcbd-radius-2xl:  24px;
	--tcbd-radius-pill: 9999px;

	/* ---- Motion ---- */
	--tcbd-dur-fast: .2s;
	--tcbd-dur-base: .3s;
	--tcbd-dur-slow: .4s;
	--tcbd-ease-out: cubic-bezier(.16, 1, .3, 1);

	/* ---- Palette (dark = TextCRM default / auto) ---- */
	--tcbd-section-bg:   #0b1326;
	--tcbd-heading:      #ffffff;
	--tcbd-text:         #e5e7eb;
	--tcbd-body:         #d1d5db;
	--tcbd-muted:        #9ca3af;
	--tcbd-subtle:       #6b7280;
	--tcbd-accent:       #00f5a0;
	--tcbd-accent-on:    #04241a;          /* text laid over the mint fill */
	--tcbd-accent-soft:  rgba(0, 245, 160, .1);
	--tcbd-accent-tint:  rgba(0, 245, 160, .12);
	--tcbd-accent-strong: #5effc4;         /* inline-code text on dark */
	--tcbd-border:       rgba(255, 255, 255, .1);
	--tcbd-surface:      rgba(255, 255, 255, .03);
	--tcbd-card-bg:      rgba(15, 23, 42, .6);
	--tcbd-code-bg:      #060e20;
	--tcbd-maxw:         820px;
	/* Shell that hosts the article + the two flanking rails. */
	--tcbd-shell:        min(100%, 1300px);
	--tcbd-toc-w:        clamp(216px, 21vw, 252px);
	--tcbd-col-gap:      clamp(1.25rem, 2.6vw, 2.75rem);
	--tcbd-stick-top:    96px;
	--tcbd-toc-active:   var(--tcbd-accent);
	--tcbd-toc-line:     var(--tcbd-border);
	--tcbd-success:      #00f5a0;
	--tcbd-warning:      #fbbf24;
	/* Panel wash for the TOC + comment form — white-tinted glass. */
	--tcbd-panel-bg:     rgba(255, 255, 255, .03);
	/* Author card surface — TextCRM glass. */
	--tcbd-author-bg:    rgba(15, 23, 42, .6);
	--tcbd-shadow-sm:    0 1px 2px rgba(0, 0, 0, .3);
	--tcbd-shadow-md:    inset 1px 1px 0 rgba(255, 255, 255, .06), 0 16px 40px -16px rgba(0, 0, 0, .5);
	--tcbd-ring:         0 0 0 3px rgba(0, 245, 160, .3);
	--tcbd-glow:         0 0 20px rgba(0, 245, 160, .4);

	position: relative;
	font-family: var(--tcbd-font);
	color: var(--tcbd-body);
	background: var(--tcbd-section-bg);
	box-sizing: border-box;
	border-top: 0 !important;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	/* `clip` (not `hidden`) contains full-bleed blocks WITHOUT turning the
	   article into a scroll container — `overflow: hidden` here would confine
	   the sticky TOC / share rails and stop them from sticking. */
	overflow-x: clip;
}
.textcrm-blog-detail *, .textcrm-blog-detail *::before, .textcrm-blog-detail *::after { box-sizing: border-box; }

/* Heading glow — the same teal halo the Pricing hero uses
   (rgba(68,226,205,.15) blurred 120px) so the single-post article heading
   carries the same beautiful glow as the Blog index it was opened from. Sits at
   z-index 0, behind the z-index:1 __wrap content. NOTE: this root deliberately
   uses overflow-x:clip (not overflow:hidden) to keep the sticky TOC/share rails
   working — width:min(900px,100%) + the centred transform keeps the halo within
   the viewport so there is no horizontal bleed. */
.textcrm-blog-detail::before {
	content: "";
	position: absolute;
	top: -70px;
	left: 50%;
	transform: translateX(-50%);
	width: min(920px, 100%);
	height: 560px;
	background: rgba(68, 226, 205, 0.19);
	filter: blur(130px);
	border-radius: 9999px;
	pointer-events: none;
	z-index: 0;
}

/* Light variant — clean white surface keeping the mint accent family. */
.textcrm-blog-detail--light {
	--tcbd-section-bg:   #ffffff;
	--tcbd-heading:      #0b1326;
	--tcbd-text:         #1f2937;
	--tcbd-body:         #374151;
	--tcbd-muted:        #4b5563;
	--tcbd-subtle:       #6b7280;
	--tcbd-accent:       #00a37a;
	--tcbd-accent-on:    #ffffff;
	--tcbd-accent-soft:  rgba(0, 163, 122, .08);
	--tcbd-accent-tint:  rgba(0, 163, 122, .12);
	--tcbd-accent-strong: #00956a;
	--tcbd-border:       rgba(11, 19, 38, .12);
	--tcbd-surface:      #f8fafc;
	--tcbd-card-bg:      #ffffff;
	--tcbd-code-bg:      #0b1326;
	--tcbd-success:      #00a37a;
	--tcbd-warning:      #b45309;
	--tcbd-panel-bg:     #f8fafc;
	--tcbd-author-bg:    #f8fafc;
	--tcbd-shadow-sm:    0 1px 2px rgba(11, 19, 38, .05);
	--tcbd-shadow-md:    0 8px 24px rgba(11, 19, 38, .1);
	--tcbd-ring:         0 0 0 3px rgba(0, 163, 122, .25);
	--tcbd-glow:         0 4px 16px rgba(0, 163, 122, .24);
}

/* ===========================================================
   Layout
   =========================================================== */
.textcrm-blog-detail__wrap {
	max-width: var(--tcbd-shell);
	margin: 0 auto;
	/* Top padding clears the site's fixed (sticky) header (~80px) so the back
	   link / title are never tucked underneath it for logged-out visitors (the
	   admin bar otherwise masks the gap). Matches the inner-page rhythm. */
	padding: clamp(6.5rem, 3.5rem + 4vw, 8rem) clamp(1.25rem, 3vw, 2rem) clamp(3rem, 6vw, 5rem);
	position: relative;
	z-index: 1;
}

/* ===========================================================
   Reading grid — a centre article column flanked by an
   (optional) sticky share rail on the left and an (optional)
   sticky Table of Contents on the right.
   =========================================================== */
.textcrm-blog-detail__grid {
	display: grid;
	grid-template-columns: minmax(0, var(--tcbd-maxw));
	grid-template-areas: "head" "main";
	justify-content: center;
	align-items: start;          /* keep rails their natural height so position: sticky can travel */
	column-gap: var(--tcbd-col-gap);
}
.textcrm-blog-detail__lead { grid-area: head; min-width: 0; }
.textcrm-blog-detail__main { grid-area: main; min-width: 0; }
.textcrm-blog-detail__share { grid-area: share; }
.textcrm-blog-detail__toc   { grid-area: toc; }

/* TOC only */
.textcrm-blog-detail__grid--toc:not(.textcrm-blog-detail__grid--share) {
	grid-template-columns: minmax(0, var(--tcbd-maxw)) var(--tcbd-toc-w);
	grid-template-areas:
		"head ."
		"main toc";
}
/* Share only — symmetric gutters keep the article centred */
.textcrm-blog-detail__grid--share:not(.textcrm-blog-detail__grid--toc) {
	grid-template-columns: minmax(72px, 1fr) minmax(0, var(--tcbd-maxw)) minmax(72px, 1fr);
	grid-template-areas:
		".     head ."
		"share main .";
	justify-content: stretch;
}
/* Both rails */
.textcrm-blog-detail__grid--share.textcrm-blog-detail__grid--toc {
	grid-template-columns: minmax(72px, 1fr) minmax(0, var(--tcbd-maxw)) var(--tcbd-toc-w);
	grid-template-areas:
		".     head ."
		"share main toc";
	justify-content: stretch;
}

/* ===========================================================
   Back link
   =========================================================== */
.textcrm-blog-detail__back {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin-bottom: clamp(1.25rem, 2.5vw, 2rem);
	padding: 7px 14px 7px 11px;
	border: 1px solid var(--tcbd-border);
	border-radius: var(--tcbd-radius-pill);
	background: var(--tcbd-card-bg);
	color: var(--tcbd-muted);
	font-size: var(--tcbd-fs-sm);
	font-weight: 600;
	text-decoration: none;
	transition:
		color var(--tcbd-dur-fast) var(--tcbd-ease-out),
		border-color var(--tcbd-dur-fast) var(--tcbd-ease-out),
		background-color var(--tcbd-dur-fast) var(--tcbd-ease-out);
}
.textcrm-blog-detail__back svg {
	width: 16px;
	height: 16px;
	transition: transform var(--tcbd-dur-fast) var(--tcbd-ease-out);
}
.textcrm-blog-detail__back:hover {
	color: var(--tcbd-accent);
	border-color: rgba(0, 245, 160, .4);
}
.textcrm-blog-detail--light .textcrm-blog-detail__back:hover {
	border-color: rgba(0, 163, 122, .45);
}
.textcrm-blog-detail__back:hover svg { transform: translateX(-2px); }

/* ===========================================================
   Header — categories, title, meta
   =========================================================== */
.textcrm-blog-detail__head {
	margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}

.textcrm-blog-detail__cats {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin: 0 0 1rem;
}
.textcrm-blog-detail .textcrm-blog-detail__cat,
.textcrm-blog-detail a.textcrm-blog-detail__cat {
	display: inline-flex;
	align-items: center;
	padding: 5px 12px;
	font-size: var(--tcbd-fs-2xs);
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--tcbd-accent);
	background: var(--tcbd-accent-tint);
	border-radius: var(--tcbd-radius-pill);
	line-height: 1.3;
	text-decoration: none;
	transition: background-color var(--tcbd-dur-fast) var(--tcbd-ease-out);
}
.textcrm-blog-detail a.textcrm-blog-detail__cat:hover {
	background: rgba(0, 245, 160, .22);
}
.textcrm-blog-detail--light a.textcrm-blog-detail__cat:hover {
	background: rgba(0, 163, 122, .2);
}

.textcrm-blog-detail .textcrm-blog-detail__title {
	font-size: var(--tcbd-fs-h2);
	font-weight: 700;
	letter-spacing: var(--tcbd-tracking-tight);
	line-height: var(--tcbd-lh-tight);
	margin: 0;
	color: var(--tcbd-heading);
	text-wrap: balance;
}

.textcrm-blog-detail__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem .75rem;
	margin-top: 1.25rem;
	font-size: var(--tcbd-fs-sm);
	color: var(--tcbd-muted);
	font-weight: 500;
}
.textcrm-blog-detail__meta-item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.textcrm-blog-detail__meta-item svg {
	width: 15px;
	height: 15px;
	flex-shrink: 0;
	opacity: .85;
}
.textcrm-blog-detail__meta-sep {
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: currentColor;
	opacity: .5;
}
.textcrm-blog-detail__meta-avatar {
	width: 26px;
	height: 26px;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
}
.textcrm-blog-detail__meta-item--author {
	font-weight: 700;
	color: var(--tcbd-text);
}

/* ===========================================================
   Featured / cover image
   =========================================================== */
.textcrm-blog-detail__cover {
	/* Generous bottom margin so the Table of Contents (or content) sits with a
	   clearly visible gap below the featured image. `!important` overrides any
	   block-theme image-figure margin reset. */
	margin: 0 0 clamp(1.75rem, 3.5vw, 2.5rem) !important;
	border-radius: var(--tcbd-radius-2xl);
	overflow: hidden;
	border: 1px solid var(--tcbd-border);
	background: var(--tcbd-surface);
	box-shadow: var(--tcbd-shadow-md);
}
.textcrm-blog-detail__cover img {
	display: block;
	width: 100%;
	height: auto;
}

/* ===========================================================
   Post content — prose
   Selectors target raw element tags so any markup WordPress emits
   (classic or Gutenberg) is styled without per-block classes.
   =========================================================== */
.textcrm-blog-detail__content {
	color: var(--tcbd-body);
	font-size: var(--tcbd-fs-lg);
	line-height: var(--tcbd-lh-relaxed);
	min-width: 0;
	overflow-wrap: break-word;
	word-break: break-word;
}
.textcrm-blog-detail__content > *:first-child { margin-top: 0; }
.textcrm-blog-detail__content > *:last-child { margin-bottom: 0; }

.textcrm-blog-detail__content p {
	margin: 0 0 1.25rem;
}

/* Headings */
.textcrm-blog-detail__content h1,
.textcrm-blog-detail__content h2,
.textcrm-blog-detail__content h3,
.textcrm-blog-detail__content h4,
.textcrm-blog-detail__content h5,
.textcrm-blog-detail__content h6 {
	color: var(--tcbd-heading);
	font-weight: 700;
	line-height: var(--tcbd-lh-snug);
	letter-spacing: var(--tcbd-tracking-snug);
	margin: 2.5rem 0 1rem;
	scroll-margin-top: 100px;
}
.textcrm-blog-detail__content h1 { font-size: var(--tcbd-fs-h2); }
.textcrm-blog-detail__content h2 { font-size: var(--tcbd-fs-h3); }
.textcrm-blog-detail__content h3 { font-size: var(--tcbd-fs-h4); }
.textcrm-blog-detail__content h4 { font-size: var(--tcbd-fs-lg); }
.textcrm-blog-detail__content h5,
.textcrm-blog-detail__content h6 {
	font-size: var(--tcbd-fs-md);
	text-transform: uppercase;
	letter-spacing: var(--tcbd-tracking-wide);
	color: var(--tcbd-muted);
}

/* Lists */
.textcrm-blog-detail__content ul,
.textcrm-blog-detail__content ol {
	margin: 0 0 1.25rem;
	padding-left: 1.5rem;
}
.textcrm-blog-detail__content li {
	margin: .5rem 0;
}
.textcrm-blog-detail__content li::marker { color: var(--tcbd-accent); }
.textcrm-blog-detail__content ul ul,
.textcrm-blog-detail__content ul ol,
.textcrm-blog-detail__content ol ul,
.textcrm-blog-detail__content ol ol { margin-bottom: 0; }

.textcrm-blog-detail__content strong,
.textcrm-blog-detail__content b { color: var(--tcbd-heading); font-weight: 700; }

/* Links — animated underline */
.textcrm-blog-detail__content a {
	color: var(--tcbd-accent);
	text-decoration: none;
	background-image: linear-gradient(to right, currentColor, currentColor);
	background-size: 100% 1px;
	background-position: 0 100%;
	background-repeat: no-repeat;
	transition: background-size var(--tcbd-dur-fast) var(--tcbd-ease-out);
	font-weight: 600;
	overflow-wrap: break-word;
}
.textcrm-blog-detail__content a:hover { background-size: 100% 2px; }

/* Images & figures */
.textcrm-blog-detail__content img {
	max-width: 100%;
	height: auto;
	display: block;
	border-radius: var(--tcbd-radius-md);
}
.textcrm-blog-detail__content figure {
	margin: 1.75rem 0;
}
.textcrm-blog-detail__content figure img,
.textcrm-blog-detail__content p > img {
	border: 1px solid var(--tcbd-border);
}
.textcrm-blog-detail__content figcaption,
.textcrm-blog-detail__content .wp-caption-text {
	margin-top: .5rem;
	font-size: var(--tcbd-fs-sm);
	color: var(--tcbd-subtle);
	text-align: center;
	font-weight: 500;
}

/* Blockquote */
.textcrm-blog-detail__content blockquote {
	position: relative;
	margin: 1.75rem 0;
	padding: 1.25rem 1.5rem 1.25rem 2.5rem;
	border-left: 3px solid var(--tcbd-accent);
	border-radius: 0 var(--tcbd-radius-md) var(--tcbd-radius-md) 0;
	background: var(--tcbd-accent-soft);
	color: var(--tcbd-heading);
	font-size: var(--tcbd-fs-lg);
	font-weight: 500;
}
.textcrm-blog-detail__content blockquote::before {
	content: "\201C";
	position: absolute;
	top: -2px;
	left: 14px;
	font-size: 46px;
	line-height: 1;
	color: var(--tcbd-accent);
	opacity: .35;
	font-weight: 800;
	font-family: Georgia, serif;
}
.textcrm-blog-detail__content blockquote p:last-child { margin-bottom: 0; }
.textcrm-blog-detail__content blockquote cite {
	display: block;
	margin-top: .75rem;
	font-size: var(--tcbd-fs-sm);
	font-style: normal;
	font-weight: 600;
	color: var(--tcbd-muted);
}

/* Pull quote (Gutenberg) */
.textcrm-blog-detail__content .wp-block-pullquote {
	border: 0;
	border-top: 2px solid var(--tcbd-accent);
	border-bottom: 2px solid var(--tcbd-accent);
	padding: 1.75rem 1rem;
	margin: 2rem 0;
	text-align: center;
	background: transparent;
}
.textcrm-blog-detail__content .wp-block-pullquote p {
	font-size: var(--tcbd-fs-h4);
	font-weight: 700;
	color: var(--tcbd-heading);
}

/* Inline code */
.textcrm-blog-detail__content code,
.textcrm-blog-detail__content kbd {
	font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, monospace;
	font-size: .88em;
	padding: 2px 7px;
	background: rgba(0, 245, 160, .08);
	color: var(--tcbd-accent-strong);
	border: 1px solid rgba(0, 245, 160, .16);
	border-radius: var(--tcbd-radius-xs);
	font-weight: 600;
}
.textcrm-blog-detail--light .textcrm-blog-detail__content code,
.textcrm-blog-detail--light .textcrm-blog-detail__content kbd {
	background: rgba(0, 163, 122, .08);
	border-color: rgba(0, 163, 122, .16);
}

/* Code block */
.textcrm-blog-detail__content pre {
	background: var(--tcbd-code-bg);
	color: #e9f6f1;
	padding: 1.25rem;
	border-radius: var(--tcbd-radius-md);
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	margin: 1.5rem 0;
	font-size: var(--tcbd-fs-sm);
	font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, monospace;
	line-height: var(--tcbd-lh-normal);
	border: 1px solid rgba(255, 255, 255, .08);
	box-shadow: var(--tcbd-shadow-sm);
}
.textcrm-blog-detail__content pre code {
	background: transparent;
	border: 0;
	padding: 0;
	color: inherit;
	font-weight: 400;
	font-size: inherit;
}

/* Horizontal rule */
.textcrm-blog-detail__content hr,
.textcrm-blog-detail__content .wp-block-separator {
	border: 0;
	height: 1px;
	background: linear-gradient(to right, transparent, var(--tcbd-border), transparent);
	margin: 2.5rem 0;
}

/* Tables */
.textcrm-blog-detail__content table {
	width: 100%;
	border-collapse: collapse;
	margin: 1.5rem 0;
	font-size: var(--tcbd-fs-sm);
	border: 1px solid var(--tcbd-border);
	border-radius: var(--tcbd-radius-md);
	overflow: hidden;
}
.textcrm-blog-detail__content th,
.textcrm-blog-detail__content td {
	padding: 11px 15px;
	text-align: left;
	border-bottom: 1px solid var(--tcbd-border);
}
.textcrm-blog-detail__content th {
	background: var(--tcbd-panel-bg);
	color: var(--tcbd-heading);
	font-weight: 700;
	font-size: var(--tcbd-fs-xs);
	text-transform: uppercase;
	letter-spacing: var(--tcbd-tracking-wide);
}
.textcrm-blog-detail__content tr:last-child td { border-bottom: 0; }
/* Let wide tables scroll instead of overflowing the column. */
.textcrm-blog-detail__content .wp-block-table { overflow-x: auto; }

/* Buttons (Gutenberg) */
.textcrm-blog-detail__content .wp-block-button__link,
.textcrm-blog-detail__content .wp-element-button {
	display: inline-block;
	background: var(--tcbd-accent);
	color: var(--tcbd-accent-on);
	padding: 12px 26px;
	border-radius: var(--tcbd-radius-md);
	font-weight: 700;
	text-decoration: none;
	background-size: auto;
}

/* Embeds — keep videos/iframes responsive */
.textcrm-blog-detail__content iframe,
.textcrm-blog-detail__content video,
.textcrm-blog-detail__content embed,
.textcrm-blog-detail__content object {
	max-width: 100%;
	border: 0;
	border-radius: var(--tcbd-radius-md);
}
.textcrm-blog-detail__content .wp-block-embed__wrapper {
	position: relative;
}
/* Responsive 16:9 wrapper for known video providers. */
.textcrm-blog-detail__content .wp-embed-aspect-16-9 .wp-block-embed__wrapper {
	aspect-ratio: 16 / 9;
}
.textcrm-blog-detail__content .wp-embed-aspect-16-9 .wp-block-embed__wrapper iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}
.textcrm-blog-detail__content figure.wp-block-embed { margin: 1.75rem 0; }

/* Galleries */
.textcrm-blog-detail__content .wp-block-gallery {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: .75rem;
	margin: 1.75rem 0;
}
.textcrm-blog-detail__content .wp-block-gallery figure { margin: 0; }

/* Block alignments — gentle break-out within the article column. */
.textcrm-blog-detail__content .aligncenter { margin-left: auto; margin-right: auto; }
.textcrm-blog-detail__content .alignleft {
	float: left;
	margin: .5rem 1.5rem 1rem 0;
	max-width: 50%;
}
.textcrm-blog-detail__content .alignright {
	float: right;
	margin: .5rem 0 1rem 1.5rem;
	max-width: 50%;
}
.textcrm-blog-detail__content .alignwide {
	width: calc(100% + clamp(2rem, 8vw, 7rem));
	max-width: 100vw;
	margin-left: calc(clamp(1rem, 4vw, 3.5rem) * -1);
	margin-right: calc(clamp(1rem, 4vw, 3.5rem) * -1);
}
.textcrm-blog-detail__content .alignfull {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

/* ===========================================================
   Tags
   =========================================================== */
.textcrm-blog-detail__tags {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem;
	margin-top: clamp(2rem, 4vw, 3rem);
	padding-top: 1.5rem;
	border-top: 1px solid var(--tcbd-border);
}
.textcrm-blog-detail__tags-label {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: var(--tcbd-fs-sm);
	font-weight: 700;
	color: var(--tcbd-muted);
	margin-right: .25rem;
}
.textcrm-blog-detail__tags-label svg { width: 15px; height: 15px; }
.textcrm-blog-detail .textcrm-blog-detail__tag,
.textcrm-blog-detail a.textcrm-blog-detail__tag {
	display: inline-flex;
	align-items: center;
	padding: 5px 12px;
	font-size: var(--tcbd-fs-xs);
	font-weight: 600;
	color: var(--tcbd-muted);
	background: var(--tcbd-surface);
	border: 1px solid var(--tcbd-border);
	border-radius: var(--tcbd-radius-pill);
	text-decoration: none;
	transition:
		color var(--tcbd-dur-fast) var(--tcbd-ease-out),
		border-color var(--tcbd-dur-fast) var(--tcbd-ease-out);
}
.textcrm-blog-detail a.textcrm-blog-detail__tag:hover {
	color: var(--tcbd-accent);
	border-color: rgba(0, 245, 160, .4);
}
.textcrm-blog-detail--light a.textcrm-blog-detail__tag:hover {
	border-color: rgba(0, 163, 122, .45);
}

/* ===========================================================
   Author box
   =========================================================== */
.textcrm-blog-detail__author {
	display: flex;
	gap: 1.25rem;
	align-items: flex-start;
	margin-top: clamp(2rem, 4vw, 3rem);
	padding: clamp(1.25rem, 2.5vw, 1.75rem);
	background: var(--tcbd-author-bg);
	border: 1px solid var(--tcbd-border);
	border-radius: var(--tcbd-radius-2xl);
}
.textcrm-blog-detail__author-avatar {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
	border: 2px solid var(--tcbd-card-bg);
	box-shadow: var(--tcbd-shadow-sm);
}
.textcrm-blog-detail__author-body { min-width: 0; }
.textcrm-blog-detail__author-kicker {
	font-size: var(--tcbd-fs-2xs);
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--tcbd-accent);
	margin: 0 0 2px;
}
.textcrm-blog-detail .textcrm-blog-detail__author-name {
	font-size: var(--tcbd-fs-h4);
	font-weight: 700;
	color: var(--tcbd-heading);
	margin: 0;
	line-height: var(--tcbd-lh-snug);
}
.textcrm-blog-detail .textcrm-blog-detail__author-name a {
	color: inherit;
	text-decoration: none;
	transition: color var(--tcbd-dur-fast) var(--tcbd-ease-out);
}
.textcrm-blog-detail .textcrm-blog-detail__author-name a:hover { color: var(--tcbd-accent); }
.textcrm-blog-detail .textcrm-blog-detail__author-bio {
	margin: .5rem 0 0;
	font-size: var(--tcbd-fs-sm);
	line-height: var(--tcbd-lh-relaxed);
	color: var(--tcbd-muted);
}

/* ===========================================================
   Prev / next post navigation
   =========================================================== */
.textcrm-blog-detail__nav {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
	margin-top: clamp(2rem, 4vw, 3rem);
}
.textcrm-blog-detail .textcrm-blog-detail__nav-link,
.textcrm-blog-detail a.textcrm-blog-detail__nav-link {
	display: flex;
	flex-direction: column;
	gap: 5px;
	padding: 1.25rem;
	border: 1px solid var(--tcbd-border);
	border-radius: var(--tcbd-radius-lg);
	background: var(--tcbd-card-bg);
	text-decoration: none;
	box-shadow: var(--tcbd-shadow-sm);
	transition:
		transform var(--tcbd-dur-base) var(--tcbd-ease-out),
		box-shadow var(--tcbd-dur-base) var(--tcbd-ease-out),
		border-color var(--tcbd-dur-base) var(--tcbd-ease-out);
}
.textcrm-blog-detail a.textcrm-blog-detail__nav-link:hover {
	transform: translateY(-3px);
	box-shadow: var(--tcbd-shadow-md);
	border-color: rgba(0, 245, 160, .3);
}
.textcrm-blog-detail--light a.textcrm-blog-detail__nav-link:hover {
	border-color: rgba(0, 163, 122, .35);
}
.textcrm-blog-detail__nav-link--next { text-align: right; align-items: flex-end; }
.textcrm-blog-detail__nav-dir {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: var(--tcbd-fs-2xs);
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--tcbd-accent);
}
.textcrm-blog-detail__nav-dir svg { width: 14px; height: 14px; }
.textcrm-blog-detail__nav-title {
	font-size: var(--tcbd-fs-md);
	font-weight: 700;
	color: var(--tcbd-heading);
	line-height: var(--tcbd-lh-snug);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* ===========================================================
   Table of Contents — sticky right rail, auto-built from the
   post's headings. A faint track line runs down the list and
   the link for the section you are reading paints a brand
   segment over it (driven by .is-active from the JS scroll-spy).
   =========================================================== */
.textcrm-blog-detail__toc {
	position: sticky;
	top: var(--tcbd-stick-top);
	align-self: start;
	margin: 0;
	padding: clamp(1.1rem, 2.2vw, 1.4rem) clamp(1.1rem, 2vw, 1.4rem);
	background: var(--tcbd-panel-bg);
	border: 1px solid var(--tcbd-border);
	border-radius: var(--tcbd-radius-lg);
	box-shadow: var(--tcbd-shadow-sm);
	max-height: calc(100vh - var(--tcbd-stick-top) - 1.5rem);
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
	scrollbar-color: var(--tcbd-border) transparent;
}
.textcrm-blog-detail__toc::-webkit-scrollbar { width: 6px; }
.textcrm-blog-detail__toc::-webkit-scrollbar-thumb {
	background: var(--tcbd-border);
	border-radius: 999px;
}

.textcrm-blog-detail__toc-title {
	display: flex;
	align-items: center;
	gap: .5rem;
	margin: 0 0 .75rem;
	font-size: var(--tcbd-fs-2xs);
	font-weight: 800;
	letter-spacing: var(--tcbd-tracking-wide);
	text-transform: uppercase;
	color: var(--tcbd-muted);
}
.textcrm-blog-detail__toc-title svg {
	width: 15px;
	height: 15px;
	color: var(--tcbd-accent);
	flex-shrink: 0;
}

.textcrm-blog-detail__toc-list {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: tcbd-toc;
}
.textcrm-blog-detail__toc-item {
	margin: 0;
	position: relative;
}
.textcrm-blog-detail__toc-item + .textcrm-blog-detail__toc-item { margin-top: 3px; }

.textcrm-blog-detail .textcrm-blog-detail__toc-link,
.textcrm-blog-detail a.textcrm-blog-detail__toc-link {
	display: flex;
	gap: 8px;
	position: relative;
	padding: 5px 4px 5px 16px;
	border-left: 1.5px solid var(--tcbd-toc-line);
	color: var(--tcbd-muted);
	text-decoration: none;
	font-size: var(--tcbd-fs-sm);
	font-weight: 500;
	line-height: 1.45;
	transition:
		color var(--tcbd-dur-fast) var(--tcbd-ease-out),
		border-color var(--tcbd-dur-fast) var(--tcbd-ease-out);
}
.textcrm-blog-detail .textcrm-blog-detail__toc-link:hover {
	color: var(--tcbd-heading);
	border-left-color: rgba(0, 245, 160, .35);
}
.textcrm-blog-detail--light .textcrm-blog-detail__toc-link:hover {
	border-left-color: rgba(0, 163, 122, .4);
}
/* Active section — brand text + a clean accent bar, no filled box. */
.textcrm-blog-detail .textcrm-blog-detail__toc-link.is-active {
	color: var(--tcbd-toc-active);
	font-weight: 700;
	border-left-color: transparent;
}
.textcrm-blog-detail .textcrm-blog-detail__toc-link.is-active::after {
	content: "";
	position: absolute;
	left: -1.5px;
	top: 3px;
	bottom: 3px;
	width: 2.5px;
	background: var(--tcbd-accent);
	border-radius: 2px;
}

/* Nested headings step in under their parent. */
.textcrm-blog-detail__toc-item--lvl3 .textcrm-blog-detail__toc-link { padding-left: 28px; }
.textcrm-blog-detail__toc-item--lvl4 .textcrm-blog-detail__toc-link { padding-left: 40px; }

/* Numbered variant — quiet, muted counters that brand only when active. */
.textcrm-blog-detail__toc--numbered .textcrm-blog-detail__toc-list { counter-reset: tcbd-toc; }
.textcrm-blog-detail__toc--numbered .textcrm-blog-detail__toc-item { counter-increment: tcbd-toc; }
.textcrm-blog-detail__toc--numbered .textcrm-blog-detail__toc-link::before {
	content: counter(tcbd-toc) ".";
	flex-shrink: 0;
	color: var(--tcbd-subtle);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	transition: color var(--tcbd-dur-fast) var(--tcbd-ease-out);
}
.textcrm-blog-detail__toc--numbered .textcrm-blog-detail__toc-link.is-active::before { color: var(--tcbd-toc-active); }
/* Sub-level counters should not inherit the top-level number. */
.textcrm-blog-detail__toc--numbered .textcrm-blog-detail__toc-item--lvl3,
.textcrm-blog-detail__toc--numbered .textcrm-blog-detail__toc-item--lvl4 { counter-increment: none; }
.textcrm-blog-detail__toc--numbered .textcrm-blog-detail__toc-item--lvl3 .textcrm-blog-detail__toc-link::before,
.textcrm-blog-detail__toc--numbered .textcrm-blog-detail__toc-item--lvl4 .textcrm-blog-detail__toc-link::before {
	content: "–";
}

/* ===========================================================
   Social share rail — sticky vertical icon column on the left
   =========================================================== */
.textcrm-blog-detail__share {
	position: sticky;
	top: var(--tcbd-stick-top);
	align-self: start;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: .75rem;
}
.textcrm-blog-detail__share-label {
	font-size: var(--tcbd-fs-2xs);
	font-weight: 800;
	letter-spacing: var(--tcbd-tracking-wide);
	text-transform: uppercase;
	color: var(--tcbd-subtle);
}
/* Visually-hidden live region — announces "Copied!" to screen readers. */
.textcrm-blog-detail__share-status {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}
/* One rounded capsule holds every icon — a clean vertical share dock. */
.textcrm-blog-detail__share-list {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	padding: 7px 5px;
	background: var(--tcbd-card-bg);
	border: 1px solid var(--tcbd-border);
	border-radius: var(--tcbd-radius-pill);
	box-shadow: var(--tcbd-shadow-md);
}
.textcrm-blog-detail .textcrm-blog-detail__share-btn,
.textcrm-blog-detail a.textcrm-blog-detail__share-btn,
.textcrm-blog-detail button.textcrm-blog-detail__share-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--tcbd-muted);
	cursor: pointer;
	text-decoration: none;
	transition:
		color var(--tcbd-dur-fast) var(--tcbd-ease-out),
		background-color var(--tcbd-dur-fast) var(--tcbd-ease-out);
}
.textcrm-blog-detail__share-icon { display: inline-flex; }
.textcrm-blog-detail__share-btn svg { width: 18px; height: 18px; display: block; }
.textcrm-blog-detail a.textcrm-blog-detail__share-btn:hover,
.textcrm-blog-detail button.textcrm-blog-detail__share-btn:hover {
	color: var(--tcbd-accent);
	background: var(--tcbd-accent-tint);
}
.textcrm-blog-detail .textcrm-blog-detail__share-btn:focus-visible {
	outline: none;
	color: var(--tcbd-accent);
	box-shadow: var(--tcbd-ring);
}

/* Tooltip label that slides out to the right on hover/focus.
   Colours invert with the theme so the chip always contrasts. */
.textcrm-blog-detail__share-tip {
	position: absolute;
	left: calc(100% + 10px);
	top: 50%;
	transform: translate(-4px, -50%);
	white-space: nowrap;
	padding: 5px 9px;
	font-size: var(--tcbd-fs-2xs);
	font-weight: 700;
	color: var(--tcbd-section-bg);
	background: var(--tcbd-heading);
	border-radius: var(--tcbd-radius-sm);
	box-shadow: var(--tcbd-shadow-md);
	opacity: 0;
	pointer-events: none;
	transition:
		opacity var(--tcbd-dur-fast) var(--tcbd-ease-out),
		transform var(--tcbd-dur-fast) var(--tcbd-ease-out);
	z-index: 4;
}
.textcrm-blog-detail__share-tip::before {
	content: "";
	position: absolute;
	right: 100%;
	top: 50%;
	transform: translateY(-50%);
	border: 5px solid transparent;
	border-right-color: var(--tcbd-heading);
}
.textcrm-blog-detail__share-btn:hover .textcrm-blog-detail__share-tip,
.textcrm-blog-detail__share-btn:focus-visible .textcrm-blog-detail__share-tip {
	opacity: 1;
	transform: translate(0, -50%);
}

/* Copy-link button — icon + tooltip swap once copied. */
.textcrm-blog-detail__share-icon--check { display: none; }
.textcrm-blog-detail__share-tip--copied { display: none; }
.textcrm-blog-detail__share-btn--copy.is-copied .textcrm-blog-detail__share-icon--link { display: none; }
.textcrm-blog-detail__share-btn--copy.is-copied .textcrm-blog-detail__share-icon--check { display: inline-flex; }
.textcrm-blog-detail__share-btn--copy.is-copied {
	color: var(--tcbd-success);
	background: rgba(0, 245, 160, .14);
}
.textcrm-blog-detail--light .textcrm-blog-detail__share-btn--copy.is-copied {
	background: rgba(0, 163, 122, .14);
}
.textcrm-blog-detail__share-btn--copy.is-copied .textcrm-blog-detail__share-tip:not(.textcrm-blog-detail__share-tip--copied) { display: none; }
.textcrm-blog-detail__share-btn--copy.is-copied .textcrm-blog-detail__share-tip--copied {
	display: block;
	opacity: 1;
	transform: translate(0, -50%);
}

/* ===========================================================
   Comments
   =========================================================== */
.textcrm-blog-detail__comments {
	margin-top: clamp(2.5rem, 5vw, 3.75rem);
	padding-top: clamp(2rem, 4vw, 3rem);
	border-top: 1px solid var(--tcbd-border);
}

.textcrm-blog-detail .textcrm-blog-detail__comments-title {
	display: flex;
	align-items: center;
	gap: .75rem;
	margin: 0 0 clamp(1.5rem, 3vw, 2rem);
	font-size: var(--tcbd-fs-h3);
	font-weight: 700;
	letter-spacing: var(--tcbd-tracking-tight);
	color: var(--tcbd-heading);
}
.textcrm-blog-detail__comments-title svg {
	width: 26px;
	height: 26px;
	color: var(--tcbd-accent);
	flex-shrink: 0;
}
.textcrm-blog-detail__comments-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 28px;
	height: 24px;
	padding: 0 9px;
	background: var(--tcbd-accent-tint);
	color: var(--tcbd-accent);
	border-radius: var(--tcbd-radius-pill);
	font-size: var(--tcbd-fs-xs);
	font-weight: 800;
	font-variant-numeric: tabular-nums;
}

/* ----- Comment list ----- */
.textcrm-blog-detail__comment-list,
.textcrm-blog-detail__comment-list .children {
	list-style: none;
	margin: 0;
	padding: 0;
}
.textcrm-blog-detail__comment-list .children {
	margin-top: 1.25rem;
	padding-left: clamp(1.25rem, 4vw, 2.75rem);
	border-left: 2px solid var(--tcbd-border);
}
.textcrm-blog-detail__comment { margin: 0; }
.textcrm-blog-detail__comment-list > .textcrm-blog-detail__comment + .textcrm-blog-detail__comment {
	margin-top: 1.25rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--tcbd-border);
}
.textcrm-blog-detail__comment-list .children .textcrm-blog-detail__comment + .textcrm-blog-detail__comment {
	margin-top: 1rem;
}

.textcrm-blog-detail__comment-body {
	display: flex;
	gap: .75rem;
	align-items: flex-start;
}
.textcrm-blog-detail__comment-avatar {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
	border: 1px solid var(--tcbd-border);
}
.textcrm-blog-detail__comment-main { min-width: 0; flex: 1; }

.textcrm-blog-detail__comment-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: .25rem .75rem;
	margin-bottom: .25rem;
}
.textcrm-blog-detail .textcrm-blog-detail__comment-author,
.textcrm-blog-detail__comment-author a {
	font-size: var(--tcbd-fs-md);
	font-weight: 700;
	color: var(--tcbd-heading);
	text-decoration: none;
}
.textcrm-blog-detail__comment-author a:hover { color: var(--tcbd-accent); }
.textcrm-blog-detail .textcrm-blog-detail__comment-date,
.textcrm-blog-detail a.textcrm-blog-detail__comment-date {
	font-size: var(--tcbd-fs-xs);
	color: var(--tcbd-subtle);
	text-decoration: none;
	font-weight: 500;
}
.textcrm-blog-detail a.textcrm-blog-detail__comment-date:hover { color: var(--tcbd-accent); }

.textcrm-blog-detail__comment-pending {
	margin: .25rem 0;
	font-size: var(--tcbd-fs-xs);
	font-weight: 600;
	color: var(--tcbd-warning);
}

.textcrm-blog-detail__comment-text {
	font-size: var(--tcbd-fs-sm);
	line-height: var(--tcbd-lh-relaxed);
	color: var(--tcbd-body);
}
.textcrm-blog-detail__comment-text p { margin: 0 0 .75rem; }
.textcrm-blog-detail__comment-text p:last-child { margin-bottom: 0; }
.textcrm-blog-detail__comment-text a {
	color: var(--tcbd-accent);
	text-decoration: underline;
	overflow-wrap: break-word;
}

.textcrm-blog-detail__comment-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .75rem;
	margin-top: .5rem;
}
.textcrm-blog-detail__comment-actions .comment-reply-link,
.textcrm-blog-detail__comment-edit a {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: var(--tcbd-fs-xs);
	font-weight: 700;
	color: var(--tcbd-accent);
	text-decoration: none;
	letter-spacing: .01em;
}
.textcrm-blog-detail__comment-actions .comment-reply-link:hover,
.textcrm-blog-detail__comment-edit a:hover { text-decoration: underline; }
.textcrm-blog-detail__comment-edit { color: var(--tcbd-subtle); }

/* ----- Comment form ----- */
.textcrm-blog-detail__comment-form,
.textcrm-blog-detail #respond {
	margin-top: clamp(1.75rem, 4vw, 2.75rem);
	padding: clamp(1.25rem, 3vw, 2rem);
	background: var(--tcbd-panel-bg);
	border: 1px solid var(--tcbd-border);
	border-radius: var(--tcbd-radius-2xl);
}
/* When the reply form is moved beneath a comment it should read as a
   nested panel, not a full-width block. */
.textcrm-blog-detail__comment-list #respond {
	margin-top: 1.25rem;
}
.textcrm-blog-detail .comment-reply-title {
	margin: 0 0 1rem;
	font-size: var(--tcbd-fs-h4);
	font-weight: 700;
	color: var(--tcbd-heading);
	letter-spacing: var(--tcbd-tracking-snug);
}
.textcrm-blog-detail .comment-reply-title small {
	margin-left: .5rem;
	font-size: var(--tcbd-fs-sm);
	font-weight: 600;
}
.textcrm-blog-detail .comment-reply-title small a {
	color: var(--tcbd-accent);
	text-decoration: none;
}

/* ---------- Modern comment form ----------
   Each WP comment-form `<p>` row is forced into a flex column so the
   label always sits above its input. Author + Email + Website + Comment
   span a responsive grid; notes and submit span the full width. */
.textcrm-blog-detail .comment-form {
	margin: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.25rem 1rem;
}
.textcrm-blog-detail .comment-form > * {
	grid-column: 1 / -1;
	margin: 0;
	min-width: 0;
}
.textcrm-blog-detail .comment-form-author { grid-column: 1; }
.textcrm-blog-detail .comment-form-email  { grid-column: 2; }

@media (max-width: 640px) {
	.textcrm-blog-detail .comment-form { grid-template-columns: 1fr; }
	.textcrm-blog-detail .comment-form-author,
	.textcrm-blog-detail .comment-form-email { grid-column: 1; }
}

/* Notes (above the textarea + "logged in as ..." message) */
.textcrm-blog-detail .comment-notes,
.textcrm-blog-detail .logged-in-as {
	font-size: var(--tcbd-fs-sm);
	color: var(--tcbd-muted);
	line-height: var(--tcbd-lh-relaxed);
}
.textcrm-blog-detail .logged-in-as a { color: var(--tcbd-accent); text-decoration: none; }
.textcrm-blog-detail .logged-in-as a:hover { text-decoration: underline; }

/* Every field row stacks label-above-input via flex column. */
.textcrm-blog-detail .comment-form-comment,
.textcrm-blog-detail .comment-form-author,
.textcrm-blog-detail .comment-form-email,
.textcrm-blog-detail .comment-form-url {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.textcrm-blog-detail .comment-form-comment > label,
.textcrm-blog-detail .comment-form-author > label,
.textcrm-blog-detail .comment-form-email > label,
.textcrm-blog-detail .comment-form-url > label {
	font-size: var(--tcbd-fs-sm);
	font-weight: 700;
	color: var(--tcbd-heading);
	line-height: 1.4;
	letter-spacing: var(--tcbd-tracking-snug);
}
.textcrm-blog-detail .comment-form .required {
	color: var(--tcbd-accent);
	margin-left: 2px;
	font-weight: 700;
}

/* Inputs + textarea — tall, comfortable, brand focus ring. Targeted by the
   WP comment-form fields' stable element IDs (#author, #email, #url,
   #comment) so the selector beats element-level theme rules. */
.textcrm-blog-detail #author,
.textcrm-blog-detail #email,
.textcrm-blog-detail #url,
.textcrm-blog-detail #comment,
.textcrm-blog-detail .comment-form :is(input[type="text"], input[type="email"], input[type="url"], textarea) {
	box-sizing: border-box !important;
	width: 100% !important;
	padding: 11px 16px !important;
	font-family: var(--tcbd-font) !important;
	font-size: var(--tcbd-fs-sm) !important;
	line-height: 1.4 !important;
	color: var(--tcbd-text);
	background: var(--tcbd-card-bg);
	border: 1px solid var(--tcbd-border);
	border-radius: var(--tcbd-radius-md);
	box-shadow: 0 1px 0 rgba(0, 0, 0, .04) inset;
	transition:
		border-color var(--tcbd-dur-fast) var(--tcbd-ease-out),
		box-shadow var(--tcbd-dur-fast) var(--tcbd-ease-out),
		background-color var(--tcbd-dur-fast) var(--tcbd-ease-out);
}
/* Fixed, compact height on the single-line text fields. */
.textcrm-blog-detail #author,
.textcrm-blog-detail #email,
.textcrm-blog-detail #url {
	height: 46px !important;
	min-height: 46px !important;
}
.textcrm-blog-detail .comment-form :is(input, textarea)::placeholder {
	color: var(--tcbd-subtle);
	opacity: 1;
}
.textcrm-blog-detail .comment-form :is(input, textarea):hover {
	border-color: rgba(0, 245, 160, .32);
}
.textcrm-blog-detail--light .comment-form :is(input, textarea):hover {
	border-color: rgba(0, 163, 122, .35);
}
.textcrm-blog-detail .comment-form :is(input, textarea):focus,
.textcrm-blog-detail .comment-form :is(input, textarea):focus-visible {
	outline: none;
	border-color: var(--tcbd-accent);
	box-shadow: 0 0 0 3px rgba(0, 245, 160, .18);
}
.textcrm-blog-detail--light .comment-form :is(input, textarea):focus,
.textcrm-blog-detail--light .comment-form :is(input, textarea):focus-visible {
	box-shadow: 0 0 0 3px rgba(0, 163, 122, .18);
}
.textcrm-blog-detail .comment-form textarea,
.textcrm-blog-detail #comment {
	min-height: 180px !important;
	resize: vertical;
}

/* Cookies-consent — checkbox inline with its label. */
.textcrm-blog-detail .comment-form-cookies-consent {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: 10px;
}
.textcrm-blog-detail .comment-form-cookies-consent input[type="checkbox"] {
	width: 18px;
	height: 18px;
	margin: 2px 0 0;
	flex-shrink: 0;
	accent-color: var(--tcbd-accent);
	cursor: pointer;
}
.textcrm-blog-detail .comment-form-cookies-consent label {
	margin: 0;
	font-size: var(--tcbd-fs-sm);
	font-weight: 500;
	color: var(--tcbd-muted);
	line-height: 1.45;
	cursor: pointer;
}

/* The grid's row gap already separates submit from the row above. */
.textcrm-blog-detail .form-submit { margin: 0; }
/* "Post comment" button — TextCRM primary: solid mint fill, dark label,
   green glow on hover (mirrors the Inner Hero primary CTA). */
.textcrm-blog-detail .comment-form .submit,
.textcrm-blog-detail__comment-submit {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 14px 28px;
	background: var(--tcbd-accent);
	color: var(--tcbd-accent-on);
	border: 0;
	border-radius: var(--tcbd-radius-md);
	text-decoration: none;
	font-family: var(--tcbd-font);
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: .01em;
	white-space: nowrap;
	cursor: pointer;
	box-shadow: 0 0 0 rgba(0, 245, 160, 0);
	transition:
		transform var(--tcbd-dur-fast) var(--tcbd-ease-out),
		box-shadow var(--tcbd-dur-fast) var(--tcbd-ease-out),
		filter var(--tcbd-dur-fast) var(--tcbd-ease-out);
}
.textcrm-blog-detail .comment-form .submit:hover,
.textcrm-blog-detail__comment-submit:hover {
	color: var(--tcbd-accent-on);
	transform: translateY(-1px);
	box-shadow: var(--tcbd-glow);
	filter: saturate(1.05);
}
.textcrm-blog-detail .comment-form .submit:focus-visible,
.textcrm-blog-detail__comment-submit:focus-visible {
	outline: none;
	box-shadow: var(--tcbd-glow), var(--tcbd-ring);
}

.textcrm-blog-detail__comments-closed {
	margin-top: 1.5rem;
	padding: 1rem 1.25rem;
	background: var(--tcbd-surface);
	border: 1px solid var(--tcbd-border);
	border-radius: var(--tcbd-radius-md);
	font-size: var(--tcbd-fs-sm);
	color: var(--tcbd-muted);
	text-align: center;
}

/* ===========================================================
   Empty state (no post resolved)
   =========================================================== */
.textcrm-blog-detail__empty {
	max-width: 460px;
	margin: 0 auto;
	text-align: center;
	padding: clamp(2.5rem, 6vw, 4rem) 1.5rem;
	color: var(--tcbd-muted);
	font-size: var(--tcbd-fs-md);
}

/* ===========================================================
   Responsive
   =========================================================== */

/* --- Collapse the flanking rails below the reading grid's comfortable
       width. The TOC becomes a static panel and the share rail a
       horizontal bar, both placed above the body. --- */
@media (max-width: 1024px) {
	.textcrm-blog-detail__grid,
	.textcrm-blog-detail__grid--toc:not(.textcrm-blog-detail__grid--share),
	.textcrm-blog-detail__grid--share:not(.textcrm-blog-detail__grid--toc),
	.textcrm-blog-detail__grid--share.textcrm-blog-detail__grid--toc {
		grid-template-columns: minmax(0, var(--tcbd-maxw));
		grid-template-areas:
			"head"
			"share"
			"toc"
			"main";
		justify-content: center;
	}

	/* TOC → full-width static panel */
	.textcrm-blog-detail__toc {
		position: static;
		max-height: none;
		overflow: visible;
		margin: 0 0 clamp(1.5rem, 3.5vw, 2.25rem);
		width: 100%;
	}

	/* Share → self-contained horizontal capsule above the article */
	.textcrm-blog-detail__share {
		position: static;
		flex-direction: row;
		align-items: center;
		flex-wrap: wrap;
		gap: .75rem;
		width: 100%;
		margin: 0 0 clamp(1.5rem, 3.5vw, 2rem);
	}
	.textcrm-blog-detail__share-list {
		flex-direction: row;
		padding: 5px 7px;
	}
	/* Hover tooltips read poorly on touch — the icon swap covers the
	   copy feedback, so suppress the slide-out labels here. */
	.textcrm-blog-detail__share-tip { display: none !important; }
}

@media (max-width: 600px) {
	.textcrm-blog-detail__content {
		font-size: var(--tcbd-fs-md);
	}
	.textcrm-blog-detail .textcrm-blog-detail__title {
		font-size: clamp(1.75rem, 7vw, 2.5rem);
	}
	.textcrm-blog-detail__nav {
		grid-template-columns: 1fr;
	}
	.textcrm-blog-detail__nav-link--next { text-align: left; align-items: flex-start; }
	.textcrm-blog-detail__author {
		flex-direction: column;
		gap: .75rem;
	}
	.textcrm-blog-detail__content .alignleft,
	.textcrm-blog-detail__content .alignright {
		float: none;
		max-width: 100%;
		margin: 1.25rem 0;
	}
	.textcrm-blog-detail__content .alignwide {
		width: 100%;
		margin-left: 0;
		margin-right: 0;
	}
}

/* Reduced-motion users get no hover lift. */
@media (prefers-reduced-motion: reduce) {
	.textcrm-blog-detail a.textcrm-blog-detail__nav-link:hover,
	.textcrm-blog-detail a.textcrm-blog-detail__share-btn:hover,
	.textcrm-blog-detail button.textcrm-blog-detail__share-btn:hover { transform: none; }
}