/* ==========================================================================
   LEARNDASH IN DE HUISSTIJL
   De cursuspagina, de lesweergave (focusmodus) en de lessen zelf.

   LearnDash zet zijn kleuren inline en vaak met !important (uit
   LearnDash → Instellingen → Ontwerp). Waar dat zo is, staat hier ook
   !important; verder niet.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Focusmodus: de schil
   -------------------------------------------------------------------------- */

body.ld-in-focus,
body .learndash-wrapper .ld-focus {
	background: var(--dp-paper);
}

/* De binnenste wrappers van LearnDash zijn wit; wij houden het papier. */
body .learndash-wrapper .ld-focus .learndash-wrapper,
body :is(.dp-cursus, .dp-winkel) .learndash-wrapper {
	background: transparent;
}

/* Bovenbalk: logo, voortgang en vorige/volgende. Licht doorschijnend
   papier, zodat de les er zacht onder doorschuift. */
body .learndash-wrapper .ld-focus .ld-focus-header {
	background: rgb(245 249 237 / 0.88);
	border-bottom: var(--dp-border) solid var(--dp-line);
	box-shadow: none;
	backdrop-filter: blur(12px);
}

body .learndash-wrapper .ld-focus .ld-focus-header .ld-brand-logo {
	background: transparent;
}

body .learndash-wrapper .ld-focus .ld-focus-header .ld-content-actions > .ld-content-action {
	border-color: var(--dp-line);
}

/* Vorige en volgende: tekst met een rond pijltje, geen knopvlak. */
body .learndash-wrapper .ld-focus .ld-focus-header .ld-button {
	gap: 0.65rem;
	border: 0;
	border-radius: 0;
	background: transparent !important;
	box-shadow: none;
	color: var(--dp-text-strong) !important;
	font-size: var(--dp-size-small);
	font-weight: var(--dp-weight-bold);
	opacity: 1;
}

body .learndash-wrapper .ld-focus .ld-focus-header .ld-button .ld-icon {
	display: inline-grid;
	place-items: center;
	flex: none;
	width: 1.9rem;
	height: 1.9rem;
	margin: 0;
	border: var(--dp-border) solid var(--dp-line-strong);
	border-radius: 50%;
	font-size: 0.7rem;
	transition:
		background-color var(--dp-transition),
		border-color var(--dp-transition),
		color var(--dp-transition),
		transform var(--dp-transition);
}

/* LearnDash zet bij hover en focus een blauwe rand om de hele knop, met een
   zwaardere selector dan deze; vandaar !important. */
body .learndash-wrapper .ld-focus .ld-focus-header .ld-button:hover,
body .learndash-wrapper .ld-focus .ld-focus-header .ld-button:focus {
	background: transparent !important;
	outline: 0 !important;
	box-shadow: none;
	opacity: 1;
}

body .learndash-wrapper .ld-focus .ld-focus-header .ld-button:focus-visible .ld-icon {
	outline: 2px solid var(--dp-focus);
	outline-offset: 2px;
}

body .learndash-wrapper .ld-focus .ld-focus-header .ld-button:hover .ld-icon {
	border-color: var(--dp-forest);
	background: var(--dp-forest);
	color: var(--dp-paper);
}

body .learndash-wrapper .ld-focus .ld-focus-header .ld-button:hover .ld-icon-arrow-right {
	transform: translateX(3px);
}

body .learndash-wrapper .ld-focus .ld-focus-header .ld-button:hover .ld-icon-arrow-left {
	transform: translateX(-3px);
}

/* Op de telefoon staan vorige en volgende naast elkaar: kleiner, anders loopt de tekst over drie regels. */
@media (width < 48rem) {
	body .learndash-wrapper .ld-focus .ld-focus-header .ld-content-actions {
		background: transparent;
	}

	body .learndash-wrapper .ld-focus .ld-focus-header .ld-button {
		padding-block: 0.6rem;
		font-size: var(--dp-size-xs);
		line-height: 1.3;
	}

	body .learndash-wrapper .ld-focus .ld-focus-header .ld-button .ld-icon {
		width: 1.6rem;
		height: 1.6rem;
	}
}

/* Voortgang bovenin (alleen voor ingelogde cursisten). */
body .learndash-wrapper .ld-focus .ld-focus-header .ld-progress .ld-progress-heading {
	font-size: var(--dp-size-xs);
	font-weight: var(--dp-weight-bold);
	color: var(--dp-text-muted);
}

body .learndash-wrapper .ld-progress .ld-progress-bar {
	height: 0.45rem;
	border-radius: var(--dp-radius-pill);
	background: var(--dp-leaf-soft);
}

body .learndash-wrapper .ld-progress .ld-progress-bar .ld-progress-bar-percentage {
	border-radius: var(--dp-radius-pill);
	background: var(--dp-link) !important;
}

body .learndash-wrapper .ld-progress .ld-progress-percentage {
	color: var(--dp-link) !important;
}

/* --------------------------------------------------------------------------
   2. Focusmodus: de zijbalk met modules en lessen
   Papier met bovenin een zachte lime gloed die overloopt in mos, zoals de
   lichte blokken op de site. Geen harde balk meer om de cursustitel.
   -------------------------------------------------------------------------- */

body .learndash-wrapper .ld-focus .ld-focus-sidebar {
	border-right: var(--dp-border) solid var(--dp-line);
	background:
		radial-gradient(130% 45% at 0% 0%, rgb(230 255 86 / 0.3), transparent 70%),
		linear-gradient(180deg, var(--dp-moss) 0%, var(--dp-paper) 60%);
	box-shadow: none;
}

body .learndash-wrapper .ld-focus .ld-focus-sidebar .ld-course-navigation-heading {
	padding: 1.6rem 3.75rem 1.3rem 1.4rem;
	border: 0;
	border-bottom: var(--dp-border) solid var(--dp-line);
	background: transparent !important;
}

/* Een klein kopje boven de cursustitel. */
body .learndash-wrapper .ld-focus .ld-focus-sidebar .ld-focus-mode-course-heading-wrapper::before {
	content: "Jouw cursus";
	display: block;
	margin-bottom: 0.35rem;
	font-family: var(--dp-font-body);
	font-size: 0.7rem;
	font-weight: var(--dp-weight-bold);
	letter-spacing: var(--dp-tracking-eyebrow);
	text-transform: uppercase;
	color: var(--dp-link);
}

body .learndash-wrapper .ld-focus .ld-focus-sidebar .ld-course-navigation-heading h3,
body .learndash-wrapper .ld-focus .ld-focus-sidebar #ld-focus-mode-course-heading {
	font-family: var(--dp-font-display);
	font-size: 1.45rem;
	font-weight: var(--dp-weight-display);
	font-variation-settings: var(--dp-fraunces-axes);
	line-height: 1.1;
	letter-spacing: var(--dp-tracking-heading);
	color: var(--dp-text-strong) !important;
	text-decoration: none;
}

body .learndash-wrapper .ld-focus .ld-focus-sidebar #ld-focus-mode-course-heading .ld-icon {
	display: none;
}

/* Het rondje om de zijbalk in en uit te klappen: een donkergroene cirkel met
   een licht pijltje. De knop zelf is onzichtbaar, anders staat er een wit vlak
   achter het rondje. */
body .learndash-wrapper .ld-focus .ld-focus-sidebar .ld-focus-sidebar-trigger {
	border: 0;
	background: transparent !important;
	box-shadow: none;
}

body .learndash-wrapper .ld-focus .ld-focus-sidebar .ld-focus-sidebar-trigger .ld-icon {
	border: 2px solid var(--dp-paper);
	background: var(--dp-forest) !important;
	box-shadow: var(--dp-shadow-m);
	color: var(--dp-paper) !important;
	transition: transform var(--dp-transition);
}

body .learndash-wrapper .ld-focus .ld-focus-sidebar .ld-focus-sidebar-trigger:hover .ld-icon {
	transform: scale(1.08);
}

/* Een smalle, rustige schuifbalk in plaats van de grijze met pijltjes. */
body .learndash-wrapper .ld-focus .ld-focus-sidebar .ld-focus-sidebar-wrapper {
	scrollbar-width: thin;
	scrollbar-color: var(--dp-line-strong) transparent;
}

/* LearnDash zet een wit driehoekje onder "6 Lessen" als de module open is. */
body .learndash-wrapper .ld-course-navigation .ld-lesson-item-expanded::before,
body .learndash-wrapper .ld-course-navigation .ld-lesson-item-expanded::after {
	display: none;
}

/* Een module in de zijbalk. LearnDash maakt ze wit; wij laten de gloed zien. */
body .learndash-wrapper .ld-focus .ld-focus-sidebar .ld-course-navigation .ld-lesson-item {
	border-bottom: var(--dp-border) solid var(--dp-line);
	background: transparent;
}

body .learndash-wrapper .ld-focus .ld-focus-sidebar .ld-course-navigation .ld-lesson-item.ld-is-current-lesson {
	background: rgb(255 255 255 / 0.62);
	box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.9);
}

body .learndash-wrapper .ld-focus .ld-course-navigation .ld-lesson-item-preview {
	padding: 1.1rem 1.25rem 0.75rem 1.4rem;
}

body .learndash-wrapper .ld-course-navigation .ld-lesson-item-preview-heading,
body .learndash-wrapper .ld-course-navigation .ld-lesson-title {
	font-size: 0.95rem;
	font-weight: var(--dp-weight-bold);
	line-height: 1.3;
	color: var(--dp-text-strong) !important;
}

body .learndash-wrapper .ld-course-navigation .ld-lesson-item:not(.ld-is-current-lesson) .ld-lesson-title {
	font-weight: var(--dp-weight-medium);
}

/* "6 Lessen": klein en rustig, met een licht rond pijltje. */
body .learndash-wrapper .ld-course-navigation .ld-expand-button {
	font-size: var(--dp-size-xs);
	font-weight: var(--dp-weight-bold);
	color: var(--dp-text-muted) !important;
}

body .learndash-wrapper .ld-course-navigation .ld-expand-button .ld-expand-text {
	color: var(--dp-text-muted) !important;
}

body .learndash-wrapper .ld-course-navigation .ld-expand-button .ld-icon {
	background: var(--dp-leaf-soft) !important;
	color: var(--dp-text-strong);
}

/* De lessen binnen een module. */
body .learndash-wrapper .ld-focus .ld-course-navigation .ld-lesson-item-expanded,
body .learndash-wrapper .ld-focus .ld-focus-sidebar .ld-course-navigation .ld-topic-list.ld-table-list,
body .learndash-wrapper .ld-focus .ld-course-navigation .ld-table-list-items {
	background: transparent;
	border: 0;
}

body .learndash-wrapper .ld-focus .ld-course-navigation .ld-table-list-items {
	padding: 0 0.75rem 0.9rem;
}

body .learndash-wrapper .ld-course-navigation .ld-table-list-item-preview {
	margin-block: 2px;
	padding: 0.55rem 0.75rem;
	border: var(--dp-border) solid transparent;
	border-radius: var(--dp-radius-s);
	font-size: var(--dp-size-small);
	line-height: 1.35;
	color: var(--dp-text);
	transition: background-color var(--dp-transition);
}

body .learndash-wrapper .ld-course-navigation .ld-table-list-item-preview:hover {
	border-color: rgb(18 43 7 / 0.08);
	background: rgb(230 238 194 / 0.55);
}

/* De les waar je nu bent: lichtgroen, een tint donkerder dan de zijbalk, met
   een zachte rand. Dezelfde vorm als de hover, maar voller. */
body .learndash-wrapper .ld-course-navigation .ld-table-list-item-preview.ld-is-current-item {
	border: var(--dp-border) solid rgb(18 43 7 / 0.12) !important;
	background: var(--dp-leaf-soft);
	box-shadow: none;
	font-weight: var(--dp-weight-bold);
	color: var(--dp-text-strong);
}

body .learndash-wrapper .ld-course-navigation .ld-topic-title {
	color: inherit;
}

/* --------------------------------------------------------------------------
   3. Statusrondjes (zijbalk en cursuspagina)
   -------------------------------------------------------------------------- */

body .learndash-wrapper .ld-status-icon.ld-status-incomplete {
	border: 1.5px solid var(--dp-line-strong) !important;
	background: transparent;
}

body .learndash-wrapper .ld-status-icon.ld-status-complete,
body .learndash-wrapper .ld-status-icon.ld-status-complete.ld-secondary-background {
	border: 0;
	background: var(--dp-link) !important;
	color: #fff;
}

body .learndash-wrapper .ld-lesson-item.ld-is-current-lesson .ld-status-incomplete,
body .learndash-wrapper .ld-is-current-item .ld-status-incomplete {
	border-color: var(--dp-forest) !important;
}

/* De label "In uitvoering", "Voltooid" enz. */
body .learndash-wrapper .ld-status {
	padding: 0.4em 0.9em;
	border-radius: var(--dp-radius-pill);
	font-size: 0.7rem;
	font-weight: var(--dp-weight-bold);
	letter-spacing: 0.08em;
}

body .learndash-wrapper .ld-status.ld-status-progress,
body .learndash-wrapper .ld-status.ld-status-waiting {
	background: var(--dp-forest) !important;
	color: var(--dp-paper);
}

body .learndash-wrapper .ld-status.ld-status-complete {
	background: var(--dp-link) !important;
	color: #fff;
}

/* --------------------------------------------------------------------------
   4. De les zelf
   -------------------------------------------------------------------------- */

body .learndash-wrapper .ld-focus .ld-focus-main .ld-focus-content {
	max-width: 50rem;
	padding: clamp(6rem, 5rem + 3vw, 8rem) clamp(1.25rem, 0.5rem + 3vw, 3rem) 6rem;
}

body .learndash-wrapper .ld-focus .ld-focus-content > h1 {
	margin-bottom: 1.25rem;
	font-size: var(--dp-size-h2);
	line-height: var(--dp-leading-heading);
	letter-spacing: var(--dp-tracking-heading);
	text-wrap: balance;
}

/* Kruimelpad en status, als een zachte balk onder de titel. */
body .learndash-wrapper :is(.ld-topic-status, .ld-lesson-status, .ld-quiz-status) {
	margin-bottom: 2rem;
	padding: 0.6rem 0.75rem 0.6rem 1.1rem;
	border-radius: var(--dp-radius-m);
	background: var(--dp-moss);
}

body .learndash-wrapper .ld-breadcrumbs {
	padding: 0;
	background: transparent;
}

body .learndash-wrapper .ld-breadcrumbs .ld-breadcrumbs-segments {
	font-size: var(--dp-size-xs);
	font-weight: var(--dp-weight-medium);
	color: var(--dp-text-muted);
}

body .learndash-wrapper .ld-breadcrumbs a {
	color: var(--dp-text-strong) !important;
	font-weight: var(--dp-weight-bold);
	text-decoration: none;
}

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

/* De tekst: op leesmaat en met ruimte tussen de alinea's. */
body .learndash-wrapper .ld-tabs .ld-tab-content {
	font-size: var(--dp-size-body);
	line-height: var(--dp-leading-body);
	color: var(--dp-text);
}

body .learndash-wrapper .ld-tab-content > * + * {
	margin-top: 0.9rem;
}

body .learndash-wrapper .ld-tab-content p:empty {
	display: none;
}

body .learndash-wrapper .ld-tab-content a:not(.ld-button, .wp-block-button__link):hover {
	text-decoration-color: currentColor !important;
}

body .learndash-wrapper .ld-tab-content a:not(.ld-button, .wp-block-button__link) {
	color: var(--dp-link) !important;
	font-weight: var(--dp-weight-medium);

	/* Dezelfde dunne lijn als op de site. LearnDash haalt die weg met een
	   zwaardere selector, dus hier met !important. */
	text-decoration: underline !important;
	text-decoration-color: rgb(67 112 31 / 0.4) !important;
	text-decoration-thickness: 1px !important;
	text-underline-offset: 0.2em;
	transition: text-decoration-color var(--dp-transition);
}

/* Tussenkoppen: duidelijk meer lucht erboven dan eronder, zodat een kop bij
   de tekst eronder hoort en niet bij wat erboven staat. */
body .learndash-wrapper .ld-tab-content > :is(h2, h3, h4) {
	margin-top: 2.75rem;
	margin-bottom: -0.25rem;
}

body .learndash-wrapper .ld-tab-content > :is(h2, h3, h4):first-child,
body .learndash-wrapper .ld-tab-content > p:empty:first-child + :is(h2, h3, h4) {
	margin-top: 0;
}

/* Lijstjes met bolletjes: de basisstijl van de site haalt die weg. */
body .learndash-wrapper .ld-tab-content :is(ul, ol) {
	padding-left: 1.3rem;
}

body .learndash-wrapper .ld-tab-content ul > li {
	list-style: disc;
}

body .learndash-wrapper .ld-tab-content ol > li {
	list-style: decimal;
}

body .learndash-wrapper .ld-tab-content li::marker {
	color: var(--dp-link);
}

body .learndash-wrapper .ld-tab-content li + li {
	margin-top: 0.3rem;
}

/* Knoppen in de les ("Ga verder naar les …") krijgen wat meer ruimte. */
body .learndash-wrapper .ld-tab-content > .wp-block-buttons {
	margin-block: 1.5rem;
}

body .learndash-wrapper .ld-tab-content img:not(.emoji, .wp-smiley) {
	height: auto;
	border-radius: var(--dp-radius-m);
}

/* --------------------------------------------------------------------------
   5. Knoppen onder de les: vorige, klaar, volgende
   -------------------------------------------------------------------------- */

body .learndash-wrapper .ld-focus-content .ld-content-actions {
	gap: 1rem;
	margin-top: 3rem;
	padding-top: 2rem;
	border-top: var(--dp-border) solid var(--dp-line);
}

/* LearnDash geeft elke knop een vaste 200px, waardoor de tekst omloopt. */
body .learndash-wrapper .ld-focus-content .ld-content-actions .ld-content-action {
	flex: 0 1 auto;
}

body .learndash-wrapper .ld-focus-content .ld-content-actions .ld-button {
	white-space: nowrap;
}

body .learndash-wrapper .ld-focus-content .ld-content-actions .ld-button,
body .learndash-wrapper .ld-focus-content .ld-content-actions .ld-content-action form.sfwd-mark-complete input.learndash_mark_complete_button,
body .learndash-wrapper .btn-join,
body .learndash-wrapper #btn-join {
	min-height: 0;
	padding: 0.85em 1.4em;
	border: var(--dp-border) solid var(--dp-forest);
	border-radius: var(--dp-radius-pill);
	background: var(--dp-forest) !important;
	font-family: var(--dp-font-body);
	font-size: var(--dp-size-small);
	font-weight: var(--dp-weight-bold);
	line-height: 1.2;
	color: var(--dp-paper) !important;
	text-decoration: none;
	opacity: 1;
	transition:
		background-color var(--dp-transition),
		transform var(--dp-transition);
}

body .learndash-wrapper .ld-focus-content .ld-content-actions .ld-button:hover {
	background: #050a03 !important;
	opacity: 1;
}

/* Vorige: de lege variant, net als de tweede knop op de site. LearnDash haalt
   bij links de onderrand én de schaduw weg (met !important), dus de rand
   moet hier ook met !important terug. */
body .learndash-wrapper .ld-focus-content .ld-content-actions .ld-content-action:first-child .ld-button {
	border: var(--dp-border) solid var(--dp-line-strong) !important;
	background: transparent !important;
	color: var(--dp-text-strong) !important;
}

body .learndash-wrapper .ld-focus-content .ld-content-actions .ld-content-action:first-child .ld-button:hover {
	border-color: var(--dp-forest) !important;
	background: rgb(18 43 7 / 0.05) !important;
}

/* "Markeer als klaar" en "Volg deze training": de lime knop met de schijf. */
body .learndash-wrapper .ld-focus-content .ld-content-actions .ld-content-action form.sfwd-mark-complete input.learndash_mark_complete_button,
body .learndash-wrapper .btn-join,
body .learndash-wrapper #btn-join {
	border-color: var(--dp-pil-rand);
	background: var(--dp-lime) !important;
	box-shadow:
		3px 3px 0 0 var(--dp-forest),
		0 14px 26px -14px rgb(18 43 7 / 0.45);
	color: var(--dp-forest) !important;
}

body .learndash-wrapper .ld-focus-content .ld-content-actions .ld-content-action form.sfwd-mark-complete input.learndash_mark_complete_button:hover,
body .learndash-wrapper .btn-join:hover,
body .learndash-wrapper #btn-join:hover {
	background: var(--dp-lime) !important;
	box-shadow: 0 0 0 0 var(--dp-forest);
	transform: translate(3px, 3px);
}

body .learndash-wrapper .ld-focus-content .ld-content-actions .ld-course-step-back {
	font-size: var(--dp-size-small);
	font-weight: var(--dp-weight-medium);
	color: var(--dp-text-muted) !important;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* --------------------------------------------------------------------------
   6. De cursuspagina: status en cursusinhoud
   -------------------------------------------------------------------------- */

body :is(.dp-cursus, .dp-winkel) .learndash-wrapper .ld-course-status {
	padding: 1.25rem 1.5rem;
	border: var(--dp-border) solid var(--dp-line);
	border-radius: var(--dp-radius-l);
	background: var(--dp-moss);
}

body :is(.dp-cursus, .dp-winkel) .learndash-wrapper .ld-course-status-label {
	font-family: var(--dp-font-body);
	font-size: var(--dp-size-xs);
	font-weight: var(--dp-weight-bold);
	letter-spacing: var(--dp-tracking-eyebrow);
	text-transform: uppercase;
	color: var(--dp-text-muted);
}

body :is(.dp-cursus, .dp-winkel) .learndash-wrapper .ld-section-heading {
	align-items: center;
	margin-top: 3rem;
	margin-bottom: 1rem;
}

body :is(.dp-cursus, .dp-winkel) .learndash-wrapper .ld-section-heading h2 {
	margin: 0;
	font-size: var(--dp-size-h4);
}

/* "Uitklappen": de lege knop van de site, klein. */
body :is(.dp-cursus, .dp-winkel) .learndash-wrapper .ld-section-heading .ld-expand-button {
	padding: 0.6em 1.1em;
	border: var(--dp-border) solid var(--dp-line-strong);
	border-radius: var(--dp-radius-pill);
	background: transparent !important;
	font-size: var(--dp-size-xs);
	font-weight: var(--dp-weight-bold);
	color: var(--dp-text-strong) !important;
}

body :is(.dp-cursus, .dp-winkel) .learndash-wrapper .ld-section-heading .ld-expand-button .ld-icon {
	background: transparent !important;
	color: var(--dp-text-strong);
}

/* Een module als witte kaart. */
body :is(.dp-cursus, .dp-winkel) .learndash-wrapper .ld-item-list .ld-item-list-item {
	margin-bottom: 0.75rem;
	border: var(--dp-border) solid var(--dp-line);
	border-radius: var(--dp-radius-m);
	background: #fff;
	box-shadow: none;
	transition: border-color var(--dp-transition), box-shadow var(--dp-transition);
}

body :is(.dp-cursus, .dp-winkel) .learndash-wrapper .ld-item-list .ld-item-list-item:hover {
	border-color: var(--dp-line-strong);
	box-shadow: var(--dp-shadow-m);
}

body :is(.dp-cursus, .dp-winkel) .learndash-wrapper .ld-item-list .ld-item-list-item-preview {
	padding: 1.1rem 1.25rem;
}

body :is(.dp-cursus, .dp-winkel) .learndash-wrapper .ld-item-list .ld-item-name {
	font-size: var(--dp-size-body);
	font-weight: var(--dp-weight-bold);
	color: var(--dp-text-strong);
	text-decoration: none;
}

body :is(.dp-cursus, .dp-winkel) .learndash-wrapper .ld-item-list .ld-item-components,
body :is(.dp-cursus, .dp-winkel) .learndash-wrapper .ld-item-list .ld-item-details .ld-expand-button {
	font-size: var(--dp-size-xs);
	font-weight: var(--dp-weight-medium);
	color: var(--dp-text-muted) !important;
}

body :is(.dp-cursus, .dp-winkel) .learndash-wrapper .ld-item-list .ld-item-details .ld-expand-button .ld-icon {
	background: var(--dp-forest) !important;
	color: var(--dp-paper);
}

/* De lessen in een uitgeklapte module. */
body :is(.dp-cursus, .dp-winkel) .learndash-wrapper .ld-table-list .ld-table-list-header {
	background: var(--dp-moss) !important;
	color: var(--dp-text-strong);
	font-size: var(--dp-size-xs);
	font-weight: var(--dp-weight-bold);
}

body :is(.dp-cursus, .dp-winkel) .learndash-wrapper .ld-table-list .ld-table-list-header .ld-icon {
	color: var(--dp-text-strong);
}

body :is(.dp-cursus, .dp-winkel) .learndash-wrapper .ld-table-list .ld-table-list-items {
	border: 0;
	background: transparent;
}

body :is(.dp-cursus, .dp-winkel) .learndash-wrapper .ld-table-list .ld-table-list-item-preview {
	padding: 0.8rem 1.25rem;
	font-size: var(--dp-size-small);
	color: var(--dp-text);
	text-decoration: none;
}

body :is(.dp-cursus, .dp-winkel) .learndash-wrapper .ld-table-list .ld-table-list-item-preview:hover {
	color: var(--dp-text-strong);
}

body :is(.dp-cursus, .dp-winkel) .learndash-wrapper .ld-table-list .ld-table-list-item + .ld-table-list-item {
	border-top: var(--dp-border) solid var(--dp-line);
}

body :is(.dp-cursus, .dp-winkel) .learndash-wrapper .ld-table-list .ld-table-list-footer {
	display: none;
}

/* --------------------------------------------------------------------------
   7. Template-kaarten (les 1.4: template kiezen en downloaden)
   Een witte kaart per template: bovenin het laptopbeeld op een mosgroen vlak,
   daaronder nummer, naam, korte uitleg, voor wie, en de knoppen. Onder
   elkaar, want naast elkaar is de lesbreedte te krap.
   -------------------------------------------------------------------------- */

body .learndash-wrapper .ld-tab-content > .dp-tplkaart {
	display: grid;
	gap: 1.25rem;
	margin-block: 1.75rem;
	padding: 1.25rem;
	border: var(--dp-border) solid var(--dp-line);
	border-radius: var(--dp-radius-l);
	background: #fff;
	box-shadow: var(--dp-shadow-m);
}

/* Het beeld per template: dezelfde compositie als op de salespagina, een
   browservenster dat door de homepage schuift met de tablet ervoor. */
body .learndash-wrapper .ld-tab-content .dp-tplkaart .dp-tplkaart__beeld {
	height: clamp(15rem, 9rem + 14vw, 23rem);
	margin-bottom: 0.5rem;
}

body .learndash-wrapper .ld-tab-content .dp-tplkaart .dp-tplkaart__beeld img {
	border-radius: 0;
}

body .learndash-wrapper .ld-tab-content .dp-tplkaart__tekst {
	padding: 0 0.5rem 0.5rem;
}

/* Een groep krijgt in een klassiek thema een extra binnenlaag van WordPress. */
body .learndash-wrapper .ld-tab-content .dp-tplkaart > .wp-block-group__inner-container {
	display: grid;
	gap: 1.25rem;
}

body .learndash-wrapper .ld-tab-content .dp-tplkaart__tekst > .wp-block-group__inner-container > * + *,
body .learndash-wrapper .ld-tab-content .dp-tplkaart__tekst > * + * {
	margin-top: 0.6rem;
}

body .learndash-wrapper .ld-tab-content .dp-tplkaart__nr {
	font-size: 0.72rem;
	font-weight: var(--dp-weight-bold);
	letter-spacing: var(--dp-tracking-eyebrow);
	text-transform: uppercase;
	color: var(--dp-link);
}

body .learndash-wrapper .ld-tab-content .dp-tplkaart h3 {
	margin: 0.15rem 0 0;
	font-size: var(--dp-size-h4);
}

body .learndash-wrapper .ld-tab-content .dp-tplkaart p {
	font-size: var(--dp-size-small);
}

/* "Voor wie": vinkjes in plaats van bolletjes, zoals op de salespagina. */
body .learndash-wrapper .ld-tab-content ul.dp-tplkaart__lijst {
	padding-left: 0;
	font-size: var(--dp-size-small);
}

body .learndash-wrapper .ld-tab-content ul.dp-tplkaart__lijst > li {
	position: relative;
	padding-left: 1.6rem;
	list-style: none;
}

body .learndash-wrapper .ld-tab-content ul.dp-tplkaart__lijst > li::before {
	content: "";
	position: absolute;
	top: 0.2em;
	left: 0;
	width: 1.1rem;
	height: 1.1rem;
	border-radius: 50%;
	background: var(--dp-leaf-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23122b07' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E") center / 0.65rem no-repeat;
}

body .learndash-wrapper .ld-tab-content .dp-tplkaart .wp-block-buttons {
	gap: 0.6rem;
	margin-top: 1.1rem;
}

/* Downloaden krijgt een pijl naar beneden in plaats van naar rechts. */
body .learndash-wrapper .ld-tab-content .dp-tplkaart .wp-block-button:not(.is-style-outline) .wp-block-button__link::after {
	content: "↓";
}

/* Een kleine schermafbeelding als instructie (zoals "Bestand → Downloaden"):
   niet over de volle breedte, maar als kaartje op ware grootte. */
body .learndash-wrapper .ld-tab-content .dp-les-screenshot {
	max-width: 30rem;
}

body .learndash-wrapper .ld-tab-content .dp-les-screenshot img {
	border: var(--dp-border) solid var(--dp-line);
	box-shadow: var(--dp-shadow-m);
}


/* --------------------------------------------------------------------------
   8. Ronde 4: plaatjes, keuzekaarten, afgerond-melding, knoppen onderaan
   -------------------------------------------------------------------------- */

/* Onder een plaatje in een les: twee keer zoveel lucht als eerst. */
body .learndash-wrapper .ld-tab-content figure.wp-block-image:not(.dp-les-screenshot, .dp-tplkaart figure) {
	margin-bottom: 3rem;
}

/* Twee keuzes naast elkaar (les 1.3: zelf regelen of via mij). */
body .learndash-wrapper .ld-tab-content > .dp-keuzes,
body .learndash-wrapper .ld-tab-content > .dp-keuzes > .wp-block-group__inner-container {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
	gap: 1rem;
}

body .learndash-wrapper .ld-tab-content > .dp-keuzes:has(> .wp-block-group__inner-container) {
	display: block;
}

body .learndash-wrapper .ld-tab-content .dp-keuze {
	display: flex;
	flex-direction: column;
	padding: 1.5rem;
	border: var(--dp-border) solid var(--dp-line);
	border-radius: var(--dp-radius-l);
	background: #fff;
	box-shadow: var(--dp-shadow-s);
}

body .learndash-wrapper .ld-tab-content .dp-keuze > .wp-block-group__inner-container {
	display: flex;
	flex: 1;
	flex-direction: column;
}

body .learndash-wrapper .ld-tab-content .dp-keuze--uitgelicht {
	border-color: var(--dp-forest);
	background:
		radial-gradient(120% 60% at 100% 0%, rgb(230 255 86 / 0.35), transparent 65%),
		linear-gradient(170deg, var(--dp-moss) 0%, #fff 60%);
	box-shadow: var(--dp-shadow-m);
}

body .learndash-wrapper .ld-tab-content .dp-keuze :is(p, ul) {
	margin: 0 0 0.6rem;
	font-size: var(--dp-size-small);
}

body .learndash-wrapper .ld-tab-content .dp-keuze .dp-keuze__nr {
	margin-bottom: 0.3rem;
	font-size: 0.72rem;
	font-weight: var(--dp-weight-bold);
	letter-spacing: var(--dp-tracking-eyebrow);
	text-transform: uppercase;
	color: var(--dp-link);
}

body .learndash-wrapper .ld-tab-content .dp-keuze h4 {
	margin: 0 0 0.5rem;
	font-size: var(--dp-size-h5);
}

body .learndash-wrapper .ld-tab-content .dp-keuze .dp-keuze__prijs {
	font-weight: var(--dp-weight-bold);
	color: var(--dp-text-strong);
}

body .learndash-wrapper .ld-tab-content .dp-keuze ul {
	padding-left: 0;
}

body .learndash-wrapper .ld-tab-content .dp-keuze ul > li {
	position: relative;
	padding-left: 1.6rem;
	list-style: none;
}

body .learndash-wrapper .ld-tab-content .dp-keuze ul > li::before {
	content: "";
	position: absolute;
	top: 0.2em;
	left: 0;
	width: 1.1rem;
	height: 1.1rem;
	border-radius: 50%;
	background: var(--dp-leaf-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23122b07' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E") center / 0.65rem no-repeat;
}

body .learndash-wrapper .ld-tab-content .dp-keuze .dp-keuze__klein {
	font-size: var(--dp-size-xs);
	color: var(--dp-text-muted);
}

/* De knop onderaan elke keuzekaart, op dezelfde hoogte. */
body .learndash-wrapper .ld-tab-content .dp-keuze .wp-block-buttons {
	margin-top: auto;
	padding-top: 0.75rem;
}

/* De melding na "Markeer als klaar": een witte kaart met een groen icoon. */
body .learndash-wrapper .ld-alert.ld-alert-success {
	align-items: center;
	gap: 1rem;
	margin-bottom: 1.5rem;
	padding: 1rem 1rem 1rem 1.25rem;
	border: var(--dp-border) solid var(--dp-line);
	border-radius: var(--dp-radius-l);
	background: #fff;
	box-shadow: var(--dp-shadow-m);
}

body .learndash-wrapper .ld-alert.ld-alert-success:focus,
body .learndash-wrapper .ld-alert.ld-alert-success:focus-visible {
	outline: 0;
}

body .learndash-wrapper .ld-alert.ld-alert-success .ld-alert-icon {
	background: var(--dp-leaf-soft) !important;
	color: var(--dp-forest) !important;
}

body .learndash-wrapper .ld-alert.ld-alert-success .ld-alert-icon svg,
body .learndash-wrapper .ld-alert.ld-alert-success .ld-alert-icon path {
	fill: var(--dp-forest);
}

body .learndash-wrapper .ld-alert.ld-alert-success .ld-alert-messages {
	font-weight: var(--dp-weight-medium);
	color: var(--dp-text-strong);
}

body .learndash-wrapper .ld-alert .ld-button {
	gap: 0.5rem;
	padding: 0.85em 1.4em;
	border-radius: var(--dp-radius-pill);
	font-size: var(--dp-size-small);
	white-space: nowrap;
}

/* Knoppen onderaan: het vinkje in "Markeer als klaar" donkergroen, niet wit. */
body .learndash-wrapper .ld-focus-content .ld-content-actions .sfwd-mark-complete::after {
	right: 1.2rem;
	color: var(--dp-forest) !important;
}

body .learndash-wrapper .ld-focus-content .ld-content-actions .ld-content-action form.sfwd-mark-complete input.learndash_mark_complete_button {
	padding-right: 2.9rem;
	white-space: nowrap;
}

/* Ruimte tussen de knop en "Ga terug naar Module". */
body .learndash-wrapper .ld-focus-content .ld-content-actions .ld-course-step-back {
	display: inline-block;
	margin-top: 1rem !important;
}

/* De vorige/volgende-knoppen onderaan: pijl met wat ruimte tot de tekst. */
body .learndash-wrapper .ld-focus-content .ld-content-actions .ld-button {
	gap: 0.55rem;
}

/* Het Website Zorgplan in les 6.3: een rustige kaart, geen verkoopbanner. */
body .learndash-wrapper .ld-tab-content > .dp-les-zorgplan {
	margin-block: 1.75rem;
	padding: 1.5rem;
	border: var(--dp-border) solid var(--dp-line);
	border-radius: var(--dp-radius-l);
	background:
		radial-gradient(120% 60% at 100% 0%, rgb(230 255 86 / 0.3), transparent 65%),
		linear-gradient(170deg, var(--dp-moss) 0%, #fff 60%);
	box-shadow: var(--dp-shadow-s);
}

body .learndash-wrapper .ld-tab-content .dp-les-zorgplan :is(p, h4) {
	margin: 0 0 0.6rem;
}

body .learndash-wrapper .ld-tab-content .dp-les-zorgplan .dp-keuze__nr {
	font-size: 0.72rem;
	font-weight: var(--dp-weight-bold);
	letter-spacing: var(--dp-tracking-eyebrow);
	text-transform: uppercase;
	color: var(--dp-link);
}

body .learndash-wrapper .ld-tab-content .dp-les-zorgplan h4 {
	font-size: var(--dp-size-h5);
}

body .learndash-wrapper .ld-tab-content .dp-les-zorgplan p:not(.dp-keuze__nr) {
	font-size: var(--dp-size-small);
}

body .learndash-wrapper .ld-tab-content .dp-les-zorgplan .wp-block-buttons {
	margin-top: 1rem;
}

/* De scheidingslijn in een les: dezelfde ruime marge boven als onder
   (de algemene afstand tussen alinea's weegt anders zwaarder). */
body .learndash-wrapper .ld-tab-content > hr {
	margin-block: clamp(2.5rem, 2rem + 2vw, 3.5rem);
}

/* Meer lucht tussen de twee keuzekaarten en de tekst eronder. */
body .learndash-wrapper .ld-tab-content > .dp-keuzes {
	margin-bottom: 2rem;
}

/* In de kaart is de breedte krapper dan op de salespagina: de tablet schaalt
   daarom mee met de hoogte van het beeld, zodat hij er niet boven of onder
   uitsteekt. */
body .learndash-wrapper .ld-tab-content .dp-tplkaart .dp-tplkaart__beeld .dp-scene__venster {
	inset-inline-start: 2%;
	width: 48%;
}

body .learndash-wrapper .ld-tab-content .dp-tplkaart .dp-tplkaart__beeld .dp-scene__toestel {
	inset-inline-end: 2%;
	inset-block-end: 0;
	width: auto;
	height: 100%;
}

/* Cursuspagina voor wie niet is ingeschreven: bij een gesloten cursus is er
   geen prijs, LearnDash toont dan de interne instelling ("Gesloten
   (handmatig toevoegen…)"). Dat vak gaat weg; de tekst ernaast is rustig. */
body :is(.dp-cursus, .dp-winkel) .learndash-wrapper .ld-course-status-seg-price.ld-course-status-mode-closed {
	display: none;
}

body :is(.dp-cursus, .dp-winkel) .learndash-wrapper .ld-course-status-action .ld-text {
	font-size: var(--dp-size-small);
	color: var(--dp-text);
}


/* --------------------------------------------------------------------------
   9. Ronde 6: template-kaarten gecentreerd, afgerond-melding, voortgangsbalk
   -------------------------------------------------------------------------- */

/* Template-kaarten (les 1.4): alleen de mockup, stil; beeld en tekst links
   uitgelijnd, met ruim lucht. */
body .learndash-wrapper .ld-tab-content > .dp-tplkaart {
	padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
	text-align: left;
}

body .learndash-wrapper .ld-tab-content .dp-tplkaart .dp-tplkaart__beeld {
	display: flex;
	justify-content: flex-start;
	height: auto;
	margin: 0 0 0.75rem;
}

body .learndash-wrapper .ld-tab-content .dp-tplkaart .dp-tplkaart__beeld img {
	width: auto;
	max-height: clamp(14rem, 10rem + 10vw, 19rem);
	filter: drop-shadow(0 24px 30px rgb(0 0 0 / 0.22));
}

body .learndash-wrapper .ld-tab-content ul.dp-tplkaart__lijst {
	display: grid;
	gap: 0.35rem;
	margin-inline: 0;
}

body .learndash-wrapper .ld-tab-content .dp-tplkaart .wp-block-buttons {
	justify-content: flex-start;
}

/* "Les afgerond": icoon, tekst en knop netjes op één lijn. */
body .learndash-wrapper .ld-alert.ld-alert-success {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	padding: 1rem 1rem 1rem 1.1rem;
}

body .learndash-wrapper .ld-alert.ld-alert-success .ld-alert-content {
	display: flex;
	flex: 1 1 16rem;
	gap: 0.9rem;
	align-items: center;
	padding: 0;
}

body .learndash-wrapper .ld-alert.ld-alert-success .ld-alert-icon {
	position: static;
	display: grid;
	flex: none;
	place-items: center;
	width: 2.6rem;
	height: 2.6rem;
	margin: 0;
	border-radius: 50%;
	transform: none;
}

body .learndash-wrapper .ld-alert.ld-alert-success .ld-alert-messages {
	padding: 0;
}

body .learndash-wrapper .ld-alert .ld-button {
	display: inline-flex;
	gap: 0.5rem;
	align-items: center;
	justify-content: center;
	padding: 0.85em 1.35em;
}

body .learndash-wrapper .ld-alert .ld-button .ld-icon {
	position: static;
	margin: 0;
	padding: 0;
	transform: none;
}

/* Voortgangsbalk: overal wit, ook in de bovenbalk van de les (LearnDash zet
   daar zelf grijs neer). */
body .learndash-wrapper .ld-progress .ld-progress-bar,
body :is(.dp-cursus, .dp-winkel) .learndash-wrapper .ld-progress .ld-progress-bar {
	background: #fff !important;
	box-shadow: inset 0 0 0 1px var(--dp-line);
}

/* De knop in de afgerond-melding: LearnDash zet een eigen (kleine) maat en
   gelijke binnenruimte met een zwaardere selector; hier dezelfde maat als de
   andere knoppen, links en rechts even veel ruimte. */
body .learndash-wrapper .ld-alert.ld-alert-success > a.ld-button {
	gap: 0 !important;
	padding: 0.85em 1.4em !important;
	font-size: var(--dp-size-small) !important;
	line-height: 1.2;
	white-space: nowrap;
}

/* Geen pijltje in die knop: het sprong bij hover heen en weer. */
body .learndash-wrapper .ld-alert.ld-alert-success > a.ld-button .ld-icon {
	display: none !important;
}

/* --------------------------------------------------------------------------
   10. Mobiel
   -------------------------------------------------------------------------- */

@media (width < 48rem) {
	/* Bovenbalk: alleen de ronde pijltjes, de tekst liep over twee regels en
	   maakte de balk 150px hoog. Onderaan de les staan de knoppen met tekst. */
	body .learndash-wrapper .ld-focus .ld-focus-header .ld-content-actions .ld-button .ld-text {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	body .learndash-wrapper .ld-focus .ld-focus-header .ld-content-actions .ld-button {
		padding-block: 0.45rem;
	}

	/* Het label "Voltooid" / "In uitvoering" niet over de hele breedte. */
	body .learndash-wrapper :is(.ld-topic-status, .ld-lesson-status) .ld-status {
		align-self: flex-start;
		width: auto;
		margin-top: 0.5rem;
	}

	/* Knoppen onder de les: compact, volgende eerst, dan vorige, dan terug. */
	body .learndash-wrapper .ld-focus-content .ld-content-actions {
		gap: 0.6rem;
	}

	body .learndash-wrapper .ld-focus-content .ld-content-actions .ld-content-action {
		width: 100%;
		margin: 0;
		padding: 0;
	}

	body .learndash-wrapper .ld-focus-content .ld-content-actions .ld-content-action:last-child {
		order: 1;
	}

	body .learndash-wrapper .ld-focus-content .ld-content-actions .ld-content-action:first-child {
		order: 2;
	}

	body .learndash-wrapper .ld-focus-content .ld-content-actions .ld-content-action:nth-child(2) {
		order: 3;
		text-align: center;
	}

	body .learndash-wrapper .ld-focus-content .ld-content-actions :is(.ld-button, input.learndash_mark_complete_button) {
		justify-content: center;
		width: 100%;
	}

	/* Afgerond-melding: knop onder de tekst, over de volle breedte. */
	body .learndash-wrapper .ld-alert.ld-alert-success > a.ld-button {
		justify-content: center;
		width: 100%;
	}

	/* Template-kaarten en keuzekaarten iets minder binnenruimte. */
	body .learndash-wrapper .ld-tab-content > :is(.dp-tplkaart, .dp-les-zorgplan) {
		padding: 1.25rem;
	}
}