/*
 * Plantilla propia de la página de curso de LearnDash ("Sistema Visual
 * Aquí y Ahora"). Se carga SOLO en is_singular('sfwd-courses') — ver el
 * enqueue en functions.php.
 *
 * Encapsulado: todo bajo body.single-sfwd-courses, más las dos clases raíz
 * propias (.aah-course-banner / .aah-course-sidebar) para lo que son
 * overrides de archivo completo, y selectores reales de LearnDash/BuddyBoss
 * (sin inventar ninguno: .ld-item-list, .ld-progress, .bb-ld-tabs,
 * .entry-title, .anchor-course-points, etc. ya existen en el HTML que
 * generan course.php / modules/tabs.php / lesson/partials/row.php, que NO
 * se sobrescriben — solo se restylean acá) para el contenido que sigue
 * viniendo de esos archivos sin tocar.
 *
 * Breakpoint: 767px, el mismo que ya usa BuddyBoss en su propio CSS
 * (template-v2.min.css), no un número inventado.
 *
 * !important: ninguno. Donde BuddyBoss pinta un color con !important (el
 * CTA de inscripción, el botón del login), se resuelve redefiniendo la
 * variable CSS que esa regla ya consulta (var(--bb-primary-color), etc.),
 * no peleando con la especificidad — ver la sección "Azul → verde" más
 * abajo para el detalle.
 */

body.single-sfwd-courses {
	--aah-green-dark: #3F6410;
	--aah-green-mid: #588C18;
	--aah-green-deep: #4A5F12;
	--aah-green-soft: #84A448;
	--aah-lime: #A8C838;
	--aah-orange: #F48434;
	--aah-surface: #FDFDF9;
	--aah-surface-sage: #E8ECC0;
	--aah-surface-mint: #F2F7E8;
	--aah-ink: #2E2D28;
	--aah-ink-soft: #5D5D5B;
	--aah-border: #E4DCD4;
	--aah-radius: 2px;
	--aah-font: "Figtree", system-ui, sans-serif;
}

/* ---------- Hero ----------
 * Markup real: themes/buddyboss-theme-child/learndash/ld30/template-banner.php
 * conserva las clases de BuddyBoss (bb-vw-container, bb-learndash-banner,
 * bb-course-banner-info, bb-course-banner-inner, bb-course-category,
 * entry-title, bb-course-excerpt, bb-course-points, bb-course-single-meta,
 * author-name, course-date — confirmadas en learndash.min.css del tema
 * padre), así que acá NO se vuelven a definir tamaños/espaciados que
 * BuddyBoss ya resuelve bien. Lo único que agrega esta hoja es la clase
 * .aah-course-banner: cómo se pinta el fondo (imagen + degradado) en vez
 * del <img class="banner-img"> original.
 */

body.single-sfwd-courses .aah-course-banner {
	position: relative; /* BuddyBoss ya posiciona bb-course-banner-info con z-index:2; esto asegura el contexto de apilado sin depender de que .bb-vw-container ya lo traiga. */
	min-height: 360px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}

/* Sin imagen cargada (ningún nivel de la cadena de respaldo): se deja el
 * fondo sólido que BuddyBoss ya aplica a .bb-learndash-banner
 * (background-color: var(--bb-cover-image-background-color)). No se agrega
 * ninguna imagen de reemplazo ni degradado acá. */

body.single-sfwd-courses .aah-course-banner.has-banner-image {
	background-image:
		linear-gradient( 90deg, rgba( 25, 32, 40, 0.86 ) 0%, rgba( 25, 32, 40, 0.68 ) 45%, rgba( 25, 32, 40, 0.32 ) 100% ),
		var( --course-banner );
}

@media ( max-width: 767px ) {
	body.single-sfwd-courses .aah-course-banner {
		min-height: 280px;
	}
}

/* Tipografía del hero: BuddyBoss ya pone el título en blanco (color:inherit,
 * hereda del fondo oscuro) y el link "Ver detalles del curso" ya es blanco
 * de por sí (confirmado en learndash.min.css, .anchor-course-points{color:
 * #fff}) — no había azul acá. Se ajustan peso/line-height del título y se
 * agrega un trato más propio al link (subrayado sutil, hover lima) y al
 * autor/fecha (blanco con opacidad reducida, como pide el sistema). */
body.single-sfwd-courses .aah-course-banner .entry-title {
	font-weight: 700;
	line-height: 1.15;
}

body.single-sfwd-courses .aah-course-banner .anchor-course-points {
	text-decoration: underline;
	text-decoration-color: rgba( 255, 255, 255, 0.4 );
	text-underline-offset: 3px;
	transition: color 150ms ease, text-decoration-color 150ms ease;
}

body.single-sfwd-courses .aah-course-banner .anchor-course-points:hover {
	color: var( --aah-lime );
	text-decoration-color: var( --aah-lime );
}

body.single-sfwd-courses .aah-course-banner .bb-course-single-meta,
body.single-sfwd-courses .aah-course-banner .bb-course-single-meta a {
	color: rgba( 255, 255, 255, 0.78 );
}

body.single-sfwd-courses .aah-course-banner .author-name,
body.single-sfwd-courses .aah-course-banner .course-date {
	color: rgba( 255, 255, 255, 0.78 );
}

/* ---------- Sidebar ---------- */

body.single-sfwd-courses .aah-course-sidebar__card {
	background: #fff;
	border: 1px solid var( --aah-border );
	border-radius: var( --aah-radius );
	box-shadow: none;
	overflow: hidden;
}

body.single-sfwd-courses .aah-course-sidebar__preview .thumbnail-container {
	aspect-ratio: 16 / 9;
	background: var( --aah-surface-mint );
}

body.single-sfwd-courses .aah-course-sidebar__preview .thumbnail-container img,
body.single-sfwd-courses .aah-course-sidebar__preview .aah-course-hero__placeholder-art {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

body.single-sfwd-courses .aah-course-sidebar__body {
	padding: clamp( 18px, 2vw, 24px );
	display: flex;
	flex-direction: column;
	gap: 14px;
}

body.single-sfwd-courses .aah-course-sidebar__btn-wrap {
	display: block;
}

body.single-sfwd-courses .aah-course-sidebar__btn {
	display: block;
	width: 100%;
	text-align: center;
	font-weight: 600;
	font-size: 16px;
	padding: 14px 20px;
	border-radius: var( --aah-radius );
	border: 0;
	text-decoration: none;
	transition: background 150ms ease;
}

body.single-sfwd-courses .aah-course-sidebar__btn-wrap.btn-advance-completed .aah-course-sidebar__btn {
	background: var( --aah-green-soft );
	pointer-events: none;
}

body.single-sfwd-courses .aah-course-sidebar__tag {
	display: inline-block;
	margin-top: 8px;
	font-size: 13px;
	font-weight: 700;
	color: var( --aah-green-dark );
}

body.single-sfwd-courses .aah-course-sidebar__login-hint {
	display: block;
	margin-top: 8px;
	font-size: 13.5px;
	color: var( --aah-ink-soft );
}

body.single-sfwd-courses .aah-course-sidebar__login-hint a {
	color: var( --aah-green-dark );
}

body.single-sfwd-courses .aah-course-sidebar__status .ld-status {
	display: inline-block;
	border-radius: var( --aah-radius );
	padding: 6px 12px;
	font-size: 13px;
	font-weight: 700;
}

body.single-sfwd-courses .aah-course-sidebar__members {
	display: flex;
	align-items: center;
	gap: 10px;
}

body.single-sfwd-courses .aah-course-sidebar__avatars img {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	margin-left: -8px;
	border: 2px solid #fff;
}

body.single-sfwd-courses .aah-course-sidebar__avatars img:first-child {
	margin-left: 0;
}

body.single-sfwd-courses .aah-course-sidebar__members-count {
	font-size: 13px;
	color: var( --aah-ink-soft );
}

body.single-sfwd-courses .aah-course-sidebar__includes {
	border-top: 1px solid var( --aah-border );
	padding-top: 14px;
}

body.single-sfwd-courses .aah-course-sidebar__includes-title {
	margin: 0 0 10px;
	font-size: 15px;
	font-weight: 600;
	color: var( --aah-ink );
}

body.single-sfwd-courses .aah-course-sidebar__includes-list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

body.single-sfwd-courses .aah-course-sidebar__includes-list li {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 14.5px;
	color: var( --aah-ink-soft );
}

body.single-sfwd-courses .aah-course-sidebar__includes-list i {
	color: var( --aah-green-dark );
	font-size: 16px;
}

body.single-sfwd-courses .aah-course-sidebar__widgets {
	margin: 0;
	padding: 0 clamp( 18px, 2vw, 24px ) clamp( 18px, 2vw, 24px );
	list-style: none;
}

/* Sticky y superposición con el hero: a propósito NO hay ningún
 * position:sticky/fixed ni margin-top negativo acá. Eso ya lo resuelve
 * BuddyBoss (ver el comentario grande al inicio de
 * template-single-course-sidebar.php): la superposición es
 * .bb-single-course-sidebar.bb-preview-wrap{margin-top:-260px} (CSS del
 * propio tema) y el sticky es el plugin jQuery sticky-kit que corre sobre
 * .bb-ld-sticky-sidebar (assets/js/plugins/learndash.js,
 * bbStickyLdSidebar()). Las dos clases ya están en el HTML de
 * template-single-course-sidebar.php; agregar un position:sticky propio acá
 * encima solo competiría con ese script. */

/* ---------- Tipografía y variables de marca, en cascada ----------
 * Un solo punto de entrada: todo lo que BuddyBoss/LearnDash pintan dentro
 * de .learndash-wrapper (hero + contenido + sidebar + modal de login, los
 * 4 están dentro de ese wrapper — confirmado leyendo course.php) hereda
 * Figtree desde acá. No hace falta repetirlo en cada selector ni usar
 * !important: ninguna regla de BuddyBoss fija font-family en sus propios
 * archivos (se apoyan en la herencia de <body>), así que esta única regla
 * alcanza.
 */
body.single-sfwd-courses .learndash-wrapper {
	font-family: var( --aah-font );
}

/* ---------- Azul → verde ----------
 * Todo lo que sigue son variables CSS de BuddyBoss (no de LearnDash): el
 * tema las define una vez en :root (vía Personalizar → BuddyBoss) y sus
 * propios archivos las consumen con var(...). Redefiniéndolas acá, SOLO
 * dentro de .learndash-wrapper, el azul por defecto de BuddyBoss
 * (--bb-primary-color, --bb-primary-button-*) se resuelve en verde en
 * cualquier parte de la página de curso que las use — sin !important,
 * porque lo que gana no es la especificidad de la regla de BuddyBoss sino
 * el valor de la variable que esa regla ya consulta.
 *
 * --bb-primary-color: título de lección, su hover, el ícono de completado
 *   y la flecha/barra "Content" (.ld-primary-background) — confirmado en
 *   themes/buddyboss-theme/assets/css/learndash.min.css.
 * --bb-primary-button-*: el CTA de inscripción (.btn-advance, #btn-join)
 *   y el botón de "Iniciar sesión" del modal de login — confirmado en la
 *   misma hoja: ".bb-single-course-sidebar a.btn-advance{background-color:
 *   var(--bb-primary-button-background-regular)!important}" y
 *   ".ld-login-modal-form input[type=submit]{background-color:
 *   var(--bb-primary-button-background-regular)}". El !important que ya
 *   trae BuddyBoss en la primera no es un problema: como lo que cambia es
 *   el valor de la variable, ese !important también termina pintando
 *   verde. Por eso el CTA del sidebar ya no necesita su propio !important
 *   (se sacó de más arriba).
 * --bb-secondary-button-*: el botón "Expandir todo" de la cabecera de la
 *   lista de contenido (.ld-section-heading .ld-expand-button). Mismo
 *   estilo que ya usan los botones secundarios del sitio (fondo
 *   transparente, borde y texto verdes — igual que .wpProQuiz_button[name=
 *   back] en quiz-3262-estilo.php).
 * --bb-button-radius / --bb-input-radius: el radio que ya usan los
 *   botones y campos de BuddyBoss por defecto no es el 2px del sistema;
 *   se iguala acá para no tener un radio distinto en esta página.
 */
body.single-sfwd-courses .learndash-wrapper {
	--bb-primary-color: var( --aah-green-dark );

	--bb-primary-button-background-regular: var( --aah-green-dark );
	--bb-primary-button-background-hover: var( --aah-green-deep );
	--bb-primary-button-border-regular: var( --aah-green-dark );
	--bb-primary-button-border-hover: var( --aah-green-deep );
	--bb-primary-button-text-regular: #fff;
	--bb-primary-button-text-hover: #fff;

	--bb-secondary-button-background-regular: transparent;
	--bb-secondary-button-background-hover: var( --aah-green-dark );
	--bb-secondary-button-border-regular: var( --aah-green-dark );
	--bb-secondary-button-border-hover: var( --aah-green-dark );
	--bb-secondary-button-text-regular: var( --aah-green-dark );
	--bb-secondary-button-text-hover: #fff;

	--bb-button-radius: var( --aah-radius );
	--bb-input-radius: var( --aah-radius );
}

/* Defensivo: por si alguna regla de BuddyBoss fija el azul en hex literal
 * en vez de con la variable (no se pudo confirmar en todas las reglas
 * minificadas). No hace nada si las variables de arriba ya alcanzan. */
body.single-sfwd-courses .ld-item-list .ld-item-name,
body.single-sfwd-courses .ld-item-list .ld-item-name:hover,
body.single-sfwd-courses .ld-item-list .ld-item-title {
	color: var( --aah-ink );
}

body.single-sfwd-courses .ld-item-list .ld-item-name:hover,
body.single-sfwd-courses .ld-item-list .ld-item-name:hover .ld-item-title {
	color: var( --aah-green-dark );
}

/* Contador "1 Cuestionario": secundario de verdad (gris, no verde) — el
 * sistema visual pide que el verde quede como acento, no como color de
 * cualquier texto secundario. Misma cadena de clases que usa BuddyBoss
 * para pintarlo (.ld-item-name .ld-item-title .ld-item-components span),
 * con el ancestro .ld-item-list sumado adelante: gana por tener más
 * clases en la cadena, sin necesidad de !important. */
body.single-sfwd-courses .ld-item-list .ld-item-name .ld-item-title .ld-item-components,
body.single-sfwd-courses .ld-item-list .ld-item-name .ld-item-title .ld-item-components span {
	color: var( --aah-ink-soft );
}

/* ---------- "Contenido del Curso" ----------
 * BuddyBoss ya lo pinta como una etiqueta chica en mayúsculas (16px,
 * letter-spacing) — no como un heading grande. Se mantiene esa forma (es
 * el mismo lenguaje del "kicker" que ya usa el sitio, ver
 * .aay-block-kicker en custom.css) y solo se ajustan color y peso. */
body.single-sfwd-courses .ld-item-list.ld-lesson-list .ld-section-heading h2 {
	color: var( --aah-green-deep );
	font-weight: 700;
}

body.single-sfwd-courses .ld-tabs .ld-tabs-navigation {
	border-bottom: 1px solid var( --aah-border );
}

body.single-sfwd-courses .ld-item-list {
	margin-top: 8px;
}

body.single-sfwd-courses .ld-item-list .ld-item-list-item {
	border: 1px solid var( --aah-border );
	border-radius: var( --aah-radius );
	margin-bottom: 10px;
	transition: border-color 150ms ease, background 150ms ease;
}

body.single-sfwd-courses .ld-item-list .ld-item-list-item:hover {
	background: var( --aah-surface );
	border-color: var( --aah-green-soft );
}

/* Acento verde fino solo mientras la lección está expandida (el propio botón
 * de LearnDash pasa a aria-expanded="true"; no se toca su JS, solo se lee
 * el atributo que ya pone). Un solo borde izquierdo marcado, no el marco
 * entero en verde. */
body.single-sfwd-courses .ld-item-list .ld-item-list-item:has( button.ld-expand-button[aria-expanded="true"] ) {
	border-color: var( --aah-border );
	border-left: 2px solid var( --aah-green-soft );
}

/* ---------- Modal de login (no logueado) ----------
 * Markup real: themes/buddyboss-theme/learndash/ld30/modules/login-modal.php
 * (no se sobrescribe). El formulario en sí (#loginform, inputs, checkbox
 * "Remember Me", botón) lo arma wp_login_form(), con las clases estándar
 * de WordPress (.input, input[type=submit]) — ya cubiertas por las
 * variables de arriba (fondo, radio, color del botón). Acá solo lo que
 * esas variables no resuelven: el foco de los campos y el acento del
 * checkbox. */
body.single-sfwd-courses .ld-login-modal-form .input:focus {
	border-color: var( --aah-green-mid );
	box-shadow: 0 0 0 3px rgba( 88, 140, 24, 0.15 );
}

body.single-sfwd-courses .ld-login-modal-form input[type="checkbox"] {
	accent-color: var( --aah-green-dark );
}

/* font-family ya viene heredado de .learndash-wrapper (ver arriba); acá
 * solo el peso, para que el título de la lección se note como título. */
body.single-sfwd-courses .ld-item-list .ld-item-name .ld-item-title {
	font-weight: 500;
}

body.single-sfwd-courses .ld-progress-bar-percentage,
body.single-sfwd-courses .ld-secondary-background {
	background: var( --aah-green-dark );
}

body.single-sfwd-courses .ld-status-complete,
body.single-sfwd-courses .ld-status.ld-secondary-background {
	background: var( --aah-green-dark );
}

body.single-sfwd-courses .ld-status-progress,
body.single-sfwd-courses .ld-status.ld-primary-background {
	background: var( --aah-green-soft );
}

/* ---------- Responsive ---------- */

@media ( max-width: 767px ) {
	body.single-sfwd-courses .aah-course-sidebar__body {
		padding: 16px;
	}
}