/* =========================================================
   NJ BEAUTY COURSES — TUTOR LMS OVERRIDES
   Scoped, non-destructive CSS on top of Tutor's own markup.
   Sections: 1 Shared wrap 2 Course archive/cards 3 Single course
             4 Curriculum accordion 5 Dashboard 6 Lesson page
             7 Login/registration 8 Responsive
   ========================================================= */

/* Tutor drives almost all of its own blue accents (active tabs, active menu
   items, focus rings, badges) off these two custom properties. Overriding
   them here fixes the vast majority of "Tutor blue" in one place instead of
   chasing every individual selector. !important is required because Tutor
   sets them inline on :root from its own settings. */
:root {
	--tutor-color-primary: var(--nj-gold) !important;
	--tutor-color-primary-hover: var(--nj-gold-dark) !important;
}

/* ---------- 1. SHARED WRAP ---------- */
.tutor-wrap,
.tutor-wrap-parent {
	font-family: var(--nj-font-body);
	background: var(--nj-cream);
	color: var(--nj-espresso);
}

.tutor-wrap a {
	color: inherit;
}

/* ---------- 2. COURSE ARCHIVE / CARDS ---------- */
.tutor-courses-wrap {
	padding-top: var(--nj-space-5);
	padding-bottom: var(--nj-space-5);
}

.tutor-courses-wrap .tutor-card {
	overflow: hidden;
	border-radius: var(--nj-radius-lg);
}

.tutor-courses-wrap .tutor-card-body {
	padding: var(--nj-space-3);
}

.tutor-courses-wrap .tutor-card img {
	border-radius: 0;
}

.tutor-course-bookmark {
	background: rgba(255, 255, 255, 0.9);
	border-radius: 50%;
}

/* ---------- 3. SINGLE COURSE / SALES PAGE ---------- */
.tutor-full-width-course-top,
.tutor-course-top-info {
	background: var(--nj-ivory);
	border-bottom: 1px solid var(--nj-border);
	padding-top: var(--nj-space-5);
	padding-bottom: var(--nj-space-5);
}

.tutor-course-top-info h1,
.tutor-course-details-page h1 {
	font-family: var(--nj-font-heading);
	font-size: clamp(30px, 4.5vw, 48px);
	color: var(--nj-espresso);
}

.tutor-course-details-page {
	padding-top: var(--nj-space-4);
	padding-bottom: var(--nj-space-6);
}

/* Sticky enrol/price box. nj-frontend.js relocates the Material
   Includes/Requirements/Audience block out of this column into the main
   content area first, so the sticky box has nothing left below it to cover.

   Once that block is moved out, the sidebar column's own content shrinks to
   just the box itself — with nothing to give it a tall containing block, a
   sticky element has no room to actually stay stuck while the (much taller)
   main column scrolls past. Force the sidebar column to stretch to match
   the main column's height so the sticky box has that room. */
.tutor-course-details-page .tutor-row {
	align-items: stretch;
}

.tutor-single-course-sidebar {
	height: 100%;
}

.tutor-single-course-sidebar .tutor-card.tutor-sidebar-card,
.tutor-sidebar-card {
	border-radius: var(--nj-radius-lg);
	border: 1px solid var(--nj-border);
	box-shadow: var(--nj-shadow);
	overflow: hidden;
	position: sticky;
	top: 96px;
}

/* Material Includes / Requirements / Audience, relocated from the sidebar
   into the main content column by nj-frontend.js. */
.nj-course-more-moved {
	margin-top: var(--nj-space-5) !important;
	padding-top: var(--nj-space-4);
	border-top: 1px solid var(--nj-border);
}

.tutor-sidebar-card .tutor-card-body {
	padding: var(--nj-space-3);
}

/* Price */
.tutor-course-price,
.tutor-single-course-price {
	font-family: var(--nj-font-heading);
	color: var(--nj-espresso);
	font-weight: 700;
}

/* Tabs (Overview / Curriculum / etc) */
.tutor-course-details-tab .tutor-nav,
.tutor-course-spotlight-nav {
	border-bottom: 1px solid var(--nj-border);
	gap: var(--nj-space-2);
}

.tutor-course-details-tab .tutor-nav-link,
.tutor-course-spotlight-nav .tutor-nav-link {
	font-weight: 600;
	color: var(--nj-muted);
	border-bottom: 2px solid transparent;
	padding: 12px 4px;
}

.tutor-course-details-tab .tutor-nav-link.is-active,
.tutor-course-spotlight-nav .tutor-nav-link.is-active {
	color: var(--nj-espresso);
	border-bottom-color: var(--nj-gold);
}

/* ---------- 4. CURRICULUM ACCORDION ---------- */
.tutor-accordion,
.tutor-course-topic {
	border: 1px solid var(--nj-border);
	border-radius: var(--nj-radius-md);
	overflow: hidden;
	margin-bottom: var(--nj-space-2);
	background: #fff;
}

.tutor-course-topic-item,
.tutor-accordion-item-header {
	padding: 14px 18px;
	font-weight: 600;
	color: var(--nj-espresso) !important;
}

.tutor-accordion-item-header.is-active {
	background: var(--nj-ivory);
	color: var(--nj-espresso) !important;
}

.tutor-course-topic-item.is-active,
.tutor-course-topic-item-lesson.is-active {
	background: var(--nj-gold-light);
}

.tutor-course-topic-item-title {
	font-weight: 500;
	color: var(--nj-espresso);
}

.tutor-accordion-item-header svg,
.tutor-accordion-item-header i,
.tutor-course-topic-item svg,
.tutor-course-topic-item i {
	color: var(--nj-gold-dark) !important;
	fill: var(--nj-gold-dark) !important;
}

/* ---------- 5. DASHBOARD ---------- */
/* Previously the page background and every card were both ~white (#FFFDF9
   vs #FFFFFF) — a few RGB units apart, so nothing read as a distinct
   surface and the page felt like scattered content on blank white. The
   canvas is now a shade darker (still light/warm, not a dark theme) so
   the panels below can visibly separate from it. */
.tutor-dashboard,
.tutor-frontend-dashboard {
	background: var(--nj-canvas);
	padding-top: var(--nj-space-4);
	padding-bottom: var(--nj-space-5);
}

/* Header (avatar + greeting) and the left nav were bare text/links
   floating directly on the page background — give them the same panel
   treatment as the cards so the whole layout reads as defined zones. */
.tutor-frontend-dashboard-header {
	background: var(--nj-cream);
	border: 1px solid var(--nj-border);
	border-radius: var(--nj-radius-lg);
	box-shadow: var(--nj-shadow-sm);
	padding: var(--nj-space-3);
	margin-bottom: var(--nj-space-3);
}

.tutor-dashboard-left-menu {
	background: var(--nj-cream);
	border: 1px solid var(--nj-border);
	border-radius: var(--nj-radius-lg);
	box-shadow: var(--nj-shadow-sm);
	padding: var(--nj-space-2) 0;
}

/* Every stat tile, course-progress card and course card gets a clearly
   bordered + shadowed surface so it separates from the canvas instead of
   blending into it (replaces the old radius/padding-only rule). */
.tutor-dashboard .tutor-card {
	background: var(--nj-cream);
	border: 1px solid var(--nj-border);
	box-shadow: var(--nj-shadow-sm);
	border-radius: var(--nj-radius-lg);
	padding: var(--nj-space-1);
}

/* Bare tables (Purchase History, the instructor "My Courses" list, etc.)
   don't sit inside a .tutor-card, so they need the same panel treatment
   applied directly. */
.tutor-dashboard .tutor-table-responsive {
	background: var(--nj-cream);
	border: 1px solid var(--nj-border);
	border-radius: var(--nj-radius-lg);
	box-shadow: var(--nj-shadow-sm);
	padding: var(--nj-space-2);
}

.tutor-dashboard-header-avatar {
	border-radius: 50%;
	border: 3px solid var(--nj-gold-light);
}

.tutor-course-progress-item.tutor-card {
	padding: var(--nj-space-3);
	margin-bottom: var(--nj-space-2);
}

.tutor-progress-bar,
.tutor-course-progress-wrapper .tutor-progress {
	background: var(--nj-sand) !important;
	border-radius: var(--nj-radius-pill);
	overflow: hidden;
	height: 10px;
	display: block;
}

.tutor-progress-value,
.tutor-course-progress-wrapper .tutor-progress-bar-inner {
	background: var(--nj-gold) !important;
	display: block;
	height: 100%;
	width: var(--tutor-progress-value, 0%);
}

.tutor-round-box {
	background: var(--nj-gold-light) !important;
}

.tutor-round-box i {
	color: var(--nj-gold-dark) !important;
}

.tutor-dashboard-menu-divider {
	border-color: var(--nj-border);
}

.tutor-dashboard-menu-item-link:hover,
.tutor-dashboard-menu-item-link:hover .tutor-dashboard-menu-item-icon {
	color: var(--nj-gold-dark) !important;
}

.tutor-dashboard-left-menu .tutor-dashboard-permalinks li.active a,
.tutor-dashboard-left-menu .tutor-dashboard-permalinks li.active a:hover {
	background-color: var(--nj-gold) !important;
	color: #fff !important;
}

.tutor-dashboard-left-menu .tutor-dashboard-permalinks li.active a .tutor-dashboard-menu-item-icon {
	color: #fff !important;
}

/* Make "Continue Learning" the loudest action on the dashboard */
.tutor-course-progress-item .tutor-btn.tutor-btn-outline-primary {
	border-color: var(--nj-gold);
}

/* ---------- 6. LESSON PAGE ---------- */
.tutor-course-single-content-wrapper {
	background: var(--nj-cream);
	padding: var(--nj-space-4) 0;
}

.tutor-course-topic-single-body {
	background: #fff;
	border: 1px solid var(--nj-border);
	border-radius: var(--nj-radius-lg);
	padding: var(--nj-space-4);
	box-shadow: var(--nj-shadow-sm);
	line-height: 1.65;
	font-size: 17px;
}

.tutor-course-topic-single-body h1,
.tutor-course-topic-single-body h2,
.tutor-course-topic-single-body h3 {
	font-family: var(--nj-font-heading);
}

/* Constrain prose readability without shrinking full-width blocks like the
   PDF booklet resource card below. */
.tutor-course-topic-single-body > p,
.tutor-course-topic-single-body > ul,
.tutor-course-topic-single-body > ol,
.tutor-course-topic-single-body > h1,
.tutor-course-topic-single-body > h2,
.tutor-course-topic-single-body > h3,
.tutor-course-topic-single-body > h4 {
	max-width: var(--nj-max-narrow);
}

.tutor-course-single-sidebar-wrapper.tutor-lesson-sidebar {
	background: var(--nj-ivory);
	border: 1px solid var(--nj-border);
	border-radius: var(--nj-radius-lg);
	padding: var(--nj-space-2);
}

.tutor-video-player-wrapper {
	border-radius: var(--nj-radius-lg);
	overflow: hidden;
	box-shadow: var(--nj-shadow);
}

/* Top "Course Name ... Mark as Complete" bar */
.tutor-course-topic-single-header.tutor-single-page-top-bar {
	background: var(--nj-espresso) !important;
	color: var(--nj-cream);
}

.tutor-course-topic-single-header-title {
	color: var(--nj-cream);
}

.tutor-course-topic-single-header .tutor-iconic-btn {
	color: var(--nj-cream);
}

/* On mobile/tablet the curriculum lives behind an off-canvas drawer opened
   by this icon-only hamburger button. It works (Tutor's own JS), but a bare
   icon next to another hamburger (the site nav) is easy to miss entirely —
   students land in a lesson with no obvious way back to the module list.
   Turn it into a clearly labelled gold pill so it reads as "tap here to see
   all lessons", not just decoration. Tutor hides this element outright above
   1200px (its own !important media query), so this only affects mobile/tablet. */
@media (max-width: 1199px) {
	[tutor-course-topics-sidebar-offcanvas-toggler] {
		width: auto;
		height: auto;
		min-height: 40px;
		padding: 8px 16px;
		gap: 8px;
		background: var(--nj-gold) !important;
		color: var(--nj-espresso) !important;
		border-radius: var(--nj-radius-pill);
		font-size: 13px;
		font-weight: 700;
	}

	[tutor-course-topics-sidebar-offcanvas-toggler]::after {
		content: "Modules";
		white-space: nowrap;
	}
}

/* Bottom Previous/Next/Notes bar */
.tutor-course-topic-single-footer {
	background: var(--nj-ivory) !important;
	border-top: 1px solid var(--nj-border);
}

/* Active lesson row in the curriculum sidebar */
.tutor-course-topic-item-lesson.is-active a,
.tutor-course-topic-item-lesson.is-active .tutor-course-topic-item-title,
.tutor-course-topic-item-lesson.is-active .tutor-course-topic-item-icon {
	color: var(--nj-espresso) !important;
	font-weight: 600;
}

/* Prev / Next / Mark Complete */
.tutor-course-topic-single-body ~ * .tutor-btn,
.tutor-single-course-content-footer .tutor-btn {
	min-height: 52px;
}

/* ---------- 7. LOGIN / REGISTRATION ---------- */
#tutor-login-form,
#tutor-registration-wrap,
#tutor-registration-form {
	max-width: 460px;
	margin: var(--nj-space-5) auto;
	background: #fff;
	border: 1px solid var(--nj-border);
	border-radius: var(--nj-radius-lg);
	padding: var(--nj-space-4);
	box-shadow: var(--nj-shadow);
}

.tutor-modal.tutor-login-modal .tutor-modal-content {
	border-radius: var(--nj-radius-lg);
}

.tutor-form-group {
	margin-bottom: var(--nj-space-2);
}

/* ---------- 8. RESPONSIVE ---------- */
@media (max-width: 767px) {
	.tutor-single-course-sidebar .tutor-sidebar-card,
	.tutor-sidebar-card {
		position: static;
	}

	.tutor-course-topic-single-body {
		padding: var(--nj-space-2);
		font-size: 16px;
	}

	#tutor-login-form,
	#tutor-registration-wrap,
	#tutor-registration-form {
		margin: var(--nj-space-3) var(--nj-space-2);
		padding: var(--nj-space-3);
	}

	.tutor-course-details-tab .tutor-nav,
	.tutor-course-spotlight-nav {
		overflow-x: auto;
		flex-wrap: nowrap;
	}
}

/* =========================================================
   9. COURSE SALES PAGE — PREMIUM CONTENT CARDS (all widths)
   Tutor renders About / What Will You Learn / Materials /
   Requirements / Audience as flat, borderless widgets stacked
   with big utility margins. Wrap each in a soft ivory/white
   card so the page reads as a designed sales page, not a bare
   LMS template. Applies to desktop + mobile.
   ========================================================= */
.tutor-course-details-content,
.tutor-course-details-widget {
	background: #fff;
	border: 1px solid var(--nj-border);
	border-radius: var(--nj-radius-lg);
	box-shadow: var(--nj-shadow-sm);
	padding: var(--nj-space-4);
	margin-top: var(--nj-space-3) !important;
}

.tutor-course-details-content > h2,
.tutor-course-details-widget-title {
	position: relative;
	padding-left: 16px;
	line-height: 1.25;
}

.tutor-course-details-content > h2::before,
.tutor-course-details-widget-title::before {
	content: "";
	position: absolute;
	left: 0;
	top: 2px;
	bottom: 2px;
	width: 4px;
	border-radius: var(--nj-radius-pill);
	background: var(--nj-gold);
}

/* Gold-dot bullet lists instead of Tutor's cramped icon rows */
.tutor-course-details-widget-list {
	list-style: none;
	margin: var(--nj-space-2) 0 0;
	padding: 0;
}

.tutor-course-details-widget-list li {
	position: relative;
	padding: 9px 0 9px 26px;
	margin: 0 !important;
	line-height: 1.55;
	color: var(--nj-espresso);
}

.tutor-course-details-widget-list li + li {
	border-top: 1px solid var(--nj-border);
}

.tutor-course-details-widget-list li .tutor-icon-bullet-point {
	display: none;
}

.tutor-course-details-widget-list li::before {
	content: "";
	position: absolute;
	left: 2px;
	top: 16px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--nj-gold);
}

/* The only category on this site is "Uncategorized" and the author byline is
   disabled, so this meta line renders a single pointless tag. Drop it — the
   instructor is still shown in its own content block lower down. */
.tutor-course-details-top .tutor-course-details-info {
	display: none;
}

/* Injected hero elements (built by nj-frontend.js) */
.nj-course-eyebrow {
	margin-bottom: 10px;
}

.nj-course-subtitle {
	margin: 14px 0 0;
	font-family: var(--nj-font-body);
	font-size: 17px;
	line-height: 1.6;
	color: var(--nj-muted);
	max-width: var(--nj-max-narrow);
}

.nj-course-trust {
	margin-top: var(--nj-space-3);
}

/* Wishlist / Share demoted to a quiet secondary row */
.nj-secondary-actions {
	display: flex;
	gap: var(--nj-space-2);
	margin-top: var(--nj-space-3);
	padding-top: var(--nj-space-2);
	border-top: 1px solid var(--nj-border);
}

.nj-secondary-actions .tutor-btn {
	min-height: 0;
	padding: 6px 10px;
	font-size: 13px;
	font-weight: 600;
	color: var(--nj-muted);
	background: transparent;
	border: 0;
	box-shadow: none;
}

.nj-secondary-actions .tutor-btn:hover {
	color: var(--nj-gold-dark);
	transform: none;
}

/* Accordion "Module N / Assessment" labels */
.nj-accordion-head-text {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

.nj-module-label {
	font-family: var(--nj-font-body);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--nj-gold-dark);
}

.nj-accordion-title {
	font-weight: 600;
	color: var(--nj-espresso);
}

/* Sticky bottom CTA (built by nj-frontend.js; only shown on mobile) */
.nj-sticky-cta {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 200;
	display: none;
	align-items: center;
	gap: 12px;
	padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
	background: var(--nj-cream);
	border-top: 1px solid var(--nj-border);
	box-shadow: 0 -8px 24px rgba(42, 27, 20, 0.10);
}

.nj-sticky-cta__label {
	flex: 1;
	min-width: 0;
	line-height: 1.2;
}

.nj-sticky-cta__title {
	font-family: var(--nj-font-heading);
	font-weight: 700;
	font-size: 15px;
	color: var(--nj-espresso);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.nj-sticky-cta__sub {
	font-size: 12px;
	color: var(--nj-muted);
	margin-top: 2px;
}

.nj-sticky-cta__btn.tutor-btn {
	flex-shrink: 0;
	min-height: 46px;
	padding: 12px 22px;
	width: auto;
	margin: 0;
}

/* =========================================================
   10. COURSE SALES PAGE — MOBILE FLOW (<= 767px)
   Reorders the single-course layout into a conversion-focused
   stack: eyebrow -> title -> premium subtitle -> CTA card ->
   trust -> compact image -> carded content. Desktop keeps
   Tutor's two-column layout untouched.
   ========================================================= */
@media (max-width: 767px) {
	/* Tighten the oversized hero padding */
	.tutor-full-width-course-top,
	.tutor-course-top-info {
		padding-top: var(--nj-space-3);
		padding-bottom: var(--nj-space-3);
	}

	.tutor-course-details-page {
		padding-top: var(--nj-space-2);
		padding-bottom: var(--nj-space-4);
	}

	.tutor-course-details-header.tutor-mb-44 {
		margin-bottom: var(--nj-space-3) !important;
	}

	.tutor-course-details-title.tutor-fs-4 {
		font-size: 28px;
		line-height: 1.15;
		margin-top: 0 !important;
	}

	/* --- The reorder: enrol card above image + content ---
	   Fallback order if the JS placement doesn't run: enrol card first (its
	   original mobile position). nj-frontend.js then relocates the enrol card
	   to sit just below the image (both stay inside the padded main column, so
	   insets stay consistent). */
	.tutor-course-details-page > .tutor-row {
		display: flex;
		flex-direction: column;
	}

	.tutor-course-details-page > .tutor-row > aside.tutor-single-course-sidebar,
	.tutor-course-details-page > .tutor-row > .tutor-col-xl-4 {
		order: -1;
	}

	/* When JS has moved the enrol card into the main column (below the image),
	   give it a little breathing space from the image above it. */
	.tutor-col-xl-8 > .tutor-single-course-sidebar,
	.tutor-col-xl-8 > .tutor-col-xl-4 {
		margin-top: var(--nj-space-3);
	}

	.tutor-single-course-sidebar.tutor-mt-40 {
		margin-top: 0 !important;
	}

	/* Main column: image sits at the top, then the tabbed content */
	.tutor-course-details-tab.tutor-mt-32 {
		margin-top: var(--nj-space-3) !important;
	}

	/* Compact, elegantly-cropped hero image */
	.tutor-course-thumbnail {
		margin-top: var(--nj-space-3);
	}

	.tutor-course-thumbnail img {
		display: block;
		width: 100%;
		height: auto;
		max-height: 220px;
		aspect-ratio: 16 / 9;
		object-fit: cover;
		border-radius: 18px;
		box-shadow: var(--nj-shadow-sm);
	}

	/* Compact entry / progress card */
	.tutor-sidebar-card .tutor-card-body {
		padding: var(--nj-space-3);
	}

	.tutor-sidebar-card .tutor-card-footer {
		padding: var(--nj-space-3);
	}

	.tutor-course-progress-wrapper.tutor-mb-32 {
		margin-bottom: var(--nj-space-3) !important;
	}

	/* Content cards: comfortable mobile padding */
	.tutor-course-details-content,
	.tutor-course-details-widget {
		padding: 20px;
	}

	/* Sticky, compact tab bar below the header */
	.tutor-course-details-tab .tutor-is-sticky {
		position: sticky;
		top: 58px;
		z-index: 50;
		background: var(--nj-cream);
		margin-left: calc(-1 * var(--nj-space-2));
		margin-right: calc(-1 * var(--nj-space-2));
		padding: 0 var(--nj-space-2);
	}

	.tutor-course-details-tab .tutor-nav-link,
	.tutor-course-spotlight-nav .tutor-nav-link {
		padding: 12px 4px;
		font-size: 14px;
	}

	/* Reveal the sticky bottom CTA + keep footer clear of it */
	.nj-sticky-cta.is-visible {
		display: flex;
	}

	body.nj-has-sticky-cta {
		padding-bottom: 78px;
	}
}

/* =========================================================
   11. UNIFIED LESSON CONTROL BAR
   Built by nj-lesson-nav.js so Previous / Course Modules / Next
   are grouped with the course + lesson context in one premium,
   app-like control system — never buried at the page bottom:

     (a) .nj-lcb — the control bar: course title, current lesson
         name, numeric position, [← Previous][Course Modules]
         [Next →] and Overview / Dashboard / Resources quick
         links. On desktop (>=769px) it becomes the page header —
         fixed to the very top of the viewport with the theme
         header hidden, so it's never a second bar stacked under
         the real one. On mobile it stays static in the content
         flow (unchanged).
     (b) .nj-lcb-bottom — a mobile-only fixed bottom action bar
         [← Previous][Modules][Next →], always in thumb reach.

   Brand tokens (--nj-*) are defined in nj-brand.css.
   ========================================================= */

/* --- Shared button --------------------------------------------------- */
.nj-lcb__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 44px;
	padding: 10px 18px;
	border: 1px solid transparent;
	border-radius: var(--nj-radius-pill);
	font-family: var(--nj-font-body);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.1;
	white-space: nowrap;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .16s ease, border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.nj-lcb__btn .nj-ico {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
}

/* Previous — secondary: cream, espresso text, soft border */
.nj-lcb__btn--prev {
	background: var(--nj-cream);
	color: var(--nj-espresso);
	border-color: var(--nj-border);
}

.nj-lcb__btn--prev:hover {
	background: var(--nj-ivory);
	border-color: var(--nj-gold);
}

/* Course Modules — neutral but important: warm gold tint */
.nj-lcb__btn--modules {
	background: rgba(198, 167, 105, 0.14);
	color: var(--nj-espresso);
	border-color: rgba(198, 167, 105, 0.35);
}

.nj-lcb__btn--modules:hover {
	background: rgba(198, 167, 105, 0.24);
	border-color: var(--nj-gold);
}

.nj-lcb__btn--modules .nj-ico {
	color: var(--nj-gold-dark);
}

/* Next / Finish — the primary, visually strongest action */
.nj-lcb__btn--next,
.nj-lcb__btn--finish {
	background: linear-gradient(135deg, var(--nj-gold), var(--nj-gold-dark));
	color: #fff;
	box-shadow: 0 12px 30px rgba(168, 132, 63, 0.25);
}

.nj-lcb__btn--next:hover,
.nj-lcb__btn--finish:hover {
	transform: translateY(-1px);
	box-shadow: 0 16px 34px rgba(168, 132, 63, 0.34);
}

.nj-lcb__btn.is-disabled {
	opacity: 0.4;
	pointer-events: none;
}

/* --- (a) Top control bar -------------------------------------------- */
.nj-lcb {
	z-index: 200;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px 18px;
	margin: 0 auto 24px;
	padding: 14px 18px;
	background: rgba(255, 253, 248, 0.96);
	border: 1px solid var(--nj-border);
	border-radius: 22px;
	box-shadow: var(--nj-shadow-lg, 0 18px 50px rgba(42, 27, 20, 0.14));
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
}

.nj-lcb__meta {
	flex: 1 1 240px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.nj-lcb__course {
	font-family: var(--nj-font-body);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--nj-gold-dark);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.nj-lcb__lesson {
	font-family: var(--nj-font-heading);
	font-size: 20px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--nj-espresso);
}

.nj-lcb__pos {
	font-family: var(--nj-font-body);
	font-size: 13px;
	font-weight: 600;
	color: var(--nj-muted);
}

.nj-lcb__nav {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
}

.nj-lcb__links {
	flex-basis: 100%;
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	padding-top: 12px;
	border-top: 1px solid var(--nj-border);
}

.nj-lcb__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 36px;
	padding: 6px 12px;
	border-radius: var(--nj-radius-pill);
	font-family: var(--nj-font-body);
	font-size: 13px;
	font-weight: 600;
	color: var(--nj-muted);
	text-decoration: none;
	transition: background-color .16s ease, color .16s ease;
}

.nj-lcb__link:hover {
	background: var(--nj-ivory);
	color: var(--nj-espresso);
}

.nj-lcb__link .nj-ico {
	width: 16px;
	height: 16px;
	color: var(--nj-gold-dark);
}

/* ---------- Desktop (>=769px): full-bleed, single-row page header -------
   Previously a floating card, margined off the edges (background visible
   round it) and tall (title stacked over 3 lines, links wrapped onto their
   own row under a divider). Now it reads as a real header: edge-to-edge,
   no gaps, one slim row — title truncates instead of the bar growing. */
@media (min-width: 769px) {
	body.nj-has-lcb header.wp-block-template-part {
		display: none !important;
	}

	/* Real height is measured by nj-lesson-nav.js (title length / whether
	   the Resources link renders both change it); the fallback covers the
	   brief moment before JS runs. */
	body.nj-has-lcb {
		padding-top: var(--nj-lcb-height, 76px);
	}

	.nj-lcb {
		position: fixed;
		/* Clears the WP toolbar for logged-in editors/admins; 0 when it's
		   not showing (students never get it — see mobile-nav.php). */
		top: var(--wp-admin--admin-bar--height, 0px);
		left: 0;
		right: 0;
		max-width: none;
		margin: 0;
		gap: 8px 20px;
		padding: 10px 32px;
		border: none;
		border-bottom: 1px solid var(--nj-border);
		border-radius: 0;
		box-shadow: 0 6px 20px rgba(42, 27, 20, 0.08);
	}

	/* Title block becomes one baseline row — course label and position stay
	   full width, the lesson name (the variable-length part) truncates to
	   keep the whole bar to a single line instead of wrapping taller. */
	.nj-lcb__meta {
		flex: 1 1 auto;
		flex-direction: row;
		align-items: baseline;
		gap: 3px 12px;
	}

	.nj-lcb__course,
	.nj-lcb__pos {
		flex: 0 0 auto;
	}

	.nj-lcb__lesson {
		flex: 0 1 auto;
		min-width: 40px;
		font-size: 16px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	/* Nav + quick links sit inline, right of the title, on the same row. */
	.nj-lcb__nav {
		flex: 0 0 auto;
		flex-wrap: nowrap;
	}

	.nj-lcb .nj-lcb__btn {
		min-height: 38px;
		padding: 8px 14px;
		font-size: 13px;
	}

	.nj-lcb__links {
		flex: 0 0 auto;
		flex-basis: auto;
		flex-wrap: nowrap;
		padding: 0 0 0 16px;
		margin-left: 4px;
		border-top: none;
		border-left: 1px solid var(--nj-border);
	}

	/* Icon-only on desktop — the label becomes a native tooltip (see JS).
	   Keeps the quick-links group narrow enough that everything fits one
	   line on ordinary laptop widths instead of wrapping to its own row. */
	.nj-lcb__link {
		position: relative;
		justify-content: center;
		width: 34px;
		height: 34px;
		min-height: 0;
		padding: 0;
		border-radius: 50%;
	}

	.nj-lcb__link-text {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
	}
}

/* True single-line header once there's room for it (course + lesson +
   position + nav + icon links all fit without any of them wrapping). */
@media (min-width: 1100px) {
	.nj-lcb {
		flex-wrap: nowrap;
	}
}

/* --- (b) Mobile bottom action bar (hidden on desktop) --------------- */
.nj-lcb-bottom {
	display: none;
}

/* Hide Tutor's native bottom prev/next — the control bar replaces it.
   Scoped to nj-has-lcb (JS-added) so it self-heals if the script fails. */
body.nj-has-lcb .tutor-course-topic-single-footer {
	display: none !important;
}

/* ---------- Mobile: static top bar + fixed bottom action bar -------- */
@media (max-width: 768px) {
	/* Top bar carries orientation; the fixed bottom bar carries the nav,
	   so it needn't be sticky (keeps vertical space for content). */
	.nj-lcb {
		position: static;
		gap: 12px;
		padding: 14px 16px;
		border-radius: 18px;
	}

	.nj-lcb__lesson {
		font-size: 18px;
	}

	/* Prev/Next live in the bottom bar on mobile; keep only Modules here. */
	.nj-lcb__nav {
		width: 100%;
	}

	.nj-lcb__nav .nj-lcb__btn--prev,
	.nj-lcb__nav .nj-lcb__btn--next,
	.nj-lcb__nav .nj-lcb__btn--finish {
		display: none;
	}

	.nj-lcb__nav .nj-lcb__btn--modules {
		width: 100%;
	}

	.nj-lcb-bottom {
		position: fixed;
		left: 12px;
		right: 12px;
		bottom: 12px;
		z-index: 80;
		display: flex;
		align-items: stretch;
		gap: 8px;
		margin-bottom: env(safe-area-inset-bottom, 0px);
		padding: 10px;
		background: var(--nj-cream);
		border: 1px solid var(--nj-border);
		border-radius: 22px;
		box-shadow: 0 18px 50px rgba(42, 27, 20, 0.18);
		-webkit-backdrop-filter: blur(12px);
		backdrop-filter: blur(12px);
	}

	.nj-lcb-bottom .nj-lcb__btn {
		flex: 1;
		padding: 10px 12px;
		font-size: 13px;
	}

	/* Keep lesson content + footer clear of the fixed bottom bar. */
	body.nj-has-lcb {
		padding-bottom: 92px;
	}

	/* Tutor Pro's floating "Take Note" button is fixed bottom-right; lift it
	   clear so it never overlaps the bottom action bar. */
	body.nj-has-lcb #tutor-lesson-nav-take-note-btn {
		bottom: calc(88px + env(safe-area-inset-bottom, 0px)) !important;
	}
}

/* Very narrow phones: drop Prev/Next word labels to arrows in the bottom
   bar so three tap targets always fit without wrapping. */
@media (max-width: 360px) {
	.nj-lcb-bottom .nj-lcb__btn--prev .nj-lcb__btn-txt,
	.nj-lcb-bottom .nj-lcb__btn--next .nj-lcb__btn-txt,
	.nj-lcb-bottom .nj-lcb__btn--finish .nj-lcb__btn-txt {
		display: none;
	}
}

/* =========================================================
   12. TUTOR 4.0 LEARNING AREA (the Alpine-driven full-screen
   lesson player). This install runs Tutor's "learning area"
   templates (.tutor-learning-header / .tutor-tabs-nav /
   .tutor-learning-area-footer), NOT the older single-lesson
   markup that section 11's .nj-lcb targets. Tutor already
   fixes its header to the top and its footer (Previous /
   Mark as Complete / Next) to the bottom, so here we only:
     • pin the Overview / Exercise Files / Notes tab bar under
       the fixed header on mobile (Tutor leaves it relative,
       so it scrolls out of reach), and
     • brand the green "Mark as Complete" button gold to match.
   ========================================================= */

/* Mark as Complete — the primary lesson action. Tutor renders it as a plain
   outline button (white fill, gold border/text) via !important rules in
   tutor-learning-area.min.css that load after this file, so we out-specify
   them (body.nj-tutor-la … + !important) to paint a solid gold pill that reads
   as the main call to action. All widths. */
body.nj-tutor-la .tutor-learning-area-footer .tutor-mark-as-complete-button:not(.completed),
body.nj-tutor-la .tutor-learning-area-footer .tutor-mark-as-complete-button:not(.completed):hover,
body.nj-tutor-la .tutor-learning-area-footer .tutor-mark-as-complete-button:not(.completed):focus {
	background: linear-gradient(135deg, var(--nj-gold), var(--nj-gold-dark)) !important;
	border-color: transparent !important;
	color: #fff !important;
	box-shadow: 0 10px 24px rgba(168, 132, 63, 0.26) !important;
}

body.nj-tutor-la .tutor-learning-area-footer .tutor-mark-as-complete-button:not(.completed) span,
body.nj-tutor-la .tutor-learning-area-footer .tutor-mark-as-complete-button:not(.completed) svg {
	color: #fff !important;
}

/* Completed state — calm confirmation, not a loud button. */
body.nj-tutor-la .tutor-learning-area-footer .tutor-mark-as-complete-button.completed {
	background: rgba(122, 132, 113, 0.16) !important;
	border-color: transparent !important;
	color: var(--nj-espresso) !important;
}

@media (max-width: 768px) {
	/* Pin the tab bar just under Tutor's fixed header so Overview / Exercise
	   Files / Notes stay reachable while the lesson body scrolls beneath.
	   --nj-lh-h is the header's measured height (nj-lesson-nav.js); 56px is a
	   safe fallback before the script runs. */
	body.nj-tutor-la .tutor-tabs-nav {
		position: sticky;
		top: var(--nj-lh-h, 56px);
		z-index: 9;
		background: var(--nj-cream);
		box-shadow: 0 10px 18px -6px rgba(42, 27, 20, 0.14);
	}

	/* Pin the footer (Previous / Mark as Complete / Next) to the bottom of the
	   viewport. Tutor styles it position:sticky, which only actually holds when
	   the lesson body is short — on a long lesson it scrolls off the bottom and
	   students never see Mark Complete / Next without scrolling to the very end.
	   Fixed guarantees it stays in thumb reach. */
	body.nj-tutor-la .tutor-learning-area-footer {
		position: fixed !important;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 40;
		gap: 8px;
		padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
	}

	/* The three buttons (Previous / Mark as Complete / Next) don't fit at their
	   natural widths — Mark as Complete alone is ~216px, and the hidden first/
	   last Previous/Next still reserves its full label width — so the row
	   overflowed and pushed Next off the right edge, off-centring everything.
	   Force Prev/Next to equal compact icon squares (collapse the bare-text
	   label with font-size:0, keep the chevron) so Mark as Complete fills the
	   middle and stays centred; the hidden slot still reserves its square,
	   keeping the row symmetrical. Tutor styles these ghost buttons with
	   !important rules that load after this file, so every property here needs
	   !important + high specificity ([data-lesson] + .tutor-btn-ghost) to win. */
	body.nj-tutor-la .tutor-learning-area-footer[data-lesson] > a.tutor-btn.tutor-btn-ghost {
		flex: 0 0 auto !important;
		width: 48px !important;
		min-width: 48px !important;
		max-width: 48px !important;
		padding: 12px !important;
		gap: 0 !important;
		font-size: 0 !important;
		overflow: hidden !important;
		/* Both arrows read as matching secondary squares so Mark as Complete is
		   the only gold CTA (Tutor otherwise fills the Next button gold). */
		background: var(--nj-cream) !important;
		border: 1px solid var(--nj-border) !important;
		color: var(--nj-espresso) !important;
		box-shadow: none !important;
	}

	body.nj-tutor-la .tutor-learning-area-footer[data-lesson] > a.tutor-btn.tutor-btn-ghost svg {
		width: 20px !important;
		height: 20px !important;
		min-width: 20px !important;
		flex: 0 0 auto !important;
	}

	/* Mark as Complete takes the remaining width, centred between the two. */
	body.nj-tutor-la .tutor-learning-area-footer[data-lesson] > form {
		flex: 1 1 auto !important;
		min-width: 0 !important;
		margin: 0 !important;
	}

	body.nj-tutor-la .tutor-learning-area-footer[data-lesson] > form .tutor-mark-as-complete-button {
		width: 100% !important;
	}

	/* Reserve space so the fixed footer never covers the end of the lesson. */
	body.nj-tutor-la .tutor-learning-area-content {
		padding-bottom: calc(var(--nj-lf-h, 72px) + 16px + env(safe-area-inset-bottom, 0px));
	}
}


/* =========================================================
   13. ASSIGNMENT / FINAL ASSESSMENT (Tutor Pro 4.x learning
   area). Tutor already wraps the info + description in white
   cards; here we turn the flat instruction wall into branded
   collapsible sections (native <details>/<summary> written into
   the assignment content) and polish the submission form so it
   reads as part of the site. Works at all widths.
   ========================================================= */

/* "Assignment Description" eyebrow label above the accordions. */
.tutor-assignment-description > .tutor-small,
.tutor-assignment-description > div:first-child {
	font-family: var(--nj-font-body);
	font-size: 11px !important;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--nj-gold-dark) !important;
	margin-bottom: 12px;
}

.tutor-assignment-description .nj-assess-intro {
	margin: 0 0 16px;
	font-size: 15px;
	line-height: 1.6;
	color: var(--nj-espresso);
}

/* --- Collapsible instruction sections --------------------------------- */
.tutor-assignment-description .nj-assess {
	border: 1px solid var(--nj-border);
	border-radius: 14px;
	background: var(--nj-cream, #fffdf8);
	margin: 0 0 10px;
	overflow: hidden;
	transition: border-color .16s ease, box-shadow .16s ease;
}

.tutor-assignment-description .nj-assess[open] {
	border-color: rgba(198, 167, 105, 0.55);
	box-shadow: 0 10px 26px -12px rgba(42, 27, 20, 0.22);
}

.tutor-assignment-description .nj-assess > summary {
	list-style: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 16px;
	font-family: var(--nj-font-heading);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.25;
	color: var(--nj-espresso);
	-webkit-tap-highlight-color: transparent;
	transition: background-color .16s ease;
}

.tutor-assignment-description .nj-assess > summary::-webkit-details-marker {
	display: none;
}

.tutor-assignment-description .nj-assess > summary:hover {
	background: rgba(198, 167, 105, 0.08);
}

/* Numbered gold badge. */
.tutor-assignment-description .nj-assess__n {
	flex: 0 0 auto;
	width: 28px;
	height: 28px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--nj-gold), var(--nj-gold-dark));
	color: #fff;
	font-family: var(--nj-font-body);
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
}

/* Chevron that rotates when open. */
.tutor-assignment-description .nj-assess > summary::after {
	content: "";
	flex: 0 0 auto;
	margin-left: auto;
	width: 9px;
	height: 9px;
	border-right: 2px solid var(--nj-gold-dark);
	border-bottom: 2px solid var(--nj-gold-dark);
	transform: rotate(45deg);
	transition: transform .2s ease;
}

.tutor-assignment-description .nj-assess[open] > summary::after {
	transform: rotate(-135deg);
}

.tutor-assignment-description .nj-assess__body {
	padding: 2px 16px 16px 56px;
	color: var(--nj-espresso);
}

.tutor-assignment-description .nj-assess__body p {
	margin: 0 0 10px;
	font-size: 14.5px;
	line-height: 1.6;
}

.tutor-assignment-description .nj-assess__body ul {
	margin: 0 0 10px;
	padding-left: 18px;
	list-style: none;
}

.tutor-assignment-description .nj-assess__body li {
	position: relative;
	margin: 6px 0;
	padding-left: 16px;
	font-size: 14.5px;
	line-height: 1.5;
}

/* Gold bullet. */
.tutor-assignment-description .nj-assess__body li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 9px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--nj-gold);
}

/* Outcome section: soft gold accent so it reads as the "what happens next". */
.tutor-assignment-description .nj-assess--outcome {
	background: rgba(198, 167, 105, 0.07);
	border-color: rgba(198, 167, 105, 0.45);
}

.tutor-assignment-description .nj-assess--outcome .nj-assess__n {
	font-size: 16px;
}

/* Narrow phones: pull the body indent back so text isn't cramped. */
@media (max-width: 480px) {
	.tutor-assignment-description .nj-assess__body {
		padding-left: 16px;
	}
}

/* --- Submission form: file uploader on-brand ------------------------- */
.tutor-assignment .tutor-file-uploader {
	border: 2px dashed rgba(198, 167, 105, 0.55) !important;
	background: rgba(198, 167, 105, 0.06) !important;
	border-radius: 14px !important;
}

.tutor-assignment .tutor-file-uploader-icon,
.tutor-assignment .tutor-file-uploader-icon svg {
	color: var(--nj-gold-dark) !important;
}

/* "Assignment" eyebrow above the Submit title, in brand gold. */
.tutor-assignment-form-header .tutor-text-brand {
	color: var(--nj-gold-dark) !important;
	font-weight: 700;
	letter-spacing: 0.04em;
}

/* Little celebratory pop when a lesson is marked complete (nj-lesson-complete.js). */
@keyframes njCompletePop {
	0%   { transform: scale(1); }
	40%  { transform: scale(1.06); }
	100% { transform: scale(1); }
}

.tutor-mark-as-complete-button.nj-just-completed {
	animation: njCompletePop .45s ease;
}

/* Show the "Completed" state INSTANTLY on click, overriding Tutor's loading
   spinner (its @click sets isLoading → .tutor-btn-loading, which hides the text
   and shows a spinner). We keep the completed label + check visible for the
   ~1.6s before the finalising reload, so it reads as done straight away. */
.tutor-mark-as-complete-button.nj-just-completed {
	-webkit-text-fill-color: currentColor !important;
	pointer-events: none;
}

.tutor-mark-as-complete-button.nj-just-completed > * {
	visibility: visible !important;
}

.tutor-mark-as-complete-button.nj-just-completed::before {
	content: none !important;
	display: none !important;
	animation: none !important;
}