/*
 * iToolkit LMS — catalog and course detail styles.
 *
 * Wave 2 visual rebuild.
 *
 * All selectors are scoped under .itk-lms-catalogor
 * body.single-itk_course so this stylesheet does not leak onto any other
 * page on the site, even if the file is enqueued in error. Defensive
 * scoping also raises specificity above most theme defaults.
 *
 * Color tokens (defined as custom properties so a theme override can
 * tweak them without forking this file):
 *   --itk-blue:        primary brand blue (Start button, link accents)
 *   --itk-blue-hover:  darker blue for :hover / :focus
 *   --itk-text:        body text
 *   --itk-text-muted:  card excerpt, secondary text
 *   --itk-card-bg:     card background
 *   --itk-card-shadow: card shadow (resting)
 *   --itk-card-shadow-hover: card shadow on hover
 *   --itk-progress-track: progress bar background
 *   --itk-progress-fill:  progress bar fill
 */

/*
 * v0.22.2 visual polish (Wave 22b iteration 2).
 *
 * Palette swapped from eyeballed sky blue to the official Income 4 Idiots
 * brand hex values (source: nPod-I4I-Colors-web-logo.docx, 2026-05-10).
 *
 * Brand reference:
 *   I4I Blue            #328cc1   (primary)
 *   I4I Dark Blue       #246991   (hover / interactive)
 *
 * Tokens declared on every LMS body class so all child component scopes
 * (catalog, course detail, lesson player, quiz block, certificate page)
 * draw from the same source of truth.
 *
 * Color rationale:
 *   --itk-blue          I4I primary blue (CTAs, links, accents)
 *   --itk-blue-hover    I4I dark blue for interactive states
 *   --itk-blue-soft     light tint of primary for sidebar active row,
 *                       gentle highlights, hover backgrounds
 *   --itk-blue-deep     deeper anchor of brand blue for heading
 *                       emphasis (rare)
 *   --itk-text          body text
 *   --itk-text-muted    excerpts, secondary copy
 *   --itk-text-eyebrow  small-caps labels above titles
 *   --itk-card-border   thin border for card definition
 *   --itk-card-radius   16px (slightly friendlier than 14px)
 *   --itk-progress-*    track + fill for course progress bars
 */
/* Wave 58 — declare brand tokens at :root so they resolve on every
   page where this stylesheet loads. The catalog.css enqueue is
   already scoped to LMS pages via Assets::is_lms_context(), so
   :root scope is safe and avoids the body-class-mismatch trap that
   left /learn/search/ unstyled in Waves 56/57. */
:root {
	--itk-blue:               #328cc1;
	--itk-blue-hover:         #246991;
	--itk-blue-soft:          #e8f2f8;
	--itk-blue-deep:          #173d5c;
	--itk-text:               #1a202c;
	--itk-text-muted:         #475569;
	--itk-text-eyebrow:       #64748b;
	--itk-card-bg:            #ffffff;
	--itk-card-border:        #e2e8f0;
	--itk-card-radius:        16px;
	--itk-card-shadow:        0 1px 2px rgba(15, 23, 42, 0.04), 0 6px 16px rgba(15, 23, 42, 0.06);
	--itk-card-shadow-hover:  0 2px 4px rgba(15, 23, 42, 0.06), 0 14px 32px rgba(15, 23, 42, 0.10);
	--itk-progress-track:     #e3edf2;
	--itk-progress-fill:      var(--itk-blue);
	--itk-cta-shadow:         0 1px 2px rgba(50, 140, 193, 0.25), 0 4px 10px rgba(50, 140, 193, 0.18);
	--itk-cta-shadow-hover:   0 2px 4px rgba(50, 140, 193, 0.30), 0 6px 16px rgba(50, 140, 193, 0.25);
}

/*
 * ============================================================
 * Catalog archive (/learn/)
 * ============================================================
 */

.itk-lms-catalog {
	max-width: 1200px;
	margin: 0 auto;
	padding: 2.5rem 1.25rem 4rem;
	color: var(--itk-text);
}

.itk-lms-catalog .itk-lms-catalog__header {
	margin: 0 0 2.5rem;
}

.itk-lms-catalog .itk-lms-catalog__eyebrow {
	margin: 0 0 0.5rem;
	font-size: 0.95rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--itk-blue);
}

.itk-lms-catalog .itk-lms-catalog__title {
	margin: 0;
	font-size: clamp(1.85rem, 3.2vw, 2.4rem);
	font-weight: 700;
	letter-spacing: -0.015em;
	color: var(--itk-text);
}

.itk-lms-catalog .itk-lms-catalog__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 1.75rem;
}

.itk-lms-catalog .itk-lms-catalog__card {
	display: flex;
	flex-direction: column;
	background: var(--itk-card-bg);
	border: 1px solid var(--itk-card-border);
	border-radius: var(--itk-card-radius);
	overflow: hidden;
	box-shadow: var(--itk-card-shadow);
	transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
}

.itk-lms-catalog .itk-lms-catalog__card:hover,
.itk-lms-catalog .itk-lms-catalog__card:focus-within {
	box-shadow: var(--itk-card-shadow-hover);
	border-color: transparent;
	transform: translateY(-3px);
}

/* Hero image — locked aspect ratio so all cards line up regardless of
 * source image dimensions. This is the Wave 1 bug fix. */
.itk-lms-catalog .itk-lms-catalog__card-media {
	display: block;
	line-height: 0;
	background: #f1f5f9;
	aspect-ratio: 16 / 9;
	overflow: hidden;
}

.itk-lms-catalog .itk-lms-catalog__card-media img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
	object-position: center;
	transition: transform 0.4s ease;
}

.itk-lms-catalog .itk-lms-catalog__card:hover .itk-lms-catalog__card-media img {
	transform: scale(1.04);
}

.itk-lms-catalog .itk-lms-catalog__card-body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding: 1.25rem 1.25rem 1.5rem;
	gap: 0.5rem;
}

.itk-lms-catalog .itk-lms-catalog__card-title {
	margin: 0;
	font-size: 1.15rem;
	line-height: 1.35;
	font-weight: 600;
	color: var(--itk-text);
}

.itk-lms-catalog .itk-lms-catalog__card-title a {
	color: inherit;
	text-decoration: none;
}

.itk-lms-catalog .itk-lms-catalog__card-title a:hover,
.itk-lms-catalog .itk-lms-catalog__card-title a:focus {
	color: var(--itk-blue);
}

.itk-lms-catalog .itk-lms-catalog__card-excerpt {
	margin: 0;
	color: var(--itk-text-muted);
	font-size: 0.95rem;
	line-height: 1.5;
	flex: 1 1 auto;
}

/* CTA button — pill, blue, subtle shadow, lifts on hover */
.itk-lms-catalog .itk-lms-catalog__card-cta {
	align-self: flex-start;
	display: inline-block;
	margin-top: 0.75rem;
	padding: 0.7rem 1.6rem;
	background: var(--itk-blue);
	color: #ffffff;
	border-radius: 9999px;
	text-decoration: none;
	font-weight: 600;
	font-size: 0.95rem;
	letter-spacing: 0.01em;
	line-height: 1;
	box-shadow: var(--itk-cta-shadow);
	transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}

.itk-lms-catalog .itk-lms-catalog__card-cta:hover,
.itk-lms-catalog .itk-lms-catalog__card-cta:focus {
	background: var(--itk-blue-hover);
	color: #ffffff;
	transform: translateY(-1px);
	box-shadow: var(--itk-cta-shadow-hover);
}

/* Progress bar — v0.22.1 polish: bumped from 4px to 8px so it's
 * actually readable at a glance. Track gets a soft inset shadow for
 * subtle depth; fill gets a slight inner highlight. Wave 5 cleanup
 * (no wrapper border-radius, parent card's overflow:hidden clips
 * corners) preserved. */
.itk-lms-catalog .itk-lms-catalog__card-progress {
	height: 8px;
	background: var(--itk-progress-track);
	box-shadow: inset 0 1px 0 rgba(15, 23, 42, 0.04);
	margin-top: auto;
	width: 100%;
}

.itk-lms-catalog .itk-lms-catalog__card-progress-fill {
	height: 100%;
	background: var(--itk-progress-fill);
	width: 0;
	transition: width 0.4s ease;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.itk-lms-catalog .itk-lms-catalog__pagination {
	margin-top: 2.5rem;
}

.itk-lms-catalog .itk-lms-catalog__empty {
	padding: 3rem 1rem;
	text-align: center;
	color: var(--itk-text-muted);
	background: #f8fafc;
	border-radius: var(--itk-card-radius);
}

.itk-lms-catalog .itk-lms-catalog__empty p {
	margin: 0 0 1rem;
}

.itk-lms-catalog .itk-lms-catalog__empty p:last-child {
	margin-bottom: 0;
}

.itk-lms-catalog .itk-lms-catalog__empty-cta {
	display: inline-block;
	padding: 0.7rem 1.6rem;
	font-weight: 600;
	color: #ffffff;
	background: var(--itk-blue, #328cc1);
	border-radius: 999px;
	text-decoration: none;
	box-shadow: var(--itk-cta-shadow);
	transition: background-color 0.15s ease, transform 0.15s ease, box-shadow 0.2s ease;
}

.itk-lms-catalog .itk-lms-catalog__empty-cta:hover,
.itk-lms-catalog .itk-lms-catalog__empty-cta:focus {
	background: var(--itk-blue-hover, #246991);
	color: #ffffff;
	transform: translateY(-1px);
	box-shadow: var(--itk-cta-shadow-hover);
}

.itk-lms-catalog .itk-lms-catalog__empty-hint {
	font-size: 0.85rem;
	color: var(--itk-text-eyebrow);
	font-style: italic;
}

/*
 * ============================================================
 * Single course detail (/learn/{slug}/)
 * ============================================================
 */

body.single-itk_course .itk-lms-course {
	max-width: 960px;
	margin: 0 auto;
	padding: 0 1.25rem 4rem;
	color: var(--itk-text);
}

/*
 * v0.32.0 — unified hero block.
 * Sits at the very top of the course-detail page. Carries the title,
 * excerpt, and a primary CTA. Two variants: image-backed (uses the
 * course featured image as a backdrop with a dark gradient overlay)
 * or gradient-backed (brand-blue gradient when no featured image is
 * set). White text either way for maximum visual punch.
 */
body.single-itk_course .itk-lms-course__hero-block {
	position: relative;
	margin: 0 -1.25rem 2.5rem;
	padding: 4rem 1.25rem 3.5rem;
	color: #ffffff;
	text-align: center;
	overflow: hidden;
	isolation: isolate;
}

body.single-itk_course .itk-lms-course__hero-block--gradient {
	background: linear-gradient(135deg, var(--itk-blue) 0%, var(--itk-blue-hover) 100%);
}

body.single-itk_course .itk-lms-course__hero-block--image {
	background-image: var(--itk-hero-bg);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

body.single-itk_course .itk-lms-course__hero-block--image::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, rgba(36, 105, 145, 0.86) 0%, rgba(23, 61, 92, 0.92) 100%);
	z-index: -1;
}

body.single-itk_course .itk-lms-course__hero-block-inner {
	max-width: 720px;
	margin: 0 auto;
}

body.single-itk_course .itk-lms-course__hero-block .itk-lms-course__title {
	margin: 0 0 1rem;
	font-size: clamp(2rem, 4vw, 3rem);
	font-weight: 800;
	letter-spacing: -0.015em;
	line-height: 1.1;
	color: #ffffff;
}

body.single-itk_course .itk-lms-course__excerpt {
	margin: 0 auto 1.75rem;
	max-width: 600px;
	font-size: 1.05rem;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.92);
}

body.single-itk_course .itk-lms-course__cta-row {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
	margin-top: 0.5rem;
}

body.single-itk_course .itk-lms-course__cta-primary {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.85rem 1.5rem;
	background: #ffffff;
	color: var(--itk-blue-hover);
	font-weight: 700;
	font-size: 1.05rem;
	text-decoration: none;
	border-radius: var(--itk-card-radius);
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
	transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

body.single-itk_course .itk-lms-course__cta-primary:hover,
body.single-itk_course .itk-lms-course__cta-primary:focus-visible {
	transform: translateY(-1px);
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
	background: #f7fbff;
}

body.single-itk_course .itk-lms-course__cta-arrow {
	font-size: 1.25rem;
	line-height: 1;
}

body.single-itk_course .itk-lms-course__cta-subline {
	font-size: 0.9rem;
	color: rgba(255, 255, 255, 0.75);
	font-style: italic;
}

body.single-itk_course .itk-lms-course__cta-secondary {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.7rem 1.25rem;
	background: transparent;
	color: #ffffff;
	font-weight: 600;
	text-decoration: none;
	border: 1.5px solid rgba(255, 255, 255, 0.6);
	border-radius: var(--itk-card-radius);
	transition: background 0.15s ease, border-color 0.15s ease;
}

body.single-itk_course .itk-lms-course__cta-secondary:hover,
body.single-itk_course .itk-lms-course__cta-secondary:focus-visible {
	background: rgba(255, 255, 255, 0.1);
	border-color: #ffffff;
}

/* Container above the lesson list — bring it back inside the 960 frame. */
body.single-itk_course .itk-lms-course__article {
	padding-top: 0;
}

body.single-itk_course .itk-lms-course__content {
	font-size: 1.05rem;
	line-height: 1.65;
	color: var(--itk-text);
}

body.single-itk_course .itk-lms-course__content p {
	margin: 0 0 1.1rem;
}

/* Lesson list on the course detail page. */
body.single-itk_course .itk-lms-course__lessons {
	margin-top: 3rem;
	padding-top: 2rem;
	border-top: 1px solid #e2e8f0;
}

body.single-itk_course .itk-lms-course__lessons-heading {
	margin: 0 0 1.25rem;
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--itk-text);
}

body.single-itk_course .itk-lms-lesson-list {
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: itk-lesson;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

body.single-itk_course .itk-lms-lesson-list__item {
	background: #ffffff;
	border-radius: 10px;
	box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
	transition: box-shadow 0.2s ease, transform 0.15s ease;
}

body.single-itk_course .itk-lms-lesson-list__item:hover {
	box-shadow: 0 4px 12px rgba(15, 23, 42, 0.1);
	transform: translateY(-1px);
}

body.single-itk_course .itk-lms-lesson-list__link {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 0.85rem 1rem;
	text-decoration: none;
	color: inherit;
}

body.single-itk_course .itk-lms-lesson-list__index {
	flex: 0 0 auto;
	width: 2rem;
	height: 2rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	background: #f1f5f9;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--itk-text-muted);
}

body.single-itk_course .itk-lms-lesson-list__item.is-complete .itk-lms-lesson-list__index {
	background: var(--itk-blue);
	color: #ffffff;
}

body.single-itk_course .itk-lms-lesson-list__body {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	min-width: 0;
}

body.single-itk_course .itk-lms-lesson-list__title {
	font-weight: 600;
	color: var(--itk-text);
	line-height: 1.35;
}

body.single-itk_course .itk-lms-lesson-list__excerpt {
	font-size: 0.9rem;
	color: var(--itk-text-muted);
	line-height: 1.4;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

body.single-itk_course .itk-lms-lesson-list__status {
	flex: 0 0 auto;
	color: var(--itk-text-muted);
	font-size: 1.5rem;
	line-height: 1;
}

body.single-itk_course .itk-lms-lesson-list__item.is-complete .itk-lms-lesson-list__status {
	color: var(--itk-blue);
}

/*
 * ============================================================
 * Single lesson view (/learn/{course-slug}/{lesson-slug}/)
 * ============================================================
 */

body.single-itk_lesson {
	--itk-blue:               #1f6feb;
	--itk-blue-hover:         #1a5ac4;
	--itk-text:               #1a202c;
	--itk-text-muted:         #4a5568;
	--itk-card-bg:            #ffffff;
	--itk-card-radius:        14px;
}

body.single-itk_lesson .itk-lms-lesson {
	max-width: 1240px;
	margin: 0 auto;
	padding: 2rem 1.25rem 4rem;
	color: var(--itk-text);
}

/* Wave 7: course-player layout — sidebar + content. */
body.single-itk_lesson .itk-lms-lesson__layout {
	display: grid;
	grid-template-columns: 260px 1fr;
	gap: 2.5rem;
	align-items: start;
}

body.single-itk_lesson .itk-lms-lesson__main {
	min-width: 0; /* prevents grid item from blowing past parent on long content */
	max-width: 820px;
}

@media (max-width: 900px) {
	body.single-itk_lesson .itk-lms-lesson__layout {
		grid-template-columns: 1fr;
		gap: 1.5rem;
	}
	body.single-itk_lesson .itk-lms-lesson__main {
		max-width: none;
	}
}

body.single-itk_lesson .itk-lms-lesson__breadcrumb {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin: 0 0 1.5rem;
	font-size: 0.95rem;
	flex-wrap: wrap;
}

body.single-itk_lesson .itk-lms-lesson__breadcrumb a {
	color: var(--itk-blue);
	text-decoration: none;
	font-weight: 600;
}

body.single-itk_lesson .itk-lms-lesson__breadcrumb a:hover,
body.single-itk_lesson .itk-lms-lesson__breadcrumb a:focus {
	color: var(--itk-blue-hover);
	text-decoration: underline;
}

body.single-itk_lesson .itk-lms-lesson__breadcrumb-progress {
	color: var(--itk-text-muted);
	font-size: 0.9rem;
}

body.single-itk_lesson .itk-lms-lesson__title {
	margin: 0 0 1.25rem;
	font-size: clamp(1.6rem, 2.8vw, 2.25rem);
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.2;
}

body.single-itk_lesson .itk-lms-lesson__hero {
	margin: 0 0 2rem;
}

body.single-itk_lesson .itk-lms-lesson__hero img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: var(--itk-card-radius);
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

body.single-itk_lesson .itk-lms-lesson__content {
	font-size: 1.05rem;
	line-height: 1.7;
	color: var(--itk-text);
}

body.single-itk_lesson .itk-lms-lesson__content p {
	margin: 0 0 1.15rem;
}

/* Prev / next pager */
body.single-itk_lesson .itk-lms-lesson__pager {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
	margin: 3rem 0 0;
	padding-top: 2rem;
	border-top: 1px solid #e2e8f0;
}

body.single-itk_lesson .itk-lms-lesson__pager-link {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	padding: 1rem 1.1rem;
	background: #ffffff;
	border-radius: var(--itk-card-radius);
	box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
	text-decoration: none;
	color: inherit;
	transition: box-shadow 0.2s ease, transform 0.15s ease;
}

body.single-itk_lesson a.itk-lms-lesson__pager-link:hover,
body.single-itk_lesson a.itk-lms-lesson__pager-link:focus {
	box-shadow: 0 4px 12px rgba(15, 23, 42, 0.1);
	transform: translateY(-1px);
}

body.single-itk_lesson .itk-lms-lesson__pager-link--next {
	text-align: right;
}

body.single-itk_lesson .itk-lms-lesson__pager-link--disabled {
	background: transparent;
	box-shadow: none;
	cursor: default;
}

body.single-itk_lesson .itk-lms-lesson__pager-direction {
	font-size: 0.85rem;
	color: var(--itk-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-weight: 600;
}

body.single-itk_lesson .itk-lms-lesson__pager-title {
	font-weight: 600;
	color: var(--itk-text);
	line-height: 1.3;
}

@media (max-width: 600px) {
	body.single-itk_lesson .itk-lms-lesson__pager {
		grid-template-columns: 1fr;
	}
	body.single-itk_lesson .itk-lms-lesson__pager-link--next {
		text-align: left;
	}
}

/*
 * ============================================================
 * Wave 4: Mark Complete UI on the lesson page
 *
 * Lives between the lesson body and the prev/next pager. Two states:
 *   default          - blue Mark Complete CTA + helper line
 *   .is-complete     - green badge + "completed on {date}" + smaller
 *                      grey reset button
 * ============================================================
 */

body.single-itk_lesson {
	--itk-success:           #16a34a;
	--itk-success-soft:      #dcfce7;
	--itk-success-text:      #166534;
}

body.single-itk_lesson .itk-lms-lesson__complete {
	margin: 2.5rem 0 0;
	padding: 1.5rem 1.5rem;
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	border-radius: var(--itk-card-radius);
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
}

body.single-itk_lesson .itk-lms-lesson__complete.is-complete {
	background: var(--itk-success-soft);
	border-color: var(--itk-success);
}

body.single-itk_lesson .itk-lms-lesson__complete-flash {
	margin: 0;
	padding: 0.65rem 0.9rem;
	border-radius: 8px;
	font-size: 0.95rem;
	background: #e0f2fe;
	color: #075985;
	border: 1px solid #bae6fd;
}

body.single-itk_lesson .itk-lms-lesson__complete-flash--success {
	background: var(--itk-success-soft);
	color: var(--itk-success-text);
	border-color: var(--itk-success);
}

body.single-itk_lesson .itk-lms-lesson__complete-prompt {
	margin: 0;
	color: var(--itk-text);
	font-size: 1rem;
	font-weight: 500;
}

body.single-itk_lesson .itk-lms-lesson__complete-status {
	margin: 0;
	color: var(--itk-success-text);
	font-size: 1rem;
	font-weight: 600;
	display: flex;
	align-items: center;
	gap: 0.6rem;
}

body.single-itk_lesson .itk-lms-lesson__complete-check {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.6rem;
	height: 1.6rem;
	background: var(--itk-success);
	color: #ffffff;
	border-radius: 999px;
	font-size: 1rem;
	line-height: 1;
	flex: 0 0 auto;
}

body.single-itk_lesson .itk-lms-lesson__complete-form {
	margin: 0;
}

body.single-itk_lesson .itk-lms-lesson__complete-btn {
	display: inline-block;
	padding: 0.75rem 1.75rem;
	background: var(--itk-blue);
	color: #ffffff;
	border: 0;
	border-radius: 9999px;
	font-weight: 600;
	font-size: 1rem;
	line-height: 1;
	cursor: pointer;
	text-decoration: none;
	box-shadow: var(--itk-cta-shadow);
	transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}

body.single-itk_lesson .itk-lms-lesson__complete-btn:hover,
body.single-itk_lesson .itk-lms-lesson__complete-btn:focus {
	background: var(--itk-blue-hover);
	color: #ffffff;
	transform: translateY(-1px);
	box-shadow: var(--itk-cta-shadow-hover);
}

/* Undo state: smaller, low-emphasis grey link-button */
body.single-itk_lesson .itk-lms-lesson__complete-btn--undo {
	padding: 0.5rem 1.1rem;
	background: transparent;
	color: var(--itk-text-muted);
	box-shadow: none;
	font-size: 0.9rem;
	font-weight: 500;
	border: 1px solid #cbd5e1;
}

body.single-itk_lesson .itk-lms-lesson__complete-btn--undo:hover,
body.single-itk_lesson .itk-lms-lesson__complete-btn--undo:focus {
	background: #ffffff;
	color: var(--itk-text);
	border-color: var(--itk-text-muted);
	transform: none;
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

/*
 * ============================================================
 * Wave 5: Enrollment gating
 *
 * Single course detail page when not enrolled:
 *   .itk-lms-course__paywall   the big Get Access panel
 *   .itk-lms-lesson-list--locked   per-row disabled state
 *
 * Single lesson page when not enrolled:
 *   .itk-lms-lesson__paywall   replaces the body + Mark Complete UI
 * ============================================================
 */

body.single-itk_course .itk-lms-course__paywall {
	margin: 2.5rem 0 2rem;
	padding: 2rem 1.75rem;
	background: linear-gradient(135deg, #eff6ff, #ffffff);
	border: 1px solid #c7d2fe;
	border-radius: var(--itk-card-radius);
	text-align: left;
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
}

body.single-itk_course .itk-lms-course__paywall-title {
	margin: 0;
	font-size: 1.45rem;
	font-weight: 700;
	color: var(--itk-text);
	letter-spacing: -0.01em;
}

body.single-itk_course .itk-lms-course__paywall-body {
	margin: 0;
	color: var(--itk-text-muted);
	line-height: 1.55;
	font-size: 1rem;
}

body.single-itk_course .itk-lms-course__paywall-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 0.25rem;
}

body.single-itk_course .itk-lms-course__paywall-cta {
	display: inline-block;
	padding: 0.85rem 1.85rem;
	background: var(--itk-blue);
	color: #ffffff;
	border-radius: 9999px;
	text-decoration: none;
	font-weight: 600;
	font-size: 1rem;
	line-height: 1;
	box-shadow: 0 1px 2px rgba(31, 111, 235, 0.25), 0 4px 10px rgba(31, 111, 235, 0.18);
	transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}

body.single-itk_course .itk-lms-course__paywall-cta:hover,
body.single-itk_course .itk-lms-course__paywall-cta:focus {
	background: var(--itk-blue-hover);
	color: #ffffff;
	transform: translateY(-1px);
	box-shadow: 0 2px 4px rgba(31, 111, 235, 0.3), 0 6px 14px rgba(31, 111, 235, 0.22);
}

/* Locked lesson list row */
body.single-itk_course .itk-lms-lesson-list--locked .itk-lms-lesson-list__item.is-locked {
	background: #fafafa;
	cursor: not-allowed;
}

body.single-itk_course .itk-lms-lesson-list__row {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 0.85rem 1rem;
	color: var(--itk-text-muted);
}

body.single-itk_course .itk-lms-lesson-list__item.is-locked .itk-lms-lesson-list__title,
body.single-itk_course .itk-lms-lesson-list__item.is-locked .itk-lms-lesson-list__excerpt {
	color: var(--itk-text-muted);
}

body.single-itk_course .itk-lms-lesson-list__item.is-locked .itk-lms-lesson-list__index {
	background: #e2e8f0;
	color: #94a3b8;
}

body.single-itk_course .itk-lms-lesson-list__status--locked {
	font-size: 1.15rem;
	color: #94a3b8;
}

body.single-itk_course .itk-lms-lesson-list--locked .itk-lms-lesson-list__item:hover {
	transform: none;
	box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
}

/* Single lesson paywall */
body.single-itk_lesson.itk-lms-lesson--locked-page .itk-lms-lesson__content,
body.single-itk_lesson .itk-lms-lesson--locked .itk-lms-lesson__content,
body.single-itk_lesson .itk-lms-lesson--locked .itk-lms-lesson__complete {
	display: none;
}

body.single-itk_lesson .itk-lms-lesson__paywall {
	margin: 2rem 0 0;
	padding: 2.5rem 2rem;
	background: linear-gradient(135deg, #eff6ff, #ffffff);
	border: 1px solid #c7d2fe;
	border-radius: var(--itk-card-radius);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.9rem;
}

body.single-itk_lesson .itk-lms-lesson__paywall-icon {
	font-size: 1.75rem;
	width: 3rem;
	height: 3rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--itk-blue);
	color: #ffffff;
	border-radius: 999px;
	box-shadow: 0 4px 12px rgba(31, 111, 235, 0.25);
}

body.single-itk_lesson .itk-lms-lesson__paywall-title {
	margin: 0;
	font-size: 1.4rem;
	font-weight: 700;
	color: var(--itk-text);
	letter-spacing: -0.01em;
}

body.single-itk_lesson .itk-lms-lesson__paywall-body {
	margin: 0;
	color: var(--itk-text-muted);
	line-height: 1.55;
	font-size: 1rem;
}

body.single-itk_lesson .itk-lms-lesson__paywall-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 0.25rem;
}

body.single-itk_lesson .itk-lms-lesson__paywall-cta {
	display: inline-block;
	padding: 0.85rem 1.85rem;
	background: var(--itk-blue);
	color: #ffffff;
	border-radius: 9999px;
	text-decoration: none;
	font-weight: 600;
	font-size: 1rem;
	line-height: 1;
	box-shadow: 0 1px 2px rgba(31, 111, 235, 0.25), 0 4px 10px rgba(31, 111, 235, 0.18);
	transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}

body.single-itk_lesson .itk-lms-lesson__paywall-cta:hover,
body.single-itk_lesson .itk-lms-lesson__paywall-cta:focus {
	background: var(--itk-blue-hover);
	color: #ffffff;
	transform: translateY(-1px);
	box-shadow: 0 2px 4px rgba(31, 111, 235, 0.3), 0 6px 14px rgba(31, 111, 235, 0.22);
}

body.single-itk_lesson .itk-lms-lesson__paywall-secondary {
	align-self: center;
	color: var(--itk-blue);
	text-decoration: none;
	font-weight: 600;
	font-size: 0.95rem;
	padding: 0.85rem 0.5rem;
}

body.single-itk_lesson .itk-lms-lesson__paywall-secondary:hover,
body.single-itk_lesson .itk-lms-lesson__paywall-secondary:focus {
	text-decoration: underline;
	color: var(--itk-blue-hover);
}

/*
 * ============================================================
 * Wave 7: Lesson sidebar (course outline navigator)
 * ============================================================
 */

body.single-itk_lesson .itk-lms-lesson__sidebar {
	position: sticky;
	top: 2rem;
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: var(--itk-card-radius);
	padding: 1.1rem 1rem;
	box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04), 0 4px 12px rgba(15, 23, 42, 0.04);
	max-height: calc(100vh - 4rem);
	overflow: auto;
}

@media (max-width: 900px) {
	body.single-itk_lesson .itk-lms-lesson__sidebar {
		position: static;
		max-height: none;
	}
}

body.single-itk_lesson .itk-lms-lesson__sidebar-course {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	padding: 0.4rem 0.5rem 0.85rem;
	margin: 0 0 0.5rem;
	border-bottom: 1px solid #f1f5f9;
	text-decoration: none;
	color: inherit;
}

body.single-itk_lesson .itk-lms-lesson__sidebar-course:hover .itk-lms-lesson__sidebar-course-title,
body.single-itk_lesson .itk-lms-lesson__sidebar-course:focus .itk-lms-lesson__sidebar-course-title {
	color: var(--itk-blue);
}

body.single-itk_lesson .itk-lms-lesson__sidebar-course-eyebrow {
	font-size: 0.7rem;
	font-weight: 700;
	color: var(--itk-text-muted);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

body.single-itk_lesson .itk-lms-lesson__sidebar-course-title {
	font-size: 1rem;
	font-weight: 700;
	color: var(--itk-text);
	line-height: 1.3;
	transition: color 0.15s ease;
}

body.single-itk_lesson .itk-lms-lesson__sidebar-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

body.single-itk_lesson .itk-lms-lesson__sidebar-item {
	margin: 0;
}

body.single-itk_lesson .itk-lms-lesson__sidebar-link {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	padding: 0.55rem 0.65rem;
	border-radius: 8px;
	text-decoration: none;
	color: var(--itk-text);
	font-size: 0.92rem;
	line-height: 1.35;
	transition: background 0.15s ease, color 0.15s ease;
}

body.single-itk_lesson a.itk-lms-lesson__sidebar-link:hover,
body.single-itk_lesson a.itk-lms-lesson__sidebar-link:focus {
	background: #f8fafc;
	color: var(--itk-text);
}

body.single-itk_lesson .itk-lms-lesson__sidebar-item.is-current .itk-lms-lesson__sidebar-link {
	background: var(--itk-blue-soft);
	color: var(--itk-blue-hover);
	font-weight: 600;
}

body.single-itk_lesson .itk-lms-lesson__sidebar-item.is-locked .itk-lms-lesson__sidebar-link {
	color: var(--itk-text-muted);
	cursor: not-allowed;
}

body.single-itk_lesson .itk-lms-lesson__sidebar-index {
	flex: 0 0 auto;
	width: 1.7rem;
	height: 1.7rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	background: #f1f5f9;
	font-size: 0.78rem;
	font-weight: 600;
	color: var(--itk-text-muted);
}

body.single-itk_lesson .itk-lms-lesson__sidebar-item.is-current .itk-lms-lesson__sidebar-index {
	background: var(--itk-blue);
	color: #ffffff;
}

body.single-itk_lesson .itk-lms-lesson__sidebar-item.is-complete .itk-lms-lesson__sidebar-index {
	background: var(--itk-success, #16a34a);
	color: #ffffff;
}

body.single-itk_lesson .itk-lms-lesson__sidebar-title {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

body.single-itk_lesson .itk-lms-lesson__sidebar-icon {
	flex: 0 0 auto;
	font-size: 0.95rem;
	color: var(--itk-text-muted);
	line-height: 1;
}

body.single-itk_lesson .itk-lms-lesson__sidebar-item.is-complete .itk-lms-lesson__sidebar-icon {
	color: var(--itk-success, #16a34a);
}

body.single-itk_lesson .itk-lms-lesson__sidebar-item.is-current .itk-lms-lesson__sidebar-icon {
	color: var(--itk-blue);
}

/* Sidebar progress meter */
body.single-itk_lesson .itk-lms-lesson__sidebar-progress {
	margin-top: 0.75rem;
	padding-top: 0.85rem;
	border-top: 1px solid #f1f5f9;
}

body.single-itk_lesson .itk-lms-lesson__sidebar-progress-meta {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	font-size: 0.78rem;
	color: var(--itk-text-muted);
	margin-bottom: 0.4rem;
}

body.single-itk_lesson .itk-lms-lesson__sidebar-progress-percent {
	font-weight: 700;
	color: var(--itk-text);
	font-size: 0.85rem;
}

body.single-itk_lesson .itk-lms-lesson__sidebar-progress-track {
	height: 5px;
	background: #e2e8f0;
	border-radius: 999px;
	overflow: hidden;
}

body.single-itk_lesson .itk-lms-lesson__sidebar-progress-fill {
	height: 100%;
	background: var(--itk-blue);
	width: 0;
	transition: width 0.4s ease;
	border-radius: inherit;
}

/* Course-complete flash on the parent course detail page after the
 * "finish course" redirect. */
body.single-itk_course .itk-lms-course__finish-flash {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 1.1rem 1.25rem;
	margin: 0 0 1.75rem;
	background: linear-gradient(135deg, #dcfce7, #f0fdf4);
	border: 1px solid #16a34a;
	border-radius: var(--itk-card-radius);
	color: #166534;
}

body.single-itk_course .itk-lms-course__finish-flash-icon {
	font-size: 1.6rem;
	line-height: 1;
}

body.single-itk_course .itk-lms-course__finish-flash-body {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

body.single-itk_course .itk-lms-course__finish-flash-title {
	font-size: 1.05rem;
	font-weight: 700;
	color: #14532d;
}

body.single-itk_course .itk-lms-course__finish-flash-text {
	font-size: 0.95rem;
	color: #166534;
}

/* ----------------------------------------------------------------------- *
 * Wave 17: drip release indicators                                        *
 * ----------------------------------------------------------------------- */

/* Course-detail lesson list "Unlocks in N days" badge in place of the
 * generic lock icon. */
body.single-itk_course .itk-lms-lesson-list__status--dripped {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 0.2rem 0.6rem;
	font-size: 0.8rem;
	font-weight: 600;
	color: #1e40af;
	background: #dbeafe;
	border: 1px solid #bfdbfe;
	border-radius: 999px;
	white-space: nowrap;
}

body.single-itk_course .itk-lms-lesson-list__item.is-dripped .itk-lms-lesson-list__index {
	background: #dbeafe;
	color: #1e40af;
}

/* Lesson-page sidebar drip hint, sits beneath the locked lesson title. */
body.single-itk_lesson .itk-lms-lesson__sidebar-drip {
	display: block;
	margin-top: 2px;
	font-size: 0.75rem;
	font-weight: 500;
	color: #1e40af;
}

body.single-itk_lesson .itk-lms-lesson__sidebar-item.is-dripped .itk-lms-lesson__sidebar-index {
	background: #dbeafe;
	color: #1e40af;
}

/* ----------------------------------------------------------------------- *
 * Wave 18: certificate CTAs on celebration + course-detail                *
 * ----------------------------------------------------------------------- */

body.single-itk_course .itk-lms-celebration__cert {
	margin-top: 0.85rem;
}

body.single-itk_course .itk-lms-celebration__cert-cta {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	padding: 0.6rem 1.1rem;
	font-size: 0.95rem;
	font-weight: 600;
	color: #ffffff;
	background: linear-gradient(135deg, #1f6feb, #1858c4);
	border-radius: 999px;
	text-decoration: none;
	box-shadow: 0 4px 12px rgba(31, 111, 235, 0.25);
}

body.single-itk_course .itk-lms-celebration__cert-cta:hover {
	transform: translateY(-1px);
	box-shadow: 0 6px 16px rgba(31, 111, 235, 0.32);
}

body.single-itk_course .itk-lms-celebration__cert-icon {
	font-size: 1.1rem;
	line-height: 1;
}

/* Inline cert CTA below the lesson list when at 100% */
body.single-itk_course .itk-lms-course__certificate-cta {
	margin-top: 1.5rem;
	padding: 1.25rem 1.5rem;
	background: linear-gradient(135deg, #f0fdf4, #ecfdf5);
	border: 1px solid #bbf7d0;
	border-radius: var(--itk-card-radius);
	display: flex;
	align-items: center;
	gap: 1rem;
	flex-wrap: wrap;
}

body.single-itk_course .itk-lms-course__certificate-icon {
	font-size: 2rem;
	line-height: 1;
}

body.single-itk_course .itk-lms-course__certificate-body {
	flex: 1 1 220px;
}

body.single-itk_course .itk-lms-course__certificate-title {
	margin: 0 0 0.25rem;
	font-size: 1.1rem;
	font-weight: 700;
	color: #14532d;
}

body.single-itk_course .itk-lms-course__certificate-text {
	margin: 0;
	font-size: 0.95rem;
	color: #166534;
}

body.single-itk_course .itk-lms-course__certificate-cta-link {
	display: inline-flex;
	align-items: center;
	padding: 0.6rem 1.25rem;
	font-size: 0.95rem;
	font-weight: 600;
	color: #ffffff;
	background: #166534;
	border-radius: 999px;
	text-decoration: none;
}

body.single-itk_course .itk-lms-course__certificate-cta-link:hover {
	background: #14532d;
}

/* ==========================================================================
 * Wave 12 — completion celebration + next-course recommendations.
 * Replaces the inline "course complete" flash with a richer card and
 * surfaces up to 3 next-course suggestions below.
 * ========================================================================== */

body.single-itk_course .itk-lms-celebration {
	margin: 0 0 2rem;
	padding: 1.5rem 1.5rem 1.75rem;
	background: linear-gradient(135deg, #dcfce7, #f0fdf4);
	border: 1px solid #16a34a;
	border-radius: var(--itk-card-radius);
	color: #14532d;
}

body.single-itk_course .itk-lms-celebration__hero {
	display: flex;
	align-items: center;
	gap: 1rem;
}

body.single-itk_course .itk-lms-celebration__icon {
	font-size: 2.4rem;
	line-height: 1;
}

body.single-itk_course .itk-lms-celebration__copy {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

body.single-itk_course .itk-lms-celebration__title {
	font-size: 1.4rem;
	font-weight: 700;
	color: #14532d;
	margin: 0;
}

body.single-itk_course .itk-lms-celebration__subtitle {
	font-size: 0.95rem;
	color: #166534;
	margin: 0;
}

body.single-itk_course .itk-lms-celebration__next {
	margin-top: 1.5rem;
	padding-top: 1.25rem;
	border-top: 1px solid rgba(22, 163, 74, 0.25);
}

body.single-itk_course .itk-lms-celebration__next-heading {
	font-size: 0.85rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: #166534;
	margin: 0 0 0.85rem;
}

body.single-itk_course .itk-lms-celebration__next-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

body.single-itk_course .itk-lms-celebration__next-card {
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: var(--itk-card-radius);
	overflow: hidden;
	transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

body.single-itk_course .itk-lms-celebration__next-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08);
	border-color: #16a34a;
}

body.single-itk_course .itk-lms-celebration__next-link {
	display: block;
	text-decoration: none;
	color: inherit;
}

body.single-itk_course .itk-lms-celebration__next-media {
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: #f1f5f9;
}

body.single-itk_course .itk-lms-celebration__next-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

body.single-itk_course .itk-lms-celebration__next-body {
	padding: 0.85rem 1rem 1rem;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

body.single-itk_course .itk-lms-celebration__next-badge {
	align-self: flex-start;
	display: inline-block;
	padding: 2px 8px;
	background: #dcfce7;
	color: #166534;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin-bottom: 4px;
}

body.single-itk_course .itk-lms-celebration__next-title {
	margin: 0;
	font-size: 1rem;
	font-weight: 700;
	color: #1a202c;
	line-height: 1.3;
}

body.single-itk_course .itk-lms-celebration__next-excerpt {
	margin: 0;
	font-size: 0.85rem;
	color: #475569;
	line-height: 1.45;
}

body.single-itk_course .itk-lms-celebration__next-cta {
	margin-top: 6px;
	font-size: 0.85rem;
	font-weight: 700;
	color: var(--itk-primary, #1f6feb);
}

/* ==========================================================================
 * Wave 21 — Quiz block on the lesson template.
 * Renders inline between lesson content and the mark-complete section.
 * Three states: form, review (pass/fail), passed badge.
 * ========================================================================== */

body.single-itk_lesson .itk-lms-quiz {
	margin: 2rem 0;
	padding: 1.5rem 1.5rem 1.75rem;
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: var(--itk-card-radius, 14px);
	box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
}

body.single-itk_lesson .itk-lms-quiz--review.is-passed {
	background: linear-gradient(135deg, #dcfce7, #f0fdf4);
	border-color: #16a34a;
	color: #14532d;
}

body.single-itk_lesson .itk-lms-quiz--review.is-failed {
	background: #fff7ed;
	border-color: #f59e0b;
}

body.single-itk_lesson .itk-lms-quiz--badge {
	background: #f0fdf4;
	border-color: #86efac;
}

body.single-itk_lesson .itk-lms-quiz__header {
	margin-bottom: 1.25rem;
}

body.single-itk_lesson .itk-lms-quiz__title {
	margin: 0 0 0.35rem;
	font-size: 1.45rem;
	font-weight: 700;
	color: #1a202c;
}

body.single-itk_lesson .itk-lms-quiz--review.is-passed .itk-lms-quiz__title {
	color: #14532d;
}

body.single-itk_lesson .itk-lms-quiz__sub {
	margin: 0;
	font-size: 0.95rem;
	color: #475569;
}

body.single-itk_lesson .itk-lms-quiz__questions {
	margin: 0;
	padding: 0;
	list-style: decimal inside;
}

body.single-itk_lesson .itk-lms-quiz__question {
	padding: 1rem 1.15rem;
	margin: 0 0 0.85rem;
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	border-radius: 8px;
}

body.single-itk_lesson .itk-lms-quiz__question-text {
	margin: 0 0 0.85rem;
	font-size: 1.05rem;
	font-weight: 600;
	color: #1a202c;
	display: inline;
}

body.single-itk_lesson .itk-lms-quiz__choices {
	margin: 0.85rem 0 0;
	padding: 0;
	list-style: none;
}

body.single-itk_lesson .itk-lms-quiz__choice {
	margin: 0 0 0.4rem;
}

body.single-itk_lesson .itk-lms-quiz__choice label {
	display: flex;
	align-items: flex-start;
	gap: 0.55rem;
	padding: 0.55rem 0.7rem;
	border-radius: 6px;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

body.single-itk_lesson .itk-lms-quiz__choice label:hover {
	background-color: rgba(31, 111, 235, 0.06);
}

body.single-itk_lesson .itk-lms-quiz__choice input[type="radio"] {
	margin-top: 3px;
	flex: 0 0 auto;
}

body.single-itk_lesson .itk-lms-quiz__actions {
	margin-top: 1.25rem;
	display: flex;
	gap: 0.75rem;
	flex-wrap: wrap;
}

body.single-itk_lesson .itk-lms-quiz__submit {
	display: inline-flex;
	align-items: center;
	padding: 0.75rem 1.6rem;
	font-size: 1rem;
	font-weight: 600;
	color: #ffffff;
	background: var(--itk-blue, #328cc1);
	border: 0;
	border-radius: 999px;
	cursor: pointer;
	text-decoration: none;
	box-shadow: var(--itk-cta-shadow);
	transition: background-color 0.15s ease, transform 0.15s ease, box-shadow 0.2s ease;
}

body.single-itk_lesson .itk-lms-quiz__submit:hover,
body.single-itk_lesson .itk-lms-quiz__submit:focus {
	background: var(--itk-blue-hover, #246991);
	color: #ffffff;
	transform: translateY(-1px);
	box-shadow: var(--itk-cta-shadow-hover);
}

body.single-itk_lesson .itk-lms-quiz__wrong-list {
	margin: 0 0 1.25rem;
	padding: 1rem 1.15rem;
	background: rgba(255, 255, 255, 0.6);
	border: 1px solid #fed7aa;
	border-radius: 8px;
}

body.single-itk_lesson .itk-lms-quiz__wrong-list ul {
	margin: 0.5rem 0 0;
	padding-left: 1.4rem;
}

body.single-itk_lesson .itk-lms-quiz__wrong-list li {
	margin-bottom: 0.3rem;
}

body.single-itk_lesson .itk-lms-quiz__passed-note {
	margin: 0.85rem 0 0;
	font-size: 0.95rem;
	color: #166534;
	font-weight: 600;
}

body.single-itk_lesson .itk-lms-quiz__passed-badge {
	margin: 0;
	display: flex;
	align-items: center;
	gap: 0.6rem;
	font-size: 1.05rem;
	font-weight: 600;
	color: #166534;
}

body.single-itk_lesson .itk-lms-quiz__check {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.6rem;
	height: 1.6rem;
	background: #16a34a;
	color: #ffffff;
	border-radius: 999px;
	font-size: 0.95rem;
}

body.single-itk_lesson .itk-lms-quiz--admin-notice {
	background: #fff8e5;
	border-color: #f59e0b;
	color: #78350f;
}

/*
 * ============================================================
 * Wave 26 — Catalog ribbon + hover image + search bar.
 * ============================================================
 */

/*
 * Make card-media a stacking context so absolute children
 * (ribbon, hover image) anchor to it. The existing rule sets
 * aspect-ratio and overflow:hidden which we keep.
 */
.itk-lms-catalog .itk-lms-catalog__card-media {
	position: relative;
}

/*
 * Hover image swap.
 *
 * Both images stack absolutely inside card-media. Featured
 * (no hover-class) img sits at opacity 1. Hover img sits at
 * opacity 0 and fades in on card:hover, while featured fades
 * out. The existing scale(1.04) hover applies to both because
 * the parent card-media img selector still matches.
 *
 * Only takes effect when the card has the `has-hover-image`
 * class set in the template. Cards without a hover image
 * render unchanged.
 */
.itk-lms-catalog .itk-lms-catalog__card.has-hover-image .itk-lms-catalog__card-image,
.itk-lms-catalog .itk-lms-catalog__card.has-hover-image .itk-lms-catalog__card-image-hover {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
	object-position: center;
	transition: opacity 0.35s ease, transform 0.4s ease;
}

.itk-lms-catalog .itk-lms-catalog__card.has-hover-image .itk-lms-catalog__card-image-hover {
	opacity: 0;
}

.itk-lms-catalog .itk-lms-catalog__card.has-hover-image:hover .itk-lms-catalog__card-image {
	opacity: 0;
}

.itk-lms-catalog .itk-lms-catalog__card.has-hover-image:hover .itk-lms-catalog__card-image-hover {
	opacity: 1;
}

/*
 * Ribbon badge — top-right of card-media. Compact, brand-aligned,
 * letter-spaced uppercase pill.
 *
 * Colors come from CSS custom properties seeded by DesignTokens
 * (Wave 25 inline-style block reads Settings::catalog_ribbon_bg +
 * catalog_ribbon_text_color and emits these vars). Fallbacks here
 * cover the case where the user hasn't touched ribbon settings
 * (default red on white).
 */
.itk-lms-catalog .itk-lms-catalog__card-ribbon {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 2;
	display: inline-block;
	padding: 6px 12px;
	background: var(--itk-ribbon-bg, #a21e22);
	color: var(--itk-ribbon-text-color, #ffffff);
	border-radius: 99px;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.15), 0 4px 10px rgba(15, 23, 42, 0.10);
	line-height: 1.2;
	white-space: nowrap;
	max-width: calc(100% - 24px);
	overflow: hidden;
	text-overflow: ellipsis;
}

/*
 * Catalog search bar — sits in the header below the title.
 * Inline-flex form: input grows, submit button compact.
 */
.itk-lms-catalog .itk-lms-catalog__search {
	display: flex;
	gap: 8px;
	margin-top: 1.25rem;
	max-width: 520px;
}

.itk-lms-catalog .itk-lms-catalog__search-input {
	flex: 1 1 auto;
	padding: 0.65rem 0.9rem;
	border: 1px solid var(--itk-card-border, #e2e8f0);
	border-radius: 8px;
	font: inherit;
	color: var(--itk-text, #1a202c);
	background: #ffffff;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.itk-lms-catalog .itk-lms-catalog__search-input:focus {
	outline: none;
	border-color: var(--itk-blue, #328cc1);
	box-shadow: 0 0 0 3px rgba(50, 140, 193, 0.18);
}

.itk-lms-catalog .itk-lms-catalog__search-submit {
	flex: 0 0 auto;
	padding: 0.65rem 1.25rem;
	background: var(--itk-blue, #328cc1);
	color: #ffffff;
	border: none;
	border-radius: 8px;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.15s ease;
}

.itk-lms-catalog .itk-lms-catalog__search-submit:hover,
.itk-lms-catalog .itk-lms-catalog__search-submit:focus {
	background: var(--itk-blue-hover, #246991);
}

.itk-lms-catalog .itk-lms-catalog__search-status {
	margin: 0.65rem 0 0;
	font-size: 0.92rem;
	color: var(--itk-text-muted, #475569);
}

.itk-lms-catalog .itk-lms-catalog__search-status a {
	margin-left: 0.5rem;
	color: var(--itk-blue, #328cc1);
	text-decoration: underline;
}

/*
 * ============================================================
 * v0.32.0 — Bare-theme noise suppression
 *
 * When the active theme is a stub (breakdance-zero, the default
 * WP Classic theme, etc.), the only thing wrapping our LMS pages
 * is a bare "site title + powered by WordPress" header/footer
 * that looks unfinished. The plugin hides those default chrome
 * elements specifically on itk_course and itk_lesson pages so
 * the LMS content area stands on its own.
 *
 * Site builders running a real custom theme are unaffected —
 * these selectors target the WP Classic-theme defaults
 * (#header, #headerimg, #footer, .description, .site-info)
 * which won't exist in a Breakdance-built or Oxygen-built
 * site template.
 *
 * Override-friendly: any theme can re-show these by setting
 * display: block !important on its own selectors at higher
 * specificity.
 * ============================================================
 */
body.single-itk_course #header,
body.single-itk_course #headerimg,
body.single-itk_course .site-header,
body.single-itk_course .description,
body.single-itk_course #footer,
body.single-itk_course .site-footer,
body.single-itk_course .site-info,
body.single-itk_lesson #header,
body.single-itk_lesson #headerimg,
body.single-itk_lesson .site-header,
body.single-itk_lesson .description,
body.single-itk_lesson #footer,
body.single-itk_lesson .site-footer,
body.single-itk_lesson .site-info,
body.post-type-archive-itk_course #header,
body.post-type-archive-itk_course #headerimg,
body.post-type-archive-itk_course .site-header,
body.post-type-archive-itk_course .description,
body.post-type-archive-itk_course #footer,
body.post-type-archive-itk_course .site-footer,
body.post-type-archive-itk_course .site-info,
/* Wave 57 — extend theme-chrome hiding to bundle/video/ebook archives. */
body.post-type-archive-itk_bundle #header,
body.post-type-archive-itk_bundle #headerimg,
body.post-type-archive-itk_bundle .site-header,
body.post-type-archive-itk_bundle .description,
body.post-type-archive-itk_bundle #footer,
body.post-type-archive-itk_bundle .site-footer,
body.post-type-archive-itk_bundle .site-info,
body.post-type-archive-itk_video #header,
body.post-type-archive-itk_video #headerimg,
body.post-type-archive-itk_video .site-header,
body.post-type-archive-itk_video .description,
body.post-type-archive-itk_video #footer,
body.post-type-archive-itk_video .site-footer,
body.post-type-archive-itk_video .site-info,
body.post-type-archive-itk_ebook #header,
body.post-type-archive-itk_ebook #headerimg,
body.post-type-archive-itk_ebook .site-header,
body.post-type-archive-itk_ebook .description,
body.post-type-archive-itk_ebook #footer,
body.post-type-archive-itk_ebook .site-footer,
body.post-type-archive-itk_ebook .site-info,
/* Wave 58 — extend theme-chrome hiding to single bundle/video/ebook
   pages so they get the same clean treatment as single course/lesson. */
body.single-itk_bundle #header,
body.single-itk_bundle #headerimg,
body.single-itk_bundle .site-header,
body.single-itk_bundle .description,
body.single-itk_bundle #footer,
body.single-itk_bundle .site-footer,
body.single-itk_bundle .site-info,
body.single-itk_video #header,
body.single-itk_video #headerimg,
body.single-itk_video .site-header,
body.single-itk_video .description,
body.single-itk_video #footer,
body.single-itk_video .site-footer,
body.single-itk_video .site-info,
body.single-itk_ebook #header,
body.single-itk_ebook #headerimg,
body.single-itk_ebook .site-header,
body.single-itk_ebook .description,
body.single-itk_ebook #footer,
body.single-itk_ebook .site-footer,
body.single-itk_ebook .site-info {
	display: none !important;
}

/* Pull #page or .wrap up so there's no awkward gap left by hidden header. */
body.single-itk_course #page,
body.single-itk_course .wrap,
body.single-itk_lesson #page,
body.single-itk_lesson .wrap,
body.post-type-archive-itk_course #page,
body.post-type-archive-itk_course .wrap,
body.post-type-archive-itk_bundle #page,
body.post-type-archive-itk_bundle .wrap,
body.post-type-archive-itk_video #page,
body.post-type-archive-itk_video .wrap,
body.post-type-archive-itk_ebook #page,
body.post-type-archive-itk_ebook .wrap,
body.single-itk_bundle #page,
body.single-itk_bundle .wrap,
body.single-itk_video #page,
body.single-itk_video .wrap,
body.single-itk_ebook #page,
body.single-itk_ebook .wrap {
	margin-top: 0 !important;
	padding-top: 0 !important;
}

/* ============================================================
 * Wave 34 — Bookmarks star button + sidebar pip
 * ============================================================ */
.itk-lms-lesson__header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
}

.itk-lms-bookmark-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.45rem 0.85rem;
	border: 1px solid var(--itk-blue, #328cc1);
	border-radius: 999px;
	background: transparent;
	color: var(--itk-blue, #328cc1);
	font-size: 0.85rem;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
}
.itk-lms-bookmark-btn:hover {
	background: var(--itk-blue-soft, #e8f2f8);
}
.itk-lms-bookmark-btn--on {
	background: var(--itk-blue, #328cc1);
	color: #fff;
}
.itk-lms-bookmark-btn--on:hover {
	background: var(--itk-blue-hover, #246991);
}
.itk-lms-bookmark-btn[disabled] { opacity: 0.6; cursor: progress; }
.itk-lms-bookmark-btn__icon { font-size: 1rem; line-height: 1; }

.itk-lms-bookmark-pip {
	display: inline-block;
	margin-left: 0.35rem;
	color: var(--itk-blue, #328cc1);
	font-size: 0.85em;
}

/* ============================================================
 * Wave 34 — Lesson Resources (Deliverables) section
 * ============================================================ */
.itk-lms-lesson__resources {
	margin: 2rem 0 1.5rem;
	padding: 1.25rem 1.5rem;
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	border-radius: 12px;
}
.itk-lms-lesson__resources-heading {
	margin: 0 0 0.85rem;
	font-size: 1.1rem;
	color: #0f172a;
}
.itk-lms-lesson__resources-list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.itk-lms-lesson__resources-item + .itk-lms-lesson__resources-item {
	margin-top: 0.5rem;
}
.itk-lms-lesson__resources-link {
	display: flex;
	gap: 0.85rem;
	align-items: center;
	padding: 0.65rem 0.85rem;
	border: 1px solid #cbd5e1;
	border-radius: 8px;
	background: #fff;
	color: #0f172a;
	text-decoration: none;
	transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}
.itk-lms-lesson__resources-link:hover {
	border-color: var(--itk-blue, #328cc1);
	background: var(--itk-blue-soft, #e8f2f8);
	transform: translateY(-1px);
}
.itk-lms-lesson__resources-icon {
	font-size: 1.2rem;
	color: var(--itk-blue, #328cc1);
}
.itk-lms-lesson__resources-meta { display: flex; flex-direction: column; min-width: 0; }
.itk-lms-lesson__resources-label { font-weight: 600; word-break: break-word; }
.itk-lms-lesson__resources-filemeta { font-size: 0.8rem; color: #64748b; }

/* ============================================================
 * Wave 34 — My Bookmarks page
 * ============================================================ */
.itk-lms-bookmarks { padding: 2rem 1rem 4rem; }
.itk-lms-bookmarks__inner { max-width: 760px; margin: 0 auto; }
.itk-lms-bookmarks__eyebrow a {
	color: var(--itk-blue, #328cc1);
	text-decoration: none;
	font-size: 0.85rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}
.itk-lms-bookmarks__title { margin: 0.5rem 0 0.25rem; font-size: 2rem; color: #0f172a; }
.itk-lms-bookmarks__subtitle { color: #475569; margin: 0 0 1.5rem; }
.itk-lms-bookmarks__empty {
	padding: 2rem;
	border: 1px dashed #cbd5e1;
	border-radius: 12px;
	background: #f8fafc;
	text-align: center;
}
.itk-lms-bookmarks__cta {
	display: inline-block;
	margin-top: 0.5rem;
	padding: 0.65rem 1.25rem;
	border-radius: 999px;
	background: var(--itk-blue, #328cc1);
	color: #fff;
	text-decoration: none;
	font-weight: 600;
}
.itk-lms-bookmarks__cta:hover { background: var(--itk-blue-hover, #246991); }
.itk-lms-bookmarks__list { list-style: none; padding: 0; margin: 0; }
.itk-lms-bookmarks__item + .itk-lms-bookmarks__item { margin-top: 0.65rem; }
.itk-lms-bookmarks__link {
	display: block;
	padding: 0.95rem 1.15rem;
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	background: #fff;
	color: #0f172a;
	text-decoration: none;
	transition: border-color 0.15s ease, transform 0.15s ease;
}
.itk-lms-bookmarks__link:hover {
	border-color: var(--itk-blue, #328cc1);
	transform: translateY(-1px);
}
.itk-lms-bookmarks__lesson-title { display: block; font-weight: 600; font-size: 1.05rem; }
.itk-lms-bookmarks__course { display: block; color: #475569; font-size: 0.85rem; margin-top: 0.15rem; }
.itk-lms-bookmarks__saved-at { display: block; color: #94a3b8; font-size: 0.8rem; margin-top: 0.35rem; }

/* ============================================================
 * Wave 36 — Account preferences page at /{slug}/account/
 * ============================================================ */
.itk-lms-account { padding: 2rem 1rem 4rem; }
.itk-lms-account__inner { max-width: 640px; margin: 0 auto; }
.itk-lms-account__eyebrow a {
	font-size: 0.85rem;
	color: var(--itk-blue, #328cc1);
	text-decoration: none;
}
.itk-lms-account__eyebrow a:hover { text-decoration: underline; }
.itk-lms-account__title { margin: 0.5rem 0 0.25rem; font-size: 2rem; color: #0f172a; }
.itk-lms-account__subtitle { color: #475569; margin: 0 0 1.5rem; }
.itk-lms-account__notice {
	padding: 0.75rem 1rem;
	border-radius: 8px;
	margin: 0 0 1.25rem;
	font-size: 0.95rem;
}
.itk-lms-account__notice--success {
	background: #ecfdf5;
	border: 1px solid #6ee7b7;
	color: #065f46;
}
.itk-lms-account__notice--error {
	background: #fef2f2;
	border: 1px solid #fca5a5;
	color: #991b1b;
}
.itk-lms-account__form {
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	padding: 1.5rem;
}
.itk-lms-account__section {
	border: 0;
	margin: 0;
	padding: 0 0 1.25rem;
}
.itk-lms-account__section + .itk-lms-account__section {
	padding-top: 1.25rem;
	border-top: 1px solid #e2e8f0;
}
.itk-lms-account__section-title {
	font-size: 0.85rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: #475569;
	margin: 0 0 0.85rem;
	padding: 0;
}
.itk-lms-account__checkbox {
	display: flex;
	align-items: flex-start;
	gap: 0.65rem;
	cursor: pointer;
	font-size: 1rem;
	color: #0f172a;
}
.itk-lms-account__checkbox input[type="checkbox"] {
	margin-top: 0.2rem;
	flex-shrink: 0;
}
.itk-lms-account__checkbox-label { line-height: 1.45; }
.itk-lms-account__help {
	margin: 0.45rem 0 0 1.65rem;
	font-size: 0.85rem;
	color: #64748b;
	line-height: 1.5;
}
.itk-lms-account__actions {
	margin-top: 0.5rem;
	display: flex;
	justify-content: flex-end;
}
.itk-lms-account__submit {
	display: inline-block;
	padding: 0.65rem 1.4rem;
	background: var(--itk-blue, #328cc1);
	color: #fff;
	border: 0;
	border-radius: 8px;
	font-weight: 600;
	font-size: 0.95rem;
	cursor: pointer;
	transition: background 0.15s ease;
}
.itk-lms-account__submit:hover { background: var(--itk-blue-hover, #246991); }

.itk-lms-account__field {
	margin-top: 0.85rem;
}
.itk-lms-account__field-label {
	display: block;
	font-size: 0.85rem;
	font-weight: 600;
	color: #334155;
	margin: 0 0 0.35rem;
}
.itk-lms-account__input,
.itk-lms-account__textarea {
	width: 100%;
	padding: 0.55rem 0.7rem;
	border: 1px solid #cbd5e1;
	border-radius: 8px;
	font-size: 0.95rem;
	color: #0f172a;
	background: #fff;
	box-sizing: border-box;
	font-family: inherit;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.itk-lms-account__textarea {
	resize: vertical;
	min-height: 80px;
}
.itk-lms-account__input:focus,
.itk-lms-account__textarea:focus {
	outline: none;
	border-color: var(--itk-blue, #328cc1);
	box-shadow: 0 0 0 3px rgba(50,140,193,0.18);
}

/* ============================================================
 * Wave 36 step 2 — Public learner profile at /{slug}/u/{username}/
 * ============================================================ */
.itk-lms-profile { padding: 2rem 1rem 4rem; }
.itk-lms-profile__inner { max-width: 760px; margin: 0 auto; }
.itk-lms-profile__owner-banner {
	background: #eff6ff;
	border: 1px solid #bfdbfe;
	color: #1e40af;
	padding: 0.6rem 0.9rem;
	border-radius: 8px;
	font-size: 0.9rem;
	margin: 0 0 1rem;
}
.itk-lms-profile__owner-banner a {
	color: #1d4ed8;
	font-weight: 600;
	text-decoration: underline;
}
.itk-lms-profile__eyebrow {
	font-size: 0.85rem;
	margin: 0 0 0.75rem;
}
.itk-lms-profile__eyebrow a {
	color: var(--itk-blue, #328cc1);
	text-decoration: none;
}
.itk-lms-profile__eyebrow a:hover { text-decoration: underline; }

.itk-lms-profile__header {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	margin: 0 0 1.5rem;
}
.itk-lms-profile__avatar {
	width: 120px;
	height: 120px;
	border-radius: 50%;
	object-fit: cover;
	box-shadow: 0 0 0 1px #e2e8f0;
}
.itk-lms-profile__heading { flex: 1; min-width: 0; }
.itk-lms-profile__name {
	margin: 0 0 0.15rem;
	font-size: 1.85rem;
	color: #0f172a;
	line-height: 1.15;
}
.itk-lms-profile__handle {
	margin: 0;
	color: #64748b;
	font-size: 0.9rem;
}

.itk-lms-profile__bio {
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	padding: 1.1rem 1.25rem;
	margin: 0 0 1.25rem;
	color: #0f172a;
	font-size: 1rem;
	line-height: 1.6;
}

.itk-lms-profile__socials {
	list-style: none;
	padding: 0;
	margin: 0 0 1.5rem;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}
.itk-lms-profile__social {
	display: inline-block;
	padding: 0.4rem 0.85rem;
	background: #f1f5f9;
	border: 1px solid #e2e8f0;
	border-radius: 999px;
	color: #0f172a;
	text-decoration: none;
	font-size: 0.85rem;
	font-weight: 500;
	transition: background 0.15s ease, border-color 0.15s ease;
}
.itk-lms-profile__social:hover {
	background: #e0f2fe;
	border-color: var(--itk-blue, #328cc1);
}

.itk-lms-profile__section-title {
	margin: 0 0 0.85rem;
	font-size: 1.1rem;
	font-weight: 600;
	color: #0f172a;
}
.itk-lms-profile__empty {
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	padding: 1.1rem 1.25rem;
	margin: 0;
	color: #64748b;
	font-style: italic;
}
.itk-lms-profile__course-list {
	list-style: none;
	padding: 0;
	margin: 0;
}
.itk-lms-profile__course {
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	padding: 0.85rem 1.1rem;
	margin: 0 0 0.65rem;
}
.itk-lms-profile__course-link {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 0.75rem;
	color: #0f172a;
	text-decoration: none;
	font-weight: 600;
}
.itk-lms-profile__course-link:hover .itk-lms-profile__course-title {
	color: var(--itk-blue, #328cc1);
}
.itk-lms-profile__course-title { font-size: 1rem; }
.itk-lms-profile__course-percent {
	font-size: 0.85rem;
	color: #64748b;
	font-weight: 600;
	min-width: 3rem;
	text-align: right;
}
.itk-lms-profile__progress-track {
	margin-top: 0.55rem;
	height: 6px;
	background: #e2e8f0;
	border-radius: 999px;
	overflow: hidden;
}
.itk-lms-profile__progress-fill {
	height: 100%;
	background: var(--itk-blue, #328cc1);
	transition: width 0.3s ease;
}

/* ============================================================
 * Wave 36 step 3 — Supervisor "view as learner" banner
 * ============================================================ */
.itk-lms-view-as-banner {
	position: sticky;
	top: 0;
	z-index: 9999;
	background: #fef3c7;
	border-bottom: 1px solid #fbbf24;
	color: #78350f;
	padding: 0.55rem 1rem;
	font-size: 0.9rem;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.85rem;
	box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.itk-lms-view-as-banner__label strong {
	font-weight: 700;
}
.itk-lms-view-as-banner__exit {
	display: inline-block;
	padding: 0.25rem 0.65rem;
	background: #78350f;
	color: #fef3c7;
	text-decoration: none;
	border-radius: 6px;
	font-size: 0.8rem;
	font-weight: 600;
	transition: background 0.15s ease;
}
.itk-lms-view-as-banner__exit:hover {
	background: #5a2a06;
	color: #fef3c7;
}

/* ---------------------------------------------------------------
 * Wave 38 — Member Magnet paywall card.
 *
 * Replaces the generic .itk-lms-lesson__paywall body when a course
 * has Member Magnet enabled. Renders inside the same
 * .itk-lms-lesson__paywall wrapper, so the wrapper's
 * background/border still applies — but we neutralize the wrapper
 * padding/layout so the card can own the full surface.
 * --------------------------------------------------------------- */

body.single-itk_lesson .itk-lms-lesson__paywall:has(.itk-lms-magnet-card) {
	padding: 0;
	background: transparent;
	border: 0;
	display: block;
}

.itk-lms-magnet-card {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0;
	margin: 2rem 0 0;
	background: #ffffff;
	border: 1px solid #c7d2fe;
	border-radius: var(--itk-card-radius);
	overflow: hidden;
	box-shadow: 0 8px 24px rgba(31, 111, 235, 0.08);
}

@media (min-width: 720px) {
	.itk-lms-magnet-card {
		grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	}
}

.itk-lms-magnet-card__hero-wrap {
	overflow: hidden;
	background: linear-gradient(135deg, #eff6ff, #dbeafe);
	aspect-ratio: 16 / 9;
}

@media (min-width: 720px) {
	.itk-lms-magnet-card__hero-wrap {
		aspect-ratio: auto;
		min-height: 280px;
	}
}

.itk-lms-magnet-card__hero {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.itk-lms-magnet-card__body {
	padding: 2rem 2rem 2.25rem;
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
}

.itk-lms-magnet-card__eyebrow {
	display: inline-block;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--itk-blue);
	background: rgba(50, 140, 193, 0.1);
	padding: 0.3rem 0.7rem;
	border-radius: 999px;
	align-self: flex-start;
}

.itk-lms-magnet-card__title {
	margin: 0;
	font-size: 1.6rem;
	font-weight: 700;
	color: var(--itk-text);
	letter-spacing: -0.015em;
	line-height: 1.2;
}

.itk-lms-magnet-card__blurb {
	margin: 0;
	color: var(--itk-text-muted);
	line-height: 1.55;
	font-size: 1rem;
}

.itk-lms-magnet-card__lock-line {
	margin: 0.25rem 0 0;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.65rem 0.85rem;
	background: #fff7ed;
	border: 1px solid #fed7aa;
	border-radius: 8px;
	color: #7c2d12;
	font-size: 0.92rem;
	font-weight: 500;
	width: fit-content;
}

.itk-lms-magnet-card__lock-icon {
	font-size: 1rem;
}

.itk-lms-magnet-card__actions {
	margin-top: 0.5rem;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 1.1rem;
}

.itk-lms-magnet-card__cta {
	display: inline-block;
	padding: 0.95rem 1.95rem;
	background: var(--itk-blue);
	color: #ffffff;
	border-radius: 9999px;
	text-decoration: none;
	font-weight: 600;
	font-size: 1.02rem;
	line-height: 1;
	box-shadow: 0 1px 2px rgba(31, 111, 235, 0.25), 0 4px 10px rgba(31, 111, 235, 0.18);
	transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}

.itk-lms-magnet-card__cta:hover,
.itk-lms-magnet-card__cta:focus {
	background: var(--itk-blue-hover);
	color: #ffffff;
	transform: translateY(-1px);
	box-shadow: 0 2px 4px rgba(31, 111, 235, 0.3), 0 6px 14px rgba(31, 111, 235, 0.22);
}

.itk-lms-magnet-card__secondary {
	color: var(--itk-blue);
	text-decoration: none;
	font-weight: 600;
	font-size: 0.95rem;
}

.itk-lms-magnet-card__secondary:hover,
.itk-lms-magnet-card__secondary:focus {
	text-decoration: underline;
	color: var(--itk-blue-hover);
}

/* ---------------------------------------------------------------
 * Wave 38 — Onboarding welcome page.
 * --------------------------------------------------------------- */

.itk-lms-onboarding {
	max-width: 760px;
	margin: 0 auto;
	padding: 2.5rem 1.5rem 4rem;
}

.itk-lms-onboarding__shell {
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: var(--itk-card-radius);
	padding: 2.5rem 2rem;
	box-shadow: 0 6px 20px rgba(15, 23, 42, 0.04);
}

@media (min-width: 720px) {
	.itk-lms-onboarding__shell {
		padding: 3rem 3rem;
	}
}

.itk-lms-onboarding__header {
	margin-bottom: 2rem;
}

.itk-lms-onboarding__eyebrow {
	display: inline-block;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--itk-blue);
	background: rgba(50, 140, 193, 0.1);
	padding: 0.3rem 0.7rem;
	border-radius: 999px;
	margin-bottom: 0.85rem;
}

.itk-lms-onboarding__title {
	margin: 0 0 0.6rem;
	font-size: 1.85rem;
	font-weight: 700;
	color: var(--itk-text);
	letter-spacing: -0.015em;
	line-height: 1.2;
}

.itk-lms-onboarding__subtitle {
	margin: 0;
	color: var(--itk-text-muted);
	line-height: 1.55;
	font-size: 1.02rem;
}

.itk-lms-onboarding__section {
	margin-bottom: 1.75rem;
	padding-bottom: 1.5rem;
	border-bottom: 1px solid #f1f5f9;
}

.itk-lms-onboarding__section:last-of-type {
	border-bottom: 0;
	margin-bottom: 1.25rem;
}

.itk-lms-onboarding__label {
	display: block;
	font-size: 1.05rem;
	font-weight: 600;
	color: var(--itk-text);
	margin-bottom: 0.35rem;
}

.itk-lms-onboarding__hint {
	margin: 0 0 0.85rem;
	color: var(--itk-text-muted);
	font-size: 0.92rem;
	line-height: 1.5;
}

.itk-lms-onboarding__textarea {
	width: 100%;
	padding: 0.85rem 1rem;
	border: 1px solid #cbd5e1;
	border-radius: 8px;
	background: #ffffff;
	font-size: 1rem;
	font-family: inherit;
	line-height: 1.5;
	color: var(--itk-text);
	resize: vertical;
	min-height: 100px;
}

.itk-lms-onboarding__textarea:focus {
	outline: none;
	border-color: var(--itk-blue);
	box-shadow: 0 0 0 3px rgba(50, 140, 193, 0.18);
}

.itk-lms-onboarding__radios {
	display: flex;
	flex-direction: column;
	gap: 0.65rem;
	margin-top: 0.75rem;
}

.itk-lms-onboarding__radio {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	padding: 0.7rem 0.9rem;
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	cursor: pointer;
	transition: border-color 0.15s ease, background 0.15s ease;
}

.itk-lms-onboarding__radio:hover {
	border-color: var(--itk-blue);
	background: rgba(50, 140, 193, 0.04);
}

.itk-lms-onboarding__radio input[type="radio"] {
	width: 18px;
	height: 18px;
	accent-color: var(--itk-blue);
}

.itk-lms-onboarding__radio span {
	color: var(--itk-text);
	font-size: 0.98rem;
}

.itk-lms-onboarding__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 0.65rem;
	margin-top: 0.75rem;
}

.itk-lms-onboarding__tag {
	display: inline-flex;
	align-items: center;
	cursor: pointer;
	user-select: none;
}

.itk-lms-onboarding__tag input[type="checkbox"] {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.itk-lms-onboarding__tag span {
	display: inline-block;
	padding: 0.55rem 0.95rem;
	border: 1px solid #cbd5e1;
	border-radius: 9999px;
	background: #ffffff;
	color: var(--itk-text);
	font-size: 0.94rem;
	font-weight: 500;
	transition: all 0.15s ease;
}

.itk-lms-onboarding__tag:hover span {
	border-color: var(--itk-blue);
	color: var(--itk-blue);
}

.itk-lms-onboarding__tag input[type="checkbox"]:checked + span {
	background: var(--itk-blue);
	border-color: var(--itk-blue);
	color: #ffffff;
}

.itk-lms-onboarding__tag input[type="checkbox"]:focus-visible + span {
	box-shadow: 0 0 0 3px rgba(50, 140, 193, 0.25);
}

.itk-lms-onboarding__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	align-items: center;
	margin-top: 2rem;
}

.itk-lms-onboarding__submit {
	display: inline-block;
	padding: 0.95rem 2rem;
	background: var(--itk-blue);
	color: #ffffff;
	border: 0;
	border-radius: 9999px;
	cursor: pointer;
	font-weight: 600;
	font-size: 1.02rem;
	line-height: 1;
	box-shadow: 0 1px 2px rgba(31, 111, 235, 0.25), 0 4px 10px rgba(31, 111, 235, 0.18);
	transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}

.itk-lms-onboarding__submit:hover,
.itk-lms-onboarding__submit:focus {
	background: var(--itk-blue-hover);
	transform: translateY(-1px);
	box-shadow: 0 2px 4px rgba(31, 111, 235, 0.3), 0 6px 14px rgba(31, 111, 235, 0.22);
}

.itk-lms-onboarding__skip {
	display: inline-block;
	padding: 0.95rem 1rem;
	background: transparent;
	color: var(--itk-text-muted);
	border: 0;
	cursor: pointer;
	font-weight: 600;
	font-size: 0.95rem;
	text-decoration: underline;
}

.itk-lms-onboarding__skip:hover,
.itk-lms-onboarding__skip:focus {
	color: var(--itk-blue);
}

/* Dashboard flash after submit/skip */
.itk-lms-catalog-flash {
	margin: 0 0 1.5rem;
	padding: 0.85rem 1.1rem;
	border-radius: 10px;
	background: #ecfdf5;
	border: 1px solid #a7f3d0;
	color: #065f46;
	font-weight: 500;
	font-size: 0.98rem;
}

.itk-lms-catalog-flash--neutral {
	background: #f8fafc;
	border-color: #e2e8f0;
	color: var(--itk-text-muted);
}

/* ---------------------------------------------------------------
 * v0.37.2 — Member Magnet course-detail banner.
 *
 * Renders inside the existing .itk-lms-course__paywall section
 * when the course has magnet enabled with preview_count > 0.
 * Replaces the generic "Get access to this course" panel.
 * --------------------------------------------------------------- */

.itk-lms-magnet-course-banner {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: 1rem 1.25rem;
	padding: 1.1rem 1.5rem;
	background: linear-gradient(135deg, #ecfdf5, #ffffff);
	border: 1px solid #a7f3d0;
	border-left: 4px solid #10b981;
	border-radius: var(--itk-card-radius);
	box-shadow: 0 4px 16px rgba(16, 185, 129, 0.08);
}

@media (max-width: 640px) {
	.itk-lms-magnet-course-banner {
		grid-template-columns: auto minmax(0, 1fr);
	}
	.itk-lms-magnet-course-banner__actions {
		grid-column: 1 / -1;
		justify-self: start;
	}
}

.itk-lms-magnet-course-banner__icon {
	font-size: 1.55rem;
	width: 2.5rem;
	height: 2.5rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #047857;
	background: #d1fae5;
	border-radius: 999px;
	flex-shrink: 0;
}

.itk-lms-magnet-course-banner__body {
	min-width: 0;
}

.itk-lms-magnet-course-banner__eyebrow {
	margin: 0 0 0.15rem;
	font-size: 1.05rem;
	font-weight: 700;
	color: #065f46;
	letter-spacing: -0.01em;
}

.itk-lms-magnet-course-banner__line {
	margin: 0;
	color: #047857;
	font-size: 0.95rem;
	line-height: 1.45;
}

.itk-lms-magnet-course-banner__actions {
	display: flex;
	align-items: center;
}

.itk-lms-magnet-course-banner__cta-secondary {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	color: #047857;
	background: #ffffff;
	border: 1px solid #a7f3d0;
	border-radius: 9999px;
	padding: 0.55rem 1.05rem;
	font-weight: 600;
	font-size: 0.93rem;
	text-decoration: none;
	transition: background 0.15s ease, border-color 0.15s ease;
}

.itk-lms-magnet-course-banner__cta-secondary:hover,
.itk-lms-magnet-course-banner__cta-secondary:focus {
	background: #d1fae5;
	border-color: #6ee7b7;
	color: #065f46;
}

/* ---------------------------------------------------------------
   Wave 37 — Multi Course Templates (Video Focus + One Off)
   Scoped under .itk-lms-course--video-focus and .itk-lms-course--one-off
   so existing standard-template courses are unaffected.
   --------------------------------------------------------------- */

/* Video Focus variant ------------------------------------------- */

body.single-itk_course .itk-lms-course--video-focus .itk-lms-course__hero-block--compact {
	padding: 2.25rem 2rem;
	margin-bottom: 1.25rem;
}

body.single-itk_course .itk-lms-course--video-focus .itk-lms-course__hero-block--compact .itk-lms-course__title {
	font-size: 1.85rem;
	line-height: 1.2;
}

body.single-itk_course .itk-lms-course--video-focus .itk-lms-course__hero-block--compact .itk-lms-course__excerpt {
	font-size: 1rem;
	margin-top: 0.5rem;
	max-width: 60ch;
}

body.single-itk_course .itk-lms-course__video-focus-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: 1.75rem;
	align-items: start;
	margin-bottom: 1.5rem;
}

@media (max-width: 900px) {
	body.single-itk_course .itk-lms-course__video-focus-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

body.single-itk_course .itk-lms-course__player {
	background: #ffffff;
	border: 1px solid #e5e7eb;
	border-radius: 14px;
	padding: 1.5rem 1.5rem 1.75rem;
	box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}

body.single-itk_course .itk-lms-course__player-header {
	margin-bottom: 1rem;
}

body.single-itk_course .itk-lms-course__player-eyebrow {
	display: inline-block;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #246991;
	background: #e8f1f8;
	padding: 0.2rem 0.6rem;
	border-radius: 9999px;
	margin-bottom: 0.5rem;
}

body.single-itk_course .itk-lms-course__player-title {
	margin: 0;
	font-size: 1.55rem;
	line-height: 1.25;
	color: #0f172a;
}

body.single-itk_course .itk-lms-course__player-body {
	margin: 0 0 1.25rem;
	font-size: 1rem;
	line-height: 1.6;
}

body.single-itk_course .itk-lms-course__player-body iframe {
	width: 100%;
	max-width: 100%;
	aspect-ratio: 16 / 9;
	border: 0;
	border-radius: 10px;
	background: #000;
}

body.single-itk_course .itk-lms-course__player-body p {
	margin: 0 0 0.75rem;
}

body.single-itk_course .itk-lms-course__player-actions {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

body.single-itk_course .itk-lms-course__player-actions .itk-lms-course__cta-primary {
	display: inline-flex;
	align-self: flex-start;
}

body.single-itk_course .itk-lms-course__player-subline {
	margin: 0;
	color: #475569;
	font-size: 0.92rem;
	max-width: 60ch;
}

body.single-itk_course .itk-lms-course__player-empty {
	color: #64748b;
	font-style: italic;
	padding: 1rem 0;
}

body.single-itk_course .itk-lms-course__chapters {
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	border-radius: 14px;
	padding: 1.25rem 1rem 1rem;
	position: sticky;
	top: 1rem;
	max-height: calc(100vh - 2rem);
	overflow-y: auto;
}

@media (max-width: 900px) {
	body.single-itk_course .itk-lms-course__chapters {
		position: static;
		max-height: none;
	}
}

body.single-itk_course .itk-lms-course__chapters-heading {
	margin: 0 0 0.75rem;
	font-size: 0.95rem;
	font-weight: 700;
	color: #0f172a;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

body.single-itk_course .itk-lms-course__chapters-empty {
	color: #64748b;
	font-style: italic;
	margin: 0;
}

body.single-itk_course .itk-lms-chapter-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

body.single-itk_course .itk-lms-chapter-list__item {
	border-radius: 8px;
	transition: background 0.15s ease;
}

body.single-itk_course .itk-lms-chapter-list__link,
body.single-itk_course .itk-lms-chapter-list__row {
	display: grid;
	grid-template-columns: 28px minmax(0, 1fr) auto;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 0.6rem;
	color: #0f172a;
	text-decoration: none;
	border-radius: 8px;
	transition: background 0.15s ease, color 0.15s ease;
}

body.single-itk_course .itk-lms-chapter-list__link:hover,
body.single-itk_course .itk-lms-chapter-list__link:focus-visible {
	background: #e8f1f8;
	color: #246991;
}

body.single-itk_course .itk-lms-chapter-list__item.is-active .itk-lms-chapter-list__link,
body.single-itk_course .itk-lms-chapter-list__item.is-active .itk-lms-chapter-list__row {
	background: #e8f1f8;
	color: #246991;
	font-weight: 600;
}

body.single-itk_course .itk-lms-chapter-list__index {
	width: 24px;
	height: 24px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: #ffffff;
	border: 1px solid #cbd5e1;
	font-size: 0.78rem;
	font-weight: 600;
	color: #475569;
}

body.single-itk_course .itk-lms-chapter-list__item.is-complete .itk-lms-chapter-list__index {
	background: #ecfdf5;
	border-color: #6ee7b7;
	color: #047857;
}

body.single-itk_course .itk-lms-chapter-list__item.is-active .itk-lms-chapter-list__index {
	background: #328cc1;
	border-color: #328cc1;
	color: #ffffff;
}

body.single-itk_course .itk-lms-chapter-list__title {
	font-size: 0.93rem;
	line-height: 1.35;
	min-width: 0;
}

body.single-itk_course .itk-lms-chapter-list__item.is-locked .itk-lms-chapter-list__title {
	color: #94a3b8;
}

body.single-itk_course .itk-lms-chapter-list__status {
	font-size: 0.9rem;
	color: #94a3b8;
}

body.single-itk_course .itk-lms-chapter-list__item.is-complete .itk-lms-chapter-list__status {
	color: #047857;
}

body.single-itk_course .itk-lms-chapter-list__status--locked {
	color: #94a3b8;
}

body.single-itk_course .itk-lms-chapter-list__status--dripped {
	font-size: 0.7rem;
	font-weight: 600;
	color: #b45309;
	background: #fef3c7;
	padding: 0.15rem 0.45rem;
	border-radius: 9999px;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

body.single-itk_course .itk-lms-course__content--video-focus {
	margin-top: 0;
}

/* One Off variant ----------------------------------------------- */

body.single-itk_course .itk-lms-course--one-off .itk-lms-course__article {
	max-width: 880px;
	margin: 0 auto;
}

body.single-itk_course .itk-lms-course__content--one-off {
	font-size: 1.05rem;
	line-height: 1.7;
}

body.single-itk_course .itk-lms-course__content--one-off iframe {
	width: 100%;
	max-width: 100%;
	aspect-ratio: 16 / 9;
	border: 0;
	border-radius: 10px;
	background: #000;
}

body.single-itk_course .itk-lms-course__content--one-off h2,
body.single-itk_course .itk-lms-course__content--one-off h3 {
	margin-top: 1.75rem;
	color: #0f172a;
}

body.single-itk_course .itk-lms-course__paywall--one-off {
	text-align: center;
	margin-top: 1.5rem;
}

/* ---------------------------------------------------------------
   Wave 39 — Lesson Discussions
   Scoped to body.single-itk_lesson .itk-lms-lesson-discussions so
   the comment styling never leaks into theme posts or pages.
   --------------------------------------------------------------- */

body.single-itk_lesson .itk-lms-lesson-discussions {
	margin: 2.5rem 0 1rem;
	padding: 1.75rem;
	background: #ffffff;
	border: 1px solid #e5e7eb;
	border-radius: 14px;
	box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}

body.single-itk_lesson .itk-lms-lesson-discussions__header {
	display: flex;
	align-items: baseline;
	gap: 0.75rem;
	margin-bottom: 1.25rem;
	padding-bottom: 0.75rem;
	border-bottom: 1px solid #f1f5f9;
}

body.single-itk_lesson .itk-lms-lesson-discussions__heading {
	margin: 0;
	font-size: 1.35rem;
	color: #0f172a;
	font-weight: 700;
}

body.single-itk_lesson .itk-lms-lesson-discussions__count {
	color: #64748b;
	font-size: 0.92rem;
	font-weight: 500;
}

body.single-itk_lesson .itk-lms-lesson-discussions__empty {
	color: #64748b;
	font-style: italic;
	margin: 0 0 1.25rem;
	padding: 1rem 1.25rem;
	background: #f8fafc;
	border-radius: 10px;
	border: 1px dashed #cbd5e1;
}

body.single-itk_lesson .itk-lms-lesson-discussions__list {
	list-style: none;
	padding: 0;
	margin: 0 0 1.5rem;
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
}

body.single-itk_lesson .itk-lms-lesson-discussions__list .comment,
body.single-itk_lesson .itk-lms-lesson-discussions__list .pingback,
body.single-itk_lesson .itk-lms-lesson-discussions__list li {
	list-style: none;
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	border-radius: 10px;
	padding: 0.85rem 1rem;
}

body.single-itk_lesson .itk-lms-lesson-discussions__list .children {
	list-style: none;
	margin: 0.75rem 0 0;
	padding: 0 0 0 1rem;
	border-left: 2px solid #cbd5e1;
	display: flex;
	flex-direction: column;
	gap: 0.65rem;
}

body.single-itk_lesson .itk-lms-lesson-discussions__list .comment-author {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 0.4rem;
	font-weight: 600;
	color: #0f172a;
}

body.single-itk_lesson .itk-lms-lesson-discussions__list .comment-author img {
	border-radius: 50%;
}

body.single-itk_lesson .itk-lms-lesson-discussions__list .comment-meta {
	font-size: 0.78rem;
	color: #64748b;
	margin-bottom: 0.5rem;
}

body.single-itk_lesson .itk-lms-lesson-discussions__list .comment-meta a {
	color: #64748b;
	text-decoration: none;
}

body.single-itk_lesson .itk-lms-lesson-discussions__list .comment-body p {
	margin: 0 0 0.5rem;
	color: #1e293b;
	line-height: 1.55;
}

body.single-itk_lesson .itk-lms-lesson-discussions__list .reply {
	margin-top: 0.35rem;
}

body.single-itk_lesson .itk-lms-lesson-discussions__list .comment-reply-link {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	font-size: 0.85rem;
	font-weight: 600;
	color: #246991;
	text-decoration: none;
	padding: 0.3rem 0.7rem;
	border-radius: 9999px;
	background: #e8f1f8;
	transition: background 0.15s ease, color 0.15s ease;
}

body.single-itk_lesson .itk-lms-lesson-discussions__list .comment-reply-link:hover,
body.single-itk_lesson .itk-lms-lesson-discussions__list .comment-reply-link:focus-visible {
	background: #cfe3ef;
	color: #154766;
}

body.single-itk_lesson .itk-lms-lesson-discussions__form {
	margin-top: 1.25rem;
	padding-top: 1.25rem;
	border-top: 1px solid #f1f5f9;
}

body.single-itk_lesson .itk-lms-lesson-discussions__form .comment-reply-title {
	font-size: 1.05rem;
	font-weight: 600;
	color: #0f172a;
	margin: 0 0 0.75rem;
}

body.single-itk_lesson .itk-lms-lesson-discussions__field textarea,
body.single-itk_lesson .itk-lms-lesson-discussions__form textarea {
	width: 100%;
	min-height: 110px;
	padding: 0.75rem 0.9rem;
	border: 1px solid #cbd5e1;
	border-radius: 10px;
	font: inherit;
	color: #0f172a;
	background: #ffffff;
	resize: vertical;
}

body.single-itk_lesson .itk-lms-lesson-discussions__field textarea:focus,
body.single-itk_lesson .itk-lms-lesson-discussions__form textarea:focus {
	outline: 2px solid #328cc1;
	outline-offset: 1px;
	border-color: #328cc1;
}

body.single-itk_lesson .itk-lms-lesson-discussions__submit {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	margin-top: 0.85rem;
	padding: 0.65rem 1.3rem;
	background: #328cc1;
	color: #ffffff;
	border: 0;
	border-radius: 9999px;
	font-weight: 600;
	font-size: 0.95rem;
	cursor: pointer;
	transition: background 0.15s ease;
}

body.single-itk_lesson .itk-lms-lesson-discussions__submit:hover,
body.single-itk_lesson .itk-lms-lesson-discussions__submit:focus-visible {
	background: #246991;
}

body.single-itk_lesson .itk-lms-lesson-discussions__must-log-in {
	margin: 0;
	padding: 0.85rem 1rem;
	background: #fef3c7;
	border: 1px solid #fde68a;
	border-radius: 10px;
	color: #78350f;
	font-size: 0.95rem;
}

body.single-itk_lesson .itk-lms-lesson-discussions__must-log-in a {
	color: #b45309;
	font-weight: 600;
}

/* ---------------------------------------------------------------
   Wave 37b — Challenge template variant
   Scoped under body.single-itk_course .itk-lms-course--challenge
   so existing templates are untouched.
   --------------------------------------------------------------- */

body.single-itk_course .itk-lms-course--challenge .itk-lms-course__article {
	max-width: 880px;
	margin: 0 auto;
}

body.single-itk_course .itk-lms-challenge__progress {
	margin-top: 1.25rem;
	padding: 0.9rem 1rem;
	background: rgba(255, 255, 255, 0.18);
	border-radius: 12px;
	backdrop-filter: blur(2px);
}

body.single-itk_course .itk-lms-challenge__progress-meta {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	color: #ffffff;
	margin-bottom: 0.5rem;
}

body.single-itk_course .itk-lms-challenge__progress-label {
	font-size: 1rem;
	font-weight: 700;
}

body.single-itk_course .itk-lms-challenge__progress-pct {
	font-size: 0.85rem;
	opacity: 0.85;
}

body.single-itk_course .itk-lms-challenge__progress-bar {
	position: relative;
	height: 8px;
	background: rgba(255, 255, 255, 0.25);
	border-radius: 999px;
	overflow: hidden;
}

body.single-itk_course .itk-lms-challenge__progress-fill {
	display: block;
	height: 100%;
	background: #ffffff;
	border-radius: 999px;
	transition: width 0.4s ease;
}

body.single-itk_course .itk-lms-challenge__days {
	margin: 2rem 0 1rem;
}

body.single-itk_course .itk-lms-challenge__heading {
	margin: 0 0 1.25rem;
	font-size: 1.45rem;
	font-weight: 700;
	color: #0f172a;
}

body.single-itk_course .itk-lms-challenge-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
}

body.single-itk_course .itk-lms-challenge-day {
	display: grid;
	grid-template-columns: 64px minmax(0, 1fr);
	gap: 1rem;
	align-items: stretch;
	padding: 1rem 1.25rem;
	background: #ffffff;
	border: 1px solid #e5e7eb;
	border-radius: 14px;
	box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
	transition: border-color 0.15s ease, background 0.15s ease;
}

body.single-itk_course .itk-lms-challenge-day--complete {
	background: #f0fdf4;
	border-color: #a7f3d0;
}

body.single-itk_course .itk-lms-challenge-day--locked,
body.single-itk_course .itk-lms-challenge-day--dripped {
	background: #f8fafc;
	border-color: #e2e8f0;
}

body.single-itk_course .itk-lms-challenge-day.is-today {
	border-color: #328cc1;
	box-shadow: 0 0 0 2px rgba(50, 140, 193, 0.18);
	background: #f1f8fc;
}

body.single-itk_course .itk-lms-challenge-day__marker {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background: #e8f1f8;
	border-radius: 12px;
	padding: 0.5rem;
	color: #246991;
}

body.single-itk_course .itk-lms-challenge-day--complete .itk-lms-challenge-day__marker {
	background: #d1fae5;
	color: #047857;
}

body.single-itk_course .itk-lms-challenge-day.is-today .itk-lms-challenge-day__marker {
	background: #328cc1;
	color: #ffffff;
}

body.single-itk_course .itk-lms-challenge-day__number {
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1;
}

body.single-itk_course .itk-lms-challenge-day__check {
	font-size: 0.85rem;
	margin-top: 0.15rem;
}

body.single-itk_course .itk-lms-challenge-day__body {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

body.single-itk_course .itk-lms-challenge-day__meta {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex-wrap: wrap;
	margin-bottom: 0.35rem;
}

body.single-itk_course .itk-lms-challenge-day__eyebrow {
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: #64748b;
}

body.single-itk_course .itk-lms-challenge-day.is-today .itk-lms-challenge-day__eyebrow {
	color: #246991;
}

body.single-itk_course .itk-lms-challenge-day__pill {
	font-size: 0.7rem;
	font-weight: 600;
	padding: 0.2rem 0.6rem;
	border-radius: 9999px;
	letter-spacing: 0.02em;
}

body.single-itk_course .itk-lms-challenge-day__pill--dripped {
	color: #b45309;
	background: #fef3c7;
}

body.single-itk_course .itk-lms-challenge-day__pill--locked {
	color: #64748b;
	background: #e2e8f0;
}

body.single-itk_course .itk-lms-challenge-day__pill--complete {
	color: #047857;
	background: #d1fae5;
}

body.single-itk_course .itk-lms-challenge-day__title {
	margin: 0 0 0.3rem;
	font-size: 1.1rem;
	line-height: 1.3;
	color: #0f172a;
	font-weight: 600;
}

body.single-itk_course .itk-lms-challenge-day--locked .itk-lms-challenge-day__title,
body.single-itk_course .itk-lms-challenge-day--dripped .itk-lms-challenge-day__title {
	color: #475569;
}

body.single-itk_course .itk-lms-challenge-day__excerpt {
	margin: 0 0 0.65rem;
	color: #64748b;
	font-size: 0.92rem;
	line-height: 1.5;
}

body.single-itk_course .itk-lms-challenge-day__cta {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	font-size: 0.92rem;
	font-weight: 600;
	color: #ffffff;
	background: #328cc1;
	padding: 0.5rem 1.1rem;
	border-radius: 9999px;
	text-decoration: none;
	transition: background 0.15s ease;
}

body.single-itk_course .itk-lms-challenge-day__cta:hover,
body.single-itk_course .itk-lms-challenge-day__cta:focus-visible {
	background: #246991;
}

body.single-itk_course .itk-lms-challenge-day__cta--review {
	background: #ffffff;
	color: #047857;
	border: 1px solid #a7f3d0;
}

body.single-itk_course .itk-lms-challenge-day__cta--review:hover,
body.single-itk_course .itk-lms-challenge-day__cta--review:focus-visible {
	background: #d1fae5;
	color: #065f46;
}

/* -----------------------------------------------------------------
   Wave 41 — Course Categories filter chip row.
   Sits between the catalog header and the grid. Brand-blue chips
   with a hollow default state and a filled active state so the
   currently-applied filter reads at a glance.
   ----------------------------------------------------------------- */
.itk-lms-catalog__filters {
	margin: 0 0 1.5rem;
}

.itk-lms-catalog__filters-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.itk-lms-catalog__filters-item {
	margin: 0;
}

.itk-lms-catalog__filter-chip {
	display: inline-flex;
	align-items: center;
	padding: 0.4rem 1rem;
	border-radius: 9999px;
	background: #ffffff;
	color: #246991;
	border: 1px solid #cfe0ec;
	font-size: 0.92rem;
	font-weight: 600;
	text-decoration: none;
	line-height: 1.25;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.itk-lms-catalog__filter-chip:hover,
.itk-lms-catalog__filter-chip:focus-visible {
	background: #eaf3fa;
	color: #246991;
	border-color: #328cc1;
	outline: none;
}

.itk-lms-catalog__filter-chip.is-active {
	background: #328cc1;
	color: #ffffff;
	border-color: #328cc1;
}

.itk-lms-catalog__filter-chip.is-active:hover,
.itk-lms-catalog__filter-chip.is-active:focus-visible {
	background: #246991;
	border-color: #246991;
	color: #ffffff;
}

@media (max-width: 600px) {
	.itk-lms-catalog__filters {
		margin-bottom: 1rem;
	}

	.itk-lms-catalog__filter-chip {
		font-size: 0.88rem;
		padding: 0.35rem 0.85rem;
	}
}

/* -----------------------------------------------------------------
   Wave 42 — Category filter chip count badge.
   A small pill-shaped counter inside each chip showing how many
   courses live in that category. Sits next to the term label.
   ----------------------------------------------------------------- */
.itk-lms-catalog__filter-chip {
	gap: 0.45rem;
}

.itk-lms-catalog__filter-chip-label {
	display: inline-block;
}

.itk-lms-catalog__filter-chip-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.5em;
	height: 1.3em;
	padding: 0 0.45em;
	border-radius: 9999px;
	background: #eaf3fa;
	color: #246991;
	font-size: 0.78em;
	font-weight: 700;
	line-height: 1;
}

.itk-lms-catalog__filter-chip:hover .itk-lms-catalog__filter-chip-count,
.itk-lms-catalog__filter-chip:focus-visible .itk-lms-catalog__filter-chip-count {
	background: #ffffff;
	color: #246991;
}

.itk-lms-catalog__filter-chip.is-active .itk-lms-catalog__filter-chip-count {
	background: rgba(255, 255, 255, 0.22);
	color: #ffffff;
}

.itk-lms-catalog__filter-chip.is-active:hover .itk-lms-catalog__filter-chip-count,
.itk-lms-catalog__filter-chip.is-active:focus-visible .itk-lms-catalog__filter-chip-count {
	background: rgba(255, 255, 255, 0.32);
	color: #ffffff;
}

/* -----------------------------------------------------------------
   Wave 42 — Category description hero.
   Shown when filtering by a single category that has a description.
   Sits between the chip row and the grid. Brand-soft tint background
   with the category name styled as the section heading.
   ----------------------------------------------------------------- */
.itk-lms-catalog__category-hero {
	background: #f3f9fd;
	border: 1px solid #d8e7f2;
	border-radius: 14px;
	padding: 1.25rem 1.5rem;
	margin: 0 0 1.5rem;
}

.itk-lms-catalog__category-hero-title {
	margin: 0 0 0.35rem;
	font-size: 1.25rem;
	font-weight: 700;
	color: #173d5c;
	line-height: 1.25;
}

.itk-lms-catalog__category-hero-desc {
	margin: 0;
	font-size: 1rem;
	line-height: 1.55;
	color: #345168;
	max-width: 70ch;
}

@media (max-width: 600px) {
	.itk-lms-catalog__category-hero {
		padding: 1rem 1.1rem;
	}

	.itk-lms-catalog__category-hero-title {
		font-size: 1.1rem;
	}
}

/* -----------------------------------------------------------------
   Wave 43 — Standalone Video CPT (Wave 40 Phase 1).
   Archive grid reuses .itk-lms-catalog__* primitives. Single page
   gets its own scope so the embed sits in a clean 16:9 box.
   ----------------------------------------------------------------- */

/* Archive: a "play" triangle overlay on every video card poster. */
.itk-lms-video-card .itk-lms-catalog__card-media {
	position: relative;
}

.itk-lms-video-card__play {
	position: absolute;
	inset: 0;
	margin: auto;
	width: 64px;
	height: 64px;
	border-radius: 9999px;
	background: rgba(50, 140, 193, 0.92);
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
	transition: transform 0.18s ease, background 0.18s ease;
}

.itk-lms-video-card__play::after {
	content: '';
	display: block;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 12px 0 12px 18px;
	border-color: transparent transparent transparent #ffffff;
	margin-left: 4px;
}

.itk-lms-video-card:hover .itk-lms-video-card__play,
.itk-lms-video-card:focus-within .itk-lms-video-card__play {
	transform: scale(1.06);
	background: #246991;
}

/* Single video page */
body.single-itk_video .itk-lms-video {
	max-width: 980px;
	margin: 0 auto;
	padding: 2rem 1.5rem 3rem;
}

body.single-itk_video .itk-lms-video__header {
	margin: 0 0 1.5rem;
}

body.single-itk_video .itk-lms-video__title {
	margin: 0 0 0.5rem;
	font-size: clamp( 1.6rem, 2.4vw, 2.25rem );
	color: #173d5c;
	line-height: 1.2;
}

body.single-itk_video .itk-lms-video__excerpt {
	margin: 0;
	font-size: 1.05rem;
	color: #345168;
	line-height: 1.55;
	max-width: 70ch;
}

body.single-itk_video .itk-lms-video__player {
	position: relative;
	padding-top: 56.25%;
	margin: 0 0 1.75rem;
	background: #000000;
	border-radius: 14px;
	overflow: hidden;
}

body.single-itk_video .itk-lms-video__player iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

body.single-itk_video .itk-lms-video__poster {
	margin: 0 0 1.75rem;
	border-radius: 14px;
	overflow: hidden;
}

body.single-itk_video .itk-lms-video__poster img {
	display: block;
	width: 100%;
	height: auto;
}

body.single-itk_video .itk-lms-video__content {
	font-size: 1.05rem;
	line-height: 1.65;
	color: #2b3f54;
	max-width: 70ch;
}

body.single-itk_video .itk-lms-video__content > * {
	margin-top: 0;
	margin-bottom: 1rem;
}

body.single-itk_video .itk-lms-video__back {
	margin-top: 2rem;
	font-size: 0.95rem;
}

body.single-itk_video .itk-lms-video__back a {
	color: #328cc1;
	text-decoration: none;
	font-weight: 600;
}

body.single-itk_video .itk-lms-video__back a:hover,
body.single-itk_video .itk-lms-video__back a:focus-visible {
	color: #246991;
	text-decoration: underline;
}

@media (max-width: 600px) {
	body.single-itk_video .itk-lms-video {
		padding: 1.25rem 1rem 2.5rem;
	}
}

/* Wave 45 — Video paywall (when AccessGate denies). Matches the
   lesson paywall language with brand colors. */
body.single-itk_video .itk-lms-video__paywall {
	padding: 2.5rem 2rem;
	margin: 0 0 1.75rem;
	background: linear-gradient(135deg, #f6f9fc 0%, #e9f1f8 100%);
	border: 1px solid #c3d6e6;
	border-radius: 14px;
	text-align: center;
}

body.single-itk_video .itk-lms-video__paywall-icon {
	font-size: 2.5rem;
	line-height: 1;
	margin-bottom: 0.75rem;
}

body.single-itk_video .itk-lms-video__paywall-title {
	margin: 0 0 0.75rem;
	font-size: 1.5rem;
	color: #173d5c;
}

body.single-itk_video .itk-lms-video__paywall-body {
	margin: 0 0 1.5rem;
	font-size: 1rem;
	color: #2b3f54;
	max-width: 50ch;
	margin-left: auto;
	margin-right: auto;
}

body.single-itk_video .itk-lms-video__paywall-actions {
	display: inline-flex;
	gap: 0.75rem;
	flex-wrap: wrap;
	justify-content: center;
}

body.single-itk_video .itk-lms-video__paywall-cta {
	display: inline-block;
	background: #328cc1;
	color: #ffffff;
	text-decoration: none;
	font-weight: 600;
	padding: 0.65rem 1.25rem;
	border-radius: 999px;
	transition: background 120ms ease;
}

body.single-itk_video .itk-lms-video__paywall-cta:hover,
body.single-itk_video .itk-lms-video__paywall-cta:focus-visible {
	background: #246991;
}

body.single-itk_video .itk-lms-video__paywall-secondary {
	display: inline-block;
	color: #328cc1;
	text-decoration: none;
	font-weight: 600;
	padding: 0.65rem 1.25rem;
}

body.single-itk_video .itk-lms-video__paywall-secondary:hover,
body.single-itk_video .itk-lms-video__paywall-secondary:focus-visible {
	color: #246991;
	text-decoration: underline;
}

/* Wave 46 — EBook archive cards. Reuse catalog grid styles; only
   the play-triangle is swapped for a book icon. */
.itk-lms-ebook-card__icon {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 64px;
	height: 64px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(50, 140, 193, 0.92);
	color: #ffffff;
	font-size: 2rem;
	border-radius: 50%;
	pointer-events: none;
	transition: transform 200ms ease;
}

.itk-lms-catalog__card-media:hover .itk-lms-ebook-card__icon {
	transform: translate(-50%, -50%) scale(1.06);
}

/* Wave 46 — Single EBook layout. */
body.single-itk_ebook .itk-lms-ebook {
	max-width: 920px;
	margin: 0 auto;
	padding: 2rem 1.5rem 3.5rem;
}

body.single-itk_ebook .itk-lms-ebook__title {
	margin: 0 0 0.5rem;
	font-size: 2rem;
	line-height: 1.2;
	color: #173d5c;
}

body.single-itk_ebook .itk-lms-ebook__excerpt {
	margin: 0 0 1.5rem;
	font-size: 1.1rem;
	line-height: 1.5;
	color: #475a6e;
}

body.single-itk_ebook .itk-lms-ebook__reader {
	position: relative;
	height: 80vh;
	min-height: 480px;
	margin: 0 0 1rem;
	background: #f4f6f9;
	border-radius: 14px;
	overflow: hidden;
	border: 1px solid #d8e1ea;
}

body.single-itk_ebook .itk-lms-ebook__reader iframe {
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

body.single-itk_ebook .itk-lms-ebook__download {
	margin: 0 0 2rem;
}

body.single-itk_ebook .itk-lms-ebook__download-cta {
	display: inline-block;
	background: #328cc1;
	color: #ffffff;
	text-decoration: none;
	font-weight: 600;
	padding: 0.65rem 1.25rem;
	border-radius: 999px;
	transition: background 120ms ease;
}

body.single-itk_ebook .itk-lms-ebook__download-cta:hover,
body.single-itk_ebook .itk-lms-ebook__download-cta:focus-visible {
	background: #246991;
}

body.single-itk_ebook .itk-lms-ebook__poster {
	margin: 0 0 1.75rem;
	border-radius: 14px;
	overflow: hidden;
}

body.single-itk_ebook .itk-lms-ebook__poster img {
	display: block;
	width: 100%;
	height: auto;
}

body.single-itk_ebook .itk-lms-ebook__content {
	font-size: 1.05rem;
	line-height: 1.65;
	color: #2b3f54;
	max-width: 70ch;
}

body.single-itk_ebook .itk-lms-ebook__content > * {
	margin-top: 0;
	margin-bottom: 1rem;
}

body.single-itk_ebook .itk-lms-ebook__back {
	margin-top: 2rem;
	font-size: 0.95rem;
}

body.single-itk_ebook .itk-lms-ebook__back a {
	color: #328cc1;
	text-decoration: none;
	font-weight: 600;
}

body.single-itk_ebook .itk-lms-ebook__back a:hover,
body.single-itk_ebook .itk-lms-ebook__back a:focus-visible {
	color: #246991;
	text-decoration: underline;
}

/* EBook paywall — mirrors the video paywall. */
body.single-itk_ebook .itk-lms-ebook__paywall {
	padding: 2.5rem 2rem;
	margin: 0 0 1.75rem;
	background: linear-gradient(135deg, #f6f9fc 0%, #e9f1f8 100%);
	border: 1px solid #c3d6e6;
	border-radius: 14px;
	text-align: center;
}

body.single-itk_ebook .itk-lms-ebook__paywall-icon {
	font-size: 2.5rem;
	line-height: 1;
	margin-bottom: 0.75rem;
}

body.single-itk_ebook .itk-lms-ebook__paywall-title {
	margin: 0 0 0.75rem;
	font-size: 1.5rem;
	color: #173d5c;
}

body.single-itk_ebook .itk-lms-ebook__paywall-body {
	margin: 0 auto 1.5rem;
	font-size: 1rem;
	color: #2b3f54;
	max-width: 50ch;
}

body.single-itk_ebook .itk-lms-ebook__paywall-actions {
	display: inline-flex;
	gap: 0.75rem;
	flex-wrap: wrap;
	justify-content: center;
}

body.single-itk_ebook .itk-lms-ebook__paywall-cta {
	display: inline-block;
	background: #328cc1;
	color: #ffffff;
	text-decoration: none;
	font-weight: 600;
	padding: 0.65rem 1.25rem;
	border-radius: 999px;
	transition: background 120ms ease;
}

body.single-itk_ebook .itk-lms-ebook__paywall-cta:hover,
body.single-itk_ebook .itk-lms-ebook__paywall-cta:focus-visible {
	background: #246991;
}

body.single-itk_ebook .itk-lms-ebook__paywall-secondary {
	display: inline-block;
	color: #328cc1;
	text-decoration: none;
	font-weight: 600;
	padding: 0.65rem 1.25rem;
}

body.single-itk_ebook .itk-lms-ebook__paywall-secondary:hover,
body.single-itk_ebook .itk-lms-ebook__paywall-secondary:focus-visible {
	color: #246991;
	text-decoration: underline;
}

@media (max-width: 600px) {
	body.single-itk_ebook .itk-lms-ebook {
		padding: 1.25rem 1rem 2.5rem;
	}
	body.single-itk_ebook .itk-lms-ebook__reader {
		height: 70vh;
	}
}

/*
 * Wave 48 — Unified search results page
 * (templates/search/results.php).
 *
 * Per-card type badge (top-left over the media), color-coded by
 * CPT, plus a lock indicator (top-right) when AccessGate denies
 * the current user. Reuses the catalog grid + card markup so
 * spacing and motion match the rest of the LMS surfaces.
 */
.itk-lms-search .itk-lms-catalog__card-media {
	position: relative;
}

.itk-lms-search-badge {
	position: absolute;
	top: 0.75rem;
	left: 0.75rem;
	z-index: 2;
	display: inline-block;
	padding: 0.2rem 0.6rem;
	border-radius: 999px;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #fff;
	background: #328cc1;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.itk-lms-search-badge--course {
	background: #328cc1;
}

.itk-lms-search-badge--video {
	background: #6a5acd;
}

.itk-lms-search-badge--ebook {
	background: #2e8b57;
}

.itk-lms-search-badge--bundle {
	background: #c87f0a;
}

.itk-lms-search-lock {
	position: absolute;
	top: 0.75rem;
	right: 0.75rem;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.75rem;
	height: 1.75rem;
	border-radius: 50%;
	background: rgba(20, 20, 20, 0.75);
	color: #fff;
	font-size: 0.85rem;
	line-height: 1;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.itk-lms-search-card.is-locked .itk-lms-catalog__card-image {
	filter: grayscale(0.6) brightness(0.85);
}

.itk-lms-search-card.is-locked .itk-lms-catalog__card-cta {
	background: #6c757d;
	color: #fff;
}

.itk-lms-search-card.is-locked .itk-lms-catalog__card-cta:hover {
	background: #5a6268;
}

/* Reuse the catalog filter chip styles but tighten spacing on the
 * search page since the chip row sits closer to the form. */
.itk-lms-search .itk-lms-catalog__filters {
	margin-top: 0.5rem;
	margin-bottom: 1rem;
}

/*
 * Wave 50 — Bundle / Series CPT templates.
 *
 * Archive grid reuses .itk-lms-catalog__card. Bundle-card stack
 * indicator + single template hero + section grouping.
 */
.itk-lms-bundle-card .itk-lms-bundle-card__stack {
	position: absolute;
	right: 0.75rem;
	bottom: 0.75rem;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 0.4rem;
	background:
		linear-gradient(135deg, #328cc1, #246991);
	box-shadow:
		0 2px 4px rgba(0, 0, 0, 0.25),
		-4px -4px 0 -2px #6a5acd,
		-8px -8px 0 -4px #2e8b57;
}

body.single-itk_bundle .itk-lms-bundle {
	max-width: 1100px;
	margin: 0 auto;
	padding: 2rem 1.5rem 4rem;
}

body.single-itk_bundle .itk-lms-bundle__hero {
	display: grid;
	grid-template-columns: minmax(220px, 320px) 1fr;
	gap: 2rem;
	align-items: center;
	margin-bottom: 2rem;
}

body.single-itk_bundle .itk-lms-bundle__cover-image {
	width: 100%;
	height: auto;
	border-radius: 8px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

body.single-itk_bundle .itk-lms-bundle__eyebrow {
	margin: 0 0 0.4rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-size: 0.75rem;
	color: #328cc1;
	font-weight: 700;
}

body.single-itk_bundle .itk-lms-bundle__title {
	margin: 0 0 0.75rem;
	font-size: 2.25rem;
	line-height: 1.2;
}

body.single-itk_bundle .itk-lms-bundle__lede {
	margin: 0;
	font-size: 1.1rem;
	color: #444;
}

body.single-itk_bundle .itk-lms-bundle__body {
	max-width: 720px;
	margin: 0 auto 2.5rem;
	font-size: 1.05rem;
	line-height: 1.6;
}

body.single-itk_bundle .itk-lms-bundle__section {
	margin: 2.5rem 0;
}

body.single-itk_bundle .itk-lms-bundle__section-title {
	margin: 0 0 1rem;
	font-size: 1.4rem;
	color: #246991;
	border-bottom: 2px solid #c3d6e6;
	padding-bottom: 0.4rem;
}

body.single-itk_bundle .itk-lms-bundle__empty {
	font-style: italic;
	color: #7c2d12;
	background: #fff7ed;
	padding: 1rem 1.25rem;
	border-radius: 8px;
}

body.single-itk_bundle .itk-lms-bundle__paywall {
	background: #f3f6fa;
	border: 1px solid #c3d6e6;
	border-radius: 8px;
	padding: 2rem 1.5rem;
	text-align: center;
	margin: 2rem 0;
}

body.single-itk_bundle .itk-lms-bundle__paywall h2 {
	margin: 0 0 0.75rem;
	color: #246991;
}

body.single-itk_bundle .itk-lms-bundle__paywall-cta {
	display: inline-block;
	margin-top: 0.5rem;
	padding: 0.75rem 1.5rem;
	background: #328cc1;
	color: #fff;
	border-radius: 999px;
	text-decoration: none;
	font-weight: 700;
}

body.single-itk_bundle .itk-lms-bundle__paywall-cta:hover,
body.single-itk_bundle .itk-lms-bundle__paywall-cta:focus-visible {
	background: #246991;
	color: #fff;
}

@media (max-width: 720px) {
	body.single-itk_bundle .itk-lms-bundle__hero {
		grid-template-columns: 1fr;
	}
}

/* -----------------------------------------------------------------
   Wave 59 — Card-media thumbnail fallback.

   When a post (Course / Video / EBook / Bundle / search result /
   single-bundle member) has no featured image, the .itk-lms-catalog__
   card-media element gets the --no-thumb base modifier plus a per-CPT
   color variant. Renders a brand-tinted gradient panel with a large
   semi-transparent monogram (first letter of title) so cards look
   intentional even before real thumbnails are uploaded.

   Existing decorative overlays (video play, ebook icon, bundle stack,
   search badge, ribbon, lock) still render on top of the gradient.
   ----------------------------------------------------------------- */

.itk-lms-catalog .itk-lms-catalog__card-media--no-thumb {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	background:
		linear-gradient(135deg, #328cc1 0%, #246991 100%);
	color: rgba(255, 255, 255, 0.92);
}

.itk-lms-catalog .itk-lms-catalog__card-media-monogram {
	font-size: clamp(3.5rem, 8vw, 5.5rem);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.02em;
	color: rgba(255, 255, 255, 0.78);
	text-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
	pointer-events: none;
	user-select: none;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Per-CPT color variants — match the search-badge palette so the
 * placeholder reads the same "this is a video / ebook / bundle" cue
 * as a result card with a real thumbnail. */
.itk-lms-catalog .itk-lms-catalog__card-media--no-thumb-course {
	background: linear-gradient(135deg, #328cc1 0%, #246991 100%);
}

.itk-lms-catalog .itk-lms-catalog__card-media--no-thumb-video {
	background: linear-gradient(135deg, #6a5acd 0%, #4a3eb0 100%);
}

.itk-lms-catalog .itk-lms-catalog__card-media--no-thumb-ebook {
	background: linear-gradient(135deg, #2e8b57 0%, #1f6b3f 100%);
}

.itk-lms-catalog .itk-lms-catalog__card-media--no-thumb-bundle {
	background: linear-gradient(135deg, #c87f0a 0%, #8f5a07 100%);
}

/* Soft hover lift on the monogram so the card still feels interactive
 * even when there's no real image to scale. */
.itk-lms-catalog .itk-lms-catalog__card:hover .itk-lms-catalog__card-media-monogram,
.itk-lms-catalog .itk-lms-catalog__card:focus-within .itk-lms-catalog__card-media-monogram {
	transform: scale(1.04);
	transition: transform 0.4s ease;
}

/* When the video card has no thumb, the play circle's blue-on-blue
 * needs a little extra contrast. Lift the play background opacity. */
.itk-lms-video-card .itk-lms-catalog__card-media--no-thumb .itk-lms-video-card__play {
	background: rgba(255, 255, 255, 0.22);
	box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.4) inset;
}

/* Same for the ebook icon — keeps it readable on a green gradient. */
.itk-lms-catalog .itk-lms-catalog__card-media--no-thumb .itk-lms-ebook-card__icon {
	background: rgba(255, 255, 255, 0.22);
	box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.4) inset;
}

/* On the locked search card the monogram should also fade like the
 * thumbnail image would have. */
.itk-lms-search-card.is-locked .itk-lms-catalog__card-media-monogram {
	filter: grayscale(0.6) brightness(0.85);
}

/* -----------------------------------------------------------------
   Wave 62 — Pagination polish + card excerpt clamp.

   The_posts_pagination() ships generic theme-default markup
   (.page-numbers links) that didn't visually match the rest of
   the LMS. Wave 62 styles those page-number links as brand chip
   pills matching the .itk-lms-catalog__filter-chip aesthetic.
   Also clamps card excerpt to 3 lines so cards have consistent
   heights even when admins write long descriptions.
   ----------------------------------------------------------------- */

/* Pagination container. Center the page-numbers row and give it
 * breathing room above the next page footer. */
.itk-lms-catalog .itk-lms-catalog__pagination {
	margin-top: 2.5rem;
	text-align: center;
}

.itk-lms-catalog .itk-lms-catalog__pagination .nav-links {
	display: inline-flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.4rem;
}

/* All page-number links — match the filter chip styling. */
.itk-lms-catalog .itk-lms-catalog__pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.4rem;
	padding: 0.4rem 0.85rem;
	border-radius: 9999px;
	background: #ffffff;
	color: #246991;
	border: 1px solid #cfe0ec;
	font-size: 0.92rem;
	font-weight: 600;
	text-decoration: none;
	line-height: 1.25;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.itk-lms-catalog .itk-lms-catalog__pagination .page-numbers:hover,
.itk-lms-catalog .itk-lms-catalog__pagination .page-numbers:focus-visible {
	background: #eaf3fa;
	color: #246991;
	border-color: #328cc1;
	outline: none;
}

/* The current page chip — solid brand blue like an active filter chip. */
.itk-lms-catalog .itk-lms-catalog__pagination .page-numbers.current {
	background: #328cc1;
	color: #ffffff;
	border-color: #328cc1;
	cursor: default;
}

.itk-lms-catalog .itk-lms-catalog__pagination .page-numbers.current:hover {
	background: #246991;
	border-color: #246991;
}

/* Prev / Next labels — keep the chip shape but signal direction with
 * a little extra horizontal padding. */
.itk-lms-catalog .itk-lms-catalog__pagination .page-numbers.prev,
.itk-lms-catalog .itk-lms-catalog__pagination .page-numbers.next {
	padding: 0.4rem 1.1rem;
}

/* Dots (...) — render as a flat label, not a chip. */
.itk-lms-catalog .itk-lms-catalog__pagination .page-numbers.dots {
	background: transparent;
	border-color: transparent;
	min-width: 0;
	padding: 0.4rem 0.3rem;
}

/* WP wraps the page-numbers in a `<nav class="navigation pagination">`
 * with a screen-reader-only h2. Hide it visually. */
.itk-lms-catalog .itk-lms-catalog__pagination .screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	width: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	word-wrap: normal !important;
}

/* Mobile — slightly tighter pagination chip footprint. */
@media (max-width: 600px) {
	.itk-lms-catalog .itk-lms-catalog__pagination .page-numbers {
		font-size: 0.88rem;
		padding: 0.35rem 0.7rem;
		min-width: 2.2rem;
	}
	.itk-lms-catalog .itk-lms-catalog__pagination .page-numbers.prev,
	.itk-lms-catalog .itk-lms-catalog__pagination .page-numbers.next {
		padding: 0.35rem 0.9rem;
	}
}

/* Card excerpt clamp. Limit to 3 lines so a long excerpt doesn't
 * stretch one card vertically and break the grid alignment. The
 * line-clamp value matches the average card height post-Wave 26
 * across course / video / ebook / bundle cards. */
.itk-lms-catalog .itk-lms-catalog__card-excerpt {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* ==========================================================================
 * Wave 65 — Single course page polish (v0.65.0)
 *
 * The single-course page is where buyers spend the most time
 * post-purchase. Pre-Wave 65 there were ZERO mobile breakpoint
 * rules on body.single-itk_course, so on narrow viewports the
 * hero, paywall, lesson list, and celebration screens all
 * carried desktop padding and font sizes.
 *
 * This block adds:
 *   1. Typography rhythm normalization. Section headings
 *      (.itk-lms-course__lessons-heading, .itk-lms-course__paywall-title,
 *      .itk-lms-course__certificate-title, .itk-lms-celebration__title)
 *      all land on the same 1.5rem desktop size with consistent
 *      letter-spacing + weight. Stops the page feeling like four
 *      different waves stitched together.
 *   2. Paywall + certificate-cta visual consistency. Same radius,
 *      same shadow weight, same internal gap rhythm.
 *   3. Mobile breakpoint at 900px — moderate tightening of hero
 *      vertical padding, paywall + celebration padding.
 *   4. Mobile breakpoint at 600px — real mobile tightening:
 *      full-width CTA, smaller hero padding, tightened lesson
 *      list row gap + index circle, stacked celebration hero.
 * ========================================================================== */

/* Heading rhythm — keep all post-hero section headings in sync. */
body.single-itk_course .itk-lms-course__lessons-heading,
body.single-itk_course .itk-lms-course__paywall-title,
body.single-itk_course .itk-lms-course__certificate-title,
body.single-itk_course .itk-lms-celebration__title {
	font-size: 1.5rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.25;
}

/* Paywall + certificate-cta: same radius, same shadow weight, same gap. */
body.single-itk_course .itk-lms-course__paywall {
	box-shadow: 0 4px 14px rgba(36, 105, 145, 0.06);
}
body.single-itk_course .itk-lms-course__certificate-cta {
	box-shadow: 0 4px 14px rgba(36, 105, 145, 0.06);
}

/* Lesson list row — slightly tighter padding for vertical rhythm
 * and a small inner shadow lift on the index circle so it reads
 * as a discrete element rather than a flat pill. */
body.single-itk_course .itk-lms-lesson-list__index {
	box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.04);
}
body.single-itk_course .itk-lms-lesson-list__item.is-complete .itk-lms-lesson-list__index {
	box-shadow: inset 0 0 0 1px rgba(36, 105, 145, 0.35);
}

/* Tablet (<= 900px) — moderate tightening. */
@media (max-width: 900px) {
	body.single-itk_course .itk-lms-course__hero-block {
		padding: 3rem 1.25rem 2.75rem;
		margin: 0 -1.25rem 2rem;
	}
	body.single-itk_course .itk-lms-course__lessons {
		margin-top: 2.25rem;
		padding-top: 1.5rem;
	}
	body.single-itk_course .itk-lms-course__paywall {
		padding: 1.75rem 1.5rem;
		margin: 2rem 0 1.5rem;
	}
	body.single-itk_course .itk-lms-celebration {
		padding: 1.25rem 1.25rem 1.5rem;
	}
	body.single-itk_course .itk-lms-course__certificate-cta {
		padding: 1.25rem 1.25rem;
	}
}

/* Mobile (<= 600px) — real tightening. */
@media (max-width: 600px) {
	/* Hero — less vertical, smaller title, full-width CTA. */
	body.single-itk_course .itk-lms-course__hero-block {
		padding: 2.25rem 1rem 2rem;
		margin: 0 -1rem 1.75rem;
	}
	body.single-itk_course .itk-lms-course__hero-block .itk-lms-course__title {
		font-size: clamp(1.75rem, 7vw, 2.25rem);
		margin: 0 0 0.75rem;
	}
	body.single-itk_course .itk-lms-course__excerpt {
		font-size: 1rem;
		margin: 0 auto 1.25rem;
	}
	body.single-itk_course .itk-lms-course__cta-row {
		width: 100%;
	}
	body.single-itk_course .itk-lms-course__cta-primary,
	body.single-itk_course .itk-lms-course__cta-secondary {
		width: 100%;
		justify-content: center;
		padding: 0.85rem 1.25rem;
	}
	body.single-itk_course .itk-lms-course__cta-subline {
		font-size: 0.85rem;
		text-align: center;
	}

	/* Lessons — tighter row padding + smaller index circle. */
	body.single-itk_course .itk-lms-course__lessons-heading,
	body.single-itk_course .itk-lms-course__paywall-title,
	body.single-itk_course .itk-lms-course__certificate-title,
	body.single-itk_course .itk-lms-celebration__title {
		font-size: 1.25rem;
	}
	body.single-itk_course .itk-lms-course__lessons {
		margin-top: 1.75rem;
		padding-top: 1.25rem;
	}
	body.single-itk_course .itk-lms-lesson-list__link,
	body.single-itk_course .itk-lms-lesson-list__row {
		padding: 0.7rem 0.75rem;
		gap: 0.75rem;
	}
	body.single-itk_course .itk-lms-lesson-list__index {
		width: 1.75rem;
		height: 1.75rem;
		font-size: 0.8rem;
	}
	body.single-itk_course .itk-lms-lesson-list__title {
		font-size: 0.95rem;
	}
	body.single-itk_course .itk-lms-lesson-list__excerpt {
		font-size: 0.82rem;
		-webkit-line-clamp: 2;
		line-clamp: 2;
	}
	body.single-itk_course .itk-lms-lesson-list__status {
		font-size: 1.2rem;
	}
	body.single-itk_course .itk-lms-lesson-list__status--dripped {
		font-size: 0.75rem;
	}

	/* Paywall — full-width CTA, tighter vertical. */
	body.single-itk_course .itk-lms-course__paywall {
		padding: 1.5rem 1.15rem;
		margin: 1.75rem 0 1.25rem;
	}
	body.single-itk_course .itk-lms-course__paywall-body {
		font-size: 0.95rem;
	}
	body.single-itk_course .itk-lms-course__paywall-actions {
		width: 100%;
	}
	body.single-itk_course .itk-lms-course__paywall-cta {
		width: 100%;
		text-align: center;
		padding: 0.85rem 1rem;
	}

	/* Celebration — stack hero copy below the icon, smaller next grid. */
	body.single-itk_course .itk-lms-celebration {
		padding: 1.25rem 1rem 1.5rem;
	}
	body.single-itk_course .itk-lms-celebration__hero {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.5rem;
	}
	body.single-itk_course .itk-lms-celebration__icon {
		font-size: 2rem;
	}
	body.single-itk_course .itk-lms-celebration__subtitle {
		font-size: 0.9rem;
	}
	body.single-itk_course .itk-lms-celebration__cert-cta {
		width: 100%;
		justify-content: center;
	}
	body.single-itk_course .itk-lms-celebration__next-grid {
		grid-template-columns: 1fr;
		gap: 0.75rem;
	}

	/* Certificate inline CTA — stack icon/body/link vertically. */
	body.single-itk_course .itk-lms-course__certificate-cta {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.85rem;
		padding: 1.25rem 1.15rem;
	}
	body.single-itk_course .itk-lms-course__certificate-cta-link {
		width: 100%;
		text-align: center;
	}

	/* Enrollment flash banner — tighter vertical. */
	body.single-itk_course .itk-lms-course__finish-flash {
		padding: 0.85rem 1rem;
		gap: 0.6rem;
	}
}

/* ==========================================================================
 * Wave 69 — Single lesson page mobile polish (v0.66.0)
 *
 * Sibling pass to Wave 65. Pre-Wave 69 the single-lesson page had
 * exactly TWO mobile-aware rules: layout collapse at 900px and
 * pager stack at 600px. Everything else carried desktop padding
 * and font sizes on narrow viewports — title clamp went down to
 * 1.6rem but breadcrumb, content, complete UI, paywall, sidebar
 * stayed full size.
 *
 * Paywall title was 1.4rem which drifted from Wave 65's 1.5rem
 * normalization. Brought into the same rhythm.
 *
 * This block adds:
 *   1. Paywall title size + shadow consistency with Wave 65.
 *   2. Tablet breakpoint (<= 900px) — outer padding tightened,
 *      sidebar margin gains breathing room above content.
 *   3. Mobile breakpoint (<= 600px) — tighter outer padding,
 *      breadcrumb stacks to column, title clamp shrinks, content
 *      font-size sized for thumb-reading, full-width complete +
 *      paywall CTAs, sidebar tightens.
 * ========================================================================== */

/* Heading rhythm — lesson paywall title now matches Wave 65. */
body.single-itk_lesson .itk-lms-lesson__paywall-title {
	font-size: 1.5rem;
}

/* Paywall shadow consistency with course-page paywall (Wave 65). */
body.single-itk_lesson .itk-lms-lesson__paywall {
	box-shadow: 0 4px 14px rgba(36, 105, 145, 0.06);
}

/* Tablet (<= 900px) — moderate tightening. */
@media (max-width: 900px) {
	body.single-itk_lesson .itk-lms-lesson {
		padding: 1.5rem 1rem 3rem;
	}
	body.single-itk_lesson .itk-lms-lesson__layout {
		gap: 1.75rem;
	}
	body.single-itk_lesson .itk-lms-lesson__paywall {
		padding: 2rem 1.5rem;
	}
	body.single-itk_lesson .itk-lms-lesson__complete {
		padding: 1.25rem 1.25rem;
	}
}

/* Mobile (<= 600px) — real tightening. */
@media (max-width: 600px) {
	body.single-itk_lesson .itk-lms-lesson {
		padding: 1.25rem 0.85rem 2.5rem;
	}

	/* Breadcrumb stacks so course title + progress wrap cleanly. */
	body.single-itk_lesson .itk-lms-lesson__breadcrumb {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.35rem;
		margin: 0 0 1rem;
		font-size: 0.88rem;
	}
	body.single-itk_lesson .itk-lms-lesson__breadcrumb-progress {
		font-size: 0.82rem;
	}

	/* Lesson title — smaller clamp on real mobile. */
	body.single-itk_lesson .itk-lms-lesson__title {
		font-size: clamp(1.4rem, 6vw, 1.85rem);
		margin: 0 0 1rem;
	}

	/* Hero image — no rounded corners that get clipped against
	 * narrow padding. Keep aspect ratio. */
	body.single-itk_lesson .itk-lms-lesson__hero {
		margin: 0 -0.85rem 1.5rem;
	}
	body.single-itk_lesson .itk-lms-lesson__hero img {
		border-radius: 0;
		aspect-ratio: 16 / 10;
	}

	/* Body content — slightly smaller font + tighter rhythm. */
	body.single-itk_lesson .itk-lms-lesson__content {
		font-size: 1rem;
		line-height: 1.65;
	}
	body.single-itk_lesson .itk-lms-lesson__content p {
		margin: 0 0 1rem;
	}

	/* Mark Complete UI — tighter padding, full-width button. */
	body.single-itk_lesson .itk-lms-lesson__complete {
		padding: 1.1rem 1rem;
		margin: 2rem 0 0;
		gap: 0.7rem;
	}
	body.single-itk_lesson .itk-lms-lesson__complete-prompt,
	body.single-itk_lesson .itk-lms-lesson__complete-status {
		font-size: 0.95rem;
	}
	body.single-itk_lesson .itk-lms-lesson__complete-btn {
		display: block;
		width: 100%;
		text-align: center;
		padding: 0.85rem 1rem;
	}
	body.single-itk_lesson .itk-lms-lesson__complete-btn--undo {
		display: inline-block;
		width: auto;
	}

	/* Pager — already stacks at 600px (from Wave 7). Tighten
	 * inner padding and font sizes. */
	body.single-itk_lesson .itk-lms-lesson__pager {
		gap: 0.6rem;
		margin: 2rem 0 0;
		padding-top: 1.25rem;
	}
	body.single-itk_lesson .itk-lms-lesson__pager-link {
		padding: 0.85rem 0.95rem;
	}
	body.single-itk_lesson .itk-lms-lesson__pager-direction {
		font-size: 0.78rem;
	}
	body.single-itk_lesson .itk-lms-lesson__pager-title {
		font-size: 0.95rem;
	}

	/* Paywall — tighter, stacked icon+title, full-width CTA. */
	body.single-itk_lesson .itk-lms-lesson__paywall {
		padding: 1.5rem 1.15rem;
		margin: 1.5rem 0 0;
		gap: 0.75rem;
	}
	body.single-itk_lesson .itk-lms-lesson__paywall-icon {
		width: 2.5rem;
		height: 2.5rem;
		font-size: 1.4rem;
	}
	body.single-itk_lesson .itk-lms-lesson__paywall-title {
		font-size: 1.25rem;
	}
	body.single-itk_lesson .itk-lms-lesson__paywall-body {
		font-size: 0.95rem;
	}
	body.single-itk_lesson .itk-lms-lesson__paywall-actions {
		width: 100%;
		flex-direction: column;
		align-items: stretch;
		gap: 0.5rem;
	}
	body.single-itk_lesson .itk-lms-lesson__paywall-cta {
		display: block;
		width: 100%;
		text-align: center;
		padding: 0.85rem 1rem;
	}
	body.single-itk_lesson .itk-lms-lesson__paywall-secondary {
		align-self: center;
		padding: 0.65rem 0.5rem;
	}

	/* Sidebar — tighter when stacked above content. */
	body.single-itk_lesson .itk-lms-lesson__sidebar {
		padding: 0.85rem 0.75rem;
	}
	body.single-itk_lesson .itk-lms-lesson__sidebar-link {
		padding: 0.55rem 0.6rem;
		gap: 0.6rem;
	}
	body.single-itk_lesson .itk-lms-lesson__sidebar-index {
		width: 1.5rem;
		height: 1.5rem;
		font-size: 0.78rem;
	}
	body.single-itk_lesson .itk-lms-lesson__sidebar-title {
		font-size: 0.88rem;
	}
}

/* ==========================================================================
 * Wave 66 — My Courses learner dashboard (v0.67.0)
 *
 * Public route /{slug}/my/ rendered by DashboardController.
 * Three sections (Continue / Not started / Completed) with a
 * responsive course-card grid. Cards carry course thumbnail
 * (or brand monogram fallback), title, lesson count, progress
 * bar, and a contextual CTA (Continue / Start / Review).
 *
 * Reuses the heading rhythm from Wave 65 (1.5rem desktop /
 * 1.25rem mobile) and the same shadow weight as the paywall +
 * certificate-cta card family.
 * ========================================================================== */

.itk-lms-dashboard {
	max-width: 1240px;
	margin: 0 auto;
	padding: 2rem 1.25rem 4rem;
	color: var(--itk-text, #1a202c);
}

.itk-lms-dashboard__inner {
	display: flex;
	flex-direction: column;
	gap: 2.5rem;
}

.itk-lms-dashboard__header {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}

.itk-lms-dashboard__eyebrow {
	margin: 0;
	font-size: 0.9rem;
}

.itk-lms-dashboard__eyebrow a {
	color: var(--itk-blue, #328cc1);
	text-decoration: none;
	font-weight: 600;
}

.itk-lms-dashboard__eyebrow a:hover,
.itk-lms-dashboard__eyebrow a:focus {
	color: var(--itk-blue-hover, #246991);
	text-decoration: underline;
}

/* Wave 91 — eyebrow gets a second link ("My bookmarks") next to
   "Back to catalog". Soft middle dot separator. */
.itk-lms-dashboard__eyebrow-sep {
	display: inline-block;
	margin: 0 0.5rem;
	color: #94a3b8;
	font-weight: 400;
}

.itk-lms-dashboard__title {
	margin: 0;
	font-size: clamp(1.75rem, 3.5vw, 2.5rem);
	font-weight: 800;
	letter-spacing: -0.015em;
	line-height: 1.15;
}

.itk-lms-dashboard__subtitle {
	margin: 0;
	font-size: 1.05rem;
	color: var(--itk-text-muted, #4a5568);
}

.itk-lms-dashboard__empty {
	padding: 2rem 1.75rem;
	background: linear-gradient(135deg, #eff6ff, #ffffff);
	border: 1px solid #c7d2fe;
	border-radius: var(--itk-card-radius, 14px);
	box-shadow: 0 4px 14px rgba(36, 105, 145, 0.06);
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
}

.itk-lms-dashboard__empty p {
	margin: 0;
	color: var(--itk-text-muted, #4a5568);
	line-height: 1.55;
}

.itk-lms-dashboard__empty-cta {
	display: inline-block;
	padding: 0.85rem 1.5rem;
	background: var(--itk-blue, #328cc1);
	color: #ffffff;
	font-weight: 600;
	text-decoration: none;
	border-radius: 9999px;
	box-shadow: 0 1px 2px rgba(31, 111, 235, 0.25), 0 4px 10px rgba(31, 111, 235, 0.18);
	transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}

.itk-lms-dashboard__empty-cta:hover,
.itk-lms-dashboard__empty-cta:focus {
	background: var(--itk-blue-hover, #246991);
	color: #ffffff;
	transform: translateY(-1px);
	box-shadow: 0 2px 4px rgba(31, 111, 235, 0.3), 0 6px 14px rgba(31, 111, 235, 0.22);
}

.itk-lms-dashboard__section {
	display: flex;
	flex-direction: column;
	gap: 1.1rem;
}

.itk-lms-dashboard__section-heading {
	margin: 0;
	font-size: 1.5rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.25;
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
}

.itk-lms-dashboard__section-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.6rem;
	padding: 0.15rem 0.55rem;
	background: #eef4f9;
	color: var(--itk-blue-hover, #246991);
	border-radius: 9999px;
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.02em;
}

.itk-lms-dashboard__grid {
	display: grid;
	gap: 1.25rem;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.itk-lms-dashboard__card {
	display: flex;
	flex-direction: column;
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: var(--itk-card-radius, 14px);
	overflow: hidden;
	box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
	transition: box-shadow 0.2s ease, transform 0.15s ease, border-color 0.15s ease;
}

.itk-lms-dashboard__card:hover {
	box-shadow: 0 8px 24px rgba(15, 23, 42, 0.1);
	transform: translateY(-2px);
	border-color: #cfe0ec;
}

.itk-lms-dashboard__card--completed {
	border-color: #bbf7d0;
}
.itk-lms-dashboard__card--completed:hover {
	border-color: #86efac;
}

.itk-lms-dashboard__card-media {
	position: relative;
	display: block;
	aspect-ratio: 16 / 9;
	background: linear-gradient(135deg, #eef4f9 0%, #dde9f1 100%);
	overflow: hidden;
	color: var(--itk-blue-hover, #246991);
	text-decoration: none;
}

.itk-lms-dashboard__card-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.itk-lms-dashboard__card-monogram {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 3.5rem;
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--itk-blue-hover, #246991);
	opacity: 0.55;
}

.itk-lms-dashboard__card-flag {
	position: absolute;
	top: 0.6rem;
	right: 0.6rem;
	padding: 0.18rem 0.6rem;
	background: #16a34a;
	color: #ffffff;
	border-radius: 9999px;
	font-size: 0.7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	box-shadow: 0 2px 6px rgba(22, 163, 74, 0.3);
}

.itk-lms-dashboard__card-body {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	padding: 1rem 1.1rem 1.1rem;
	flex: 1 1 auto;
}

.itk-lms-dashboard__card-title {
	margin: 0;
	font-size: 1.1rem;
	font-weight: 700;
	line-height: 1.25;
}

.itk-lms-dashboard__card-title a {
	color: inherit;
	text-decoration: none;
}

.itk-lms-dashboard__card-title a:hover,
.itk-lms-dashboard__card-title a:focus {
	color: var(--itk-blue, #328cc1);
}

.itk-lms-dashboard__card-meta {
	margin: 0;
	font-size: 0.85rem;
	color: var(--itk-text-muted, #4a5568);
}

.itk-lms-dashboard__progress {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin-top: 0.1rem;
}

.itk-lms-dashboard__progress-bar {
	flex: 1 1 auto;
	height: 8px;
	background: #eef4f9;
	border-radius: 9999px;
	overflow: hidden;
}

.itk-lms-dashboard__progress-fill {
	display: block;
	height: 100%;
	background: linear-gradient(90deg, var(--itk-blue, #328cc1), var(--itk-blue-hover, #246991));
	border-radius: 9999px;
	transition: width 0.3s ease;
}

.itk-lms-dashboard__card--completed .itk-lms-dashboard__progress-fill {
	background: linear-gradient(90deg, #22c55e, #16a34a);
}

.itk-lms-dashboard__progress-label {
	font-size: 0.78rem;
	font-weight: 700;
	color: var(--itk-blue-hover, #246991);
	min-width: 2.5rem;
	text-align: right;
}

.itk-lms-dashboard__card--completed .itk-lms-dashboard__progress-label {
	color: #16a34a;
}

.itk-lms-dashboard__card-actions {
	margin-top: auto;
	padding-top: 0.4rem;
}

.itk-lms-dashboard__card-cta {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.6rem 1rem;
	background: var(--itk-blue, #328cc1);
	color: #ffffff;
	border-radius: 9999px;
	font-weight: 600;
	font-size: 0.92rem;
	text-decoration: none;
	box-shadow: 0 1px 2px rgba(31, 111, 235, 0.2), 0 3px 8px rgba(31, 111, 235, 0.14);
	transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}

.itk-lms-dashboard__card-cta:hover,
.itk-lms-dashboard__card-cta:focus {
	background: var(--itk-blue-hover, #246991);
	color: #ffffff;
	transform: translateY(-1px);
	box-shadow: 0 2px 4px rgba(31, 111, 235, 0.3), 0 6px 12px rgba(31, 111, 235, 0.2);
}

.itk-lms-dashboard__card--completed .itk-lms-dashboard__card-cta {
	background: #16a34a;
	box-shadow: 0 1px 2px rgba(22, 163, 74, 0.25), 0 3px 8px rgba(22, 163, 74, 0.18);
}

.itk-lms-dashboard__card--completed .itk-lms-dashboard__card-cta:hover,
.itk-lms-dashboard__card--completed .itk-lms-dashboard__card-cta:focus {
	background: #15803d;
}

.itk-lms-dashboard__card-arrow {
	font-size: 1.05rem;
	line-height: 1;
}

@media (max-width: 900px) {
	.itk-lms-dashboard {
		padding: 1.5rem 1rem 3rem;
	}
	.itk-lms-dashboard__inner {
		gap: 2rem;
	}
	.itk-lms-dashboard__grid {
		grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
		gap: 1rem;
	}
}

@media (max-width: 600px) {
	.itk-lms-dashboard {
		padding: 1.25rem 0.85rem 2.5rem;
	}
	.itk-lms-dashboard__title {
		font-size: clamp(1.5rem, 6vw, 1.85rem);
	}
	.itk-lms-dashboard__subtitle {
		font-size: 0.95rem;
	}
	.itk-lms-dashboard__section-heading {
		font-size: 1.25rem;
	}
	.itk-lms-dashboard__grid {
		grid-template-columns: 1fr;
		gap: 0.85rem;
	}
	.itk-lms-dashboard__card-cta {
		width: 100%;
		justify-content: center;
	}
	.itk-lms-dashboard__empty {
		padding: 1.5rem 1.15rem;
	}
	.itk-lms-dashboard__empty-cta {
		display: block;
		width: 100%;
		text-align: center;
	}
}

/* ==========================================================================
 * Wave 67 — Catalog sort dropdown (v0.68.0)
 *
 * Right-aligned compact sort control above the results grid on all
 * four archives (course / video / ebook / bundle). Sits below the
 * category chip nav.
 *
 * The control uses a real <select> for native a11y. Inline onchange
 * navigates with the chosen value, preserving all other query params.
 * ========================================================================== */

.itk-lms-catalog .itk-lms-catalog__sort {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 0.5rem;
	margin: 0 0 1rem;
}

.itk-lms-catalog .itk-lms-catalog__sort-label {
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--itk-text-muted, #4a5568);
	letter-spacing: 0.02em;
}

.itk-lms-catalog .itk-lms-catalog__sort-select {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	padding: 0.4rem 2rem 0.4rem 0.85rem;
	background-color: #ffffff;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23246991' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.7rem center;
	background-size: 12px 8px;
	border: 1px solid #cfe0ec;
	border-radius: 9999px;
	color: var(--itk-blue-hover, #246991);
	font-size: 0.88rem;
	font-weight: 600;
	line-height: 1.25;
	cursor: pointer;
	transition: border-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
}

.itk-lms-catalog .itk-lms-catalog__sort-select:hover {
	border-color: var(--itk-blue, #328cc1);
	color: var(--itk-blue, #328cc1);
}

.itk-lms-catalog .itk-lms-catalog__sort-select:focus,
.itk-lms-catalog .itk-lms-catalog__sort-select:focus-visible {
	outline: none;
	border-color: var(--itk-blue, #328cc1);
	box-shadow: 0 0 0 3px rgba(50, 140, 193, 0.18);
}

@media (max-width: 600px) {
	.itk-lms-catalog .itk-lms-catalog__sort {
		justify-content: flex-start;
		margin: 0 0 0.85rem;
	}
	.itk-lms-catalog .itk-lms-catalog__sort-select {
		flex: 1 1 auto;
		max-width: 100%;
	}
}

/* ==========================================================================
 * Wave 70 — Lesson inner-block mobile polish (v0.71.0)
 *
 * Sibling pass to Wave 65 (single course page) + Wave 69 (single
 * lesson chrome). Those passes covered the outer page layout. Wave
 * 70 tightens the inner blocks rendered inside the lesson body:
 * quiz, deliverables / resources, bookmark button, discussions /
 * comments.
 *
 * Pre-Wave 70 these blocks carried desktop padding + desktop font
 * sizes on phones. Quiz card was 1.5rem padding on a 360px viewport
 * (so each question card had ~330px of usable width minus padding).
 * Submit buttons were inline pills wrapping awkwardly. Discussion
 * textareas inherited `font: inherit` which on most themes is 1rem
 * (16px) -- borderline for iOS focus-zoom prevention. Force 16px
 * minimum on phones.
 *
 * All rules are additive -- no existing selectors changed. Pure
 * media-query overrides for tablet (<= 900px) and mobile (<= 600px).
 * ========================================================================== */

/* Tablet (<= 900px) -- moderate tightening. */
@media (max-width: 900px) {
	/* Quiz card padding tightens, title and question text shrink slightly. */
	body.single-itk_lesson .itk-lms-quiz {
		padding: 1.25rem 1.25rem 1.5rem;
	}
	body.single-itk_lesson .itk-lms-quiz__title {
		font-size: 1.35rem;
	}
	body.single-itk_lesson .itk-lms-quiz__question {
		padding: 0.9rem 1rem;
	}

	/* Discussions outer padding stays; comment-children indent comes in
	 * so deeply-nested threads don't push text off-screen. */
	body.single-itk_lesson .itk-lms-lesson-discussions__list .children {
		margin-left: 1rem;
	}
}

/* Mobile (<= 600px) -- real tightening + tap-target / iOS safety. */
@media (max-width: 600px) {
	/* ----- Quiz ----- */
	body.single-itk_lesson .itk-lms-quiz {
		padding: 1rem 0.9rem 1.25rem;
		margin: 1.5rem 0;
	}
	body.single-itk_lesson .itk-lms-quiz__title {
		font-size: 1.2rem;
	}
	body.single-itk_lesson .itk-lms-quiz__sub {
		font-size: 0.9rem;
	}
	body.single-itk_lesson .itk-lms-quiz__question {
		padding: 0.85rem 0.85rem;
		margin: 0 0 0.7rem;
	}
	body.single-itk_lesson .itk-lms-quiz__question-text {
		font-size: 1rem;
		display: block; /* On mobile let the question wrap on its own line */
	}
	/* Bump choice label tap target >=44px tall for iOS HIG. */
	body.single-itk_lesson .itk-lms-quiz__choice label {
		padding: 0.7rem 0.6rem;
		min-height: 44px;
		align-items: center;
	}
	/* Full-width submit button -- easier thumb target than inline pill. */
	body.single-itk_lesson .itk-lms-quiz__actions {
		flex-direction: column;
		gap: 0.6rem;
	}
	body.single-itk_lesson .itk-lms-quiz__submit {
		display: block;
		width: 100%;
		justify-content: center;
		text-align: center;
		padding: 0.85rem 1rem;
	}
	body.single-itk_lesson .itk-lms-quiz__wrong-list {
		padding: 0.85rem 0.9rem;
	}
	body.single-itk_lesson .itk-lms-quiz__passed-badge {
		font-size: 1rem;
	}

	/* ----- Deliverables / Resources ----- */
	/* Resource link padding shrinks but keeps tap target >=44px via
	 * min-height. Filename can wrap aggressively. */
	.itk-lms-lesson__resources {
		padding: 1.1rem 0.95rem;
	}
	.itk-lms-lesson__resources-heading {
		font-size: 1.1rem;
	}
	.itk-lms-lesson__resources-link {
		padding: 0.7rem 0.85rem;
		min-height: 44px;
		gap: 0.55rem;
	}
	.itk-lms-lesson__resources-label {
		font-size: 0.98rem;
	}
	.itk-lms-lesson__resources-filemeta {
		font-size: 0.78rem;
	}

	/* ----- Bookmark button ----- */
	/* Bump tap target >=44px and keep the star + label readable. */
	.itk-lms-bookmark-btn {
		min-height: 44px;
		padding: 0.65rem 0.95rem;
		font-size: 0.95rem;
	}

	/* ----- Discussions ----- */
	body.single-itk_lesson .itk-lms-lesson-discussions {
		padding: 1.25rem 1rem;
	}
	body.single-itk_lesson .itk-lms-lesson-discussions__heading {
		font-size: 1.15rem;
	}
	body.single-itk_lesson .itk-lms-lesson-discussions__list .children {
		margin-left: 0.6rem;
	}
	body.single-itk_lesson .itk-lms-lesson-discussions__list .comment,
	body.single-itk_lesson .itk-lms-lesson-discussions__list .pingback,
	body.single-itk_lesson .itk-lms-lesson-discussions__list li {
		padding: 0.85rem 0.9rem;
	}
	body.single-itk_lesson .itk-lms-lesson-discussions__list .comment-author img {
		width: 32px;
		height: 32px;
	}
	body.single-itk_lesson .itk-lms-lesson-discussions__form .comment-reply-title {
		font-size: 1rem;
	}
	/* iOS Safari zooms into form fields under 16px -- force 16px floor. */
	body.single-itk_lesson .itk-lms-lesson-discussions__field textarea,
	body.single-itk_lesson .itk-lms-lesson-discussions__form textarea {
		font-size: 16px;
		min-height: 96px;
		padding: 0.7rem 0.8rem;
	}
	/* Full-width submit + tap target. */
	body.single-itk_lesson .itk-lms-lesson-discussions__submit {
		display: block;
		width: 100%;
		justify-content: center;
		text-align: center;
		padding: 0.85rem 1rem;
		min-height: 44px;
		font-size: 1rem;
	}
	/* Reply link sized for thumbs. */
	body.single-itk_lesson .itk-lms-lesson-discussions__list .comment-reply-link {
		display: inline-flex;
		align-items: center;
		min-height: 36px;
		padding: 0.4rem 0.8rem;
	}
}


/* ============================================================================
   Wave 72 — Dashboard "My Library" sections.
   Video + ebook cards on the learner dashboard. Reuses the existing
   .itk-lms-dashboard__card structure (no progress bar variant — videos
   and ebooks don't have % completion). Just adds CPT-tagged flags in
   the media slot and a section variant for visual grouping.
   ============================================================================ */

.itk-lms-dashboard__section--library {
	margin-top: 2.5rem;
}

.itk-lms-dashboard__section--library + .itk-lms-dashboard__section--library {
	margin-top: 2rem;
}

/* Subtle divider above the first library section so it visually separates
   from the course buckets above. The :first-of-type guard avoids stacking
   the rule across multiple library sections in a row. */
.itk-lms-dashboard__section--library:first-of-type {
	border-top: 1px solid rgba(50, 140, 193, 0.16);
	padding-top: 2rem;
}

.itk-lms-dashboard__card-flag--video {
	background: var(--itk-blue, #328cc1);
	box-shadow: 0 2px 6px rgba(50, 140, 193, 0.32);
}

.itk-lms-dashboard__card-flag--ebook {
	background: #6b21a8; /* purple — distinct from video blue + complete green */
	box-shadow: 0 2px 6px rgba(107, 33, 168, 0.32);
}

/* Library cards have no progress bar, so the body gets a touch more breathing
   room before the CTA. Card height stays consistent with course cards because
   the actions row stays anchored to the bottom of the flex column. */
.itk-lms-dashboard__card--library .itk-lms-dashboard__card-body {
	gap: 0.7rem;
}

/* Mobile — library section margin tightens to match course section spacing. */
@media (max-width: 600px) {
	.itk-lms-dashboard__section--library {
		margin-top: 1.5rem;
	}
	.itk-lms-dashboard__section--library:first-of-type {
		padding-top: 1.5rem;
	}
}

/* ============================================================================
   Wave 74 — Bookmarks page type badge.
   Small pill on each row of /learn/bookmarks/ identifying whether the
   bookmark is a Lesson, Video, or EBook. Colors match the dashboard
   library card flag pills from Wave 72 so the visual language stays
   consistent.
   ============================================================================ */

.itk-lms-bookmarks__type {
	display: inline-block;
	padding: 0.12rem 0.55rem;
	margin-right: 0.6rem;
	border-radius: 9999px;
	font-size: 0.7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: #ffffff;
	background: #475569; /* default — lessons */
	vertical-align: middle;
}

.itk-lms-bookmarks__type--lesson {
	background: #475569;
}

.itk-lms-bookmarks__type--video {
	background: var(--itk-blue, #328cc1);
}

.itk-lms-bookmarks__type--ebook {
	background: #6b21a8;
}

/* Wave 90 — Course bookmark badge. Darker brand blue so it
   reads as the parent / top-level item type, distinct from
   the lesson gray and the video brand-blue. */
.itk-lms-bookmarks__type--course {
	background: #246991;
}

@media (max-width: 600px) {
	.itk-lms-bookmarks__type {
		font-size: 0.65rem;
		padding: 0.1rem 0.45rem;
		margin-right: 0.45rem;
	}
}

/* ============================================================================
   Wave 76 — "Continue learning" shortcode.
   [itk_lms_continue_learning] card row, drop-anywhere. Same visual language
   as the dashboard library cards but a touch more compact for embed contexts.
   Logged-out users render nothing so no CSS state needed for that.
   ============================================================================ */

.itk-lms-continue {
	margin: 1.5rem 0;
}

.itk-lms-continue__heading {
	margin: 0 0 0.9rem;
	font-size: 1.1rem;
	font-weight: 700;
	color: #0f172a;
	letter-spacing: -0.01em;
}

.itk-lms-continue__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 1rem;
}

.itk-lms-continue__card {
	display: flex;
	flex-direction: column;
	background: #ffffff;
	border: 1px solid rgba(15, 23, 42, 0.08);
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
	transition: box-shadow 0.18s ease, transform 0.18s ease;
}

.itk-lms-continue__card:hover {
	box-shadow: 0 6px 18px rgba(15, 23, 42, 0.12);
	transform: translateY(-2px);
}

.itk-lms-continue__media {
	position: relative;
	display: block;
	aspect-ratio: 16 / 9;
	background: linear-gradient(135deg, #f1f5f9, #e2e8f0);
	overflow: hidden;
}

.itk-lms-continue__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.itk-lms-continue__monogram {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 2.6rem;
	font-weight: 800;
	color: var(--itk-blue-hover, #246991);
	opacity: 0.5;
}

.itk-lms-continue__flag {
	position: absolute;
	top: 0.5rem;
	right: 0.5rem;
	padding: 0.12rem 0.55rem;
	border-radius: 9999px;
	font-size: 0.65rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: #ffffff;
}

.itk-lms-continue__flag--video {
	background: var(--itk-blue, #328cc1);
}

.itk-lms-continue__flag--ebook {
	background: #6b21a8;
}

.itk-lms-continue__flag--lesson {
	background: #475569;
}

.itk-lms-continue__body {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: 0.85rem 0.95rem 1rem;
	flex: 1 1 auto;
}

.itk-lms-continue__title {
	margin: 0;
	font-size: 0.98rem;
	font-weight: 700;
	line-height: 1.3;
}

.itk-lms-continue__title a {
	color: inherit;
	text-decoration: none;
}

.itk-lms-continue__title a:hover,
.itk-lms-continue__title a:focus {
	color: var(--itk-blue, #328cc1);
}

.itk-lms-continue__meta {
	margin: 0;
	font-size: 0.78rem;
	color: var(--itk-text-muted, #4a5568);
}

.itk-lms-continue__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	margin-top: auto;
	padding: 0.5rem 0.85rem;
	background: var(--itk-blue, #328cc1);
	color: #ffffff;
	border-radius: 9999px;
	font-size: 0.85rem;
	font-weight: 600;
	text-decoration: none;
	align-self: flex-start;
	transition: background 0.18s ease;
}

.itk-lms-continue__cta:hover,
.itk-lms-continue__cta:focus {
	background: var(--itk-blue-hover, #246991);
	color: #ffffff;
}

.itk-lms-continue__arrow {
	font-size: 1rem;
	line-height: 1;
}

@media (max-width: 600px) {
	.itk-lms-continue__grid {
		grid-template-columns: 1fr;
	}
}

/* ============================================================================
   Wave 82 — Mobile polish pass.
   Touch-target sizing + spacing tightens for the recent engagement work
   (Wave 73 bookmark button, Wave 74 bookmarks list, Wave 76 continue-
   learning shortcode, Wave 72 dashboard library cards). Donny's audience
   is 50-75; tap targets need to be generous. iOS guideline is 44pt.
   ============================================================================ */

@media (max-width: 600px) {

	/* Wave 73 — Bookmark button on lesson / video / ebook single. The
	   default sizing (0.45rem 0.85rem) renders ~28px tall on phones —
	   under the iOS 44pt target. Bump for thumb-friendliness without
	   making the desktop layout look chunky. */
	.itk-lms-bookmark-btn {
		min-height: 44px;
		padding: 0.7rem 1.1rem;
		font-size: 0.95rem;
	}

	.itk-lms-bookmark-btn__icon {
		font-size: 1.15rem;
	}

	/* Lesson/video/ebook header row already wraps via flex-wrap, but
	   on phones we want the bookmark button on its own row to stop it
	   crashing into the title. Title gets full width; button right-
	   aligns on the next line. */
	.itk-lms-lesson__header {
		gap: 0.85rem;
	}

	.itk-lms-lesson__header .itk-lms-bookmark-btn {
		align-self: flex-end;
	}

	/* Wave 74 — Bookmarks page list item tap area. Already comfortable
	   at 0.95rem padding, but ensure the link click area never collapses
	   below ~52px (padding + content) so a fat thumb doesn't miss. */
	.itk-lms-bookmarks__link {
		padding: 1.05rem 1.1rem;
	}

	/* Wave 76 — Continue learning shortcode. Tighter card padding on
	   phones so the card-row doesn't dominate the page, and tap target
	   on the CTA stays at 44px. */
	.itk-lms-continue__body {
		padding: 0.95rem 1rem 1.1rem;
		gap: 0.55rem;
	}

	.itk-lms-continue__cta {
		min-height: 44px;
		padding: 0.7rem 1.1rem;
	}

	.itk-lms-continue__title {
		font-size: 1.02rem;
	}

	/* Wave 72 — Dashboard library card CTA. Same min-height treatment
	   as the catalog cards so the touch surface is consistent. */
	.itk-lms-dashboard__card-cta {
		min-height: 44px;
		padding: 0.7rem 1.15rem;
	}

}

@media (min-width: 601px) and (max-width: 900px) {
	/* Wave 76 — Continue learning shortcode at tablet width keeps the
	   2-up grid useful instead of collapsing to single-column at the
	   600px breakpoint. */
	.itk-lms-continue__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* ============================================================================
   Wave 83 — Bookmark toggle on catalog cards.
   Small icon-only variant of the Wave 73 bookmark button, positioned
   absolutely over the top-left of the card media. Reuses the same
   base class so bookmark-toggle.js just works. Top-left placement
   avoids collisions with the Wave 61 ribbon (top-right) and the
   ebook icon / video play overlay.
   ============================================================================ */

.itk-lms-catalog .itk-lms-catalog__card {
	position: relative;
}

.itk-lms-bookmark-btn--card {
	position: absolute;
	top: 0.55rem;
	left: 0.55rem;
	z-index: 5;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border-radius: 9999px;
	background: rgba(255, 255, 255, 0.94);
	color: var(--itk-blue, #328cc1);
	border: 1px solid rgba(15, 23, 42, 0.08);
	box-shadow: 0 2px 6px rgba(15, 23, 42, 0.18);
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.itk-lms-bookmark-btn--card:hover,
.itk-lms-bookmark-btn--card:focus-visible {
	background: #ffffff;
	transform: translateY(-1px);
	box-shadow: 0 4px 10px rgba(15, 23, 42, 0.22);
	outline: none;
}

.itk-lms-bookmark-btn--card.itk-lms-bookmark-btn--on {
	background: var(--itk-blue, #328cc1);
	color: #ffffff;
	border-color: var(--itk-blue, #328cc1);
}

.itk-lms-bookmark-btn--card.itk-lms-bookmark-btn--on:hover,
.itk-lms-bookmark-btn--card.itk-lms-bookmark-btn--on:focus-visible {
	background: var(--itk-blue-hover, #246991);
	border-color: var(--itk-blue-hover, #246991);
}

.itk-lms-bookmark-btn--card .itk-lms-bookmark-btn__icon {
	font-size: 1.05rem;
	line-height: 1;
}

/* Ensure the icon-only variant doesn't inherit the pill padding /
   min-height set by the Wave 82 mobile rules. */
@media (max-width: 600px) {
	.itk-lms-bookmark-btn--card {
		width: 40px;
		height: 40px;
		min-height: 0;
		padding: 0;
		font-size: 0.95rem;
		top: 0.45rem;
		left: 0.45rem;
	}
}