/* ================================================================
   Template single-lezioni.php — Singola lezione
================================================================ */

:root {
	--sl-navy:      #1e3a5f;
	--sl-navy-dk:   #152a44;
	--sl-navy-lt:   #2c5282;
	--sl-orange:    #e67e22;
	--sl-orange-dk: #c7621a;
	--sl-orange-lt: #fff4e6;
	--sl-green:     #27ae60;
	--sl-green-dk:  #1e8449;
	--sl-muted:     #666;
	--sl-border:    #e5e5e5;
	--sl-text:      #333;
	--sl-bg:        #fafafa;
}

/* ── Utility ───────────────────────────────────────────────────── */
.sl-wrap {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 20px;
}
.sl-wrap--main {
	margin-top: 25px;
	margin-bottom: 50px;
}

/* ── Lesson header ─────────────────────────────────────────────── */
.sl-lesson-header {
	background: #fff;
	border-bottom: 1px solid var(--sl-border);
	padding: 20px 0;
}
.sl-eyebrow {
	font-size: 11px;
	color: var(--sl-orange);
	text-transform: uppercase;
	letter-spacing: 1.5px;
	font-weight: 700;
	margin-bottom: 6px;
}
.sl-eyebrow a { color: var(--sl-orange); text-decoration: none; }
.sl-eyebrow a:hover { text-decoration: underline; }
.sl-lesson-h1 {
	font-size: 26px;
	color: var(--sl-navy);
	font-weight: 400;
	line-height: 1.25;
	margin: 0;
}
.sl-scadenza { font-size: 13px; color: var(--sl-orange); margin-top: 8px; }
.sl-scadenza strong { font-weight: 700; }

/* ── Main layout ───────────────────────────────────────────────── */
.sl-main {
	display: grid;
	grid-template-columns: 1fr 320px;
	gap: 30px;
	align-items: start;
}
.sl-main--single {
	grid-template-columns: 1fr;
	max-width: 700px;
}

/* ── Content area ──────────────────────────────────────────────── */
.sl-content {
	background: #fff;
	border: 1px solid var(--sl-border);
	box-shadow: 0 1px 3px rgba(0,0,0,.04);
	min-width: 0;
}

/* ── Video player ──────────────────────────────────────────────── */
.sl-player-wrap { position: relative; background: #000; }
.sl-player-ratio {
	position: relative;
	padding-bottom: 56.25%;
	background: #0a0a0a;
}
.sl-player-ratio iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: none;
}

/* Session overlay */
.sl-session-overlay {
	position: absolute;
	inset: 0;
	background: rgba(0,0,0,.78);
	backdrop-filter: blur(4px);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	z-index: 10;
	color: #fff;
	text-align: center;
	padding: 30px;
}
.sl-session-overlay p { font-size: 14px; margin-bottom: 16px; line-height: 1.6; }
.sl-session-resume {
	background: var(--sl-orange);
	color: #fff;
	border: none;
	padding: 12px 24px;
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
	border-radius: 3px;
	transition: background .2s;
	height: auto;
}
.sl-session-resume:hover { background: var(--sl-navy); }

/* ── Advancement bar ───────────────────────────────────────────── */
.sl-advancement {
	background: #fff;
	border-top: 1px solid var(--sl-border);
	padding: 18px 24px;
}
.sl-adv-label {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 10px;
	font-size: 14px;
	color: var(--sl-navy);
	font-weight: 700;
}
.sl-adv-pct { color: var(--sl-orange-dk); font-size: 18px; font-weight: 700; }
.sl-adv-bar {
	height: 10px;
	background: #eee;
	border-radius: 5px;
	overflow: hidden;
	border: 1px solid #ddd;
	padding: 1px;
}
.sl-adv-fill {
	height: 100%;
	background: linear-gradient(90deg, var(--sl-orange), var(--sl-orange-dk));
	border-radius: 5px;
	transition: width .5s;
}
.sl-adv-fill--done { background: linear-gradient(90deg, var(--sl-green), var(--sl-green-dk)); }
.sl-adv-info {
	display: flex;
	justify-content: space-between;
	font-size: 12px;
	color: var(--sl-muted);
	margin-top: 8px;
}
.sl-adv-check { color: var(--sl-green); font-weight: 600; }

/* ── Resume notice ─────────────────────────────────────────────── */
.sl-resume-notice {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	background: var(--sl-orange-lt);
	border-left: 4px solid var(--sl-orange);
	padding: 12px 24px;
	font-size: 13px;
	color: var(--sl-navy);
	flex-wrap: wrap;
}
.sl-btn-restart {
	background: none;
	border: none;
	color: var(--sl-muted);
	font-size: 12px;
	cursor: pointer;
	text-decoration: underline;
	padding: 0;
	white-space: nowrap;
}

/* ── Completed notice ──────────────────────────────────────────── */
.sl-completed-notice {
	background: linear-gradient(90deg, #f0fdf4, #ecfdf5);
	border-left: 4px solid var(--sl-green);
	padding: 14px 24px;
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 14px;
	font-weight: 700;
	color: var(--sl-green);
}
.sl-completed-icon { font-size: 20px; }

/* ── Lesson body ───────────────────────────────────────────────── */
.sl-lesson-body { padding: 35px 40px; }
.sl-lesson-content { color: var(--sl-text); line-height: 1.7; }
.sl-lesson-content h2 {
	font-size: 22px;
	color: var(--sl-navy);
	font-weight: 400;
	margin: 0 0 12px;
	padding-bottom: 10px;
	border-bottom: 2px solid var(--sl-navy);
	position: relative;
}
.sl-lesson-content h2::after {
	content: '';
	position: absolute;
	bottom: -2px; left: 0;
	width: 60px; height: 2px;
	background: var(--sl-orange);
}
.sl-lesson-content h3 { font-size: 17px; color: var(--sl-navy); margin: 22px 0 8px; }
.sl-lesson-content p { margin-bottom: 14px; }
.sl-lesson-content ul { margin: 10px 0 14px; padding-left: 0; list-style: none; }
.sl-lesson-content ul li {
	padding: 6px 0 6px 26px;
	position: relative;
	font-size: 13.5px;
}
.sl-lesson-content ul li::before {
	content: '';
	position: absolute;
	left: 0; top: 13px;
	width: 8px; height: 8px;
	background: var(--sl-orange);
	border-radius: 50%;
}

/* ── Quiz section ──────────────────────────────────────────────── */
.sl-quiz-section { padding: 20px 40px 40px; }

.sl-quiz-btn-wrap { padding: 0 40px 40px; text-align: center; }
.quiz-btn-locked  { display: none !important; }
.sl-quiz-btn {
	background: var(--sl-navy);
	color: #fff;
	border: none;
	padding: 14px 36px;
	font-size: 14px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .5px;
	cursor: pointer;
	border-radius: 3px;
	transition: background .2s;
}
.sl-quiz-btn:hover { background: var(--sl-orange); }

/* ── Prev / Next ───────────────────────────────────────────────── */
.sl-lesson-nav {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	padding: 25px 40px 35px;
	border-top: 1px solid var(--sl-border);
	background: #fafbfc;
}
.sl-nav-card {
	display: block;
	padding: 18px 20px;
	background: #fff;
	border: 1px solid var(--sl-border);
	text-decoration: none;
	transition: all .2s;
	border-radius: 3px;
}
.sl-nav-card:hover {
	border-color: var(--sl-orange);
	box-shadow: 0 4px 12px rgba(230,126,34,.1);
	transform: translateY(-1px);
}
.sl-nav--disabled { opacity: .5; pointer-events: none; cursor: default; }
.sl-nav--locked   { opacity: .6; pointer-events: none; cursor: not-allowed; border-style: dashed; }
.sl-nav--locked .sl-nav-dir   { color: #999; }
.sl-nav--locked .sl-nav-title { color: #999; }
.sl-nav-lock { font-size: 11px; color: #999; margin-top: 6px; }
.sl-nav-dir {
	font-size: 10px;
	color: var(--sl-muted);
	text-transform: uppercase;
	letter-spacing: 1px;
	font-weight: 700;
	margin-bottom: 4px;
}
.sl-nav-title { color: var(--sl-navy); font-weight: 700; font-size: 14px; }
.sl-nav--prev { text-align: left; }
.sl-nav--next { text-align: right; }

/* ── Login / No access ─────────────────────────────────────────── */
.sl-content--login { padding: 40px; }
.sl-login-title { color: var(--sl-navy); margin-bottom: 16px; font-size: 20px; font-weight: 400; }
.sl-login-error { color: #c0392b; margin-bottom: 12px; font-size: 13px; }

.sl-content--noaccess { padding: 60px 40px; text-align: center; }
.sl-no-access { max-width: 400px; margin: 0 auto; }
.sl-noa-icon { font-size: 48px; margin-bottom: 16px; }
.sl-no-access h3 { color: var(--sl-navy); font-size: 22px; margin-bottom: 8px; }
.sl-no-access p { color: var(--sl-muted); margin-bottom: 20px; }
.sl-btn-back {
	display: inline-block;
	background: var(--sl-navy);
	color: #fff;
	padding: 10px 24px;
	text-decoration: none;
	border-radius: 3px;
	font-weight: 700;
	font-size: 13px;
	transition: background .2s;
}
.sl-btn-back:hover { background: var(--sl-orange); color: #fff; }

/* ── Sidebar ───────────────────────────────────────────────────── */
.sl-sidebar {
	display: flex;
	flex-direction: column;
	gap: 20px;
	position: sticky;
	top: 20px;
	align-self: start;
}

.sl-widget { background: #fff; border: 1px solid var(--sl-border); }

.sl-widget-title {
	font-size: 13px;
	color: #fff;
	background: var(--sl-orange);
	padding: 12px 16px;
	font-weight: 700;
	border-left: 4px solid var(--sl-navy);
	text-transform: uppercase;
	letter-spacing: .5px;
}
.sl-widget-title a { color: #fff; text-decoration: none; }
.sl-widget-title a:hover { opacity: .85; }

/* Alert widget */
.sl-widget--alert { padding: 18px; }
.sl-alert--locked {
	background: linear-gradient(135deg, var(--sl-navy) 0%, var(--sl-navy-lt) 100%);
	color: #fff;
	border: none;
}
.sl-alert--done {
	border-left: 4px solid var(--sl-green);
	background: linear-gradient(135deg, #f0fdf4, #ecfdf5);
}
.sl-alert-icon { font-size: 30px; margin-bottom: 8px; }
.sl-alert-title {
	font-size: 15px;
	font-weight: 700;
	margin: 0 0 8px;
}
.sl-alert--locked .sl-alert-title { color: #fff; }
.sl-alert--done  .sl-alert-title  { color: var(--sl-green); }
.sl-alert-text { font-size: 13px; line-height: 1.5; margin: 0; }
.sl-alert--locked .sl-alert-text         { color: rgba(255,255,255,.85); }
.sl-alert--locked .sl-alert-text strong  { color: #fff; }
.sl-alert--done  .sl-alert-text          { color: var(--sl-text); }

.sl-alert-progress { margin: 10px 0; }
.sl-ap-bar {
	height: 5px;
	background: rgba(255,255,255,.15);
	border-radius: 3px;
	overflow: hidden;
	margin-bottom: 4px;
}
.sl-ap-fill { height: 100%; background: var(--sl-orange); border-radius: 3px; transition: width .4s; }
.sl-ap-label { font-size: 11px; color: rgba(255,255,255,.85); }

/* Summary widget */
.sl-sw-body { padding: 0; }
.sl-sw-progress {
	padding: 12px 16px;
	background: #fafafa;
	border-bottom: 1px solid var(--sl-border);
}
.sl-sw-lbl {
	display: flex;
	justify-content: space-between;
	font-size: 12px;
	color: var(--sl-muted);
	margin-bottom: 5px;
	font-weight: 600;
}
.sl-sw-lbl strong { color: var(--sl-orange-dk); }
.sl-sw-bar { height: 5px; background: #eee; border-radius: 3px; overflow: hidden; }
.sl-sw-fill { height: 100%; background: var(--sl-orange); transition: width .4s; }

.sl-sw-list { list-style: none; padding: 0; margin: 0; }
.sl-swl-module {
	background: var(--sl-navy);
	color: #fff;
	padding: 6px 16px;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .5px;
}
.sl-swl-item { border-bottom: 1px solid var(--sl-border); }
.sl-swl-item:last-child { border-bottom: none; }
.sl-swl-link {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 11px 16px;
	text-decoration: none;
	color: var(--sl-navy);
	font-size: 13px;
	line-height: 1.35;
	transition: background .2s;
}
a.sl-swl-link:hover { background: var(--sl-orange-lt); }
.sl-swl--done    > .sl-swl-link            { font-weight: 600; }
.sl-swl--open    > a.sl-swl-link           { color: var(--sl-orange-dk); }
.sl-swl--current > .sl-swl-link            { background: var(--sl-orange-lt); color: var(--sl-orange-dk); font-weight: 700; }
.sl-swl-link--locked                       { color: var(--sl-muted); }

.sl-swl-icon {
	width: 22px; height: 22px;
	border-radius: 50%;
	background: var(--sl-orange);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	font-weight: 700;
	flex-shrink: 0;
	margin-top: 1px;
}
.sl-swl--done    .sl-swl-icon { background: var(--sl-green); }
.sl-swl--locked  .sl-swl-icon { background: #ccc; }
.sl-swl--current .sl-swl-icon { background: var(--sl-orange); }

/* Session widget */
.sl-session-body { padding: 16px; }
.sl-session-dl {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 8px 14px;
	font-size: 12px;
}
.sl-session-dl dt {
	color: var(--sl-muted);
	text-transform: uppercase;
	font-size: 10px;
	letter-spacing: .8px;
	font-weight: 600;
	align-self: center;
}
.sl-session-dl dd { color: var(--sl-navy); font-weight: 700; font-size: 14px; }
.sl-session-active { color: var(--sl-green) !important; }

/* ── Responsive ────────────────────────────────────────────────── */
@media (max-width: 960px) {
	.sl-main { grid-template-columns: 1fr; }
	.sl-sidebar { position: static; }
	.sl-lesson-body { padding: 25px 20px; }
	.sl-lesson-nav { padding: 20px; grid-template-columns: 1fr; }
	.sl-lesson-h1 { font-size: 20px; }
	.sl-quiz-btn-wrap { padding: 0 20px 30px; }
	.sl-quiz-section { padding: 20px; }
}
@media (max-width: 640px) {
	.sl-advancement { padding: 14px 16px; }
	.sl-adv-info { flex-direction: column; gap: 2px; }
}