/*
 * LFPRO Lesson Page
 *
 * Colors are driven by CSS custom properties set on .lesson-page
 * via a single style="" from single.php (course meta values).
 * Defaults below cover the case where no meta is saved.
 */

/* ─────────────────────────────────────────────────────────────────────────────
   Body & BB wrapper setup (lesson pages only, via body.is-lesson)
───────────────────────────────────────────────────────────────────────────── */
body {
	overflow-x: hidden;
}

body.is-lesson {
	overflow: hidden;
}

body.is-lesson .fl-page,
body.is-lesson #fl-main-content {
	height: 100vh;
	padding: 0;
	background: transparent;
}

body.is-lesson .fl-page-content {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	padding: 0;
	background: transparent;
}

/* Non-lesson single pages */
body:not(.is-lesson) .fl-content      { margin: 0 !important; }
body:not(.is-lesson) .fl-post         { margin-bottom: 0 !important; }
body:not(.is-lesson) .fl-page-content { background: none !important; }

/* ─────────────────────────────────────────────────────────────────────────────
   Lesson page container
───────────────────────────────────────────────────────────────────────────── */
.lesson-page {
	/* Color defaults — all overrideable per-course via inline style on this element */
	--c-sidebar-bg:          #161b22;
	--c-sidebar-text:        #e6edf3;
	--c-sidebar-border:      rgba(255, 255, 255, 0.07);
	--c-module-bg:           #21262d;
	--c-module-text:         #c9d1d9;
	--c-module-active-bg:    #238636;
	--c-module-active-text:  #ffffff;
	--c-module-body-bg:      #161b22;
	--c-item-text:           #8b949e;
	--c-item-hover-bg:       rgba(255, 255, 255, 0.04);
	--c-item-active-bg:      rgba(35, 134, 54, 0.15);
	--c-item-active-border:  #238636;
	--c-item-active-text:    #ffffff;
	--c-item-done:           #3fb950;
	--c-progress-fill:       #238636;
	--c-progress-track:      rgba(255, 255, 255, 0.1);
	--c-progress-text:       #e6edf3;
	--c-content-bg:          #ffffff;
	--c-topbar-bg:           #ffffff;
	--c-topbar-border:       #e5e7eb;
	--c-topbar-text:         #111827;

	--sidebar-w:  300px;
	--topbar-h:   52px;

	position: relative;
	display: flex;
	width:  93vw;
	height: 93vh;
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 8px 48px rgba(0, 0, 0, 0.4);
}

/* ─────────────────────────────────────────────────────────────────────────────
   Sidebar
───────────────────────────────────────────────────────────────────────────── */
.lesson-sidebar {
	flex-shrink: 0;
	width: var(--sidebar-w);
	display: flex;
	flex-direction: column;
	background: var(--c-sidebar-bg);
	color: var(--c-sidebar-text);
	overflow: hidden;
	border-right: 1px solid var(--c-sidebar-border);
	transition: width 0.25s cubic-bezier(.4, 0, .2, 1);
}

.lesson-sidebar.is-collapsed {
	width: 0;
	border-right: none;
}

/* Header row */
.lesson-sidebar__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 0 16px;
	height: var(--topbar-h);
	flex-shrink: 0;
	border-bottom: 1px solid var(--c-sidebar-border);
}

.lesson-back-btn {
	display: flex;
	align-items: center;
	gap: 6px;
	flex: 1;
	min-width: 0;
	color: var(--c-sidebar-text);
	text-decoration: none;
	font-size: 13px;
	font-weight: 500;
	opacity: 0.6;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	transition: opacity 0.15s;
}

.lesson-back-btn:hover {
	opacity: 1;
	color: var(--c-sidebar-text);
}

.lesson-back-btn svg {
	flex-shrink: 0;
	width: 14px;
	height: 14px;
}

/* Mobile close button (hidden on desktop, shown at ≤ 900px) */
.lesson-sidebar-close {
	display: none;
	flex-shrink: 0;
	width: 30px;
	height: 30px;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: none;
	border-radius: 7px;
	cursor: pointer;
	padding: 5px;
	color: var(--c-sidebar-text);
	opacity: 0.55;
	transition: background 0.15s, opacity 0.15s;
}

.lesson-sidebar-close:hover {
	opacity: 1;
	background: rgba(128, 128, 128, 0.15);
}

.lesson-sidebar-close svg {
	width: 16px;
	height: 16px;
}

@media (max-width: 900px) {
	.lesson-sidebar-close {
		display: flex;
	}
}

/* Progress */
.lesson-sidebar__progress {
	padding: 13px 16px;
	flex-shrink: 0;
	border-bottom: 1px solid var(--c-sidebar-border);
}

.lesson-progress-meta {
	display: flex;
	justify-content: space-between;
	margin-bottom: 7px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--c-progress-text);
	opacity: 0.65;
}

.lesson-progress-track {
	height: 5px;
	background: var(--c-progress-track);
	border-radius: 99px;
	overflow: hidden;
}

.lesson-progress-fill {
	height: 100%;
	background: var(--c-progress-fill);
	border-radius: 99px;
	transition: width 0.6s ease;
}

/* Nav scroll area */
.lesson-sidebar__nav {
	flex: 1;
	overflow-y: auto;
	padding: 10px 10px 24px;
	scrollbar-width: thin;
	scrollbar-color: rgba(255, 255, 255, 0.1) transparent;
}

.lesson-sidebar__nav::-webkit-scrollbar       { width: 3px; }
.lesson-sidebar__nav::-webkit-scrollbar-track { background: transparent; }
.lesson-sidebar__nav::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.12); border-radius: 2px; }

/* Sections — native <details> accordion */
.lesson-section {
	margin-bottom: 6px;
	border-radius: 10px;
	overflow: hidden;
}

.lesson-section__toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	width: 100%;
	padding: 11px 14px;
	background: var(--c-module-bg);
	color: var(--c-module-text);
	border: none;
	cursor: pointer;
	font-size: 13px;
	font-weight: 600;
	text-align: left;
	line-height: 1.4;
	border-radius: 10px;
	list-style: none;
	transition: background 0.15s, color 0.15s, border-radius 0.15s;
}

.lesson-section__toggle::-webkit-details-marker { display: none; }

.lesson-section[open] > .lesson-section__toggle {
	background: var(--c-module-active-bg);
	color: var(--c-module-active-text);
	border-radius: 10px 10px 0 0;
}

.lesson-section__toggle:hover {
	background: var(--c-module-active-bg);
	color: var(--c-module-active-text);
}

.lesson-section__chevron {
	flex-shrink: 0;
	width: 14px;
	height: 14px;
	opacity: 0.55;
	transition: transform 0.2s;
}

.lesson-section[open] .lesson-section__chevron {
	transform: rotate(90deg);
}

/* Lesson item list */
.lesson-section__body {
	background: var(--c-module-body-bg);
	border-radius: 0 0 10px 10px;
	overflow: hidden;
	padding: 4px 0;
}

.lesson-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 14px;
	color: var(--c-item-text);
	text-decoration: none;
	font-size: 12.5px;
	line-height: 1.45;
	border-left: 3px solid transparent;
	transition: background 0.12s, color 0.12s, border-color 0.12s;
}

.lesson-item:hover {
	background: var(--c-item-hover-bg);
	color: var(--c-sidebar-text);
}

.lesson-item.is-active {
	background: var(--c-item-active-bg);
	border-left-color: var(--c-item-active-border);
	color: var(--c-item-active-text);
}

.lesson-item__icon {
	flex-shrink: 0;
	width: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0.2;
}

.lesson-item.is-done .lesson-item__icon {
	opacity: 1;
	color: var(--c-item-done);
}

.lesson-item__icon svg {
	width: 13px;
	height: 13px;
}

.lesson-item__title {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Content area
───────────────────────────────────────────────────────────────────────────── */
.lesson-content {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	background: var(--c-content-bg);
	overflow: hidden;
}

.lesson-topbar {
	display: flex;
	align-items: center;
	gap: 10px;
	height: var(--topbar-h);
	padding: 0 20px;
	flex-shrink: 0;
	background: var(--c-topbar-bg);
	border-bottom: 1px solid var(--c-topbar-border);
}

.lesson-topbar__title {
	flex: 1;
	min-width: 0;
	font-size: 14px;
	font-weight: 600;
	color: var(--c-topbar-text);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Toggle button (used in both topbar and sidebar header) */
.lesson-toggle-btn {
	flex-shrink: 0;
	width: 34px;
	height: 34px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 5px;
	background: transparent;
	border: none;
	border-radius: 8px;
	cursor: pointer;
	padding: 7px;
	color: inherit;
	opacity: 0.6;
	transition: background 0.15s, opacity 0.15s;
}

.lesson-toggle-btn:hover {
	opacity: 1;
	background: rgba(128, 128, 128, 0.12);
}

.lesson-toggle-btn span {
	display: block;
	width: 18px;
	height: 2px;
	border-radius: 2px;
	background: currentColor;
}

.lesson-content__body {
	flex: 1;
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: rgba(0, 0, 0, 0.1) transparent;
}

.lesson-content__body::-webkit-scrollbar       { width: 5px; }
.lesson-content__body::-webkit-scrollbar-track { background: transparent; }
.lesson-content__body::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.1); border-radius: 3px; }

/* Strip FL Builder default chrome inside the content body */
.lesson-content__body .fl-content  { margin: 0 !important; }
.lesson-content__body .fl-post     { margin-bottom: 0 !important; }
.lesson-content .llms-notice.llms-success { display: none; }

/* ─────────────────────────────────────────────────────────────────────────────
   Beaver Builder editor mode
   BB sets overflow:visible on containers so drag handles can appear outside
   their parent. This breaks our overflow:hidden border-radius clipping and
   lets the page scroll instead of the internal content area.
───────────────────────────────────────────────────────────────────────────── */
body.fl-builder.is-lesson {
	overflow: hidden;
}

body.fl-builder.is-lesson .fl-page,
body.fl-builder.is-lesson #fl-main-content,
body.fl-builder.is-lesson .fl-page-content {
	overflow: hidden;
}

/* Force the container to stay clipped — preserves border-radius */
body.fl-builder.is-lesson .lesson-page {
	overflow: hidden !important;
	border-radius: 14px !important;
}

/* Content area must stay flex-column so the body fills remaining height */
body.fl-builder.is-lesson .lesson-content {
	overflow: hidden !important;
}

/* The actual scrollable zone — BB may make .fl-content grow unbounded */
body.fl-builder.is-lesson .lesson-content__body {
	overflow-y: auto !important;
	height: 0;          /* flex:1 + height:0 forces the element to fill its flex parent
	                       without inheriting the parent's auto/content height */
}

/* ─────────────────────────────────────────────────────────────────────────────
   Mobile overlay drawer (≤ 900 px)
───────────────────────────────────────────────────────────────────────────── */
.lesson-sidebar-overlay {
	display: none;
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.45);
	z-index: 50;
	cursor: pointer;
	border-radius: inherit;
}

@media (max-width: 900px) {
	.lesson-sidebar {
		position: absolute;
		top: 0;
		left: 0;
		height: 100%;
		z-index: 100;
		width: var(--sidebar-w);             /* always full width on mobile  */
		transform: translateX(0);
		transition: transform 0.25s cubic-bezier(.4, 0, .2, 1);
		border-right: 1px solid var(--c-sidebar-border);
	}

	.lesson-sidebar.is-collapsed {
		width: var(--sidebar-w);             /* override desktop width:0     */
		transform: translateX(-100%);
	}

	.lesson-sidebar-overlay.is-visible {
		display: block;
	}

	body.fl-builder.is-lesson .lesson-content {
		border-radius: 20px !important;
	}
}