/* ==========================================================================
   LeadsNimble — Blog Details (lnew-blog-detail)
   Renders a single WordPress post (created from the standard wp-admin editor)
   inside an editorial article layout. Layout mirrors the TextCRM reference
   blog-details view 1:1 (a centre article column flanked by an optional sticky
   share rail and an auto-built Table of Contents).

   RESKINNED 2026-07-30 onto the project's aurora-nightfall design system, the
   same pass assets/css/blog.css got, so the article matches the nav, footer,
   FAQ and the Blog listing rather than the pre-reset palette this file shipped
   with (#3f65b0 → #42a2da, #14161d ink, a system-ui stack):

     type      DM Sans body + Parkinsans headings (--bd-font / --bd-font-head)
     accent    #6366f1 → #a855f7 → #22d3ee  (--bd-accent-grad)
     light     bg #dde2f4 · ink #12122a · body #454a63 · muted #6b7089
     dark      bg #0a0a12 · ink #f5f6ff · body #b8bed6 · muted #949bbb
     surfaces  #fff / rgba(255,255,255,.045) glass + blur in dark
     line      #e7e9f4 / rgba(255,255,255,.10) in dark

   The reference's per-widget dark/light "Color Mode" control is deliberately
   NOT reproduced: this system flips SITE-WIDE from the nav's [data-mode="dark"]
   switch, and no current widget carries its own toggle. Every colour is a
   token so the flip needs no per-rule overrides.

   The __content block carries a full prose stylesheet so classic and
   Gutenberg post content drops in seamlessly.

   The __content block carries a full prose stylesheet so classic and
   Gutenberg post content drops in seamlessly.
   ========================================================================== */

.lnew-blog-detail {
	/* Brand — the aurora gradient's endpoints (Elementor controls override
	   these two; --bd-g2 is the fixed violet mid-stop). */
	--bd-g1: #6366f1;
	--bd-g2: #a855f7;
	--bd-g3: #22d3ee;
	--bd-accent-grad: linear-gradient(100deg, var(--bd-g1) 0%, var(--bd-g2) 52%, var(--bd-g3) 100%);

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

	/* ---- Radius ---- */
	--bd-radius-xs:   8px;
	--bd-radius-sm:   10px;
	--bd-radius-md:   12px;
	--bd-radius-lg:   16px;
	--bd-radius-2xl:  22px;   /* family card radius */
	--bd-radius-pill: 9999px;

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

	/* ---- Palette · LIGHT (the site's default mode) ----
	   The aurora-nightfall tokens, resolved to literals exactly as
	   lnew-faq.css / assets/css/blog.css carry them, so the article reads as
	   part of the same system as the nav, footer, FAQ and the Blog listing. */
	--bd-heading:      #12122a;   /* --ink */
	--bd-text:         #2b2f4a;   /* strong inline (author name) */
	--bd-body:         #454a63;   /* paragraph prose */
	--bd-muted:        #6b7089;   /* meta */
	--bd-subtle:       #949bbb;   /* captions, counters */
	--bd-accent:       #6d5cf5;
	--bd-accent-blend: color-mix(in srgb, var(--bd-g1), var(--bd-g3));
	--bd-accent-on:    #ffffff;                                      /* text over the brand fill */
	--bd-accent-soft:  #f4f5ff;   /* quote / list wash  (eyebrow-bg family) */
	--bd-accent-tint:  #eef0ff;   /* badge / count pill (eyebrow-bg) */
	--bd-accent-ink:   #5b46e0;   /* ink ON the tint pill */
	--bd-accent-halo:  rgba(139, 124, 255, .28);
	--bd-border:       #e7e9f4;   /* --line */
	--bd-surface:      #f3f5fd;
	--bd-card-bg:      #ffffff;
	--bd-panel-bg:     #ffffff;
	--bd-author-bg:    #ffffff;
	--bd-code-bg:      #0a0a12;   /* the system's own near-black */
	--bd-glass-hi:     transparent;
	--bd-blur:         none;
	--bd-maxw:         820px;
	/* Shell that hosts the article + the two flanking rails. */
	--bd-shell:        min(100%, 1300px);
	--bd-toc-w:        clamp(216px, 21vw, 252px);
	--bd-col-gap:      clamp(1.25rem, 2.6vw, 2.75rem);
	/* Sticky-rail clearance. --bd-head-clear is MEASURED at runtime by
	   blog-detail.js: the bottom edge of whatever is actually pinned to the top
	   of the viewport (the floating .lnew-nav capsule + the WP admin bar when
	   logged in), so the rails clear it on any screen size and for logged-in and
	   logged-out visitors alike. The value here is only the pre-JS fallback.
	   --bd-stick-gap is the breathing room below that (Elementor control). */
	--bd-head-clear:   96px;
	--bd-stick-gap:    28px;
	--bd-stick-top:    calc(var(--bd-head-clear) + var(--bd-stick-gap));
	--bd-toc-active:   var(--bd-g1);
	--bd-toc-line:     var(--bd-border);
	--bd-warning:      #b45309;

	/* Shadows — the family's soft, wide-spread set (blog.css / lnew-faq.css). */
	--bd-shadow-sm:    0 1px 2px rgba(30, 30, 80, .05), 0 2px 6px rgba(30, 30, 80, .05);
	--bd-shadow-md:    0 12px 30px -18px rgba(20, 20, 55, .34);
	--bd-card-shadow:  0 18px 34px -16px rgba(20, 20, 55, .34);
	--bd-card-shadow-hover: 0 30px 70px rgba(30, 30, 80, .16), 0 24px 60px -26px var(--bd-accent-halo);
	--bd-ring:         0 0 0 3px var(--bd-accent-halo);
	--bd-glow:         0 12px 26px -12px var(--bd-accent-halo);
	/* Background spotlight glows — the aurora accents. */
	--bd-glow-1:       color-mix(in srgb, var(--bd-g1) 14%, transparent);
	--bd-glow-2:       color-mix(in srgb, var(--bd-g3) 12%, transparent);

	position: relative;
	font-family: var(--bd-font);
	color: var(--bd-body);
	background: var(--bd-bg, #dde2f4);
	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;
}
.lnew-blog-detail *, .lnew-blog-detail *::before, .lnew-blog-detail *::after { box-sizing: border-box; }

/* --------------------------------------------------------------------------
   Palette · DARK ([data-mode="dark"] on <html>, written by the nav)

   The reference's per-widget "Color Mode" control was deliberately NOT
   re-added: this design system flips site-wide from one switch in the nav,
   and no current widget (FAQ, Industries, Pricing 2, …) carries its own
   toggle. The aurora dark tokens, plus the theme's glassmorphism treatment
   for the raised surfaces — translucent fill + backdrop blur + an inset
   highlight in place of the flat light shadow.
   -------------------------------------------------------------------------- */
[data-mode="dark"] .lnew-blog-detail {
	--bd-bg:           #0a0a12;
	--bd-heading:      #f5f6ff;
	--bd-text:         #e4e7f7;
	--bd-body:         #b8bed6;
	--bd-muted:        #949bbb;
	--bd-subtle:       #7b81a3;

	--bd-accent:       #8b7cff;
	--bd-accent-soft:  rgba(255, 255, 255, .04);
	--bd-accent-tint:  rgba(255, 255, 255, .05);
	--bd-accent-ink:   #cdc6ff;

	--bd-border:       rgba(255, 255, 255, .10);
	--bd-surface:      rgba(255, 255, 255, .03);
	--bd-card-bg:      rgba(255, 255, 255, .045);
	--bd-panel-bg:     rgba(255, 255, 255, .045);
	--bd-author-bg:    rgba(255, 255, 255, .045);
	--bd-code-bg:      #06060d;
	--bd-glass-hi:     rgba(255, 255, 255, .10);
	--bd-blur:         blur(14px);

	--bd-shadow-sm:    0 1px 2px rgba(0, 0, 0, .4);
	--bd-shadow-md:    0 12px 30px -18px rgba(0, 0, 0, .5);
	--bd-card-shadow:  0 18px 34px -16px rgba(0, 0, 0, .5);
	--bd-card-shadow-hover: 0 34px 74px rgba(0, 0, 0, .62), 0 24px 60px -26px var(--bd-accent-halo);
	--bd-warning:      #fbbf24;

	/* The spots that would otherwise stay light: the dot grid, the glass back
	   pill, the code block's hairline, the TOC tooltip's text-on-ink and the
	   comment fields. */
	--bd-dot:          rgba(255, 255, 255, .06);
	--bd-pill-bg:      rgba(255, 255, 255, .05);
	--bd-code-ink:     #e4e7f7;
	--bd-code-line:    rgba(255, 255, 255, .10);
	--bd-on-ink:       #0a0a12;
	--bd-field-bg:     rgba(255, 255, 255, .04);
}

/* --------------------------------------------------------------------------
   Background spotlight — two blurred brand glows (the Hero / Final CTA
   language) plus a faint dot grid, sitting at z-index 0 behind the z-index:1
   __wrap content. The JS drifts the glows on scroll via --bd-gy1/--bd-gy2.
   -------------------------------------------------------------------------- */
.lnew-blog-detail__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	pointer-events: none;
}
.lnew-blog-detail__glow {
	position: absolute;
	border-radius: 50%;
	filter: blur(140px);
	pointer-events: none;
	will-change: transform;
}
/* Primary glow — wide, top-centre, blends up behind the transparent header. */
.lnew-blog-detail__glow--1 {
	top: -140px;
	left: 50%;
	width: 980px;
	height: 560px;
	max-width: 120vw;
	transform: translate(-50%, var(--bd-gy1, 0px));
	background: var(--bd-glow-1);
}
/* Secondary glow — smaller, offset right, anchored in px near the top spotlight
   zone (NOT a % — the article can be very tall, so a % would drift it deep into
   the body) so it stays around the title / featured image. */
.lnew-blog-detail__glow--2 {
	top: 260px;
	right: -6%;
	width: 540px;
	height: 440px;
	max-width: 80vw;
	transform: translateY(var(--bd-gy2, 0px));
	background: var(--bd-glow-2);
}
/* Faint dot grid, masked to fade out below the masthead — the same texture the
   Hero / Blog backgrounds use. */
.lnew-blog-detail__dots {
	position: absolute;
	inset: 0;
	opacity: .6;
	background-image: radial-gradient(var(--bd-dot, rgba(20, 22, 40, .05)) 1px, transparent 1px);
	background-size: 24px 24px;
	-webkit-mask-image: radial-gradient(ellipse 85% 45% at 50% 6%, #000 0%, transparent 76%);
	        mask-image: radial-gradient(ellipse 85% 45% at 50% 6%, #000 0%, transparent 76%);
}

/* ===========================================================
   Layout
   =========================================================== */
.lnew-blog-detail__wrap {
	max-width: var(--bd-shell);
	margin: 0 auto;
	/* Top padding clears the site's fixed (floating) header so the back link /
	   title are never tucked underneath it. Matches the inner-page rhythm. */
	padding: clamp(7rem, 4rem + 4vw, 8.5rem) 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.
   =========================================================== */
.lnew-blog-detail__grid {
	display: grid;
	grid-template-columns: minmax(0, var(--bd-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(--bd-col-gap);
}
.lnew-blog-detail__lead { grid-area: head; min-width: 0; }
.lnew-blog-detail__main { grid-area: main; min-width: 0; }
.lnew-blog-detail__share { grid-area: share; }
.lnew-blog-detail__toc   { grid-area: toc; }

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

/* ===========================================================
   Back link — family glass pill
   =========================================================== */
.lnew-blog-detail__back {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin-bottom: clamp(1.25rem, 2.5vw, 2rem);
	padding: 8px 15px 8px 12px;
	border: 1px solid var(--bd-border);
	border-radius: var(--bd-radius-pill);
	background: var(--bd-pill-bg, rgba(255, 255, 255, .75));
	-webkit-backdrop-filter: blur(8px);
	        backdrop-filter: blur(8px);
	box-shadow: var(--bd-shadow-md);
	color: var(--bd-muted);
	font-size: var(--bd-fs-sm);
	font-weight: 600;
	text-decoration: none;
	will-change: transform;
	transition:
		color var(--bd-dur-fast) var(--bd-ease-out),
		border-color var(--bd-dur-fast) var(--bd-ease-out),
		box-shadow var(--bd-dur-fast) var(--bd-ease-out);
}
.lnew-blog-detail__back svg {
	width: 16px;
	height: 16px;
	transition: transform var(--bd-dur-fast) var(--bd-ease-out);
}
.lnew-blog-detail__back:hover {
	color: var(--bd-g1);
	border-color: color-mix(in srgb, var(--bd-g1) 42%, transparent);
	box-shadow: 0 10px 24px -14px color-mix(in srgb, var(--bd-g1) 55%, transparent);
}
.lnew-blog-detail__back:hover svg { transform: translateX(-2px); }

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

.lnew-blog-detail__cats {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin: 0 0 1rem;
}
.lnew-blog-detail .lnew-blog-detail__cat,
.lnew-blog-detail a.lnew-blog-detail__cat {
	display: inline-flex;
	align-items: center;
	padding: 5px 12px;
	font-size: var(--bd-fs-2xs);
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--bd-g1);
	background: var(--bd-accent-tint);
	border: 1px solid color-mix(in srgb, var(--bd-g1) 16%, transparent);
	border-radius: var(--bd-radius-pill);
	line-height: 1.3;
	text-decoration: none;
	transition:
		background-color var(--bd-dur-fast) var(--bd-ease-out),
		border-color var(--bd-dur-fast) var(--bd-ease-out);
}
.lnew-blog-detail a.lnew-blog-detail__cat:hover {
	background: color-mix(in srgb, var(--bd-g1) 18%, var(--bd-accent-tint));
	border-color: color-mix(in srgb, var(--bd-g1) 30%, transparent);
}

.lnew-blog-detail .lnew-blog-detail__title {
	font-family: var(--bd-font-head);
	font-size: var(--bd-fs-h2);
	font-weight: 500;
	letter-spacing: var(--bd-tracking-tight);
	line-height: var(--bd-lh-tight);
	margin: 0;
	color: var(--bd-heading);
	text-wrap: balance;
}

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

/* ===========================================================
   Featured / cover image — white glass family surface
   =========================================================== */
.lnew-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(--bd-radius-2xl);
	overflow: hidden;
	border: 1px solid var(--bd-border);
	background: var(--bd-surface);
	box-shadow: var(--bd-card-shadow);
}
.lnew-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.
   =========================================================== */
.lnew-blog-detail__content {
	color: var(--bd-body);
	font-size: var(--bd-fs-lg);
	line-height: var(--bd-lh-relaxed);
	min-width: 0;
	overflow-wrap: break-word;
	word-break: break-word;
}
.lnew-blog-detail__content > *:first-child { margin-top: 0; }
.lnew-blog-detail__content > *:last-child { margin-bottom: 0; }

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

/* Headings */
.lnew-blog-detail__content h1,
.lnew-blog-detail__content h2,
.lnew-blog-detail__content h3,
.lnew-blog-detail__content h4,
.lnew-blog-detail__content h5,
.lnew-blog-detail__content h6 {
	color: var(--bd-heading);
	font-family: var(--bd-font-head);
	font-weight: 600;
	line-height: var(--bd-lh-snug);
	letter-spacing: var(--bd-tracking-snug);
	margin: 2.5rem 0 1rem;
	/* Anchored headings (TOC links, incoming #hash) must land BELOW the pinned
	   header, not under it — same measured clearance the sticky rails use. */
	scroll-margin-top: calc(var(--bd-stick-top) + 8px);
}
.lnew-blog-detail__content h1 { font-size: var(--bd-fs-h2); }
.lnew-blog-detail__content h2 { font-size: var(--bd-fs-h3); }
.lnew-blog-detail__content h3 { font-size: var(--bd-fs-h4); }
.lnew-blog-detail__content h4 { font-size: var(--bd-fs-lg); }
.lnew-blog-detail__content h5,
.lnew-blog-detail__content h6 {
	font-size: var(--bd-fs-md);
	text-transform: uppercase;
	letter-spacing: var(--bd-tracking-wide);
	color: var(--bd-muted);
}

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

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

/* Links — animated underline */
.lnew-blog-detail__content a {
	color: var(--bd-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(--bd-dur-fast) var(--bd-ease-out);
	font-weight: 600;
	overflow-wrap: break-word;
}
.lnew-blog-detail__content a:hover { background-size: 100% 2px; }

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

/* Blockquote — brand keyline + Instrument-Serif quote glyph */
.lnew-blog-detail__content blockquote {
	position: relative;
	margin: 1.75rem 0;
	padding: 1.25rem 1.5rem 1.25rem 2.5rem;
	border-left: 3px solid var(--bd-accent);
	border-radius: 0 var(--bd-radius-md) var(--bd-radius-md) 0;
	background: var(--bd-accent-soft);
	color: var(--bd-heading);
	font-size: var(--bd-fs-lg);
	font-weight: 500;
}
.lnew-blog-detail__content blockquote::before {
	content: "\201C";
	position: absolute;
	top: 6px;
	left: 14px;
	font-size: 46px;
	line-height: 1;
	color: var(--bd-accent);
	opacity: .4;
	/* The reference set this decorative open-quote in Instrument Serif. Nothing
	   in this design system uses a serif, and pulling a whole webfont for one
	   glyph is not worth the request — it takes the family display face. */
	font-family: var(--bd-font-head);
}
.lnew-blog-detail__content blockquote p:last-child { margin-bottom: 0; }
.lnew-blog-detail__content blockquote cite {
	display: block;
	margin-top: .75rem;
	font-size: var(--bd-fs-sm);
	font-style: normal;
	font-weight: 600;
	color: var(--bd-muted);
}

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

/* Inline code */
.lnew-blog-detail__content code,
.lnew-blog-detail__content kbd {
	font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, monospace;
	font-size: .88em;
	padding: 2px 7px;
	background: var(--bd-accent-tint);
	color: var(--bd-accent-ink);
	border: 1px solid color-mix(in srgb, var(--bd-g1) 16%, transparent);
	border-radius: var(--bd-radius-xs);
	font-weight: 600;
}

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

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

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

/* Buttons (Gutenberg) — family gradient pill */
.lnew-blog-detail__content .wp-block-button__link,
.lnew-blog-detail__content .wp-element-button {
	display: inline-block;
	background: linear-gradient(100deg, var(--bd-g1) 0%, var(--bd-g3) 100%);
	color: var(--bd-accent-on);
	padding: 12px 26px;
	border-radius: var(--bd-radius-pill);
	font-weight: 700;
	text-decoration: none;
	background-size: auto;
	box-shadow: 0 12px 26px -14px color-mix(in srgb, var(--bd-g1) 62%, transparent);
}

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

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

/* Block alignments — gentle break-out within the article column. */
.lnew-blog-detail__content .aligncenter { margin-left: auto; margin-right: auto; }
.lnew-blog-detail__content .alignleft {
	float: left;
	margin: .5rem 1.5rem 1rem 0;
	max-width: 50%;
}
.lnew-blog-detail__content .alignright {
	float: right;
	margin: .5rem 0 1rem 1.5rem;
	max-width: 50%;
}
.lnew-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);
}
.lnew-blog-detail__content .alignfull {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

/* ===========================================================
   Tags
   =========================================================== */
.lnew-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(--bd-border);
}
.lnew-blog-detail__tags-label {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: var(--bd-fs-sm);
	font-weight: 700;
	color: var(--bd-muted);
	margin-right: .25rem;
}
.lnew-blog-detail__tags-label svg { width: 15px; height: 15px; }
.lnew-blog-detail .lnew-blog-detail__tag,
.lnew-blog-detail a.lnew-blog-detail__tag {
	display: inline-flex;
	align-items: center;
	padding: 5px 12px;
	font-size: var(--bd-fs-xs);
	font-weight: 600;
	color: var(--bd-muted);
	background: var(--bd-surface);
	border: 1px solid var(--bd-border);
	border-radius: var(--bd-radius-pill);
	text-decoration: none;
	transition:
		color var(--bd-dur-fast) var(--bd-ease-out),
		border-color var(--bd-dur-fast) var(--bd-ease-out),
		background-color var(--bd-dur-fast) var(--bd-ease-out);
}
.lnew-blog-detail a.lnew-blog-detail__tag:hover {
	color: var(--bd-g1);
	border-color: color-mix(in srgb, var(--bd-g1) 42%, transparent);
	background: var(--bd-accent-soft);
}

/* ===========================================================
   Author box — white glass family panel
   =========================================================== */
.lnew-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(--bd-author-bg);
	-webkit-backdrop-filter: var(--bd-blur);
	        backdrop-filter: var(--bd-blur);
	border: 1px solid var(--bd-border);
	border-radius: var(--bd-radius-2xl);
	box-shadow: var(--bd-card-shadow);
}
.lnew-blog-detail__author-avatar {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
	border: 2px solid var(--bd-card-bg);
	box-shadow: 0 6px 18px -10px color-mix(in srgb, var(--bd-g1) 50%, transparent);
}
.lnew-blog-detail__author-body { min-width: 0; }
.lnew-blog-detail__author-kicker {
	font-size: var(--bd-fs-2xs);
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--bd-g1);
	margin: 0 0 2px;
}
.lnew-blog-detail .lnew-blog-detail__author-name {
	font-size: var(--bd-fs-h4);
	font-weight: 700;
	color: var(--bd-heading);
	margin: 0;
	line-height: var(--bd-lh-snug);
}
.lnew-blog-detail .lnew-blog-detail__author-name a {
	color: inherit;
	text-decoration: none;
	transition: color var(--bd-dur-fast) var(--bd-ease-out);
}
.lnew-blog-detail .lnew-blog-detail__author-name a:hover { color: var(--bd-g1); }
.lnew-blog-detail .lnew-blog-detail__author-bio {
	margin: .5rem 0 0;
	font-size: var(--bd-fs-sm);
	line-height: var(--bd-lh-relaxed);
	color: var(--bd-muted);
}

/* ===========================================================
   Prev / next post navigation — white glass cards, hover lift
   =========================================================== */
.lnew-blog-detail__nav {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
	margin-top: clamp(2rem, 4vw, 3rem);
}
.lnew-blog-detail .lnew-blog-detail__nav-link,
.lnew-blog-detail a.lnew-blog-detail__nav-link {
	display: flex;
	flex-direction: column;
	gap: 5px;
	padding: 1.25rem;
	border: 1px solid var(--bd-border);
	border-radius: var(--bd-radius-lg);
	background: var(--bd-card-bg);
	-webkit-backdrop-filter: var(--bd-blur);
	        backdrop-filter: var(--bd-blur);
	text-decoration: none;
	box-shadow: var(--bd-card-shadow);
	transition:
		transform var(--bd-dur-base) var(--bd-ease-out),
		box-shadow var(--bd-dur-base) var(--bd-ease-out),
		border-color var(--bd-dur-base) var(--bd-ease-out);
}
.lnew-blog-detail a.lnew-blog-detail__nav-link:hover {
	transform: translateY(-4px);
	box-shadow: var(--bd-card-shadow-hover);
	border-color: color-mix(in srgb, var(--bd-g1) 26%, var(--bd-border));
}
.lnew-blog-detail__nav-link--next { text-align: right; align-items: flex-end; }
.lnew-blog-detail__nav-dir {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: var(--bd-fs-2xs);
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--bd-g1);
}
.lnew-blog-detail__nav-dir svg { width: 14px; height: 14px; }
.lnew-blog-detail__nav-title {
	font-size: var(--bd-fs-md);
	font-weight: 700;
	color: var(--bd-heading);
	line-height: var(--bd-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).
   =========================================================== */
.lnew-blog-detail__toc {
	position: sticky;
	top: var(--bd-stick-top);
	align-self: start;
	margin: 0;
	padding: clamp(1.1rem, 2.2vw, 1.4rem) clamp(1.1rem, 2vw, 1.4rem);
	background: var(--bd-panel-bg);
	-webkit-backdrop-filter: var(--bd-blur);
	        backdrop-filter: var(--bd-blur);
	border: 1px solid var(--bd-border);
	border-radius: var(--bd-radius-lg);
	box-shadow: var(--bd-card-shadow);
	max-height: calc(100vh - var(--bd-stick-top) - 1.5rem);
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
	scrollbar-color: var(--bd-border) transparent;
}
.lnew-blog-detail__toc::-webkit-scrollbar { width: 6px; }
.lnew-blog-detail__toc::-webkit-scrollbar-thumb {
	background: var(--bd-border);
	border-radius: 999px;
}

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

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

.lnew-blog-detail .lnew-blog-detail__toc-link,
.lnew-blog-detail a.lnew-blog-detail__toc-link {
	display: flex;
	gap: 8px;
	position: relative;
	padding: 5px 4px 5px 16px;
	border-left: 1.5px solid var(--bd-toc-line);
	color: var(--bd-muted);
	text-decoration: none;
	font-size: var(--bd-fs-sm);
	font-weight: 500;
	line-height: 1.45;
	transition:
		color var(--bd-dur-fast) var(--bd-ease-out),
		border-color var(--bd-dur-fast) var(--bd-ease-out);
}
.lnew-blog-detail .lnew-blog-detail__toc-link:hover {
	color: var(--bd-heading);
	border-left-color: color-mix(in srgb, var(--bd-g1) 38%, transparent);
}
/* Active section — brand text + a clean accent bar, no filled box. */
.lnew-blog-detail .lnew-blog-detail__toc-link.is-active {
	color: var(--bd-toc-active);
	font-weight: 700;
	border-left-color: transparent;
}
.lnew-blog-detail .lnew-blog-detail__toc-link.is-active::after {
	content: "";
	position: absolute;
	left: -1.5px;
	top: 3px;
	bottom: 3px;
	width: 2.5px;
	background: linear-gradient(180deg, var(--bd-g1), var(--bd-g3));
	border-radius: 2px;
}

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

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

/* ===========================================================
   Social share rail — sticky vertical icon column on the left
   =========================================================== */
.lnew-blog-detail__share {
	position: sticky;
	top: var(--bd-stick-top);
	align-self: start;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: .75rem;
}
.lnew-blog-detail__share-label {
	font-size: var(--bd-fs-2xs);
	font-weight: 800;
	letter-spacing: var(--bd-tracking-wide);
	text-transform: uppercase;
	color: var(--bd-subtle);
}
/* Visually-hidden live region — announces "Copied!" to screen readers. */
.lnew-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. */
.lnew-blog-detail__share-list {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	padding: 7px 5px;
	background: var(--bd-card-bg);
	-webkit-backdrop-filter: var(--bd-blur);
	        backdrop-filter: var(--bd-blur);
	border: 1px solid var(--bd-border);
	border-radius: var(--bd-radius-pill);
	box-shadow: var(--bd-card-shadow);
}
.lnew-blog-detail .lnew-blog-detail__share-btn,
.lnew-blog-detail a.lnew-blog-detail__share-btn,
.lnew-blog-detail button.lnew-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(--bd-muted);
	cursor: pointer;
	text-decoration: none;
	transition:
		color var(--bd-dur-fast) var(--bd-ease-out),
		background-color var(--bd-dur-fast) var(--bd-ease-out);
}
.lnew-blog-detail__share-icon { display: inline-flex; }
.lnew-blog-detail__share-btn svg { width: 18px; height: 18px; display: block; }
.lnew-blog-detail a.lnew-blog-detail__share-btn:hover,
.lnew-blog-detail button.lnew-blog-detail__share-btn:hover {
	color: var(--bd-g1);
	background: var(--bd-accent-tint);
}
.lnew-blog-detail .lnew-blog-detail__share-btn:focus-visible {
	outline: none;
	color: var(--bd-g1);
	box-shadow: var(--bd-ring);
}

/* Tooltip label that slides out to the right on hover/focus. */
.lnew-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(--bd-fs-2xs);
	font-weight: 700;
	color: var(--bd-on-ink, #fff);
	background: var(--bd-heading);
	border-radius: var(--bd-radius-sm);
	box-shadow: var(--bd-shadow-md);
	opacity: 0;
	pointer-events: none;
	transition:
		opacity var(--bd-dur-fast) var(--bd-ease-out),
		transform var(--bd-dur-fast) var(--bd-ease-out);
	z-index: 4;
}
.lnew-blog-detail__share-tip::before {
	content: "";
	position: absolute;
	right: 100%;
	top: 50%;
	transform: translateY(-50%);
	border: 5px solid transparent;
	border-right-color: var(--bd-heading);
}
.lnew-blog-detail__share-btn:hover .lnew-blog-detail__share-tip,
.lnew-blog-detail__share-btn:focus-visible .lnew-blog-detail__share-tip {
	opacity: 1;
	transform: translate(0, -50%);
}

/* Copy-link button — icon + tooltip swap once copied. */
.lnew-blog-detail__share-icon--check { display: none; }
.lnew-blog-detail__share-tip--copied { display: none; }
.lnew-blog-detail__share-btn--copy.is-copied .lnew-blog-detail__share-icon--link { display: none; }
.lnew-blog-detail__share-btn--copy.is-copied .lnew-blog-detail__share-icon--check { display: inline-flex; }
.lnew-blog-detail__share-btn--copy.is-copied {
	color: var(--bd-accent-blend);
	background: var(--bd-accent-tint);
}
.lnew-blog-detail__share-btn--copy.is-copied .lnew-blog-detail__share-tip:not(.lnew-blog-detail__share-tip--copied) { display: none; }
.lnew-blog-detail__share-btn--copy.is-copied .lnew-blog-detail__share-tip--copied {
	display: block;
	opacity: 1;
	transform: translate(0, -50%);
}

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

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

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

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

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

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

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

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

/* ----- Comment form ----- */
.lnew-blog-detail__comment-form,
.lnew-blog-detail #respond {
	margin-top: clamp(1.75rem, 4vw, 2.75rem);
	padding: clamp(1.25rem, 3vw, 2rem);
	background: var(--bd-panel-bg);
	-webkit-backdrop-filter: var(--bd-blur);
	        backdrop-filter: var(--bd-blur);
	border: 1px solid var(--bd-border);
	border-radius: var(--bd-radius-2xl);
	box-shadow: var(--bd-card-shadow);
}
/* When the reply form is moved beneath a comment it should read as a
   nested panel, not a full-width block. */
.lnew-blog-detail__comment-list #respond {
	margin-top: 1.25rem;
}
.lnew-blog-detail .comment-reply-title {
	margin: 0 0 1rem;
	font-size: var(--bd-fs-h4);
	font-weight: 700;
	color: var(--bd-heading);
	letter-spacing: var(--bd-tracking-snug);
}
.lnew-blog-detail .comment-reply-title small {
	margin-left: .5rem;
	font-size: var(--bd-fs-sm);
	font-weight: 600;
}
.lnew-blog-detail .comment-reply-title small a {
	color: var(--bd-g1);
	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. */
.lnew-blog-detail .comment-form {
	margin: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.25rem 1rem;
}
.lnew-blog-detail .comment-form > * {
	grid-column: 1 / -1;
	margin: 0;
	min-width: 0;
}
.lnew-blog-detail .comment-form-author { grid-column: 1; }
.lnew-blog-detail .comment-form-email  { grid-column: 2; }

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

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

/* Every field row stacks label-above-input via flex column. */
.lnew-blog-detail .comment-form-comment,
.lnew-blog-detail .comment-form-author,
.lnew-blog-detail .comment-form-email,
.lnew-blog-detail .comment-form-url {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.lnew-blog-detail .comment-form-comment > label,
.lnew-blog-detail .comment-form-author > label,
.lnew-blog-detail .comment-form-email > label,
.lnew-blog-detail .comment-form-url > label {
	font-size: var(--bd-fs-sm);
	font-weight: 700;
	color: var(--bd-heading);
	line-height: 1.4;
	letter-spacing: var(--bd-tracking-snug);
}
.lnew-blog-detail .comment-form .required {
	color: var(--bd-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. */
.lnew-blog-detail #author,
.lnew-blog-detail #email,
.lnew-blog-detail #url,
.lnew-blog-detail #comment,
.lnew-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(--bd-font) !important;
	font-size: var(--bd-fs-sm) !important;
	line-height: 1.4 !important;
	color: var(--bd-text);
	background: var(--bd-field-bg, #fff);
	border: 1px solid var(--bd-border);
	border-radius: var(--bd-radius-md);
	box-shadow: 0 1px 0 rgba(0, 0, 0, .02) inset;
	transition:
		border-color var(--bd-dur-fast) var(--bd-ease-out),
		box-shadow var(--bd-dur-fast) var(--bd-ease-out),
		background-color var(--bd-dur-fast) var(--bd-ease-out);
}
/* Fixed, compact height on the single-line text fields. */
.lnew-blog-detail #author,
.lnew-blog-detail #email,
.lnew-blog-detail #url {
	height: 46px !important;
	min-height: 46px !important;
}
.lnew-blog-detail .comment-form :is(input, textarea)::placeholder {
	color: var(--bd-subtle);
	opacity: 1;
}
.lnew-blog-detail .comment-form :is(input, textarea):hover {
	border-color: color-mix(in srgb, var(--bd-g1) 34%, transparent);
}
.lnew-blog-detail .comment-form :is(input, textarea):focus,
.lnew-blog-detail .comment-form :is(input, textarea):focus-visible {
	outline: none;
	border-color: var(--bd-g1);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--bd-g1) 18%, transparent);
}
.lnew-blog-detail .comment-form textarea,
.lnew-blog-detail #comment {
	min-height: 180px !important;
	resize: vertical;
}

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

/* The grid's row gap already separates submit from the row above. */
.lnew-blog-detail .form-submit { margin: 0; }
/* "Post comment" button — family primary: gradient pill + brand glow on hover
   (mirrors the Hero / Final CTA primary CTA). */
.lnew-blog-detail .comment-form .submit,
.lnew-blog-detail__comment-submit {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 14px 30px;
	background: linear-gradient(100deg, var(--bd-g1) 0%, var(--bd-g3) 100%);
	color: var(--bd-accent-on);
	border: 0;
	border-radius: var(--bd-radius-pill);
	text-decoration: none;
	font-family: var(--bd-font);
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: .01em;
	white-space: nowrap;
	cursor: pointer;
	box-shadow: 0 12px 26px -14px color-mix(in srgb, var(--bd-g1) 55%, transparent);
	transition:
		transform var(--bd-dur-fast) var(--bd-ease-out),
		box-shadow var(--bd-dur-fast) var(--bd-ease-out),
		filter var(--bd-dur-fast) var(--bd-ease-out);
}
.lnew-blog-detail .comment-form .submit:hover,
.lnew-blog-detail__comment-submit:hover {
	color: var(--bd-accent-on);
	transform: translateY(-1px);
	box-shadow: var(--bd-glow);
	filter: saturate(1.04);
}
.lnew-blog-detail .comment-form .submit:focus-visible,
.lnew-blog-detail__comment-submit:focus-visible {
	outline: none;
	box-shadow: var(--bd-glow), var(--bd-ring);
}

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

/* ===========================================================
   Empty state (no post resolved)
   =========================================================== */
.lnew-blog-detail__empty {
	max-width: 460px;
	margin: 0 auto;
	text-align: center;
	padding: clamp(2.5rem, 6vw, 4rem) 1.5rem;
	color: var(--bd-muted);
	font-size: var(--bd-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) {
	.lnew-blog-detail__grid,
	.lnew-blog-detail__grid--toc:not(.lnew-blog-detail__grid--share),
	.lnew-blog-detail__grid--share:not(.lnew-blog-detail__grid--toc),
	.lnew-blog-detail__grid--share.lnew-blog-detail__grid--toc {
		grid-template-columns: minmax(0, var(--bd-maxw));
		grid-template-areas:
			"head"
			"share"
			"toc"
			"main";
		justify-content: center;
	}

	/* TOC → full-width static panel */
	.lnew-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 */
	.lnew-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);
	}
	.lnew-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. */
	.lnew-blog-detail__share-tip { display: none !important; }
}

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

/* ===========================================================
   Motion — entrance / scroll reveal pre-hide
   The family GSAP pattern: animated blocks start hidden ONLY while JS has
   not yet claimed the article (`:not(.is-gsap)`). blog-detail.js adds .is-gsap
   the moment it runs (even when GSAP is absent), and the <noscript> failsafe +
   the reduced-motion block below also force the resting state — so the post is
   always visible, readable and indexable without JS.
   =========================================================== */
.lnew-blog-detail--reveal:not(.is-gsap) .lnew-blog-detail__animate {
	opacity: 0;
	transform: translateY(26px);
	will-change: opacity, transform;
}
/* The sticky rails fade in only — a lingering translate would fight
   position: sticky, so they never start with a vertical offset. */
.lnew-blog-detail--reveal:not(.is-gsap) .lnew-blog-detail__animate--fade {
	transform: none;
}

/* Reduced-motion users get no hover lift and no entrance reveal. */
@media (prefers-reduced-motion: reduce) {
	.lnew-blog-detail a.lnew-blog-detail__nav-link:hover,
	.lnew-blog-detail a.lnew-blog-detail__share-btn:hover,
	.lnew-blog-detail button.lnew-blog-detail__share-btn:hover { transform: none; }
	.lnew-blog-detail--reveal .lnew-blog-detail__animate {
		opacity: 1 !important;
		transform: none !important;
		visibility: visible !important;
	}
}