/*
 * Learntrica LD Modern UI — front-end stylesheet
 * Restyles LearnDash's own markup. Every color/radius/width value comes
 * from CSS custom properties printed inline by class-frontend.php, so this
 * file itself never needs editing to reskin a site.
 *
 * v1.1 — softer, rounder, BuddyBoss-leaning look; fixed a bug where the
 * course-archive grid rule was also catching the topics-within-lesson list.
 */

/* ---------------------------------------------------------------
   1. Base
--------------------------------------------------------------- */
.ltld-wrap,
.learndash-wrapper,
.ld-item-list,
.ld-course-list-items {
	font-family: var( --ltld-font );
	color: var( --ltld-text );
}

.ltld-wrap * {
	box-sizing: border-box;
}

/* Very light color wash behind lesson/topic/course content, so the
   white content card in section 4 has visible lift instead of sitting
   flush against an identical white page background. Low opacity by
   design — this should read as "premium paper", not a colored block. */
.single-sfwd-lessons .site-content,
.single-sfwd-topic .site-content,
.single-sfwd-courses .site-content,
.single-sfwd-lessons #primary,
.single-sfwd-topic #primary,
.single-sfwd-courses #primary {
	background: linear-gradient( 180deg, rgba( var( --ltld-primary-rgb ), 0.04 ), rgba( var( --ltld-primary-rgb ), 0 ) 260px );
}

/* ---------------------------------------------------------------
   2. Course cover hero banner
--------------------------------------------------------------- */
.ltld-hero {
	position: relative;
	border-radius: var( --ltld-radius );
	overflow: hidden;
	min-height: 280px;
	margin: 0 0 32px;
	display: flex;
	align-items: flex-end;
	background: linear-gradient( 135deg, var( --ltld-primary ), #241f47 );
	background-image: var( --ltld-hero-img, none );
	background-size: cover;
	background-position: center;
	box-shadow: 0 18px 40px -14px rgba( var( --ltld-primary-rgb ), 0.45 );
}

.ltld-hero-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient( 180deg, rgba( 20, 16, 45, 0.1 ) 0%, rgba( 20, 16, 45, 0.82 ) 100% );
}

.ltld-hero-inner {
	position: relative;
	z-index: 1;
	padding: 40px clamp( 20px, 4vw, 48px );
	width: 100%;
	color: #fff;
}

.ltld-hero-badges {
	display: flex;
	gap: 8px;
	margin-bottom: 14px;
	flex-wrap: wrap;
}

.ltld-badge {
	background: rgba( 255, 255, 255, 0.18 );
	border: 1px solid rgba( 255, 255, 255, 0.3 );
	backdrop-filter: blur( 4px );
	padding: 5px 14px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.ltld-hero-title {
	font-size: clamp( 26px, 3.4vw, 40px );
	line-height: 1.15;
	font-weight: 700;
	margin: 0 0 16px;
	max-width: 900px;
}

.ltld-hero-meta {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	margin-bottom: 18px;
}

.ltld-meta-pill {
	background: rgba( 255, 255, 255, 0.12 );
	padding: 7px 16px;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 500;
}

.ltld-hero-progress {
	max-width: 420px;
	display: flex;
	align-items: center;
	gap: 12px;
}

.ltld-progress-track {
	flex: 1;
	height: 10px;
	border-radius: 999px;
	background: rgba( 255, 255, 255, 0.22 );
	overflow: hidden;
}

.ltld-progress-fill {
	height: 100%;
	border-radius: 999px;
	background: linear-gradient( 90deg, var( --ltld-accent ), var( --ltld-primary ) );
	transition: width 0.6s ease;
}

.ltld-progress-label {
	font-size: 13px;
	font-weight: 600;
	white-space: nowrap;
}

/* ---------------------------------------------------------------
   3. Native title / breadcrumb — styled in place, never duplicated.
   These target the theme's own elements so nothing repeats.
--------------------------------------------------------------- */
.single-sfwd-lessons .entry-title,
.single-sfwd-topic .entry-title,
.single-sfwd-courses .entry-title,
.single-sfwd-quiz .entry-title {
	font-weight: 800 !important;
	letter-spacing: -0.01em;
	color: var( --ltld-text );
}

.ld-breadcrumbs,
.learndash-breadcrumbs {
	font-size: 13px;
	color: #8a94a6;
}

.ld-breadcrumbs a,
.learndash-breadcrumbs a {
	color: #8a94a6;
	text-decoration: none;
}

.ld-breadcrumbs a:hover,
.learndash-breadcrumbs a:hover {
	color: var( --ltld-primary );
}

.ld-status {
	border-radius: 999px !important;
	font-weight: 700 !important;
	letter-spacing: 0.02em;
}

/* ---------------------------------------------------------------
   4. Lesson / topic reading card — elevates the existing content
   block instead of adding a new title above it.
--------------------------------------------------------------- */
.single-sfwd-lessons #content .entry-content,
.single-sfwd-topic #content .entry-content,
.single-sfwd-lessons .ld-content,
.single-sfwd-topic .ld-content {
	max-width: var( --ltld-content-width );
	font-size: 16px;
	line-height: 1.75;
	background: #fff;
	border-radius: calc( var( --ltld-radius ) * 0.8 );
	padding: clamp( 20px, 4vw, 40px );
	box-shadow: 0 2px 18px rgba( 30, 20, 70, 0.05 );
}

.single-sfwd-lessons .entry-content p,
.single-sfwd-topic .entry-content p {
	margin-bottom: 1.2em;
}

.single-sfwd-lessons .entry-content img,
.single-sfwd-topic .entry-content img {
	border-radius: calc( var( --ltld-radius ) * 0.6 );
	max-width: 100%;
	height: auto;
}

/* ---------------------------------------------------------------
   5. Steps navigation — lessons / topics / quiz LISTS
   (deliberately kept as a list everywhere; see section 6 for the
   ONE place that becomes a grid — the course archive)
--------------------------------------------------------------- */
.ld-item-list-steps,
.ld-lesson-topics-list {
	position: sticky;
	top: 24px;
	align-self: flex-start;
}

/* Belt-and-braces: no matter which wrapper class LearnDash puts on a
   steps list (lessons under a course, topics under a lesson, quizzes
   under a topic), force it to stay a vertical list. This is what was
   missing before and let the grid rule leak into the topics list. */
.ld-item-list-items,
.ld-lesson-list-items,
.ld-topic-list-items,
.ld-quiz-list-items,
.ld-table-list-items:not( .ld-course-list-items ) {
	display: block !important;
}

.ld-item-list-item,
.ld-table-list-item {
	display: flex !important;
	align-items: center;
	gap: 12px;
	border: none !important;
	border-radius: calc( var( --ltld-radius ) * 0.55 ) !important;
	padding: 12px 14px !important;
	margin-bottom: 6px !important;
	background: #fff;
	transition: background-color 0.15s ease, transform 0.15s ease;
}

.ld-item-list-item:hover,
.ld-table-list-item:hover {
	background-color: rgba( var( --ltld-primary-rgb ), 0.07 ) !important;
	transform: translateX( 3px );
}

/* Current / in-progress step gets a soft tinted panel + left accent bar,
   the way BuddyBoss highlights the active nav item. */
.ld-item-list-item.ld-status-in-progress,
.ld-item-list-item.ld-item-current,
.ld-table-list-item.ld-status-in-progress {
	background: rgba( var( --ltld-primary-rgb ), 0.09 ) !important;
	border-left: 3px solid var( --ltld-primary ) !important;
}

.ld-item-list-item .ld-status-icon,
.ld-status-icon svg {
	color: var( --ltld-accent ) !important;
	fill: var( --ltld-accent ) !important;
}

/* Round the little status icon into a soft filled circle, avatar-style */
.ld-item-list-item .ld-status-icon {
	background: rgba( var( --ltld-accent-rgb ), 0.14 );
	border-radius: 999px;
	padding: 4px;
}

/* ---------------------------------------------------------------
   6. Course archive / landing grid — ONLY inside LearnDash's own
   course-list wrapper, so it can never apply to a steps list.
--------------------------------------------------------------- */
.ld-course-list .ld-course-list-items,
.ld-course-list .ld-table-list-items {
	display: grid !important;
	grid-template-columns: repeat( auto-fill, minmax( 280px, 1fr ) );
	gap: 24px;
	list-style: none !important;
	padding: 0 !important;
}

.ld-course-list-item,
.ld-course-list .ld-table-list-item {
	border: none !important;
	border-radius: var( --ltld-radius ) !important;
	overflow: hidden;
	box-shadow: 0 2px 10px rgba( 30, 20, 70, 0.06 );
	transition: box-shadow 0.2s ease, transform 0.2s ease;
	background: #fff;
}

.ld-course-list-item:hover,
.ld-course-list .ld-table-list-item:hover {
	box-shadow: 0 16px 32px rgba( var( --ltld-primary-rgb ), 0.18 );
	transform: translateY( -4px );
}

.ld-course-list-item img,
.ld-course-list .ld-table-list-item img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.ld-course-list-item .ld-course-list-item-preview {
	aspect-ratio: 16 / 9;
	overflow: hidden;
}

/* ---------------------------------------------------------------
   7. Buttons — pill-shaped, soft glow on hover (BuddyBoss-style CTA)
--------------------------------------------------------------- */
.ld-button,
.learndash_mark_complete_button,
button.ld-button,
input.ld-button {
	background: var( --ltld-primary ) !important;
	border: none !important;
	border-radius: 999px !important;
	color: #fff !important;
	font-weight: 600 !important;
	padding: 12px 26px !important;
	letter-spacing: 0.01em;
	transition: filter 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
	box-shadow: 0 6px 16px rgba( var( --ltld-primary-rgb ), 0.35 ) !important;
}

.ld-button:hover,
.learndash_mark_complete_button:hover {
	filter: brightness( 1.05 );
	transform: translateY( -2px );
	box-shadow: 0 10px 22px rgba( var( --ltld-primary-rgb ), 0.42 ) !important;
}

/* ---------------------------------------------------------------
   8. Progress bars (course list widgets, profile, etc.)
--------------------------------------------------------------- */
.ld-progress-bar {
	height: 9px !important;
	border-radius: 999px !important;
	background: rgba( var( --ltld-primary-rgb ), 0.1 ) !important;
	overflow: hidden;
}

.ld-progress-bar .ld-progress-bar-percentage {
	background: linear-gradient( 90deg, var( --ltld-accent ), var( --ltld-primary ) ) !important;
	border-radius: 999px !important;
}

.ld-progress-stats {
	font-size: 13px;
	font-weight: 600;
	color: #838aa0;
}

/* ---------------------------------------------------------------
   9. Prev / Next lesson footer navigation
--------------------------------------------------------------- */
.ld-content-actions,
.learndash_next_previous_link {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	margin-top: 40px;
	padding-top: 24px;
	border-top: 1px solid rgba( var( --ltld-primary-rgb ), 0.12 );
}

/* ---------------------------------------------------------------
   10. Responsive
--------------------------------------------------------------- */
@media ( max-width: 782px ) {
	.ltld-hero {
		min-height: 220px;
	}
	.ltld-hero-inner {
		padding: 28px 18px;
	}
	.ld-item-list-steps,
	.ld-lesson-topics-list {
		position: static;
	}
	.ld-course-list .ld-course-list-items,
	.ld-course-list .ld-table-list-items {
		grid-template-columns: 1fr;
	}
}