/**
 * Yong — LearnDash in de huisstijl van de nieuwe site.
 * Kleuren en afmetingen komen uit de Blocksy-variabelen, zodat een wijziging
 * in de customizer automatisch doorwerkt in de leeromgeving.
 */

:root {
	--yong-groen:   var(--theme-palette-color-1, #6C964A);
	--yong-blauw:   var(--theme-palette-color-2, #4B98CF);
	--yong-oranje:  var(--theme-palette-color-3, #DB7E4A);
	--yong-geel:    var(--theme-palette-color-4, #E5C845);
	--yong-inkt:    var(--theme-palette-color-5, #0F0F0F);
	--yong-creme:   var(--theme-palette-color-6, #f6f5f0);
	--yong-mist:    var(--theme-palette-color-7, #FAFBFC);
	--yong-wit:     var(--theme-palette-color-8, #ffffff);

	--yong-rand:    #e6e6e0;
	--yong-radius:  12px;
	--yong-radius-s: 8px;
	--yong-knop-radius: var(--theme-button-border-radius, 10px);
	--yong-schaduw: 0 12px 28px -14px rgba(15, 15, 15, .18);
	--yong-font-kop: 'Playfair Display', Georgia, serif;
	--yong-font-tekst: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ==========================================================================
   Knop in het hoofdmenu
   ========================================================================== */

.yong-ld-btn,
a.yong-ld-btn {
	display: inline-flex;
	align-items: center;
	gap: .5em;
	padding: 11px 20px;
	border: none;
	border-radius: var(--yong-knop-radius);
	background: var(--yong-groen);
	color: #fff !important;
	font-family: var(--yong-font-tekst);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none !important;
	transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
}

.yong-ld-btn:hover,
a.yong-ld-btn:hover {
	background: var(--yong-blauw);
	color: #fff !important;
	transform: translateY(-1px);
	box-shadow: 0 8px 18px -10px rgba(15, 15, 15, .5);
}

.yong-ld-btn__icon { display: inline-flex; }
.yong-ld-btn__icon svg { display: block; }

.yong-ld-btn--lg { padding: 15px 26px; font-size: 16px; }

.yong-ld-btn--ghost,
a.yong-ld-btn--ghost {
	background: transparent;
	color: var(--yong-inkt) !important;
	box-shadow: inset 0 0 0 1.5px var(--yong-groen);
}
.yong-ld-btn--ghost:hover,
a.yong-ld-btn--ghost:hover {
	background: var(--yong-groen);
	color: #fff !important;
	box-shadow: none;
}

/* menu-item zelf: geen onderstreping / hover-indicator van het thema */
.menu li.yong-ld-account > a.ct-menu-link,
li.yong-ld-account > a.ct-menu-link { padding-block: 0; }
li.yong-ld-account .ct-menu-link::before,
li.yong-ld-account .ct-menu-link::after { display: none !important; }

li.yong-ld-account { display: flex; align-items: center; margin-inline-start: 8px; }

li.yong-ld-logout > a {
	font-size: 14px;
	opacity: .7;
}
li.yong-ld-logout > a:hover { opacity: 1; }

/* in het mobiele paneel vullen de knoppen de breedte */
#offcanvas li.yong-ld-account,
.mobile-menu li.yong-ld-account { display: block; margin: 14px 0 0; }
#offcanvas li.yong-ld-account .yong-ld-btn,
.mobile-menu li.yong-ld-account .yong-ld-btn { width: 100%; justify-content: center; }

/* ==========================================================================
   Gedeelde bouwstenen
   ========================================================================== */

.yong-ld-card {
	background: var(--yong-wit);
	border: 1px solid var(--yong-rand);
	border-radius: var(--yong-radius);
	box-shadow: var(--yong-schaduw);
	padding: clamp(24px, 4vw, 40px);
}

.yong-ld-muted { color: #6b6b66; font-size: 14px; }

.yong-ld-alert {
	border-radius: var(--yong-radius-s);
	padding: 12px 16px;
	margin-bottom: 20px;
	font-size: 15px;
}
.yong-ld-alert--error { background: #fdecea; color: #8c2f22; border: 1px solid #f4c7c0; }

.yong-ld-progress {
	position: relative;
	height: 8px;
	border-radius: 99px;
	background: #eceae3;
	overflow: hidden;
}
.yong-ld-progress__bar {
	display: block;
	height: 100%;
	border-radius: 99px;
	background: linear-gradient(90deg, var(--yong-groen), #8ab861);
	transition: width .5s ease;
}

/* ==========================================================================
   Inlogpagina
   ========================================================================== */

.yong-ld-login {
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
	gap: 32px;
	align-items: start;
	max-width: 980px;
	margin-inline: auto;
}
@media (max-width: 800px) { .yong-ld-login { grid-template-columns: 1fr; } }

.yong-ld-login__title {
	font-family: var(--yong-font-kop);
	font-size: clamp(28px, 4vw, 38px);
	margin: 0 0 10px;
	color: var(--yong-inkt);
}
.yong-ld-login__intro { margin: 0 0 24px; color: #4a4a45; }

.yong-ld-login .login-username,
.yong-ld-login .login-password { margin-bottom: 18px; }

.yong-ld-login label {
	display: block;
	margin-bottom: 6px;
	font-size: 14px;
	font-weight: 600;
	color: var(--yong-inkt);
}

.yong-ld-login input[type="text"],
.yong-ld-login input[type="password"],
.yong-ld-login input[type="email"] {
	width: 100%;
	padding: 13px 16px;
	border: 1px solid var(--yong-rand);
	border-radius: var(--yong-radius-s);
	background: var(--yong-mist);
	font-family: var(--yong-font-tekst);
	font-size: 16px;
	transition: border-color .2s ease, box-shadow .2s ease;
}
.yong-ld-login input[type="text"]:focus,
.yong-ld-login input[type="password"]:focus,
.yong-ld-login input[type="email"]:focus {
	outline: none;
	border-color: var(--yong-groen);
	box-shadow: 0 0 0 3px rgba(108, 150, 74, .15);
}

.yong-ld-login .login-remember { margin-bottom: 22px; }
.yong-ld-login .login-remember label {
	display: flex;
	align-items: center;
	gap: 9px;
	margin: 0;
	font-weight: 400;
	font-size: 15px;
	cursor: pointer;
}
.yong-ld-login .login-remember input[type="checkbox"] {
	width: 18px;
	height: 18px;
	margin: 0;
	flex: 0 0 auto;
	accent-color: var(--yong-groen);
	cursor: pointer;
}

.yong-ld-login .login-submit input[type="submit"] {
	width: 100%;
	padding: 15px 24px;
	border: none;
	border-radius: var(--yong-knop-radius);
	background: var(--yong-groen);
	color: #fff;
	font-family: var(--yong-font-tekst);
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
	transition: background .2s ease;
}
.yong-ld-login .login-submit input[type="submit"]:hover { background: var(--yong-blauw); }

.yong-ld-login__forgot { margin: 18px 0 0; text-align: center; font-size: 14px; }
.yong-ld-login__forgot a { color: #6b6b66; }
.yong-ld-login__forgot a:hover { color: var(--yong-groen); }

.yong-ld-login__aside {
	background: var(--yong-wit);
	border: 1px solid var(--yong-rand);
	border-left: 4px solid var(--yong-groen);
	border-radius: var(--yong-radius);
	padding: clamp(24px, 3vw, 32px);
}
.yong-ld-login__aside h3 {
	font-family: var(--yong-font-kop);
	font-size: 22px;
	margin: 0 0 10px;
}
.yong-ld-login__aside p { margin: 0 0 16px; font-size: 15px; color: #4a4a45; }
.yong-ld-login__aside p:last-child { margin-bottom: 0; }

/* ==========================================================================
   Leeromgeving "Mijn trainingen"
   ========================================================================== */

.yong-ld-dash__head { margin-bottom: 32px; }
.yong-ld-dash__greeting {
	font-family: var(--yong-font-kop);
	font-size: clamp(30px, 5vw, 44px);
	margin: 0 0 6px;
}
.yong-ld-dash__sub { margin: 0; color: #6b6b66; font-size: 17px; }

.yong-ld-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 28px;
}

.yong-ld-course {
	display: flex;
	flex-direction: column;
	background: var(--yong-wit);
	border: 1px solid var(--yong-rand);
	border-radius: var(--yong-radius);
	overflow: hidden;
	box-shadow: var(--yong-schaduw);
	transition: transform .25s ease, box-shadow .25s ease;
}
.yong-ld-course:hover { transform: translateY(-4px); box-shadow: 0 20px 36px -18px rgba(15, 15, 15, .28); }

.yong-ld-course__media {
	position: relative;
	display: block;
	aspect-ratio: 16 / 9;
	background: var(--yong-creme);
	overflow: hidden;
}
.yong-ld-course__media img { width: 100%; height: 100%; object-fit: cover; }
.yong-ld-course__placeholder {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	color: var(--yong-groen);
	opacity: .45;
}
.yong-ld-course__placeholder svg { width: 46px; height: 46px; }

.yong-ld-course__badge {
	position: absolute;
	top: 12px;
	left: 12px;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 6px 12px;
	border-radius: 99px;
	background: var(--yong-groen);
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .02em;
}
.yong-ld-course__badge svg { width: 13px; height: 13px; }

.yong-ld-course__body { display: flex; flex-direction: column; gap: 14px; padding: 22px 24px 24px; flex: 1; }

.yong-ld-course__title { font-family: var(--yong-font-kop); font-size: 21px; line-height: 1.25; margin: 0; }
.yong-ld-course__title a { color: var(--yong-inkt); text-decoration: none; }
.yong-ld-course__title a:hover { color: var(--yong-groen); }

.yong-ld-course__meta {
	display: flex;
	align-items: baseline;
	gap: 10px;
	margin: 0;
	font-size: 14px;
	color: #6b6b66;
}
.yong-ld-course__meta strong { color: var(--yong-groen); font-size: 16px; }

.yong-ld-course__actions { display: flex; flex-wrap: wrap; gap: 10px; margin: auto 0 0; }

.yong-ld-empty { text-align: center; }
.yong-ld-empty h2 { font-family: var(--yong-font-kop); margin-top: 0; }

.yong-ld-cta { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.yong-ld-cta__note { font-size: 14px; color: #6b6b66; }

/* ==========================================================================
   LearnDash zelf (LD30-thema) in de huisstijl
   ========================================================================== */

.learndash-wrapper {
	font-family: var(--yong-font-tekst);
	color: var(--yong-inkt);
}

.learndash-wrapper h1,
.learndash-wrapper h2,
.learndash-wrapper h3,
.learndash-wrapper h4,
.learndash-wrapper .ld-course-navigation-heading,
.learndash-wrapper .ld-item-title,
.learndash-wrapper .ld-focus-header .ld-brand-logo {
	font-family: var(--yong-font-kop);
	color: var(--yong-inkt);
	letter-spacing: -.01em;
}

/* --- Knoppen ------------------------------------------------------------ */

.learndash-wrapper .ld-button,
.learndash-wrapper input[type="submit"].ld-button,
.learndash-wrapper .wpProQuiz_button,
.learndash-wrapper .wpProQuiz_button2 {
	border-radius: var(--yong-knop-radius) !important;
	font-family: var(--yong-font-tekst) !important;
	font-weight: 600 !important;
	font-size: 15px !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	padding: 13px 24px !important;
	border: none !important;
	transition: background .2s ease, transform .2s ease, box-shadow .2s ease !important;
}
.learndash-wrapper .ld-button:hover,
.learndash-wrapper .wpProQuiz_button:hover,
.learndash-wrapper .wpProQuiz_button2:hover {
	transform: translateY(-1px);
	box-shadow: 0 8px 18px -10px rgba(15, 15, 15, .5);
}
.learndash-wrapper .ld-button.ld-button-transparent,
.learndash-wrapper .ld-button.ld-button-alternate {
	box-shadow: inset 0 0 0 1.5px var(--yong-groen) !important;
	color: var(--yong-inkt) !important;
}

/* --- Statusblok van de training ---------------------------------------- */

.learndash-wrapper .ld-course-status {
	background: var(--yong-creme);
	border: 1px solid var(--yong-rand);
	border-radius: var(--yong-radius);
	padding: 22px 26px;
	gap: 18px;
}
.learndash-wrapper .ld-course-status .ld-course-status-label {
	font-family: var(--yong-font-tekst);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: #6b6b66;
}
.learndash-wrapper .ld-course-status .ld-status {
	border-radius: 99px;
	padding: 7px 16px;
	font-weight: 600;
	font-size: 14px;
}
.learndash-wrapper .ld-status-waiting { background: var(--yong-geel) !important; color: #4a3c00 !important; }
.learndash-wrapper .ld-status-progress { background: var(--yong-blauw) !important; color: #fff !important; }
.learndash-wrapper .ld-status-complete { background: var(--yong-groen) !important; color: #fff !important; }

/* --- Voortgangsbalk ----------------------------------------------------- */

.learndash-wrapper .ld-progress {
	background: var(--yong-wit);
	border: 1px solid var(--yong-rand);
	border-radius: var(--yong-radius);
	padding: 18px 22px;
}
.learndash-wrapper .ld-progress-bar {
	height: 10px !important;
	border-radius: 99px !important;
	background: #eceae3 !important;
	border: none !important;
	overflow: hidden;
}
.learndash-wrapper .ld-progress-bar .ld-progress-bar-percentage {
	height: 100% !important;
	border-radius: 99px !important;
	background: linear-gradient(90deg, var(--yong-groen), #8ab861) !important;
	transition: width .5s ease;
}
.learndash-wrapper .ld-progress-heading,
.learndash-wrapper .ld-progress-stats {
	font-family: var(--yong-font-tekst);
	font-size: 14px;
}
.learndash-wrapper .ld-progress-percentage { color: var(--yong-groen) !important; font-weight: 700; }

/* --- Inhoudsopgave: modulen, onderwerpen, testen ------------------------ */

.learndash-wrapper .ld-item-list .ld-section-heading h2 {
	font-family: var(--yong-font-kop);
	font-size: clamp(24px, 3vw, 30px);
}

.learndash-wrapper .ld-item-list .ld-item-list-item {
	background: var(--yong-wit);
	border: 1px solid var(--yong-rand);
	border-radius: var(--yong-radius);
	margin-bottom: 12px;
	overflow: hidden;
	transition: border-color .2s ease, box-shadow .2s ease;
}
.learndash-wrapper .ld-item-list .ld-item-list-item:hover {
	border-color: var(--yong-groen);
	box-shadow: 0 10px 24px -16px rgba(15, 15, 15, .35);
}
.learndash-wrapper .ld-item-list .ld-item-list-item.ld-is-current-lesson,
.learndash-wrapper .ld-item-list .ld-item-list-item-preview.ld-is-current-lesson {
	border-color: var(--yong-groen);
	box-shadow: inset 3px 0 0 var(--yong-groen);
}
.learndash-wrapper .ld-item-list .ld-item-list-item a.ld-item-name { padding: 18px 22px; }
.learndash-wrapper .ld-item-title { font-size: 17px; font-weight: 600; }
.learndash-wrapper .ld-item-details,
.learndash-wrapper .ld-item-list-item .ld-item-details { font-size: 13px; color: #6b6b66; }

.learndash-wrapper .ld-status-icon {
	border-radius: 50%;
	width: 26px;
	height: 26px;
}
.learndash-wrapper .ld-status-icon.ld-status-complete { background: var(--yong-groen) !important; border-color: var(--yong-groen) !important; }
.learndash-wrapper .ld-status-icon.ld-status-incomplete { border: 2px solid #d7d5cd !important; background: transparent !important; }

.learndash-wrapper .ld-expand-button { border-radius: var(--yong-knop-radius) !important; }
.learndash-wrapper .ld-expand-button .ld-icon { color: inherit; }

.learndash-wrapper .ld-table-list-header,
.learndash-wrapper .ld-lesson-item-preview-heading { border-radius: var(--yong-radius) var(--yong-radius) 0 0; }

/* --- Focusmodus --------------------------------------------------------- */

.learndash-wrapper .ld-focus {
	font-family: var(--yong-font-tekst);
	background: var(--yong-mist);
}
.learndash-wrapper .ld-focus-sidebar {
	background: var(--yong-wit);
	border-right: 1px solid var(--yong-rand);
}
.learndash-wrapper .ld-focus-sidebar .ld-course-navigation-heading {
	font-family: var(--yong-font-kop);
	font-size: 19px;
}
.learndash-wrapper .ld-focus-header {
	background: var(--yong-wit);
	border-bottom: 1px solid var(--yong-rand);
	box-shadow: none;
}
.learndash-wrapper .ld-focus-header .ld-user-menu .ld-user-menu-items { border-radius: var(--yong-radius-s); }
.learndash-wrapper .ld-focus-content { max-width: 880px; }
.learndash-wrapper .ld-content-actions { border-top: 1px solid var(--yong-rand); }

.learndash-wrapper .ld-focus-sidebar .ld-table-list-items .ld-table-list-item-preview:hover { background: var(--yong-creme); }
.learndash-wrapper .ld-focus-sidebar .ld-table-list-item.ld-is-current-item > .ld-table-list-item-preview {
	background: var(--yong-creme);
	box-shadow: inset 3px 0 0 var(--yong-groen);
}

/* --- Tabs --------------------------------------------------------------- */

.learndash-wrapper .ld-tabs .ld-tabs-navigation .ld-tab {
	font-family: var(--yong-font-tekst);
	font-weight: 600;
	font-size: 15px;
	border-radius: var(--yong-radius-s) var(--yong-radius-s) 0 0;
}
.learndash-wrapper .ld-tabs .ld-tabs-navigation .ld-tab.ld-active {
	border-bottom-color: var(--yong-groen) !important;
	color: var(--yong-groen) !important;
}

/* --- Testen (quizzen) --------------------------------------------------- */

.learndash-wrapper .wpProQuiz_content {
	font-family: var(--yong-font-tekst);
}
.learndash-wrapper .wpProQuiz_listItem,
.learndash-wrapper .wpProQuiz_questionListItem {
	border-radius: var(--yong-radius-s);
}
.learndash-wrapper .wpProQuiz_questionList .wpProQuiz_questionListItem {
	border: 1px solid var(--yong-rand);
	margin-bottom: 10px;
	padding: 4px 12px;
	transition: border-color .2s ease, background .2s ease;
}
.learndash-wrapper .wpProQuiz_questionList .wpProQuiz_questionListItem:hover {
	border-color: var(--yong-groen);
	background: var(--yong-creme);
}
.learndash-wrapper .wpProQuiz_questionList input[type="radio"],
.learndash-wrapper .wpProQuiz_questionList input[type="checkbox"] { accent-color: var(--yong-groen); }

.learndash-wrapper .wpProQuiz_header,
.learndash-wrapper .ld-quiz-actions { border-radius: var(--yong-radius); }

.learndash-wrapper .wpProQuiz_correct { border-left: 4px solid var(--yong-groen); }
.learndash-wrapper .wpProQuiz_incorrect { border-left: 4px solid var(--yong-oranje); }

.learndash-wrapper .ld-quiz-question-type-heading { font-family: var(--yong-font-kop); }

/* --- Inlogvenster van LearnDash ---------------------------------------- */

.learndash-wrapper .ld-modal.ld-login-modal {
	border-radius: var(--yong-radius);
	box-shadow: 0 30px 60px -30px rgba(15, 15, 15, .5);
	overflow: hidden;
}
.learndash-wrapper .ld-login-modal .ld-modal-heading { font-family: var(--yong-font-kop); }
.learndash-wrapper .ld-login-modal input[type="text"],
.learndash-wrapper .ld-login-modal input[type="password"] {
	border-radius: var(--yong-radius-s);
	border: 1px solid var(--yong-rand);
	padding: 12px 14px;
}
.learndash-wrapper .ld-login-modal input[type="submit"] { border-radius: var(--yong-knop-radius); }

/* --- Meldingen ---------------------------------------------------------- */

.learndash-wrapper .ld-alert {
	border-radius: var(--yong-radius);
	border: 1px solid var(--yong-rand);
	font-family: var(--yong-font-tekst);
}
.learndash-wrapper .ld-alert-success { border-left: 4px solid var(--yong-groen); }
.learndash-wrapper .ld-alert-warning { border-left: 4px solid var(--yong-geel); }

/* --- Certificaat / cursusafronding -------------------------------------- */

.learndash-wrapper .ld-course-status-content .ld-course-status-price { font-size: 14px; color: #6b6b66; }

/* --- Breedte binnen Blocksy -------------------------------------------- */

.single-sfwd-courses .entry-content > .learndash-wrapper,
.single-sfwd-lessons .entry-content > .learndash-wrapper,
.single-sfwd-topic .entry-content > .learndash-wrapper,
.single-sfwd-quiz .entry-content > .learndash-wrapper { margin-top: 28px; }

/* verberg de standaard bericht-meta van het thema binnen de leeromgeving */
.single-sfwd-courses .entry-meta,
.single-sfwd-lessons .entry-meta,
.single-sfwd-topic .entry-meta,
.single-sfwd-quiz .entry-meta,
.single-groups .entry-meta,
.single-sfwd-courses .post-navigation,
.single-sfwd-lessons .post-navigation,
.single-sfwd-topic .post-navigation { display: none !important; }

/* de focusmodus vult het scherm: geen dubbele paginakop */
.learndash-wrapper .ld-focus ~ .ct-container,
body.ld-in-focus-mode .ct-breadcrumbs { display: none; }

/* Uitlogregel onder in het mobiele paneel */
.yong-ld-offcanvas-logout {
	margin-top: 22px;
	padding-top: 18px;
	border-top: 1px solid var(--yong-rand);
	text-align: center;
}
.yong-ld-offcanvas-logout a {
	font-size: 15px;
	color: #6b6b66;
	text-decoration: none;
}
.yong-ld-offcanvas-logout a:hover { color: var(--yong-groen); }

/* ==========================================================================
   Site-header: logo links, navigatiebalk in het midden, accountknop rechts

   De rij loopt over de volle breedte; de inhoud houden we op de normale
   containerbreedte, zodat het logo en de knop even ver van de rand staan als
   de rest van de site (1280px op een breed scherm = 116px marge).
   ========================================================================== */

/* In de customizer staat eigen CSS die élke .ct-container vastzet op 720px
   (desktop) en 100px (tablet/mobiel), met de rij naar rechts geduwd. Dat was
   nodig toen de balk alleen het menu bevatte. Nu het logo en de accountknop
   erbij staan, moet de rij de volle breedte kunnen gebruiken — daarom heffen we
   die begrenzing hier op, uitsluitend binnen de header. */
header#header .ct-sticky-container,
header#header [data-row^="middle"] > .ct-container {
	max-width: none;
	margin-inline: auto;
}

header#header [data-row^="middle"] > .ct-container {
	width: min(var(--theme-container-edge-spacing, 92vw), var(--theme-normal-container-max-width, 1280px));
	padding-inline: 0;
}

/* de navigatiebalk blijft gecentreerd, ongeacht de breedte van logo en knop */
header#header [data-row^="middle"] [data-column="start"]  { justify-content: flex-start; }
header#header [data-row^="middle"] [data-column="middle"] { justify-content: center; }
header#header [data-row^="middle"] [data-column="end"]    { justify-content: flex-end; }

/* accountknop in dezelfde stijl als de knop die hier eerder stond */
.ct-header-cta .ct-button {
	border-radius: var(--yong-knop-radius, 10px) !important;
	font-size: 16px;
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
}
.ct-header-cta .ct-button .ct-icon { margin-inline-start: 8px; }

/* op smallere schermen krimpt de balk voordat er iets gaat overlappen */
@media (max-width: 1150px) {
	header#header [data-row^="middle"] .header-menu-1 .ct-menu-link { padding-inline: 11px; }
	.ct-header-cta .ct-button { font-size: 15px; padding: 13px 18px !important; }
}

/* De losse LearnDash-inlogknop in de trainingsinhoud is overbodig zodra iemand
   is ingelogd; dan toont hij namelijk "Uitloggen" midden in de training. */
body.logged-in .entry-content .learndash-wrap .ld-login-button { display: none; }

/* Trainingen zonder uitgelichte afbeelding krijgen een vlak uit het palet,
   zodat het overzicht toch rustig en herkenbaar oogt. */
.yong-ld-course__media[data-tint="1"] { background: color-mix(in srgb, var(--yong-groen) 14%, var(--yong-creme)); }
.yong-ld-course__media[data-tint="2"] { background: color-mix(in srgb, var(--yong-blauw) 14%, var(--yong-creme)); }
.yong-ld-course__media[data-tint="3"] { background: color-mix(in srgb, var(--yong-oranje) 14%, var(--yong-creme)); }
.yong-ld-course__media[data-tint="4"] { background: color-mix(in srgb, var(--yong-geel) 18%, var(--yong-creme)); }
.yong-ld-course__media[data-tint="1"] .yong-ld-course__placeholder { color: var(--yong-groen); }
.yong-ld-course__media[data-tint="2"] .yong-ld-course__placeholder { color: var(--yong-blauw); }
.yong-ld-course__media[data-tint="3"] .yong-ld-course__placeholder { color: var(--yong-oranje); }
.yong-ld-course__media[data-tint="4"] .yong-ld-course__placeholder { color: #b89a0f; }
.yong-ld-course__placeholder { opacity: .6; }

/* De inlog- en leeromgevingpagina hebben een eigen kop in de shortcode,
   dus de standaard paginakop van het thema is daar overbodig. */
body.yong-ld-eigen-kop .hero-section { display: none; }

/* Goed/fout-markering in de huisstijl in plaats van het standaardgroen van LearnDash */
.learndash-wrapper .wpProQuiz_content .wpProQuiz_questionListItem.wpProQuiz_answerCorrect,
.learndash-wrapper .wpProQuiz_content .wpProQuiz_questionListItem.wpProQuiz_answerCorrectIncomplete {
	background: var(--yong-groen) !important;
	border-color: var(--yong-groen) !important;
	color: #fff !important;
}
.learndash-wrapper .wpProQuiz_content .wpProQuiz_questionListItem.wpProQuiz_answerIncorrect {
	background: var(--yong-oranje) !important;
	border-color: var(--yong-oranje) !important;
	color: #fff !important;
}
.learndash-wrapper .wpProQuiz_content .wpProQuiz_questionListItem.wpProQuiz_answerCorrect *,
.learndash-wrapper .wpProQuiz_content .wpProQuiz_questionListItem.wpProQuiz_answerIncorrect * { color: #fff !important; }

.learndash-wrapper .wpProQuiz_content .wpProQuiz_questionListItem.wpProQuiz_answerCorrect:hover,
.learndash-wrapper .wpProQuiz_content .wpProQuiz_questionListItem.wpProQuiz_answerIncorrect:hover { background: inherit; }

/* Resultaatbalk na afloop van een test */
.learndash-wrapper .wpProQuiz_results .wpProQuiz_resultsList,
.learndash-wrapper .ld-quiz-actions { border-radius: var(--yong-radius); }

/* ==========================================================================
   Beheerblok onder de leeromgeving
   Bewust rustiger dan de kaarten erboven: dit gaat niet over eigen voortgang.
   ========================================================================== */

.yong-ld-beheer {
	margin-top: 56px;
	padding-top: 32px;
	border-top: 1px solid var(--yong-rand);
}

.yong-ld-beheer__head { margin-bottom: 20px; }

.yong-ld-beheer__title {
	font-family: var(--yong-font-kop);
	font-size: 26px;
	margin: 0 0 4px;
}

.yong-ld-beheer__sub { margin: 0; font-size: 15px; color: #6b6b66; }

.yong-ld-beheer__lijst {
	background: var(--yong-wit);
	border: 1px solid var(--yong-rand);
	border-radius: var(--yong-radius);
	overflow: hidden;
}

.yong-ld-beheer__item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 16px 22px;
	border-bottom: 1px solid var(--yong-rand);
	transition: background .2s ease;
}
.yong-ld-beheer__item:last-child { border-bottom: none; }
.yong-ld-beheer__item:hover { background: var(--yong-mist); }
.yong-ld-beheer__item.is-concept { opacity: .72; }

.yong-ld-beheer__info { min-width: 0; }

.yong-ld-beheer__naam {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 3px;
	font-family: var(--yong-font-kop);
	font-size: 17px;
	line-height: 1.3;
}

.yong-ld-beheer__meta { margin: 0; font-size: 13px; color: #6b6b66; }

.yong-ld-beheer__acties { display: flex; align-items: center; gap: 16px; flex: 0 0 auto; }

.yong-ld-beheer__link {
	font-size: 14px;
	color: #6b6b66;
	text-decoration: none;
	white-space: nowrap;
}
.yong-ld-beheer__link:hover { color: var(--yong-groen); text-decoration: underline; }

.yong-ld-btn--klein { padding: 8px 16px; font-size: 14px; }

.yong-ld-tag {
	display: inline-block;
	padding: 3px 9px;
	border-radius: 99px;
	font-family: var(--yong-font-tekst);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .03em;
	text-transform: uppercase;
	white-space: nowrap;
}
.yong-ld-tag--concept { background: #eceae3; color: #6b6b66; }
.yong-ld-tag--eigen   { background: color-mix(in srgb, var(--yong-groen) 16%, #fff); color: #4a6b32; }

@media (max-width: 640px) {
	.yong-ld-beheer__item { flex-direction: column; align-items: flex-start; gap: 12px; }
	.yong-ld-beheer__acties { width: 100%; justify-content: space-between; }
}

/* Op smalle schermen staan het percentage en de laatste activiteit naast elkaar
   te dringen; onder elkaar leest dat rustiger. */
@media (max-width: 560px) {
	.learndash-wrapper .ld-progress { padding: 14px 16px; }
	.learndash-wrapper .ld-progress .ld-progress-heading {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 4px;
	}
	.learndash-wrapper .ld-progress .ld-progress-stats { font-size: 13px; }
	.learndash-wrapper .ld-progress-label,
	.learndash-wrapper .ld-progress-stats { white-space: normal; }
}