/*
 * Custom styling for the LearnPress single course page.
 *
 * IMPORTANT — rewritten version: your site builds the course page from
 * LearnPress GUTENBERG BLOCKS inside a Site Editor template (FSE), not the
 * classic PHP template chain. That's why the previous PHP-hook based
 * attempt (functions-single-course-page.php actions, title.php,
 * user-progress.php overrides) never showed anything — those hooks simply
 * never fire on this setup. This CSS instead targets the real block class
 * names your page actually renders (learnpress/course-title,
 * learnpress/course-progress, learnpress/course-lesson, etc.).
 *
 * Enqueued from functions-single-course-page.php.
 */

:root {
	--lptc-bg: #f6f2ea;
	--lptc-card: #ffffff;
	--lptc-border: #e8e2d5;
	--lptc-green: #1c3829;
	--lptc-text: #2a2a24;
	--lptc-text-muted: #767267;
	--lptc-radius: 14px;
	--lptc-font-serif: Georgia, 'Times New Roman', serif;
}

/* ---------- breadcrumb ---------- */
.wp-block-learnpress-breadcrumb .learn-press-breadcrumb {
	list-style: none;
	display: flex;
	gap: 6px;
	padding: 0;
	margin: 0 0 16px;
	font-size: 13px;
	color: var(--lptc-text-muted);
}

.wp-block-learnpress-breadcrumb .learn-press-breadcrumb a {
	color: var(--lptc-text-muted);
	text-decoration: none;
}

/* ---------- title block ---------- */
.wp-block-learnpress-course-title .course-title {
	font-family: var(--lptc-font-serif);
	font-size: 34px;
	line-height: 1.25;
	color: var(--lptc-text);
}

.wp-block-learnpress-course-instructor {
	font-size: 15px;
	color: var(--lptc-text);
	margin-bottom: 4px;
}

.wp-block-learnpress-course-instructor label {
	color: var(--lptc-text-muted);
	font-weight: 400;
	margin-right: 4px;
}

.wp-block-learnpress-course-instructor .course-instructor a {
	color: var(--lptc-text);
	font-weight: 600;
	text-decoration: none;
}

/* ---------- curriculum ---------- */
.lp-course-curriculum {
	background: var(--lptc-card);
	border: 1px solid var(--lptc-border);
	border-radius: var(--lptc-radius);
	padding: 20px;
	margin-top: 20px;
}

.lp-course-curriculum__title {
	font-family: var(--lptc-font-serif);
	font-size: 20px;
	margin: 0 0 12px;
}

.course-curriculum-info__left {
	list-style: none;
	display: flex;
	gap: 16px;
	padding: 0;
	margin: 0 0 16px;
	font-size: 13px;
	color: var(--lptc-text-muted);
}

.course-sections {
	list-style: none;
	margin: 0;
	padding: 0;
}

.course-section {
	border-top: 1px solid var(--lptc-border);
}

.course-section-header {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 14px 4px;
	cursor: pointer;
}

.course-section__title {
	font-family: var(--lptc-font-serif);
	font-size: 16px;
}

.course-section__items {
	list-style: none;
	margin: 0 0 10px;
	padding: 0;
}

.course-item__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 4px 10px 30px;
	text-decoration: none;
	color: var(--lptc-text);
	font-size: 14px;
}

.course-item-title {
	color: inherit;
}

/* completed items: green check; keep native icon logic, just recolor */
.course-item-ico.passed.completed {
	color: var(--lptc-green);
}

/* ---------- instructor card ---------- */
.lp-section-instructor {
	background: var(--lptc-card);
	border: 1px solid var(--lptc-border);
	border-radius: var(--lptc-radius);
	padding: 20px;
	margin-top: 20px;
}

.lp-section-instructor .section-title {
	font-family: var(--lptc-font-serif);
	font-size: 20px;
	margin: 0 0 14px;
}

.lp-instructor-info {
	display: flex;
	align-items: flex-start;
	gap: 16px;
}

.instructor-avatar img {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	object-fit: cover;
}

.lp-instructor-meta {
	display: flex;
	gap: 14px;
	margin-top: 4px;
	font-size: 13px;
	color: var(--lptc-text-muted);
}

/* ---------- right sidebar card ---------- */
.lp-block-course-sidebar {
	background: var(--lptc-card) !important;
	border-radius: var(--lptc-radius) !important;
	overflow: hidden;
}

.wp-block-learnpress-course-image img {
	width: 100%;
	display: block;
}

/* progress: keep only the main "Course progress: X%" line + bar,
   hide the passing-grade line and the lessons-completed counter to match
   the single clean bar in the target design. Delete these two rules if you
   want that extra detail back. */
.wp-block-learnpress-course-progress .course-progress__label:nth-of-type(3),
.wp-block-learnpress-course-progress .item-completed {
	display: none;
}

.course-progress__label {
	font-size: 13px;
	color: var(--lptc-text-muted);
	display: flex;
	justify-content: space-between;
	margin-bottom: 6px;
}

.course-progress__number .number {
	font-weight: 700;
	color: var(--lptc-text);
}

.course-progress__line {
	height: 6px;
	border-radius: 999px;
	background: var(--lptc-bg);
	overflow: hidden;
}

.course-progress__line__active {
	height: 100%;
	background: var(--lptc-green);
	border-radius: 999px;
}

.start-date {
	font-size: 13px;
	color: var(--lptc-text-muted);
	margin-top: 10px;
}

/* meta rows: student / duration / lesson / quiz / level */
.info-meta-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 14px;
	color: var(--lptc-text-muted);
	padding: 8px 0;
	border-top: 1px solid var(--lptc-border);
}

.info-meta-left i {
	margin-right: 8px;
	color: var(--lptc-green);
}

.info-meta-right {
	color: var(--lptc-text);
	font-weight: 600;
}

/* continue / enroll button */
.course-buttons .lp-button,
.course-buttons button {
	width: 100%;
	box-sizing: border-box;
	text-align: center;
	padding: 12px 16px;

	font-size: 14px;
	font-weight: 600;
	
	color: #fff !important;
	border: none;
}