.blg-qa{--qa-accent:var(--accent, #e8431f);--qa-accent-ink:var(--accent-ink, #a82e12);--qa-soft:var(--accent-soft, #ffe7df);--qa-surface:var(--surface, #ffffff);--qa-ink:var(--ink, #1c140f);--qa-line:var(--line, #e7d9cc);--qa-bg:color-mix(in srgb, var(--qa-soft) 48%, var(--qa-surface));margin:1.7em 0;padding:1.15em 1.3em 1.2em;border:1px solid var(--qa-line);border-left:4px solid var(--qa-accent);border-radius:var(--radius,14px);background:var(--qa-bg)}.blg-qa.is-blue{--qa-accent:#2563eb;--qa-accent-ink:#1d4ed8;--qa-soft:#dbeafe}.blg-qa.is-slate{--qa-accent:#334155;--qa-accent-ink:#0f172a;--qa-soft:#e2e8f0}.blg-qa.is-emerald{--qa-accent:#059669;--qa-accent-ink:#065f46;--qa-soft:#d1fae5}.blg-qa.is-violet{--qa-accent:#7c3aed;--qa-accent-ink:#6d28d9;--qa-soft:#ede9fe}[data-theme="dark"] .blg-qa[class*="is-"]{--qa-soft:color-mix(in srgb, var(--qa-accent) 22%, #0f1013);--qa-accent-ink:color-mix(in srgb, var(--qa-accent) 48%, #ffffff)}@media (prefers-color-scheme:dark){:root[data-theme="auto"] .blg-qa[class*="is-"]{--qa-soft:color-mix(in srgb, var(--qa-accent) 22%, #0f1013);--qa-accent-ink:color-mix(in srgb, var(--qa-accent) 48%, #ffffff)}}.blg-qa__head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}.blg-qa__eyebrow{display:flex;align-items:center;gap:7px;margin:0 0 .55em;font-family:var(--font-ui,system-ui,sans-serif);font-size:.95rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--qa-accent-ink)}.blg-qa__copy{display:none;align-items:center;gap:5px;flex-shrink:0;margin:-6px -8px 0 0;padding:10px 12px;min-width:44px;min-height:44px;display:grid;place-items:center;border:1px solid #fff0;border-radius:8px;background:#fff0;color:var(--qa-accent-ink);font-family:var(--font-ui,system-ui,sans-serif);font-size:.8rem;font-weight:600;line-height:1;cursor:pointer;transition:background .15s ease,border-color .15s ease,color .15s ease}.blg-qa--js .blg-qa__copy{display:inline-flex}.blg-qa__copy svg{width:14px;height:14px;stroke:currentColor;fill:none}.blg-qa__copy:hover{background:color-mix(in srgb,var(--qa-soft) 70%,var(--qa-surface));border-color:color-mix(in srgb,var(--qa-accent) 30%,var(--qa-line))}.blg-qa__copy:focus-visible{outline:2px solid var(--qa-accent);outline-offset:2px}.blg-qa__copy.is-copied{color:var(--qa-accent)}.blg-qa__copied:empty{display:none}.blg-qa__eyebrow svg{width:16px;height:16px;flex:0 0 16px;stroke:currentColor;fill:none}.blg-qa__dot{width:9px;height:9px;flex:0 0 9px;border-radius:50%;background:var(--qa-accent)}.blg-qa__q{margin:0 0 .55em;font-family:var(--font-display,var(--font-ui,system-ui,sans-serif));font-weight:700;font-size:clamp(1.18rem, 1rem + 0.8vw, 1.55rem);line-height:1.28;letter-spacing:-.01em;color:var(--qa-ink)}".blg-qa__body {
	color: var(--qa-ink);
	font-family: var(--font-body, inherit);
	font-size: clamp(1rem, 0.95rem + 0.25vw, 1.12rem);
	line-height: 1.68;
}

.blg-qa__body > :first-child { margin-top: 0; }
.blg-qa__body > :last-child { margin-bottom: 0; }
.blg-qa__body p { margin: 0 0 .7em; line-height: 1.62; }

/* Lists — markers set explicitly so bullets/numbers always render,
   regardless of any theme or editor reset that strips list-style. */
.blg-qa__body ul,
.blg-qa__body ol {
	margin: .7em 0;
	padding-left: 1.45em;
}
.blg-qa__body ul { list-style: disc outside; }
.blg-qa__body ul ul { list-style: circle outside; }
.blg-qa__body ul ul ul { list-style: square outside; }
.blg-qa__body ol { list-style: decimal outside; }
.blg-qa__body ol ol { list-style: lower-alpha outside; }
.blg-qa__body li {
	margin: .3em 0;
	padding-left: .15em;
	line-height: 1.55;
}
.blg-qa__body li::marker { color: var(--qa-accent); }
.blg-qa__body li > ul,
.blg-qa__body li > ol { margin: .3em 0; }

/* Headings, links, quotes and inline code that may arrive on paste,
   so pasted content always reads as a polished block, never raw text. */
.blg-qa__body h2,
.blg-qa__body h3,
.blg-qa__body h4 {
	font-family: var(--font-display, var(--font-ui, system-ui, sans-serif));
	font-weight: 700;
	line-height: 1.25;
	margin: 1em 0 .4em;
	color: var(--qa-ink);
}
.blg-qa__body h2 { font-size: clamp(1.08rem, 1rem + 0.35vw, 1.22rem); }
.blg-qa__body h3 { font-size: clamp(1.02rem, 0.96rem + 0.3vw, 1.12rem); }
.blg-qa__body h4 { font-size: 1.02rem; }

.blg-qa__body strong { font-weight: 700; }
.blg-qa__body a {
	color: var(--qa-accent-ink);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.blg-qa__body blockquote {
	margin: .8em 0;
	padding: .15em 0 .15em 1em;
	border-left: 3px solid var(--qa-accent);
	font-style: italic;
}

.blg-qa__body code {
	font-size: .92em;
	padding: .1em .35em;
	border-radius: 5px;
	background: color-mix(in srgb, var(--qa-soft) 55%, var(--qa-surface));
}

/* ---- Modern table ----
   Editorial styling, with the core table figure doubling as a horizontal-scroll
   container that reveals soft edge shadows only while there's more to scroll. */
.blg-qa__body .wp-block-table {
	margin: .8em 0;
	border: 1px solid var(--qa-line);
	border-radius: 10px;
	overflow-x: auto;
	background:
		linear-gradient(to right, var(--qa-bg), rgba(0, 0, 0, 0)) left center,
		linear-gradient(to left, var(--qa-bg), rgba(0, 0, 0, 0)) right center,
		radial-gradient(farthest-side at left, rgba(0, 0, 0, .14), rgba(0, 0, 0, 0)) left center,
		radial-gradient(farthest-side at right, rgba(0, 0, 0, .14), rgba(0, 0, 0, 0)) right center;
	background-repeat: no-repeat;
	background-size: 42px 100%, 42px 100%, 15px 100%, 15px 100%;
	background-attachment: local, local, scroll, scroll;
}

.blg-qa__body table {
	width: 100%;
	border-collapse: collapse;
	font-size: 1rem;
}

.blg-qa__body th,
.blg-qa__body td {
	padding: .6em .85em;
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid var(--qa-line);
}

.blg-qa__body thead th {
	background: color-mix(in srgb, var(--qa-soft) 60%, var(--qa-surface));
	font-family: var(--font-ui, system-ui, sans-serif);
	font-weight: 700;
	color: var(--qa-accent-ink);
	border-bottom: 2px solid color-mix(in srgb, var(--qa-accent) 40%, var(--qa-line));
}

.blg-qa__body tbody tr:nth-child(even) { background: color-mix(in srgb, var(--qa-soft) 28%, transparent); }
.blg-qa__body tbody tr:last-child td { border-bottom: none; }
.blg-qa__body tbody td:first-child { font-weight: 600; }

/* Stack-on-mobile (opt-in): each row becomes a card, column labels sit beside each value.
   The DOM stays a real <table>, so extraction and crawling are unaffected. */
@media (max-width: 600px) {
	.blg-qa--stack .blg-qa__body .wp-block-table {
		overflow-x: visible;
		background: none;
		border: none;
		border-radius: 0;
	}
	.blg-qa--stack .blg-qa__body table,
	.blg-qa--stack .blg-qa__body tbody,
	.blg-qa--stack .blg-qa__body tr,
	.blg-qa--stack .blg-qa__body td { display: block; width: 100%; }
	.blg-qa--stack .blg-qa__body thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
	.blg-qa--stack .blg-qa__body tr {
		margin: 0 0 .65em;
		border: 1px solid var(--qa-line);
		border-radius: 9px;
		overflow: hidden;
		background: var(--qa-surface);
	}
	.blg-qa--stack .blg-qa__body tbody tr:nth-child(even) { background: var(--qa-surface); }
	.blg-qa--stack .blg-qa__body td {
		display: flex;
		gap: .8em;
		padding: .5em .8em;
		border-bottom: 1px solid var(--qa-line);
	}
	.blg-qa--stack .blg-qa__body tr td:last-child { border-bottom: none; }
	.blg-qa--stack .blg-qa__body td::before {
		content: attr(data-label);
		flex: 0 0 38%;
		font-family: var(--font-ui, system-ui, sans-serif);
		font-weight: 700;
		color: var(--qa-accent-ink);
	}
	.blg-qa--stack .blg-qa__body td:empty { display: none; }
}

/* "Step by step" reads better with a touch more room between numbered items. */
.blg-qa--steps .blg-qa__body ol li { margin: .4em 0; }

/* Snippet — the concise one-line answer, lifted above the fuller body. */
.blg-qa__snippet {
	margin: 0 0 .6em;
	font-size: 1.08rem;
	line-height: 1.5;
	font-weight: 500;
	color: var(--qa-ink);
}

/* Key takeaway / quick rule. */
.blg-qa__takeaway {
	margin: .9em 0 0;
	padding-top: .8em;
	border-top: 1px solid color-mix(in srgb, var(--qa-accent) 22%, var(--qa-line));
	font-size: 1.02rem;
	line-height: 1.55;
}
.blg-qa__takeaway strong { color: var(--qa-accent-ink); }

/* Collapsible "more detail" — native, no JS. The main answer stays visible above it. */
.blg-qa__detail { margin: .85em 0 0; }
.blg-qa__detail > summary {
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	list-style: none;
	font-family: var(--font-ui, system-ui, sans-serif);
	font-size: .95rem;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--qa-accent-ink);
}
.blg-qa__detail > summary::-webkit-details-marker { display: none; }
.blg-qa__detail > summary::before { content: "+"; font-weight: 700; font-size: 1.1em; line-height: 1; }
.blg-qa__detail[open] > summary::before { content: "\2013"; }
.blg-qa__detail-body { margin-top: .6em; font-size: 1.02rem; line-height: 1.65; }
.blg-qa__detail-body > :first-child { margin-top: 0; }
.blg-qa__detail-body > :last-child { margin-bottom: 0; }
.blg-qa__detail-body p { margin: 0 0 .5em; }

/* Optional internal link — subtle, not a CTA. */
.blg-qa__more {
	margin: .9em 0 0;
	font-family: var(--font-ui, system-ui, sans-serif);
	font-size: 1rem;
}
.blg-qa__more a {
	color: var(--qa-accent-ink);
	font-weight: 600;
	text-decoration: none;
}
.blg-qa__more a::after { content: " \2192"; }
.blg-qa__more a:hover { text-decoration: underline; }

/* Spacing density. */
.blg-qa--compact { padding: .85em 1em; }
.blg-qa--compact .blg-qa__q { font-size: 1.12rem; margin-bottom: .4em; }
.blg-qa--roomy { padding: 1.5em 1.7em; }

.blg-qa__updated {
	margin: .85em 0 0;
	font-family: var(--font-ui, system-ui, sans-serif);
	font-size: .82rem;
	color: var(--faint, #7a6c5e);
}

@media (max-width: 600px) {
	.blg-qa { padding: 1em 1.05em; }
	.blg-qa__q { font-size: 1.12rem; }
}

/* Definition variant */
.blg-qa--definition { border-left-color: var(--qa-accent); }
.blg-qa__term {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0 0 .45em;
}
.blg-qa__word {
	font-family: var(--font-display, var(--font-ui, system-ui, sans-serif));
	font-weight: 800;
	font-size: 1.55rem;
	letter-spacing: -.015em;
	color: var(--qa-ink);
}
.blg-qa__pos {
	font-family: var(--font-ui, system-ui, sans-serif);
	font-style: italic;
	font-size: .95rem;
	font-weight: 600;
	color: var(--qa-accent-ink);
	background: color-mix(in srgb, var(--qa-soft) 80%, transparent);
	border-radius: 99px;
	padding: 2px 10px;
}
.blg-qa__pho {
	font-family: var(--font-ui, system-ui, sans-serif);
	font-size: .9rem;
	color: color-mix(in srgb, var(--qa-ink) 55%, transparent);
}

/* ── Ad & foreign-element isolation ──
   No ad unit, injection plugin output, or third-party element
   should ever render inside the Quick Answer box. */
.blg-qa .blg-ad,
.blg-qa ins.adsbygoogle,
.blg-qa [id*="google_ads"],
.blg-qa [class*="ad-inserter"],
.blg-qa [class*="adinserter"],
.blg-qa [class*="advanced-ads"],
.blg-qa [data-ad],
.blg-qa iframe[src*="doubleclick"],
.blg-qa iframe[src*="googlesyndication"] { display: none !important; }

/* ── Focus-visible ── */
.blg-qa__copy:focus-visible { outline: 2px solid var(--accent, currentColor); outline-offset: 2px; border-radius: 6px; }
.blg-qa__detail > summary:focus-visible { outline: 2px solid var(--accent, currentColor); outline-offset: 2px; border-radius: 4px; }

/* ── Dark mode ── */
/* dark tokens: explicit theme attribute + OS preference, declared separately (a selector and an at-rule cannot share a comma) */
[data-theme="dark"] .blg-qa { --qa-bg: #1e1c18; --qa-ink: #f0ece4; --qa-border: #3a3530; --qa-accent: var(--accent, #e8431f); --qa-code-bg: #2a2620; --qa-eyebrow: #c8bfaf; }
@media (prefers-color-scheme: dark) {
  .blg-qa { --qa-bg: #1e1c18; --qa-ink: #f0ece4; --qa-border: #3a3530; --qa-accent: var(--accent, #e8431f); --qa-code-bg: #2a2620; --qa-eyebrow: #c8bfaf; }
}
[data-theme="dark"] .blg-qa.is-blue { --qa-bg: #161c24; --qa-border: #243040; }
[data-theme="dark"] .blg-qa.is-slate { --qa-bg: #1a1a1e; --qa-border: #2e2e34; }
[data-theme="dark"] .blg-qa.is-emerald { --qa-bg: #141e1a; --qa-border: #1e3830; }
[data-theme="dark"] .blg-qa.is-violet { --qa-bg: #1c161e; --qa-border: #30243a; }
[data-theme="dark"] .blg-qa__body code { background: var(--qa-code-bg, #2a2620); }
[data-theme="dark"] .blg-qa__eyebrow { color: var(--qa-eyebrow, #c8bfaf); }
[data-theme="dark"] .blg-qa__copy { color: var(--qa-eyebrow, #c8bfaf); }
[data-theme="dark"] .blg-qa__copy:hover { color: var(--qa-accent, #e8431f); }
[data-theme="dark"] .blg-qa__updated { color: var(--qa-eyebrow, #c8bfaf); }
[data-theme="dark"] .blg-qa__detail > summary { color: var(--qa-accent, #e8431f); }

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .blg-qa, .blg-qa * { transition: none !important; animation: none !important; }
}

/* ── Print ── */
@media print {
  .blg-qa__copy, .blg-qa__detail > summary::before { display: none; }
  .blg-qa { break-inside: avoid; border-color: #999; }
}

/* ── Mobile readability floor ──
   Guarantee comfortable reading sizes on phones; never shrink the
   answer body or expandable detail below ~16px. */
@media (max-width: 600px) {
  .blg-qa__body { font-size: 1.04rem; line-height: 1.66; }
  .blg-qa__body li { font-size: 1rem; }
  .blg-qa__detail-body { font-size: 1.02rem; }
  .blg-qa__body table { font-size: .98rem; }
  .blg-qa__more { font-size: 1.02rem; }
  .blg-qa__q { font-size: clamp(1.16rem, 1rem + 2vw, 1.4rem); }
}

/* ── Per-block color mode override (System / Light / Dark) ──
   data-qa-mode="dark"  → always dark, regardless of OS or site theme
   data-qa-mode="light" → always light, regardless of OS or site theme
   data-qa-mode="system" (default) → follows existing prefers-color-scheme + [data-theme] rules above */
.blg-qa[data-qa-mode="dark"] {
  --qa-bg: #1e1c18; --qa-ink: #f0ece4; --qa-border: #3a3530;
  --qa-accent: var(--accent, #e8431f); --qa-code-bg: #2a2620; --qa-eyebrow: #c8bfaf;
}
.blg-qa[data-qa-mode="dark"].is-blue    { --qa-bg: #161c24; --qa-border: #243040; }
.blg-qa[data-qa-mode="dark"].is-slate   { --qa-bg: #1a1a1e; --qa-border: #2e2e34; }
.blg-qa[data-qa-mode="dark"].is-emerald { --qa-bg: #141e1a; --qa-border: #1e3830; }
.blg-qa[data-qa-mode="dark"].is-violet  { --qa-bg: #1c161e; --qa-border: #30243a; }
.blg-qa[data-qa-mode="dark"] .blg-qa__body code { background: #2a2620; }
.blg-qa[data-qa-mode="dark"] .blg-qa__eyebrow,
.blg-qa[data-qa-mode="dark"] .blg-qa__copy,
.blg-qa[data-qa-mode="dark"] .blg-qa__updated { color: #c8bfaf; }

.blg-qa[data-qa-mode="light"] {
  --qa-bg: #ffffff; --qa-ink: #15130f; --qa-border: #e7e2d8;
  --qa-accent: var(--accent, #e8431f); --qa-code-bg: #f2efe9; --qa-eyebrow: #8a7d6a;
}
/* a forced-light box must resist the OS-dark and site-dark rules */
@media (prefers-color-scheme: dark) {
  .blg-qa[data-qa-mode="light"] { --qa-bg: #ffffff; --qa-ink: #15130f; --qa-border: #e7e2d8; --qa-code-bg: #f2efe9; --qa-eyebrow: #8a7d6a; }
}
[data-theme="dark"] .blg-qa[data-qa-mode="light"]{--qa-bg:#ffffff;--qa-ink:#15130f;--qa-border:#e7e2d8;--qa-code-bg:#f2efe9;--qa-eyebrow:#8a7d6a}