/* Suparank SEO: featured-snippet lead, auto TOC, and per-post FAQ, all
   rendered inside the theme's .prose column. Typography/colors reuse the
   theme's tokens and its .faq__* classes; this file only adds the pieces
   the theme doesn't already style. */

.sprk-snippet {
	margin: 0 0 1.4em;
	padding: 16px 20px;
	border-left: 3px solid var(--brand);
	border-radius: 0 var(--radius) var(--radius) 0;
	background: var(--bg-soft);
	font-size: 17px;
	line-height: 1.6;
	color: var(--ink);
}

.sprk-toc {
	margin: 0 0 1.8em;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--bg-soft);
}

.sprk-toc summary {
	cursor: pointer;
	padding: 14px 20px;
	font-size: 14px;
	font-weight: 600;
	color: var(--ink);
	list-style: none;
}

.sprk-toc summary::-webkit-details-marker { display: none; }

.sprk-toc ul {
	margin: 0;
	padding: 0 20px 16px 36px;
	font-size: 14.5px;
	line-height: 1.7;
}

.sprk-toc ul ul { padding-left: 20px; font-size: 14px; }

.sprk-toc a {
	color: var(--text);
	text-decoration: none;
}

.sprk-toc a:hover { color: var(--brand-2); }

.sprk-post-faq { margin-top: 2.2em; }
.sprk-post-faq .faq__title { margin: 0 0 16px; font-size: 22px; }
.sprk-post-faq .faq__list { display: grid; gap: 12px; }

/* Footnote-style citations: inline superscript refs + the auto Sources list
   appended at the end of the content when at least one [cite] is used. */
.sprk-fn { font-size: 0.7em; line-height: 1; }
.sprk-fn a { color: var(--brand-2); text-decoration: none; }
.sprk-fn a:hover { text-decoration: underline; }

.sprk-sources {
	margin-top: 2.2em;
	padding-top: 1.4em;
	border-top: 1px solid var(--line);
}

.sprk-sources__title { margin: 0 0 12px; font-size: 22px; }

.sprk-sources__list {
	margin: 0;
	padding-left: 20px;
	font-size: 14.5px;
	line-height: 1.7;
}

.sprk-sources__list li { margin: 0 0 6px; }
.sprk-sources__list a { color: var(--brand-2); }

.sprk-fn-back { margin-left: 4px; text-decoration: none; }

/* Baked citations (includes/content-blocks.php suparank_bake_citations()):
   the .sprk-sources class sits directly on the <ol>, no wrapping div. */
ol.sprk-sources {
	margin: 2.2em 0 0;
	padding-top: 1.4em;
	padding-left: 20px;
	border-top: 1px solid var(--line);
	font-size: 14.5px;
	line-height: 1.7;
}

.sprk-sources li { margin: 0 0 6px; }
.sprk-sources a { color: var(--brand-2); }

/* Media kit: grouped "Listen + Copy for LLM" actions (shadcn-style segmented control) */
.sprk-actions {
	display: inline-flex;
	margin: 18px 0 0;
	border: 1px solid var(--line, #e5e5e5);
	border-radius: 9px;
	background: #fff;
	box-shadow: 0 1px 2px rgba(15, 15, 25, 0.05);
	overflow: hidden;
	vertical-align: middle;
}
.sprk-actions__btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 15px;
	background: none;
	border: 0;
	font: 500 13px/1 var(--font, "Geist", system-ui, sans-serif);
	color: var(--ink, #0b0b0f);
	cursor: pointer;
	white-space: nowrap;
	transition: background 0.15s ease;
}
.sprk-actions__btn + .sprk-actions__btn { border-left: 1px solid var(--line, #e5e5e5); }
.sprk-actions__btn:hover { background: var(--bg-soft, #f7f7f8); }
.sprk-actions__btn:active { background: #f0f0f2; }
.sprk-actions__btn.is-playing { color: var(--brand-2, #681C64); }
.sprk-actions__ico { flex: none; color: var(--brand-2, #681C64); }
.sprk-actions__meta { margin-left: 1px; color: var(--muted, #8a8a93); font-variant-numeric: tabular-nums; }

.sprk-slides { margin: 34px 0; }
.sprk-slides__label {
	font-family: var(--mono, "Geist Mono", monospace);
	font-size: 0.72rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--brand-2, #681C64);
	margin: 0 0 10px;
}
.sprk-slides__track {
	display: flex;
	gap: 12px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	padding-bottom: 8px;
}
.sprk-slide {
	flex: 0 0 auto;
	width: min(84%, 420px);
	scroll-snap-align: start;
	border: 1px solid var(--line, #ececec);
	border-radius: 12px;
}
.sprk-slides__pdf { display: inline-block; margin-top: 10px; font-size: 0.9rem; }

.sprk-video { margin: 28px 0; }
.sprk-video__frame { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; border: 1px solid var(--line, #ececec); }
.sprk-video__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; }
.sprk-video__player { width: 100%; border-radius: 12px; border: 1px solid var(--line, #ececec); display: block; }

/* Copyable section anchors on article headings (hover-revealed) */
.prose h2 .sprk-hanchor, .prose h3 .sprk-hanchor {
	margin-left: 10px;
	color: var(--muted, #b8b8bf);
	text-decoration: none;
	font-weight: 400;
	opacity: 0;
	transition: opacity 0.15s ease, color 0.15s ease;
}
.prose h2:hover .sprk-hanchor, .prose h3:hover .sprk-hanchor { opacity: 1; }
.prose .sprk-hanchor:hover { color: var(--brand, #C86CC2); }
.prose .sprk-hanchor.is-copied { opacity: 1; color: var(--brand-2, #681C64); }