/* ==========================================================================
   LearnDash LD30 — brought into the portal's design language.

   A student goes portal → course page → lesson. The first two are ours and
   match; the third was LearnDash's own template and did not, so the design
   changed under them halfway through. This restyles LD30 (focus mode and the
   standard template) to match: the same gradient, accent, radii, button
   shapes and typography the portal uses.

   It styles only — no markup is replaced and no LearnDash behaviour is
   touched, so an LD update cannot break the page, only the paint.
   ========================================================================== */

.learndash-wrapper {
	--la-accent:   #1FA8B6;
	--la-accent-2: #58D8E3;
	--la-ink:      #0A0A0B;
	--la-text:     #52525B;
	--la-line:     #E5E3DC;
	--la-tint:     #F2F1EC;
	--la-mute:     #9BA1A6;
	--la-grad:     linear-gradient(135deg, #0A0B0D 0%, #123640 55%, #1898A8 100%);
}

/* ------------------------------------------------- Focus mode: the sidebar */

.learndash-wrapper .ld-focus-sidebar {
	background: var(--la-grad);
	color: #fff;
}

/* LD30 paints the heading and every lesson row opaque, which hid the gradient
   underneath. They are cleared so the sidebar reads as one surface. */
.learndash-wrapper .ld-focus-sidebar .ld-course-navigation-heading,
.learndash-wrapper .ld-focus-sidebar .ld-focus-sidebar-heading,
.learndash-wrapper .ld-focus-sidebar .ld-course-navigation,
.learndash-wrapper .ld-focus-sidebar .ld-lesson-item,
.learndash-wrapper .ld-focus-sidebar .ld-lesson-item-preview,
.learndash-wrapper .ld-focus-sidebar .ld-table-list,
.learndash-wrapper .ld-focus-sidebar .ld-table-list-items,
.learndash-wrapper .ld-focus-sidebar .ld-table-list-item,
.learndash-wrapper .ld-focus-sidebar .ld-table-list-item-preview {
	background: transparent !important;
	background-color: transparent !important;
}

.learndash-wrapper .ld-focus-sidebar .ld-course-navigation-heading,
.learndash-wrapper .ld-focus-sidebar-heading {
	border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.learndash-wrapper .ld-focus-sidebar .ld-course-title,
.learndash-wrapper .ld-focus-sidebar-heading {
	font-size: 17px;
	font-weight: 700;
	letter-spacing: -0.2px;
	color: #fff;
}

.learndash-wrapper .ld-focus-sidebar .ld-lesson-item {
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.learndash-wrapper .ld-focus-sidebar .ld-lesson-item-preview-heading {
	padding: 11px 18px;
	font-size: 13.5px;
	line-height: 1.35;
	color: rgba(255, 255, 255, 0.82);
	transition: background 0.15s ease;
}

.learndash-wrapper .ld-focus-sidebar .ld-lesson-item:hover .ld-lesson-item-preview-heading {
	background: rgba(255, 255, 255, 0.07);
}

/* The lesson being read, marked the way the portal marks an active row */
.learndash-wrapper .ld-focus-sidebar .ld-lesson-item.ld-is-current-lesson,
.learndash-wrapper .ld-focus-sidebar .ld-table-list-item.ld-is-current-lesson,
.learndash-wrapper .ld-focus-sidebar .ld-lesson-item-expanded {
	background: rgba(255, 255, 255, 0.13) !important;
	box-shadow: inset 3px 0 0 var(--la-accent-2);
}

.learndash-wrapper .ld-focus-sidebar .ld-is-current-lesson .ld-lesson-title,
.learndash-wrapper .ld-focus-sidebar .ld-is-current-lesson .ld-topic-title,
.learndash-wrapper .ld-focus-sidebar .ld-is-current-lesson a {
	color: #fff !important;
	font-weight: 700;
}

/* Every other row's text, so the current one stands out against it */
.learndash-wrapper .ld-focus-sidebar .ld-lesson-title,
.learndash-wrapper .ld-focus-sidebar .ld-topic-title,
.learndash-wrapper .ld-focus-sidebar .ld-table-list-item a {
	color: rgba(255, 255, 255, 0.82);
}

.learndash-wrapper .ld-focus-sidebar .ld-status-icon {
	border-color: rgba(255, 255, 255, 0.45);
}

.learndash-wrapper .ld-focus-sidebar .ld-status-icon.ld-status-complete {
	background: var(--la-accent-2);
	border-color: var(--la-accent-2);
}

/* ---------------------------------------------------- The header and bar */

.learndash-wrapper .ld-focus-header {
	background: #fff;
	border-bottom: 1px solid var(--la-line);
	padding: 12px 28px;
}

.learndash-wrapper .ld-progress-percentage,
.learndash-wrapper .ld-progress .ld-secondary-color {
	color: var(--la-accent) !important;
	font-size: 11.5px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.learndash-wrapper .ld-progress-steps {
	font-size: 11.5px;
	color: var(--la-mute);
	font-weight: 600;
}

.learndash-wrapper .ld-progress-bar {
	height: 8px;
	border-radius: 999px;
	background: var(--la-tint);
	border: 0;
	overflow: hidden;
}

.learndash-wrapper .ld-progress-bar .ld-progress-bar-percentage,
.learndash-wrapper .ld-progress-bar .ld-secondary-background {
	background: var(--la-accent) !important;
	border-radius: 999px;
}

/* ------------------------------------------------------------- Buttons */

.learndash-wrapper .ld-button,
.learndash-wrapper .ld-button:visited,
.learndash-wrapper a.ld-button,
.learndash-wrapper a.ld-button:visited {
	background: var(--la-accent) !important;
	border: 1px solid var(--la-accent);
	color: #fff !important;
	border-radius: 12px !important;
	padding: 11px 22px;
	font-size: 13.5px;
	font-weight: 700;
	letter-spacing: 0;
	text-transform: none;
	box-shadow: none;
	transition: background 0.15s ease, border-color 0.15s ease;
}

.learndash-wrapper .ld-button:hover {
	background: #178d99;
	border-color: #178d99;
	color: #fff;
}

/* LD30's "transparent" button is its secondary action — the portal's outline */
.learndash-wrapper .ld-button.ld-button-transparent,
.learndash-wrapper .ld-button.ld-button-transparent:visited,
.learndash-wrapper .ld-button.ld-button-alternate {
	background: #e9f6f8 !important;
	border: 1px solid var(--la-accent);
	color: #0d6d77 !important;
}

/* "Back to Course" is a plain link on this install, not a button */
.learndash-wrapper .ld-content-action a:not(.ld-button) {
	color: var(--la-accent);
	font-weight: 600;
	text-underline-offset: 3px;
}

.learndash-wrapper .ld-button.ld-button-transparent:hover,
.learndash-wrapper .ld-button.ld-button-alternate:hover {
	background: #d8f0f3;
	color: #0d6d77;
}

.learndash-wrapper .ld-button.ld-button-reverse {
	background: transparent;
	border-color: var(--la-line);
	color: var(--la-mute);
}

/* ------------------------------------------------------- Lesson content */

.learndash-wrapper .ld-focus-content {
	padding: 32px 40px 56px;
}

.learndash-wrapper .ld-focus-title,
.learndash-wrapper .ld-focus-content > h1 {
	font-size: clamp(26px, 3.2vw, 36px);
	font-weight: 800;
	letter-spacing: -0.8px;
	color: var(--la-ink);
	margin: 0 0 16px;
}

.learndash-wrapper .ld-breadcrumbs {
	background: var(--la-tint);
	border: 1px solid var(--la-line);
	border-radius: 14px;
	padding: 11px 16px;
	margin-bottom: 22px;
}

.learndash-wrapper .ld-breadcrumbs,
.learndash-wrapper .ld-breadcrumbs-segments {
	font-size: 13px;
	color: var(--la-text);
}

.learndash-wrapper .ld-breadcrumbs a {
	color: var(--la-accent);
	font-weight: 600;
	text-decoration: none;
}

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

/* Status pills read like the portal's, not like LD30's solid blocks */
.learndash-wrapper .ld-status {
	border-radius: 999px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.06em;
	padding: 5px 12px;
}

/* LD30's own colour rule for the pill's text is more specific than a
   normal override, so ours stacked to three classes still lost and left white
   text on pale blue. Repeating a class is valid CSS that raises specificity
   without depending on markup we cannot see; each state is pinned the same
   way so they stay distinct. text-fill-color covers themes that paint text
   through it rather than through color. */
.learndash-wrapper.learndash-wrapper.learndash-wrapper .ld-status.ld-status.ld-status,
.learndash-wrapper.learndash-wrapper.learndash-wrapper .ld-status.ld-status.ld-status * {
	color: #0d6d77 !important;
	-webkit-text-fill-color: #0d6d77 !important;
}

.learndash-wrapper.learndash-wrapper.learndash-wrapper .ld-status.ld-status.ld-status-progress,
.learndash-wrapper.learndash-wrapper.learndash-wrapper .ld-status.ld-status.ld-primary-background {
	background: #e9f6f8 !important;
	background-color: #e9f6f8 !important;
}

.learndash-wrapper.learndash-wrapper.learndash-wrapper .ld-status.ld-status.ld-status-complete,
.learndash-wrapper.learndash-wrapper.learndash-wrapper .ld-status.ld-status.ld-status-complete * {
	background-color: #e4f5ec !important;
	color: #227a52 !important;
	-webkit-text-fill-color: #227a52 !important;
}

.learndash-wrapper.learndash-wrapper.learndash-wrapper .ld-status.ld-status.ld-status-waiting,
.learndash-wrapper.learndash-wrapper.learndash-wrapper .ld-status.ld-status.ld-status-unlocked,
.learndash-wrapper.learndash-wrapper.learndash-wrapper .ld-status.ld-status.ld-status-waiting *,
.learndash-wrapper.learndash-wrapper.learndash-wrapper .ld-status.ld-status.ld-status-unlocked * {
	background-color: #fdf0e0 !important;
	color: #b5660f !important;
	-webkit-text-fill-color: #b5660f !important;
}

/* A hairline edge, so the pill reads as a shape against the pale breadcrumb
   bar behind it rather than as text floating on grey. */
.learndash-wrapper.learndash-wrapper.learndash-wrapper .ld-status.ld-status.ld-status {
	box-shadow: inset 0 0 0 1px rgba(13, 109, 119, 0.28) !important;
}
.learndash-wrapper.learndash-wrapper.learndash-wrapper .ld-status.ld-status.ld-status-complete {
	box-shadow: inset 0 0 0 1px rgba(34, 122, 82, 0.28) !important;
}

/* The child spans inherit the pill's tint rather than painting their own */
.learndash-wrapper.learndash-wrapper.learndash-wrapper .ld-status.ld-status.ld-status * {
	background: transparent !important;
}

.learndash-wrapper .ld-tab-content,
.learndash-wrapper .ld-focus-content p {
	font-size: 15.5px;
	line-height: 1.7;
	color: var(--la-text);
}

/* --------------------------------------------- Lists outside focus mode */

.learndash-wrapper .ld-item-list .ld-item-list-item {
	border: 1px solid var(--la-line);
	border-radius: 14px;
	margin-bottom: 10px;
	overflow: hidden;
}

.learndash-wrapper .ld-item-list .ld-item-list-item-preview {
	background: #fff;
}

.learndash-wrapper .ld-item-list .ld-item-name {
	font-weight: 600;
	color: var(--la-ink);
}

.learndash-wrapper .ld-item-list .ld-item-list-item:hover .ld-item-list-item-preview {
	background: var(--la-tint);
}

.learndash-wrapper .ld-course-status,
.learndash-wrapper .ld-course-status-content {
	border-radius: 16px;
	border: 1px solid var(--la-line);
}

/* --------------------------------------------------------------- Quizzes */

.learndash-wrapper .wpProQuiz_content .wpProQuiz_button,
.learndash-wrapper .wpProQuiz_content input[type="button"],
.learndash-wrapper .wpProQuiz_content input[type="submit"] {
	background: var(--la-accent);
	border: 1px solid var(--la-accent);
	color: #fff;
	border-radius: 12px;
	padding: 10px 20px;
	font-weight: 700;
	font-size: 13.5px;
	box-shadow: none;
	text-shadow: none;
}

.learndash-wrapper .wpProQuiz_content .wpProQuiz_button:hover,
.learndash-wrapper .wpProQuiz_content input[type="button"]:hover {
	background: #178d99;
}

.learndash-wrapper .wpProQuiz_header,
.learndash-wrapper .wpProQuiz_questionList,
.learndash-wrapper .wpProQuiz_question {
	border-radius: 14px;
}

.learndash-wrapper .wpProQuiz_questionListItem,
.learndash-wrapper .wpProQuiz_questionListItem label {
	border-radius: 12px !important;
	margin-bottom: 8px;
	transition: border-color 0.15s ease, background 0.15s ease;
}

.learndash-wrapper .wpProQuiz_questionListItem label {
	border: 1.6px solid var(--la-line) !important;
	color: var(--la-ink) !important;
	font-family: inherit;
	font-size: 15px;
}

.learndash-wrapper .wpProQuiz_questionListItem label:hover {
	border-color: var(--la-accent) !important;
	background: #f4fbfc !important;
}

/* accent-color tints a radio only once it is checked, which left every
   unchecked option grey. Single-choice radios are drawn instead, so the ring
   is teal before and after selection; checkboxes keep the native control. */
/* The plain selector reached the radio (its checked state turned teal) but
   the redraw was overridden by a more specific LearnDash or theme rule, so
   these carry the same raised specificity as the status pill. */
.learndash-wrapper.learndash-wrapper.learndash-wrapper input.wpProQuiz_questionInput[type="radio"] {
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	appearance: none !important;
	width: 18px !important;
	height: 18px !important;
	min-width: 18px !important;
	border: 2px solid var(--la-accent) !important;
	border-radius: 50% !important;
	background: #fff !important;
	display: inline-grid !important;
	place-content: center;
	vertical-align: middle;
	margin: 0 10px 0 0 !important;
	padding: 0 !important;
	box-shadow: none !important;
	cursor: pointer;
}
.learndash-wrapper.learndash-wrapper.learndash-wrapper input.wpProQuiz_questionInput[type="radio"]::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--la-accent);
	transform: scale(0);
	transition: transform 0.12s ease;
}
.learndash-wrapper.learndash-wrapper.learndash-wrapper input.wpProQuiz_questionInput[type="radio"]:checked::before {
	transform: scale(1);
}
/* A mouse click should not leave the browser's black focus ring; keyboard
   users still get the teal one below. */
.learndash-wrapper.learndash-wrapper.learndash-wrapper input.wpProQuiz_questionInput[type="radio"]:focus:not(:focus-visible) {
	outline: none !important;
}
.learndash-wrapper.learndash-wrapper.learndash-wrapper input.wpProQuiz_questionInput[type="radio"]:focus-visible {
	outline: 2px solid var(--la-accent) !important;
	outline-offset: 2px;
}

/* Checkboxes (multiple choice) keep the native control, tinted */
.learndash-wrapper .wpProQuiz_questionInput {
	accent-color: var(--la-accent);
	width: 17px;
	height: 17px;
	margin-right: 10px;
}

.learndash-wrapper .wpProQuiz_questionListItem.is-selected label,
.learndash-wrapper .wpProQuiz_questionListItem label:focus-within {
	border-color: var(--la-accent) !important;
	background: #eaf7f9 !important;
}

.learndash-wrapper .wpProQuiz_reviewQuestion li.wpProQuiz_reviewQuestionSolved {
	background: var(--la-accent) !important;
}

/* ------------------------------------------------------------- Narrower */

@media (max-width: 980px) {
	.learndash-wrapper .ld-focus-content { padding: 24px 22px 44px; }
	.learndash-wrapper .ld-focus-header { padding: 11px 18px; }
}

@media (max-width: 640px) {
	.learndash-wrapper .ld-focus-content { padding: 20px 16px 36px; }
	.learndash-wrapper .ld-breadcrumbs { flex-wrap: wrap; gap: 8px; }
	.learndash-wrapper .ld-button { width: 100%; text-align: center; }
}