/**
 * Webzoe EAD Lesson — layout da página de aula.
 *
 * As cores, botões, cards e badges vêm do design system compartilhado do
 * Core (assets/css/design-system.css, carregado automaticamente como
 * dependência). Este arquivo cuida só do LAYOUT específico do player de aula.
 *
 * ESCOPO: todo seletor aqui é prefixado por .wzead-lesson (ou body, só para
 * o offset da admin bar). Nada de seletor genérico (button{}, a{}, form{},
 * .ld-button{}) — não deve afetar nenhuma outra página do LearnDash.
 */

body.wzead-lesson-page {
	margin: 0;
	background: var(--wzead-background, #F9FAFB);
}

.wzead-lesson-guest {
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
}
.wzead-lesson-guest__card {
	max-width: 420px;
	width: 100%;
	text-align: center;
}

.wzead-lesson {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

.wzead-lesson__admin-warning {
	border-radius: 0;
	justify-content: center;
	text-align: center;
}

/* ---------- Topbar compacto ---------- */
.wzead-lesson__topbar {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 10px 20px;
	background: var(--wzead-sidebar, #111827);
	color: #fff;
	position: sticky;
	top: 0;
	z-index: 20;
	min-height: 52px;
}
/* A admin bar do WP fica acima de tudo (z-index 99999) e tem altura fixa:
   32px no desktop, 46px em telas <= 782px. Sem isto, nosso topbar sticky
   (top:0) fica por baixo dela. */
body.admin-bar .wzead-lesson__topbar { top: 32px; }
@media screen and (max-width: 782px) {
	body.admin-bar .wzead-lesson__topbar { top: 46px; }
}

/*
 * Especificidade extra (.wzead-lesson__topbar button.wzead-lesson__drawer-toggle,
 * não só a classe sozinha) de propósito: temas e page builders — o Elementor
 * é o caso confirmado — costumam ter uma regra "reset" tipo
 * `.elementor-kit-XXX button { background-color: ...; font-size: ...; }` que
 * mira QUALQUER <button> do site inteiro, não só o que ele mesmo constrói.
 * Um seletor de uma classe só (0,0,1,0) perde pra esse tipo de regra
 * (classe + elemento = 0,0,1,1). Combinando classe do container + elemento +
 * classe do botão garantimos que a nossa vence sem precisar de !important.
 */
.wzead-lesson__topbar button.wzead-lesson__drawer-toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	align-items: stretch;
	gap: 4px;
	width: 32px;
	height: 32px;
	min-width: 32px;
	min-height: 32px;
	background: transparent;
	border: none;
	border-radius: 0;
	cursor: pointer;
	padding: 0;
	margin: 0;
	flex-shrink: 0;
	overflow: hidden;
}
.wzead-lesson__topbar button.wzead-lesson__drawer-toggle span {
	display: block;
	width: 100%;
	height: 2px;
	background: #fff;
	border-radius: 1px;
}

.wzead-lesson__back {
	color: #E5E7EB;
	font-size: .875rem;
	white-space: nowrap;
	flex-shrink: 0;
}
.wzead-lesson__back:hover { color: #fff; }

.wzead-lesson__course-title {
	flex: 1;
	font-weight: 700;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	min-width: 0;
}

.wzead-lesson__topbar-progress {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-shrink: 0;
}
.wzead-lesson__percent {
	font-size: .8125rem;
	font-weight: 700;
	color: #E5E7EB;
	min-width: 2.5em;
	text-align: right;
}

/* ---------- Layout ---------- */
.wzead-lesson__body {
	display: flex;
	flex: 1;
	min-height: 0;
	position: relative;
}

/* ---------- Sidebar ---------- */
.wzead-lesson__sidebar {
	width: 300px;
	flex-shrink: 0;
	background: var(--wzead-card, #fff);
	border-right: 1px solid var(--wzead-border, rgba(17,24,39,.08));
	display: flex;
	flex-direction: column;
	position: sticky;
	top: 52px;
	height: calc(100vh - 52px);
}
body.admin-bar .wzead-lesson__sidebar { top: calc(52px + 32px); height: calc(100vh - 52px - 32px); }
@media screen and (max-width: 782px) {
	body.admin-bar .wzead-lesson__sidebar { top: calc(52px + 46px); height: calc(100vh - 52px - 46px); }
}

.wzead-lesson__sidebar-head {
	padding: 16px 18px;
	border-bottom: 1px solid var(--wzead-border, rgba(17,24,39,.08));
	flex-shrink: 0;
}
.wzead-lesson__sidebar-title {
	font-weight: 700;
	font-size: .9375rem;
	margin-bottom: 10px;
}
.wzead-lesson__sidebar-percent {
	margin-top: 6px;
	font-size: .75rem;
	color: var(--wzead-muted, #6B7280);
}

/* Rolagem só na lista de aulas — a página em si não rola por causa disso. */
.wzead-lesson__outline {
	overflow-y: auto;
	flex: 1;
	min-height: 0;
}

.wzead-outline__module-title {
	padding: 14px 18px 6px;
	font-size: .75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--wzead-muted, #6B7280);
}

.wzead-outline__item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 18px;
	color: var(--wzead-text, #1F2937);
	font-size: .9375rem;
	font-weight: 600;
}
.wzead-outline__item:hover { background: var(--wzead-secondary, #F3E8FF); text-decoration: none; }
.wzead-outline__item.is-current { background: var(--wzead-secondary, #F3E8FF); color: var(--wzead-primary, #6D28D9); }
.wzead-outline__item--topic { font-weight: 400; font-size: .875rem; }
.wzead-outline__item.is-locked { color: var(--wzead-muted, #6B7280); cursor: not-allowed; }
.wzead-outline__item.is-locked:hover { background: transparent; }

.wzead-outline__check {
	width: 18px;
	height: 18px;
	border-radius: 50%;
	border: 2px solid var(--wzead-muted, #6B7280);
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: .625rem;
	line-height: 1;
}
.wzead-outline__check.is-complete {
	border-color: var(--wzead-accent, #22C55E);
	background: var(--wzead-accent, #22C55E);
	color: #fff;
}
.wzead-outline__check.is-locked { border-style: dashed; }

/* Drawer no mobile: escondido por padrão, off-canvas. */
.wzead-lesson__drawer-backdrop { display: none; }

@media (max-width: 959px) {
	.wzead-lesson__topbar button.wzead-lesson__drawer-toggle { display: flex; }
	.wzead-lesson__back-label { display: none; }

	.wzead-lesson__sidebar {
		position: fixed;
		top: 0;
		left: 0;
		height: 100vh;
		z-index: 40;
		transform: translateX(-100%);
		transition: transform .25s ease;
		box-shadow: 0 0 24px rgba(0,0,0,.15);
	}
	.wzead-lesson.is-drawer-open .wzead-lesson__sidebar {
		transform: translateX(0);
	}
	.wzead-lesson__drawer-backdrop {
		display: block;
		position: fixed;
		inset: 0;
		background: rgba(17,24,39,.4);
		z-index: 30;
		opacity: 0;
		pointer-events: none;
		transition: opacity .25s ease;
	}
	.wzead-lesson.is-drawer-open .wzead-lesson__drawer-backdrop {
		opacity: 1;
		pointer-events: auto;
	}
}

/* ---------- Conteúdo principal ---------- */
.wzead-lesson__main {
	flex: 1;
	min-width: 0;
	padding: 28px 24px 60px;
}
.wzead-lesson__container {
	max-width: 1040px;
	margin: 0 auto;
	width: 100%;
}

/* ---------- Player ---------- */
.wzead-lesson__player {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	background: #000;
	border-radius: var(--wzead-radius, 18px);
	overflow: hidden;
	margin-bottom: 24px;
}
.wzead-lesson__player iframe,
.wzead-lesson__player video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* ---------- Corpo da aula (sem card de altura fixa/excessiva) ---------- */
.wzead-lesson__content {
	background: var(--wzead-card, #fff);
	border: 1px solid var(--wzead-border, rgba(17,24,39,.08));
	border-radius: var(--wzead-radius, 18px);
	padding: 24px 28px;
	margin-bottom: 20px;
	/* Sem min-height: a altura é só o que o conteúdo precisa. */
}
.wzead-lesson__text { line-height: 1.7; }
.wzead-lesson__text img { max-width: 100%; height: auto; border-radius: var(--wzead-radius-sm, 12px); }
.wzead-lesson__text:empty { display: none; }

/* ---------- Materiais ---------- */
.wzead-lesson__materials { margin-bottom: 20px; }
.wzead-lesson__materials h3 { font-size: 1rem; margin: 0 0 12px; }

.wzead-lesson__materials-grid {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.wzead-lesson__materials-grid.is-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
}
@media (min-width: 640px) {
	.wzead-lesson__materials-grid.is-grid { grid-template-columns: repeat(2, 1fr); }
}

.wzead-lesson__material-card {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 16px;
	background: var(--wzead-card, #fff);
	border: 1px solid var(--wzead-border, rgba(17,24,39,.08));
	border-radius: var(--wzead-radius-sm, 12px);
}
.wzead-lesson__material-icon {
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	border-radius: 10px;
	background: var(--wzead-secondary, #F3E8FF);
	color: var(--wzead-primary, #6D28D9);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: .6875rem;
	font-weight: 700;
}
.wzead-lesson__material-info { flex: 1; min-width: 0; }
.wzead-lesson__material-title {
	font-weight: 600;
	font-size: .9375rem;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.wzead-lesson__material-desc {
	font-size: .8125rem;
	color: var(--wzead-muted, #6B7280);
}

/* ---------- Navegação inferior ---------- */
.wzead-lesson__nav {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 12px;
	margin-bottom: 24px;
}
.wzead-lesson__nav-prev { justify-self: start; }
.wzead-lesson__nav-next { justify-self: end; }
.wzead-lesson__complete-btn { justify-self: center; white-space: nowrap; }
.wzead-lesson__complete-btn[data-completed="1"] { background: var(--wzead-accent, #22C55E); }
.wzead-lesson__nav-next--locked {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--wzead-muted, #6B7280);
	font-size: .875rem;
	cursor: not-allowed;
}

@media (max-width: 640px) {
	.wzead-lesson__nav {
		grid-template-columns: 1fr;
		gap: 10px;
	}
	.wzead-lesson__complete-btn {
		order: -1;
		width: 100%;
	}
	.wzead-lesson__nav-prev,
	.wzead-lesson__nav-next {
		justify-self: stretch;
		text-align: center;
	}
	.wzead-lesson__nav-prev { grid-column: 1; }
}
@media (min-width: 641px) and (max-width: 900px) {
	.wzead-lesson__nav-prev a,
	.wzead-lesson__nav-next a { font-size: .875rem; }
}

/* ---------- Comentários ---------- */
.wzead-lesson__comments {
	background: var(--wzead-card, #fff);
	border: 1px solid var(--wzead-border, rgba(17,24,39,.08));
	border-radius: var(--wzead-radius, 18px);
	padding: 24px 28px;
}
.wzead-lesson__comments .comment-form input,
.wzead-lesson__comments .comment-form textarea {
	width: 100%;
	padding: .625rem .75rem;
	border: 1px solid var(--wzead-border, rgba(17,24,39,.08));
	border-radius: var(--wzead-radius-sm, 12px);
	font: inherit;
}
.wzead-lesson__comments .comment-form textarea { min-height: 100px; }
.wzead-lesson__comments .comment-form input[type="submit"] {
	width: auto;
	background: var(--wzead-button, #6D28D9);
	color: var(--wzead-button-text, #fff);
	border: none;
	font-weight: 600;
	cursor: pointer;
	padding: .625rem 1.125rem;
}