/**
 * Brand re-skin for the Tutor LMS 4.x learning area (lesson / quiz player) and
 * student dashboard. Loaded only on those views, always in light mode (the
 * dark theme is forced off in tutor-learning-theme.php).
 *
 * Approach: Tutor is fully driven by CSS custom properties. Its default accent
 * is blue (--tutor-brand-*) and its progress/success colour is green. We remap
 * the brand scale to the NJ gold and recolour progress bars to gold, so the
 * whole player follows the cream / gold / espresso brand — while keeping the
 * green completion ticks, which read clearly as "done".
 *
 * !important is used on the token declarations so they win regardless of the
 * order Tutor's own stylesheet loads in.
 *
 * @package NJ_Beauty_Brand_Polish
 */

/* ---- Remap Tutor's blue brand scale to NJ gold ------------------------- */
[data-tutor-theme],
.tutor-learning-area,
.tutor-frontend-dashboard {
	--tutor-brand-50:  #fbf6ec !important;
	--tutor-brand-100: #f5ead3 !important;
	--tutor-brand-200: #ebd9b3 !important;
	--tutor-brand-300: #dfc48d !important;
	--tutor-brand-400: #d2b074 !important;
	--tutor-brand-500: #c6a769 !important;
	--tutor-brand-600: #a98543 !important;
	--tutor-brand-700: #8a6c37 !important;
	--tutor-brand-800: #6b5330 !important;
	--tutor-brand-900: #47391f !important;
	--tutor-brand-950: #2a1b14 !important;

	/* Semantic action tokens that some components read directly. */
	--tutor-actions-brand-primary:   #c6a769 !important;
	--tutor-actions-brand-secondary: #f5ead3 !important;
	--tutor-actions-brand-tertiary:  #ebd9b3 !important;

	/* Links / focus rings in the reader. */
	--tutor-color-primary:      #c6a769 !important;
	--tutor-color-primary-hover:#a98543 !important;
}

/* ---- Progress bars → gold (keep the green "completed" ticks) ------------ */
.tutor-learning-area .tutor-progress-bar-fill,
.tutor-frontend-dashboard .tutor-progress-bar-fill,
.tutor-learning-progress .tutor-progress-bar-fill {
	background-color: var(--nj-gold, #c6a769) !important;
}

/* ---- Active curriculum item: warm the accent instead of blue ----------- */
.tutor-learning-nav-item.active,
.tutor-learning-nav-item:hover {
	background-color: var(--nj-ivory, #f8f3ec) !important;
}
.tutor-learning-nav-item.active {
	box-shadow: inset 3px 0 0 var(--nj-gold, #c6a769) !important;
}
.tutor-learning-nav-item.active .tutor-learning-nav-item-title {
	color: var(--nj-espresso, #2a1b14) !important;
	font-weight: 600 !important;
}

/* ---- Content tabs (Overview / Exercise Files / Notes) ------------------- */
.tutor-learning-area-content .tutor-nav-link.is-active,
.tutor-learning-area-content [aria-selected="true"] {
	color: var(--nj-gold-dark, #a98543) !important;
}

/* ---- Header "Complete the Course" + primary buttons -------------------- */
.tutor-learning-area .tutor-btn-primary,
.tutor-frontend-dashboard .tutor-btn-primary {
	background-color: var(--nj-gold, #c6a769) !important;
	border-color: var(--nj-gold, #c6a769) !important;
	color: #2a1b14 !important;
}
.tutor-learning-area .tutor-btn-primary:hover,
.tutor-frontend-dashboard .tutor-btn-primary:hover {
	background-color: var(--nj-gold-dark, #a98543) !important;
	border-color: var(--nj-gold-dark, #a98543) !important;
	color: #fff !important;
}

/* ---- Soften surfaces to the warm brand off-white ----------------------- */
.tutor-learning-sidebar {
	background-color: var(--nj-cream, #fffdf9) !important;
}

/* ---- Lesson action bar: Previous / Mark as Complete / Next -------------
   Students couldn't spot the navigation — the bar sat below the tall booklet
   and the Next button was a faint grey ghost link. Turn it into a bold, solid,
   always-pinned action bar with a loud gold Next and a clear Complete button. */
.tutor-learning-area-footer[data-lesson] {
	position: sticky !important;
	bottom: 0 !important;
	z-index: 40 !important;
	background: var(--nj-cream, #fffdf9) !important;
	border-top: 1px solid var(--nj-border, #e8ded3) !important;
	box-shadow: 0 -8px 26px rgba( 42, 27, 20, 0.13 ) !important;
	padding: 14px 22px !important;
	gap: 12px !important;
	align-items: center !important;
}

/* Next → prominent gold button (was an easy-to-miss ghost link). */
.tutor-learning-area-footer[data-lesson] > a.tutor-btn:last-of-type {
	background: var(--nj-gold, #c6a769) !important;
	border-color: var(--nj-gold, #c6a769) !important;
	color: #2a1b14 !important;
	font-weight: 700 !important;
	font-size: 15px !important;
	padding: 11px 28px !important;
	opacity: 1 !important;
	visibility: visible;
}
.tutor-learning-area-footer[data-lesson] > a.tutor-btn:last-of-type:hover {
	background: var(--nj-gold-dark, #a98543) !important;
	border-color: var(--nj-gold-dark, #a98543) !important;
	color: #fff !important;
}

/* Previous → visible outline (secondary). */
.tutor-learning-area-footer[data-lesson] > a.tutor-btn:first-of-type {
	border: 1px solid var(--nj-border, #d9ccbb) !important;
	color: var(--nj-espresso, #2a1b14) !important;
	font-weight: 600 !important;
	padding: 11px 20px !important;
}

/* Mark as Complete → clear bold outline so it can't be missed. */
.tutor-learning-area-footer[data-lesson] .tutor-mark-as-complete-button:not(.completed) {
	border: 1.5px solid var(--nj-gold, #c6a769) !important;
	color: var(--nj-gold-dark, #a98543) !important;
	background: #fff !important;
	font-weight: 700 !important;
	font-size: 15px !important;
	padding: 10px 22px !important;
}

/* Leave room so page content never hides behind the pinned bar. */
.tutor-learning-area-content {
	padding-bottom: 84px !important;
}

@media (max-width: 767px) {
	/* Tutor's floating "Take Note" button becomes a bottom bar on phones and
	   covers the nav. Notes are still reachable via the Notes tab, so hide the
	   floating button here to keep the Prev/Complete/Next bar unobstructed. */
	#tutor-lesson-nav-take-note-btn {
		display: none !important;
	}
	.tutor-learning-area-footer[data-lesson] {
		padding: 10px 10px !important;
		gap: 6px !important;
		flex-wrap: nowrap !important;
		z-index: 50 !important;
	}
	.tutor-learning-area-footer[data-lesson] > a.tutor-btn,
	.tutor-learning-area-footer[data-lesson] .tutor-mark-as-complete-button {
		font-size: 13px !important;
		padding: 10px 12px !important;
		white-space: nowrap !important;
		min-width: 0 !important;
	}
	/* Mark as Complete takes the middle room; Prev/Next stay compact. */
	.tutor-learning-area-footer[data-lesson] .tutor-mark-as-complete-button:not(.completed) {
		flex: 1 1 auto !important;
		justify-content: center !important;
	}
	.tutor-learning-area-footer[data-lesson] > a.tutor-btn:first-of-type,
	.tutor-learning-area-footer[data-lesson] > a.tutor-btn:last-of-type {
		flex: 0 0 auto !important;
	}
}

/* ---- Assignment ("Assessment") body -----------------------------------
   The Tutor Pro Assignments add-on renders through the OLD single-lesson
   wrappers, which carry a constrained height / overflow in Tutor 4.x's new
   learning area — so the long assessment description overflows its card and the
   footer "Start Assignment" button lands on top of the text. Force the whole
   assignment to flow naturally in a single column. */
.tutor-learning-area .tutor-course-topic-single-body,
.tutor-learning-area .tutor-quiz-wrapper,
.tutor-learning-area .tutor-quiz-wrap,
.tutor-learning-area #tutor-assignment-wrap,
.tutor-learning-area .tutor-course-assignment-details {
	position: static !important;
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	height: auto !important;
	min-height: 0 !important;
	max-height: none !important;
	overflow: visible !important;
	margin-inline: 0 !important;
}
.tutor-learning-area .tutor-quiz-wrapper {
	padding-top: 8px !important;
}
.tutor-learning-area .tutor-assignment-footer,
.tutor-learning-area .tutor-assignment-footer-btn {
	position: static !important;
}

/* The add-on collapses a long assignment description into a 300px "Show More"
   box (inline height:300px + a toggle), but the toggle JS never runs in the new
   learning area — so the description stays clamped, its overflow spills over the
   footer, and the "Start Assignment" button lands on top of the text. Force the
   description fully open and hide the now-dead toggle so it flows naturally. */
.tutor-learning-area #content-section,
.tutor-learning-area .tutor-toggle-more-content {
	height: auto !important;
	max-height: none !important;
	overflow: visible !important;
}
.tutor-learning-area .tutor-btn-show-more {
	display: none !important;
}