/**
 * LearnDash Core Widget CSS Overrides
 *
 * Targets LearnDash's default lesson/topic content output
 * to match Modern Sages brand (blue, black, cream palette).
 */

/* ── Variables ───────────────────────────────────────────── */
:root {
	--ms-blue: #2E4A7A;
	--ms-blue-hover: #1E3660;
	--ms-blue-light: #3D5F9E;
	--ms-black: #1A1A1A;
	--ms-cream: #F5F0E8;
	--ms-cream-dark: #EDE6D8;
	--ms-text: #333333;
	--ms-text-light: #666666;
	--ms-green: #3A7A4F;
	--ms-green-light: #E8F3EC;
	--ms-border: #E0D8CC;
	--ms-radius: 8px;
}

/* ── Global wrapper ──────────────────────────────────────── */
.learndash-wrapper {
	font-family: inherit;
	color: var(--ms-text);
}

/* ── Table List (Lesson Content / Topic List) ────────────── */

/* Header bar: "Lesson Content" / "Topic Content" */
.learndash-wrapper .ld-table-list .ld-table-list-header {
	background-color: var(--ms-blue) !important;
	border-radius: var(--ms-radius) var(--ms-radius) 0 0;
	padding: 14px 20px;
}

.learndash-wrapper .ld-table-list .ld-table-list-header .ld-table-list-title {
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.3px;
	text-transform: none;
}

/* Progress text inside header */
.learndash-wrapper .ld-table-list .ld-table-list-header .ld-table-list-title .ld-lesson-topic-progress {
	font-size: 13px;
	font-weight: 400;
	opacity: 0.85;
}

/* Items container */
.learndash-wrapper .ld-table-list .ld-table-list-items {
	border: 1px solid var(--ms-border);
	border-top: none;
	border-radius: 0 0 var(--ms-radius) var(--ms-radius);
	overflow: hidden;
	background: #fff;
}

/* Individual list items (topics/quizzes inside a lesson) */
.learndash-wrapper .ld-table-list .ld-table-list-item {
	border-bottom: 1px solid var(--ms-border);
	transition: background-color 0.2s ease;
}

.learndash-wrapper .ld-table-list .ld-table-list-item:last-child {
	border-bottom: none;
}

.learndash-wrapper .ld-table-list .ld-table-list-item:hover {
	background-color: var(--ms-cream);
}

/* Item links */
.learndash-wrapper .ld-table-list .ld-table-list-item a.ld-table-list-item-preview {
	padding: 14px 20px;
	display: flex;
	align-items: center;
	gap: 12px;
	text-decoration: none;
	color: var(--ms-text);
	transition: color 0.2s ease;
}

.learndash-wrapper .ld-table-list .ld-table-list-item a.ld-table-list-item-preview:hover {
	color: var(--ms-blue);
	text-decoration: none;
}

/* Item title */
.learndash-wrapper .ld-table-list .ld-topic-title {
	font-size: 15px;
	font-weight: 500;
	line-height: 1.4;
}

/* Status icon inside items */
.learndash-wrapper .ld-table-list .ld-status-icon {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
}

.learndash-wrapper .ld-status-icon .ld-icon-checkmark {
	color: var(--ms-green);
}

/* Completed item styling */
.learndash-wrapper .ld-table-list .ld-table-list-item.learndash-complete .ld-topic-title {
	color: var(--ms-text-light);
}

.learndash-wrapper .ld-table-list .ld-table-list-item.learndash-complete a.ld-table-list-item-preview:hover .ld-topic-title {
	color: var(--ms-blue);
}

/* ── Expand/collapse button in list ──────────────────────── */
.learndash-wrapper .ld-table-list .ld-table-list-item .ld-expand-button {
	background: transparent;
	border: none;
	color: var(--ms-text-light);
	cursor: pointer;
	padding: 4px;
	transition: color 0.2s ease, transform 0.2s ease;
}

.learndash-wrapper .ld-table-list .ld-table-list-item .ld-expand-button:hover {
	color: var(--ms-blue);
}

/* ── Content Actions (Prev/Next + Mark Complete row) ─────── */
.learndash-wrapper .ld-content-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 24px 0;
	margin-top: 24px;
	border-top: 1px solid var(--ms-border);
}

/* ── Buttons (global LD button styles) ───────────────────── */
.learndash-wrapper .ld-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 10px 20px;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.4;
	border: none;
	border-radius: var(--ms-radius);
	cursor: pointer;
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

/* Primary buttons (Mark Complete, Next, etc.) */
.learndash-wrapper .ld-button:not(.ld-button-reverse) {
	background-color: var(--ms-blue) !important;
	color: #fff !important;
}

.learndash-wrapper .ld-button:not(.ld-button-reverse):hover {
	background-color: var(--ms-blue-hover) !important;
	color: #fff !important;
	text-decoration: none;
}

/* Reverse/outline buttons (Previous step, etc.) */
.learndash-wrapper .ld-button.ld-button-reverse {
	background-color: transparent !important;
	color: var(--ms-blue) !important;
	border: 1px solid var(--ms-blue) !important;
}

.learndash-wrapper .ld-button.ld-button-reverse:hover {
	background-color: var(--ms-blue) !important;
	color: #fff !important;
	text-decoration: none;
}

/* Button arrows / icons */
.learndash-wrapper .ld-button .ld-icon,
.learndash-wrapper .ld-button .ld-icon-arrow-left,
.learndash-wrapper .ld-button .ld-icon-arrow-right {
	font-size: 12px;
}

/* ── Mark Complete Form ──────────────────────────────────── */
.learndash-wrapper .sfwd-mark-complete {
	display: flex;
	align-items: center;
}

.learndash-wrapper .sfwd-mark-complete .learndash_mark_complete_button {
	background-color: var(--ms-green) !important;
	color: #fff !important;
	border: none;
	border-radius: var(--ms-radius);
	padding: 10px 24px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.learndash-wrapper .sfwd-mark-complete .learndash_mark_complete_button:hover {
	background-color: #2E6640 !important;
}

/* ── Back to Course / Back to Lesson Link ────────────────── */
.learndash-wrapper .ld-content-actions .ld-content-action a[href*="back"] {
	color: var(--ms-text-light);
	text-decoration: none;
	font-size: 14px;
	transition: color 0.2s ease;
}

.learndash-wrapper .ld-content-actions .ld-content-action a[href*="back"]:hover {
	color: var(--ms-blue);
	text-decoration: underline;
}

/* ── LD Primary Background override ──────────────────────── */
.learndash-wrapper .ld-primary-background {
	background-color: var(--ms-blue) !important;
}

.learndash-wrapper .ld-primary-color {
	color: var(--ms-blue) !important;
}

/* ── Progress bar inside lesson ──────────────────────────── */
.learndash-wrapper .ld-progress {
	background-color: var(--ms-cream-dark);
	border-radius: 20px;
	overflow: hidden;
	height: 8px;
}

.learndash-wrapper .ld-progress .ld-progress-bar {
	background-color: var(--ms-blue) !important;
	border-radius: 20px;
	height: 100%;
	transition: width 0.4s ease;
}

.learndash-wrapper .ld-progress .ld-progress-heading .ld-progress-stats {
	font-size: 13px;
	color: var(--ms-text-light);
}

/* ── Quiz list styling ───────────────────────────────────── */
.learndash-wrapper .ld-quiz-list .ld-table-list-header {
	background-color: var(--ms-blue) !important;
}

.learndash-wrapper .ld-quiz-list .ld-table-list-item a {
	color: var(--ms-text);
}

.learndash-wrapper .ld-quiz-list .ld-table-list-item a:hover {
	color: var(--ms-blue);
}

/* ── Section headings ────────────────────────────────────── */
.learndash-wrapper .ld-section-heading h2 {
	color: var(--ms-black);
	font-weight: 600;
	font-size: 20px;
}

/* ── Alert / Info boxes ──────────────────────────────────── */
.learndash-wrapper .ld-alert {
	border-radius: var(--ms-radius);
	padding: 16px 20px;
	font-size: 14px;
	line-height: 1.5;
}

.learndash-wrapper .ld-alert-warning {
	background-color: #FFF8E7;
	border-left: 3px solid #D4A72C;
	color: #7A5F00;
}

.learndash-wrapper .ld-alert-success {
	background-color: var(--ms-green-light);
	border-left: 3px solid var(--ms-green);
	color: #1E4A2B;
}

/* ── Breadcrumbs ─────────────────────────────────────────── */
.learndash-wrapper .ld-breadcrumbs {
	font-size: 13px;
	color: var(--ms-text-light);
	padding: 8px 0;
}

.learndash-wrapper .ld-breadcrumbs a {
	color: var(--ms-blue);
	text-decoration: none;
}

.learndash-wrapper .ld-breadcrumbs a:hover {
	text-decoration: underline;
}

/* ── Lesson topic list wrapper ───────────────────────────── */
.learndash-wrapper .ld-lesson-topic-list {
	margin-top: 20px;
}

/* ── Remove LD default shadows and awkward spacing ───────── */
.learndash-wrapper .ld-table-list {
	box-shadow: none;
	margin-bottom: 0;
}

/* ── Completed status text ───────────────────────────────── */
.learndash-wrapper .ld-status.ld-status-complete {
	background-color: var(--ms-green-light);
	color: var(--ms-green);
	border-radius: 12px;
	padding: 3px 12px;
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.3px;
}

.learndash-wrapper .ld-status.ld-status-incomplete {
	background-color: var(--ms-cream);
	color: var(--ms-text-light);
	border-radius: 12px;
	padding: 3px 12px;
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.3px;
}

/* ── Course grid (LD default "My Courses") ───────────────── */
.learndash-wrapper .ld-course-list-items .ld-item-list-item {
	border: 1px solid var(--ms-border);
	border-radius: var(--ms-radius);
	overflow: hidden;
	transition: box-shadow 0.2s ease;
}

.learndash-wrapper .ld-course-list-items .ld-item-list-item:hover {
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

/* ── Focus state for accessibility ───────────────────────── */
.learndash-wrapper a:focus-visible,
.learndash-wrapper button:focus-visible,
.learndash-wrapper input[type="submit"]:focus-visible {
	outline: 2px solid var(--ms-blue);
	outline-offset: 2px;
}

/* ── Remove LD inline color overrides on primary elements ── */
.learndash-wrapper .ld-primary-background.ld-login-modal-login {
	background-color: var(--ms-blue) !important;
}

.learndash-wrapper input[type="submit"].ld-button {
	background-color: var(--ms-blue) !important;
	color: #fff !important;
	border: none;
	border-radius: var(--ms-radius);
}

.learndash-wrapper input[type="submit"].ld-button:hover {
	background-color: var(--ms-blue-hover) !important;
}

/* ── wpProQuiz (Quiz) Button Overrides ───────────────────── */
.wpProQuiz_content .wpProQuiz_button,
.wpProQuiz_content .wpProQuiz_button2,
.wpProQuiz_content input[type="button"].wpProQuiz_button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 24px !important;
	font-family: inherit;
	font-size: 14px !important;
	font-weight: 500;
	line-height: 1.4;
	color: #fff !important;
	background-color: var(--ms-blue) !important;
	border: none !important;
	border-radius: var(--ms-radius) !important;
	cursor: pointer;
	text-decoration: none;
	text-transform: none;
	letter-spacing: normal;
	box-shadow: none !important;
	transition: background-color 0.2s ease, color 0.2s ease;
	-webkit-appearance: none;
	appearance: none;
}

.wpProQuiz_content .wpProQuiz_button:hover,
.wpProQuiz_content .wpProQuiz_button2:hover,
.wpProQuiz_content input[type="button"].wpProQuiz_button:hover {
	background-color: var(--ms-blue-hover) !important;
	color: #fff !important;
	text-decoration: none;
}

/* Quiz container cleanup */
.wpProQuiz_content {
	font-family: inherit;
}

.wpProQuiz_content .wpProQuiz_header {
	font-size: 13px;
	color: var(--ms-text-light);
}

/* Quiz question list items */
.wpProQuiz_content .wpProQuiz_listItem {
	padding: 20px 0;
	border-bottom: 1px solid var(--ms-border);
}

.wpProQuiz_content .wpProQuiz_listItem:last-child {
	border-bottom: none;
}

.wpProQuiz_content .wpProQuiz_question_text {
	font-size: 16px;
	font-weight: 500;
	color: var(--ms-black);
	margin-bottom: 12px;
}

/* Essay textarea */
.wpProQuiz_content .wpProQuiz_questionEssay textarea {
	width: 100%;
	min-height: 120px;
	padding: 12px 16px;
	font-family: inherit;
	font-size: 14px;
	line-height: 1.6;
	color: var(--ms-text);
	background-color: #fff;
	border: 1px solid var(--ms-border);
	border-radius: var(--ms-radius);
	resize: vertical;
	transition: border-color 0.2s ease;
}

.wpProQuiz_content .wpProQuiz_questionEssay textarea:focus {
	border-color: var(--ms-blue);
	outline: none;
	box-shadow: 0 0 0 2px rgba(46, 74, 122, 0.15);
}

/* Quiz results */
.wpProQuiz_content .wpProQuiz_results {
	padding: 20px;
	background-color: var(--ms-cream);
	border-radius: var(--ms-radius);
}

/* Correct / Incorrect feedback */
.wpProQuiz_content .wpProQuiz_correct {
	color: var(--ms-green);
	background-color: var(--ms-green-light);
	padding: 8px 16px;
	border-radius: var(--ms-radius);
}

.wpProQuiz_content .wpProQuiz_incorrect {
	color: #C62828;
	background-color: #FFEBEE;
	padding: 8px 16px;
	border-radius: var(--ms-radius);
}

/* Quiz summary / info boxes */
.wpProQuiz_content .wpProQuiz_infopage {
	padding: 16px 20px;
	background-color: var(--ms-cream);
	border-radius: var(--ms-radius);
	margin-bottom: 16px;
}

/* Quiz response / review table */
.wpProQuiz_content .wpProQuiz_reviewDiv {
	border-radius: var(--ms-radius);
	overflow: hidden;
}

.wpProQuiz_content .wpProQuiz_reviewQuestion {
	border: none;
}

.wpProQuiz_content .wpProQuiz_reviewQuestion li {
	border: 1px solid var(--ms-border);
	border-radius: 4px;
	margin: 2px;
}