/* =========================================================================
   Ollie Course — Curriculum accordion (Curriculum tab of a course page).

   Pairs with ollie_curriculum_render() in inc/ollie-curriculum.php.
   Palette is inherited from m2-single-course.css (--ollie-accent / ink / muted
   / line / soft are declared on .ollie-course, which wraps this markup) so the
   accordion is the same object as the rest of the page, with two badge colours
   added here. Everything is scoped under .ollie-cur-list.
   ========================================================================= */

.ollie-cur-list {
	/* Fallbacks repeat the values from m2-single-course.css so the accordion
	   still looks right if it is ever rendered outside .ollie-course. */
	--ollie-cur-ink: var(--ollie-ink, #182748);
	--ollie-cur-muted: var(--ollie-muted, #6f7484);
	--ollie-cur-line: var(--ollie-line, #e5e8f0);
	--ollie-cur-soft: var(--ollie-soft, #f5f7fb);
	--ollie-cur-accent: var(--ollie-accent, #23bdb8);

	/* Two badge tones. The reference uses pink for the length and mint for the
	   question count; the mint here is the Ollie teal at 8% rather than the
	   demo's own green, so the badges belong to this site's palette. */
	--ollie-cur-time-bg: #fdeef2;
	--ollie-cur-time-ink: #d1567f;
	--ollie-cur-quiz-bg: #e4f6f5;
	--ollie-cur-quiz-ink: #14807c;

	margin: 0 0 24px;
}

/* --- Module --------------------------------------------------------------- */

.ollie-cur-list__module {
	margin-bottom: 16px;
	background: #fff;
	border: 1px solid var(--ollie-cur-line);
	border-radius: 12px;
	overflow: hidden;
}

.ollie-cur-list__head {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 18px 22px;
	cursor: pointer;
	list-style: none;
	background: var(--ollie-cur-soft);
}

/* Safari/Chrome draw their own triangle on <summary>; this page has its own
   chevron, so both vendor markers are removed. */
.ollie-cur-list__head::-webkit-details-marker {
	display: none;
}

.ollie-cur-list__head::marker {
	content: '';
}

.ollie-cur-list__head:focus-visible {
	outline: 2px solid var(--ollie-cur-accent);
	outline-offset: -2px;
}

.ollie-cur-list__head-text {
	flex: 1 1 auto;
	min-width: 0;
}

.ollie-cur-list__title {
	display: block;
	color: var(--ollie-cur-ink);
	font-size: 18px;
	font-weight: 600;
	line-height: 1.35;
}

.ollie-cur-list__desc {
	display: block;
	margin-top: 4px;
	color: var(--ollie-cur-muted);
	font-size: 14px;
	line-height: 1.5;
}

.ollie-cur-list__count {
	flex: 0 0 auto;
	color: var(--ollie-cur-muted);
	font-size: 14px;
	white-space: nowrap;
}

.ollie-cur-list__chev {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	background: #fff;
	border: 1px solid var(--ollie-cur-line);
	border-radius: 50%;
	color: var(--ollie-cur-muted);
	transition: transform 0.2s ease;
}

/* Chevron points down when closed, up when open — the state is readable at a
   glance without reading the lesson list. */
.ollie-cur-list__module[open] .ollie-cur-list__chev {
	transform: rotate(180deg);
}

/* --- Lessons -------------------------------------------------------------- */

.ollie-cur-list__lessons {
	margin: 0;
	padding: 0 22px;
	list-style: none;
}

.ollie-cur-list__lesson {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 0;
	border-bottom: 1px solid var(--ollie-cur-line);
	list-style: none;
}

.ollie-cur-list__lesson:last-child {
	border-bottom: 0;
}

.ollie-cur-list__icon {
	display: inline-flex;
	flex: 0 0 auto;
	color: var(--ollie-cur-muted);
}

.ollie-cur-list__lesson--quiz .ollie-cur-list__icon {
	color: var(--ollie-cur-accent);
}

.ollie-cur-list__lesson-title {
	flex: 1 1 auto;
	min-width: 0;
	color: var(--ollie-cur-ink);
	font-size: 16px;
	line-height: 1.45;
}

.ollie-cur-list__meta {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 10px;
}

.ollie-cur-list__badge {
	display: inline-block;
	padding: 5px 12px;
	border-radius: 6px;
	font-size: 14px;
	line-height: 1.3;
	white-space: nowrap;
}

.ollie-cur-list__badge--duration {
	background: var(--ollie-cur-time-bg);
	color: var(--ollie-cur-time-ink);
}

.ollie-cur-list__badge--questions {
	background: var(--ollie-cur-quiz-bg);
	color: var(--ollie-cur-quiz-ink);
}

.ollie-cur-list__lock {
	display: inline-flex;
	flex: 0 0 auto;
	color: var(--ollie-cur-muted);
}

/* The reference paints the Preview button purple, which belongs to that demo's
   palette and not to Ollie's; it is the site's teal here so the one call to
   action on the tab matches every other button on the page. */
.ollie-cur-list__preview {
	display: inline-block;
	padding: 7px 18px;
	background: var(--ollie-cur-accent);
	border-radius: 6px;
	color: #fff;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.3;
	text-decoration: none;
	white-space: nowrap;
}

.ollie-cur-list__preview:hover,
.ollie-cur-list__preview:focus {
	background: var(--ollie-cur-ink);
	color: #fff;
}

.ollie-cur-list__empty {
	margin: 0;
	padding: 16px 22px 20px;
	color: var(--ollie-cur-muted);
}

/* Description text that lived after the outline (the "Level: … Duration: …"
   summary and the non-profit note) is printed under the accordion. */
.ollie-cur-after {
	color: var(--ollie-cur-muted, #6f7484);
}

.ollie-cur-after > *:last-child {
	margin-bottom: 0;
}

/* --- Phones --------------------------------------------------------------- */

@media (max-width: 575px) {
	.ollie-cur-list__head {
		gap: 10px;
		padding: 16px;
	}

	.ollie-cur-list__title {
		font-size: 17px;
	}

	/* The lesson count is the first thing to go: the accordion shows the
	   lessons themselves the moment it is open. */
	.ollie-cur-list__count {
		display: none;
	}

	.ollie-cur-list__lessons {
		padding: 0 16px;
	}

	/* Badges move under the title instead of squeezing it to a few characters.
	   The icon keeps its own column so the rows still line up. */
	.ollie-cur-list__lesson {
		flex-wrap: wrap;
		row-gap: 8px;
	}

	.ollie-cur-list__lesson-title {
		flex: 1 1 calc(100% - 32px);
		font-size: 15px;
	}

	.ollie-cur-list__meta {
		flex: 1 1 100%;
		flex-wrap: wrap;
		gap: 8px;
		padding-left: 32px;
	}

	.ollie-cur-list__badge,
	.ollie-cur-list__preview {
		font-size: 13px;
	}
}