/**
 * The course table of contents, inside the lesson panel.
 *
 * Two levels: a lesson row, and — for lessons split into sections — a nested
 * list of pages. Only the lesson being read is expanded on arrival; the rest are
 * collapsed with the `hidden` attribute, which JS toggles.
 *
 * Everything about the READER is applied by assets/js/course-progress.js as an
 * `.is-done` class. The server ships this neutral so a lesson page stays
 * cacheable, which is the same contract the progress widgets use.
 *
 * @package digitalacademy
 */

.da-toc {
	--da-toc-ink: var(--wp--preset--color--dark);
	--da-toc-accent: var(--wp--preset--color--orange);

	font-size: var(--wp--preset--font-size--small);
}

.da-toc__lessons,
.da-toc__pages {
	margin: 0;
	padding: 0;
	list-style: none;
}

.da-toc__lesson + .da-toc__lesson {
	border-top: 1px solid color-mix(in srgb, var(--da-toc-ink) 15%, transparent);
}

/* -- Lesson row ------------------------------------------------------------ */
.da-toc__row {
	display: flex;
	align-items: center;
	gap: 0.15rem;
	padding-inline-end: var(--wp--preset--spacing--small);
}

.da-toc__lesson.is-current > .da-toc__row {
	background: color-mix(in srgb, var(--da-toc-accent) 14%, transparent);
}

.da-toc__disclosure {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	inline-size: 2rem;
	block-size: 2rem;
	padding: 0;
	border: 0;
	background: transparent;
	color: inherit;
	cursor: pointer;
}

/* Keeps lessons with no sections aligned with those that have them, rather than
   letting their titles jump left by the width of a control they don't need. */
.da-toc__disclosure.is-empty {
	cursor: default;
}

.da-toc__chevron {
	display: block;
	font-size: 1.1rem;
	line-height: 1;
	transition: rotate 0.15s ease;
}

.da-toc__disclosure[aria-expanded="true"] .da-toc__chevron {
	rotate: 90deg;
}

.da-toc__link {
	flex: 1 1 auto;
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
	min-inline-size: 0;
	padding-block: 0.55rem;
	color: inherit;
	text-decoration: none;
}

.da-toc__link:hover .da-toc__name,
.da-toc__link:focus-visible .da-toc__name {
	text-decoration: underline;
}

.da-toc__num {
	flex: 0 0 auto;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.7rem;
	font-weight: 700;
	opacity: 0.5;
}

.da-toc__name {
	min-inline-size: 0;
	line-height: 1.35;
}

.da-toc__lesson.is-current > .da-toc__row .da-toc__name {
	font-weight: 700;
}

/* -- Pages ----------------------------------------------------------------- */
.da-toc__pages {
	/* Aligned under the lesson title, past the disclosure control. */
	padding-inline-start: 2rem;
	padding-block-end: 0.35rem;
}

.da-toc__page {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	padding-inline-end: var(--wp--preset--spacing--small);
}

.da-toc__page-link {
	flex: 1 1 auto;
	min-inline-size: 0;
	padding-block: 0.4rem;
	color: inherit;
	text-decoration: none;
	line-height: 1.35;
	opacity: 0.85;
}

.da-toc__page-link:hover,
.da-toc__page-link:focus-visible {
	text-decoration: underline;
	opacity: 1;
}

/* The reader's own position. A marker rather than a colour alone, so it doesn't
   depend on hue to be findable. */
.da-toc__page.is-current .da-toc__page-link {
	font-weight: 700;
	opacity: 1;
}

.da-toc__page.is-current::before {
	content: "";
	position: absolute;
	inline-size: 3px;
	block-size: 1.1em;
	margin-inline-start: -0.9rem;
	border-radius: 2px;
	background: var(--da-toc-accent);
}

/* -- Completion ------------------------------------------------------------ */
/* Always in the DOM, revealed by .is-done — the class course-progress.js adds
   once it has read localStorage. Nothing here is server-rendered. */
.da-toc__tick {
	flex: 0 0 auto;
	display: none;
	color: var(--wp--preset--color--primary);
	font-weight: 700;
}

.da-toc__lesson.is-done > .da-toc__row .da-toc__tick,
.da-toc__page.is-done .da-toc__tick {
	display: block;
}

.da-toc__lesson.is-done > .da-toc__row .da-toc__name,
.da-toc__page.is-done .da-toc__page-link {
	opacity: 0.65;
}

.da-toc__disclosure:focus-visible,
.da-toc__link:focus-visible,
.da-toc__page-link:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: -2px;
}

@media (prefers-reduced-motion: reduce) {
	.da-toc__chevron {
		transition: none;
	}
}