/**
 * PublicHealth LearnPress item popup skin.
 *
 * Targets the enrolled "study" view (body.course-item-popup / #popup-course):
 * header bar, curriculum sidebar, lesson content, footer nav.
 * LearnPress markup + JS untouched — presentation only.
 *
 * Theme identity: Inter body, Plus Jakarta Sans headings,
 * primary teal #1a6b6b (hover #115252), deep #0a2e2e, tint #eef8f8.
 */

/* Remap LearnPress vars inside the popup only. */
body.course-item-popup,
body.course-item-popup #popup-course {
	--lp-primary-color: #1a6b6b;
	--lp-secondary-color: #0a2e2e;
	--lp-color-base: #1f2937;
	--lp-color-accent: #4b5563;
	--lp-border-color: #e5e7eb;
	--lp-white-grey: #eef8f8;
	--lp-bg-color-lesson: #ffffff;
	--lp-font-size-base: 1em;
	font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	color: #1f2937;
	background: #fff;
}

/* --- Header bar: deep-teal gradient replaces LP purple --- */
body.course-item-popup #popup-header {
	background: linear-gradient(160deg, #0a2e2e 0%, #0f3d4a 55%, #155e5e 100%);
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
	min-height: 70px;
}

body.course-item-popup #popup-header .course-title {
	font-family: "Plus Jakarta Sans", "Inter", sans-serif;
	font-weight: 700;
	letter-spacing: -0.01em;
}

body.course-item-popup #popup-header .course-title a {
	color: #fff;
	font-weight: 700;
}

body.course-item-popup #popup-header .course-title a:hover {
	color: #a0dede;
}

body.course-item-popup #popup-header .items-progress .number,
body.course-item-popup #popup-header .items-progress .number .items-completed {
	color: #d4f0f0;
}

/* Progress track on dark header */
body.course-item-popup #popup-header .learn-press-progress {
	background: rgba(255, 255, 255, 0.22);
	border-radius: 999px;
	min-width: 120px;
}

body.course-item-popup #popup-header .learn-press-progress__active {
	background: #5ec4c4;
	border-radius: 999px;
}

/* Sidebar toggle + close (X) stay legible on dark */
body.course-item-popup #sidebar-toggle {
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
	border-radius: 8px;
	line-height: 1;
	height: 40px;
	align-self: center;
}

body.course-item-popup #sidebar-toggle:hover {
	background: rgba(255, 255, 255, 0.22);
}

body.course-item-popup #popup-header .back-course {
	color: #fff;
	background: rgba(255, 255, 255, 0.1);
	border-radius: 8px;
	width: 40px;
	height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-right: 12px;
	text-decoration: none;
}

body.course-item-popup #popup-header .back-course:hover {
	background: #1a6b6b;
	color: #fff;
}

/* --- Sidebar: search + curriculum --- */
body.course-item-popup #popup-sidebar {
	background: #fff;
	font-family: "Inter", sans-serif;
}

body.course-item-popup #popup-sidebar .search-course {
	background: #eef8f8;
	border-bottom: 1px solid #e5e7eb;
}

body.course-item-popup #popup-sidebar .search-course input[name="s"] {
	font-family: "Inter", sans-serif;
	color: #1f2937;
}

body.course-item-popup #popup-sidebar .search-course input[name="s"]::placeholder {
	color: #9ca3af;
}

body.course-item-popup #popup-sidebar .search-course button i {
	color: #1a6b6b;
}

body.course-item-popup #popup-sidebar .section-header {
	background: #fff;
	border-bottom: 1px solid #e5e7eb;
}

body.course-item-popup #popup-sidebar .section-header .section-title {
	font-family: "Plus Jakarta Sans", "Inter", sans-serif;
	font-weight: 700;
	color: #0d3d3d;
}

/* Active lesson marker: teal instead of LP yellow */
body.course-item-popup #popup-sidebar .lp-course-curriculum .course-item.current::before {
	background: #1a6b6b;
}

body.course-item-popup #popup-sidebar .lp-course-curriculum .course-item.current .course-item__title,
body.course-item-popup #popup-sidebar .lp-course-curriculum .course-item.current .course-item__left {
	color: #0d3d3d;
	font-weight: 700;
}

body.course-item-popup #popup-sidebar .lp-course-curriculum .course-item:hover {
	background: #eef8f8;
}

body.course-item-popup #popup-sidebar .course-item.status-completed .trans {
	color: #16a34a;
}

/* --- Lesson content --- */
body.course-item-popup #popup-content {
	font-family: "Inter", sans-serif;
	color: #1f2937;
}

body.course-item-popup #popup-content h1,
body.course-item-popup #popup-content h2,
body.course-item-popup #popup-content h3,
body.course-item-popup #popup-content .course-item-title,
body.course-item-popup #popup-content .content-item-title {
	font-family: "Plus Jakarta Sans", "Inter", sans-serif;
	font-weight: 800;
	letter-spacing: -0.02em;
	color: #0d3d3d;
}

body.course-item-popup #popup-content a {
	color: #1a6b6b;
	text-underline-offset: 0.2em;
}

body.course-item-popup #popup-content a:hover {
	color: #115252;
}

/* Complete / action buttons: theme teal */
body.course-item-popup #popup-content .lp-button,
body.course-item-popup #popup-content button.lp-button,
body.course-item-popup #learn-press-content-item .lp-button {
	font-family: "Inter", sans-serif;
	font-weight: 600;
	color: #fff;
	background: #1a6b6b;
	border: 1px solid #1a6b6b;
	border-radius: 10px;
	box-shadow: none;
}

body.course-item-popup #popup-content .lp-button:hover,
body.course-item-popup #popup-content button.lp-button:hover {
	background: #115252;
	border-color: #115252;
	color: #fff;
}

body.course-item-popup #popup-content .lp-button.completed {
	background: #16a34a;
	border-color: #16a34a;
}

/* Empty-lesson notice: tint instead of LP blue */
body.course-item-popup #popup-content .learn-press-message,
body.course-item-popup #popup-content .lp-message {
	background: #eef8f8;
	border: 1px solid #d4f0f0;
	border-radius: 10px;
	color: #0d3d3d;
}

/* --- Footer prev/next --- */
body.course-item-popup #popup-footer {
	border-top: 1px solid #e5e7eb;
	background: #fff;
}

body.course-item-popup #popup-footer .course-item-nav .prev a,
body.course-item-popup #popup-footer .course-item-nav .next a {
	font-family: "Inter", sans-serif;
	font-weight: 600;
	color: #1a6b6b;
	text-decoration: none;
}

body.course-item-popup #popup-footer .course-item-nav .prev:hover a,
body.course-item-popup #popup-footer .course-item-nav .next:hover a,
body.course-item-popup #popup-footer .course-item-nav .prev:hover::before,
body.course-item-popup #popup-footer .course-item-nav .next:hover::before {
	color: #115252;
}

body.course-item-popup #popup-footer .course-item-nav__name {
	background: #0d3d3d;
	color: #fff;
	border-radius: 8px;
}

/* Comments inside lesson */
body.course-item-popup #popup-content .comment-form input[type="submit"],
body.course-item-popup #popup-content .form-submit input[type="submit"] {
	font-family: "Inter", sans-serif;
	font-weight: 600;
	color: #fff;
	background: #1a6b6b;
	border: 1px solid #1a6b6b;
	border-radius: 10px;
	padding: 0.625rem 1.125rem;
	cursor: pointer;
}

body.course-item-popup #popup-content .comment-form input[type="submit"]:hover {
	background: #115252;
	border-color: #115252;
}

body.course-item-popup #popup-content input:focus-visible,
body.course-item-popup #popup-content textarea:focus-visible,
body.course-item-popup #popup-sidebar input:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px rgba(26, 107, 107, 0.3);
	border-color: #1a6b6b;
}

@media (max-width: 768px) {
	body.course-item-popup #popup-header .course-title {
		font-size: 0.95rem;
	}
	body.course-item-popup #popup-header .items-progress .number {
		display: none;
	}
}