/* IntentNexus Companion — front-end polish for IntentNexus-published articles.
 *
 * All styles target the `is-toc`, `is-callout`, `is-faq`, `is-source-list`,
 * and `is-callout-product` class hooks that IntentNexus emits as `core/group`
 * wrappers. We use CSS variables (--in-accent, --in-accent-hover, etc.) that
 * style-loader.php injects per-page based on the user's settings + the
 * detected/configured accent color, so the polish ADAPTS to whatever brand
 * color the destination theme uses.
 *
 * Body classes (set by style-loader.php) switch behavior:
 *   .in-toc-inline         → TOC at top of article inline
 *   .in-toc-sticky-sidebar → TOC floats right, sticky on scroll (desktop)
 *   .in-toc-top-of-post    → TOC as compact horizontal strip at top
 *   .in-toc-off            → TOC hidden
 *   .in-callout-subtle     → tinted background, soft border
 *   .in-callout-branded    → full accent background
 *   .in-callout-accent-bar → left-border only
 *   .in-faq-card           → bordered + rounded
 *   .in-faq-minimal        → just dividers between items
 *   .in-faq-bordered       → outlined accordion
 */

/* ────────────── CSS variable defaults ──────────────
 * style-loader.php overrides --in-accent etc. per page. These are fallbacks
 * if the inline injection doesn't run for any reason. */
:root {
	--in-accent:               #6366F1;
	--in-accent-hover:         #4F46E5;
	--in-accent-tint:          rgba(99, 102, 241, 0.06);
	--in-accent-border-tint:   rgba(99, 102, 241, 0.18);
	--in-text-muted:           rgba(15, 23, 42, 0.65);
	--in-border:               rgba(15, 23, 42, 0.08);
	--in-radius:               14px;
}

/* ──────────────────────────────────────────────────────────────
 *  Table of contents — `.is-toc`
 * ──────────────────────────────────────────────────────────── */

.is-toc {
	margin: 2rem 0;
	padding: 1.25rem 1.5rem;
	border: 1px solid var(--in-border);
	border-radius: var(--in-radius);
	background: var(--in-accent-tint);
}

.is-toc h3,
.is-toc .wp-block-heading[id]:first-child {
	margin: 0 0 0.5rem;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--in-text-muted);
}

.is-toc ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}

.is-toc li {
	margin: 0;
	padding: 0;
}

.is-toc a {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px dotted transparent;
	transition: color 150ms ease, border-color 150ms ease;
}

.is-toc a:hover,
.is-toc a:focus {
	color: var(--in-accent);
	border-bottom-color: var(--in-accent);
}

/* ── TOC placement variants ─────────────────────────────── */

/* Sticky sidebar: floats right on desktop, falls back to inline on mobile */
@media (min-width: 1024px) {
	.in-toc-sticky-sidebar .is-toc {
		float: right;
		clear: right;
		width: 280px;
		margin: 0 0 1.5rem 2rem;
		position: sticky;
		top: 96px;
		max-height: calc(100vh - 120px);
		overflow-y: auto;
	}
}

/* Compact strip at top of post — horizontal list */
.in-toc-top-of-post .is-toc {
	margin: 0 0 2rem;
	padding: 0.875rem 1.25rem;
}
.in-toc-top-of-post .is-toc ul {
	flex-direction: row;
	flex-wrap: wrap;
	gap: 0.25rem 1rem;
}
.in-toc-top-of-post .is-toc ul::before {
	content: 'In this article:';
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--in-text-muted);
	margin-right: 0.5rem;
}
.in-toc-top-of-post .is-toc h3,
.in-toc-top-of-post .is-toc .wp-block-heading {
	display: none;
}

/* TOC off — hide entirely */
.in-toc-off .is-toc { display: none; }

/* ──────────────────────────────────────────────────────────────
 *  Callout — `.is-callout` (generic) + variants
 * ──────────────────────────────────────────────────────────── */

.is-callout {
	margin: 2rem 0;
	padding: 1.5rem 1.75rem;
	border-radius: var(--in-radius);
	background: var(--in-accent-tint);
	border: 1px solid var(--in-accent-border-tint);
}

.is-callout h3,
.is-callout .wp-block-heading {
	margin-top: 0;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--in-accent);
}

.is-callout a {
	color: var(--in-accent);
}

.is-callout a:hover {
	color: var(--in-accent-hover);
}

/* ── Callout style variants ─────────────────────────────── */

/* Subtle (default) — already styled above */

/* Branded — full accent background */
.in-callout-branded .is-callout {
	background: var(--in-accent);
	border-color: var(--in-accent);
	color: #fff;
}
.in-callout-branded .is-callout h3,
.in-callout-branded .is-callout .wp-block-heading,
.in-callout-branded .is-callout a {
	color: #fff;
}
.in-callout-branded .is-callout .wp-block-button__link {
	background: #fff;
	color: var(--in-accent);
}

/* Accent bar — left border only, no background */
.in-callout-accent-bar .is-callout {
	background: transparent;
	border: 0;
	border-left: 4px solid var(--in-accent);
	border-radius: 0;
	padding-left: 1.25rem;
}

/* ── Product callout — slightly more prominent than generic callouts ── */

.is-callout-product .wp-block-button__link {
	background: var(--in-accent);
	color: #fff;
	padding: 0.625rem 1.25rem;
	border-radius: 10px;
	font-weight: 700;
	text-decoration: none;
	transition: background 150ms ease;
}

.is-callout-product .wp-block-button__link:hover {
	background: var(--in-accent-hover);
}

/* ──────────────────────────────────────────────────────────────
 *  Source list — `.is-source-list`
 * ──────────────────────────────────────────────────────────── */

.is-source-list ol {
	padding-left: 1.5rem;
	margin: 0;
}

.is-source-list li {
	margin: 0.5rem 0;
	font-size: 0.9375rem;
	line-height: 1.6;
}

.is-source-list span[id^="source-"] {
	font-weight: 600;
}

/* Citation superscript in body text — links to source-N anchors */
sup.citation a {
	color: var(--in-accent);
	text-decoration: none;
	font-weight: 700;
	font-size: 0.7em;
	padding: 0 0.15em;
}

sup.citation a:hover {
	text-decoration: underline;
}

/* ──────────────────────────────────────────────────────────────
 *  FAQ accordion — `.is-faq`
 * ──────────────────────────────────────────────────────────── */

.is-faq {
	margin: 2.5rem 0;
}

.is-faq > h2,
.is-faq .wp-block-heading:first-child {
	margin-bottom: 1rem;
}

.is-faq .wp-block-details {
	margin: 0.5rem 0;
	padding: 0;
	border: 1px solid var(--in-border);
	border-radius: var(--in-radius);
	background: #fff;
	transition: border-color 150ms ease;
}

.is-faq .wp-block-details[open] {
	border-color: var(--in-accent-border-tint);
}

.is-faq .wp-block-details summary {
	padding: 1rem 1.25rem;
	font-weight: 600;
	cursor: pointer;
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
}

.is-faq .wp-block-details summary::-webkit-details-marker {
	display: none;
}

.is-faq .wp-block-details summary::after {
	content: '+';
	font-size: 1.25rem;
	font-weight: 400;
	color: var(--in-accent);
	transition: transform 200ms ease;
	flex-shrink: 0;
}

.is-faq .wp-block-details[open] summary::after {
	content: '−';
	transform: rotate(0deg);
}

.is-faq .wp-block-details > *:not(summary) {
	padding: 0 1.25rem 1rem;
	margin: 0;
}

/* ── FAQ style variants ─────────────────────────────────── */

/* Minimal — just dividers, no card chrome */
.in-faq-minimal .is-faq .wp-block-details {
	border: 0;
	border-bottom: 1px solid var(--in-border);
	border-radius: 0;
	background: transparent;
}
.in-faq-minimal .is-faq .wp-block-details:last-child {
	border-bottom: 0;
}

/* Bordered — outlined accordion, no inner background */
.in-faq-bordered .is-faq .wp-block-details {
	background: transparent;
}

/* ──────────────────────────────────────────────────────────────
 *  Reduced motion + dark mode awareness
 * ──────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
	.is-faq .wp-block-details summary::after { transition: none; }
	.is-toc a, .is-callout a { transition: none; }
}

@media (prefers-color-scheme: dark) {
	:root {
		--in-text-muted: rgba(255, 255, 255, 0.65);
		--in-border:     rgba(255, 255, 255, 0.12);
	}
	.is-faq .wp-block-details {
		background: rgba(255, 255, 255, 0.03);
	}
}