/**
 * FTP Chapter Navigator — matches original HTML .chapters component.
 * Uses CSS variables set via wp_add_inline_style from plugin settings.
 */

:root {
	--ftp-cn-ink: #000000;
	--ftp-cn-pit: #050506;
	--ftp-cn-steel: #191a1e;
	--ftp-cn-ash: #8f8f96;
	--ftp-cn-smoke: #c4c4ca;
	--ftp-cn-crimson: #aa1519;
	--ftp-cn-ember: #e11c22;
	--ftp-cn-ease: cubic-bezier(0.16, 0.84, 0.28, 1);
}

html.ftp-cn-smooth-scroll {
	scroll-behavior: smooth;
}

.chapters.ftp-cn-chapters {
	position: fixed;
	left: var(--ftp-cn-left, 34px);
	top: 50%;
	transform: translateY(-50%);
	z-index: var(--ftp-cn-z, 70);
	display: none;
	flex-direction: column;
	gap: 0;
	padding-left: 20px;
	margin: 0;
}

.chapters.ftp-cn-chapters .spine {
	position: absolute;
	left: 0;
	top: 6px;
	bottom: 6px;
	width: 2px;
	background: var(--ftp-cn-steel);
	border-radius: 2px;
	overflow: hidden;
}

.chapters.ftp-cn-chapters .spine i,
.chapters.ftp-cn-chapters #spineFill {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 0%;
	background: linear-gradient(180deg, var(--ftp-cn-crimson), var(--ftp-cn-ember));
	box-shadow: 0 0 8px rgba(225, 28, 34, 0.6);
	transition: height 0.35s var(--ftp-cn-ease);
	border-radius: 2px;
}

.chapters.ftp-cn-chapters a {
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 9px 0;
	color: var(--ftp-cn-ash);
	font-family: "Space Mono", monospace;
	font-size: 0.68rem;
	letter-spacing: 0.08em;
	text-decoration: none;
}

.chapters.ftp-cn-chapters a .dot {
	position: absolute;
	left: -24px;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--ftp-cn-steel);
	border: 2px solid var(--ftp-cn-pit);
	transition: background 0.3s, box-shadow 0.3s, transform 0.3s;
}

.chapters.ftp-cn-chapters a .ct {
	opacity: 0;
	transform: translateX(-6px);
	transition: opacity 0.3s, transform 0.3s, color 0.3s;
	text-transform: uppercase;
	white-space: nowrap;
}

.chapters.ftp-cn-chapters a:hover .ct {
	opacity: 1;
	transform: none;
	color: var(--ftp-cn-smoke);
}

.chapters.ftp-cn-chapters a.active .dot {
	background: var(--ftp-cn-ember);
	box-shadow: 0 0 12px 2px rgba(225, 28, 34, 0.7);
	transform: scale(1.15);
}

.chapters.ftp-cn-chapters a.active .ct {
	opacity: 1;
	transform: none;
	color: #fff;
}

.chapters.ftp-cn-chapters a:focus-visible {
	outline: 2px solid var(--ftp-cn-ember);
	outline-offset: 3px;
}

/* Desktop visibility breakpoint is injected from plugin settings (default 1240px). */

@media (prefers-reduced-motion: reduce) {
	.chapters.ftp-cn-chapters .spine i,
	.chapters.ftp-cn-chapters #spineFill,
	.chapters.ftp-cn-chapters a .dot,
	.chapters.ftp-cn-chapters a .ct {
		transition: none !important;
	}

	html.ftp-cn-smooth-scroll {
		scroll-behavior: auto !important;
	}
}