/*
 * Smart & Zeker Cursus — course.css (v1.0.0)
 * Gebaseerd op het bestaande course.css, maar ALLES is gescoped onder .sez-course zodat niets
 * van het ICT-thema verandert (de oude versie had globale img/*-/html,body-regels).
 * Doelgroep 50+: grote tekst, grote knoppen, hoog contrast, geen horizontale scroll.
 */
.sez-course {
	--sez-tekst: #1a1a1a;
	--sez-accent: #0b5fa5;
	--sez-accent-donker: #08477d;
	--sez-gratis: #1a7a3c;
	--sez-vergrendeld: #8a5200;
	--sez-rand: #d8d8d8;
	--sez-radius: 10px;
	box-sizing: border-box;
	max-width: 760px;
	margin: 0 auto;
	padding: 16px 16px 40px;
	font-size: 18px;
	line-height: 1.6;
	color: var(--sez-tekst);
	background: #ffffff;
	border-radius: var(--sez-radius);
	overflow-wrap: anywhere;
}
.sez-course *, .sez-course *::before, .sez-course *::after { box-sizing: border-box; }
@media (min-width: 600px) { .sez-course { font-size: 19px; padding-left: 24px; padding-right: 24px; } }
.sez-course h1 { font-size: 1.6em; line-height: 1.25; margin: 0.4em 0; }
.sez-course h2 { font-size: 1.3em; margin: 1.4em 0 0.4em; }
.sez-course img { max-width: 100%; height: auto; display: block; margin: 0 auto; border-radius: var(--sez-radius); object-fit: contain; }
.sez-fig { margin: 16px 0; }
.sez-crumb a { color: var(--sez-accent); }

/* Knoppen */
.sez-course .sez-btn {
	display: block; width: 100%; text-align: center; padding: 16px 20px; margin: 12px 0;
	font-size: 1em; font-weight: 700; border-radius: var(--sez-radius); text-decoration: none;
	min-height: 48px; border: 2px solid var(--sez-accent); cursor: pointer; line-height: 1.3;
}
@media (min-width: 480px) { .sez-course .sez-btn { display: inline-block; width: auto; min-width: 260px; margin-right: 8px; } }
.sez-course .sez-btn--primary { background: var(--sez-accent); color: #fff; }
.sez-course .sez-btn--primary:hover, .sez-course .sez-btn--primary:focus { background: var(--sez-accent-donker); }
.sez-course .sez-btn--secondary { background: transparent; color: var(--sez-accent); }
.sez-course a:focus-visible, .sez-course button:focus-visible, .sez-course input:focus-visible { outline: 3px solid #f5a300; outline-offset: 2px; }

/* Badges en status */
.sez-course .sez-badge, .sez-course .sez-status {
	display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 0.75em; font-weight: 700; color: #fff; white-space: nowrap;
}
.sez-badge--gratis { background: var(--sez-gratis); }
.sez-badge--vergrendeld { background: var(--sez-vergrendeld); }
.sez-status--niet-gestart { background: #5c5c5c; }
.sez-status--bezig { background: var(--sez-accent); }
.sez-status--voltooid { background: var(--sez-gratis); }

/* Voortgang */
.sez-bar { height: 16px; background: #e6e6e6; border-radius: 999px; overflow: hidden; margin: 12px 0 4px; }
.sez-bar span { display: block; height: 100%; background: var(--sez-gratis); }
.sez-bar-label { margin: 0 0 12px; font-weight: 700; }

/* Meldingen */
.sez-note { background: #eef5fb; border-left: 5px solid var(--sez-accent); padding: 4px 14px; border-radius: var(--sez-radius); margin: 14px 0; }
.sez-note--warn { background: #fff7ea; border-color: var(--sez-vergrendeld); }
.sez-locked { border: 2px solid var(--sez-vergrendeld); border-radius: var(--sez-radius); padding: 20px; margin: 16px 0; }
.sez-teaser { font-style: italic; }
.sez-done { color: var(--sez-gratis); font-weight: 700; }

/* Lijsten */
.sez-lessen, .sez-hoofdstukken { list-style: none; margin: 0; padding: 0; }
.sez-lessen a { display: flex; gap: 10px; padding: 14px 8px; border-top: 1px solid var(--sez-rand); text-decoration: none; color: var(--sez-tekst); min-height: 48px; }
.sez-check { color: var(--sez-gratis); font-weight: 700; flex-shrink: 0; }
.sez-check--open { color: #777; }
.sez-hs { border: 1px solid var(--sez-rand); border-radius: var(--sez-radius); padding: 12px 14px; margin: 10px 0; }
.sez-hs-top a { font-weight: 700; color: var(--sez-accent); }
.sez-hs-meta { font-size: 0.9em; color: #444; margin-top: 4px; }

/* Quiz */
.sez-q { border: 1px solid var(--sez-rand); border-radius: var(--sez-radius); padding: 14px; margin: 16px 0; }
.sez-q legend { font-weight: 700; padding: 0 6px; }
.sez-opt { display: flex; gap: 10px; align-items: flex-start; padding: 12px 8px; min-height: 48px; cursor: pointer; }
.sez-opt input { width: 24px; height: 24px; flex-shrink: 0; margin-top: 3px; }
.sez-score { font-size: 1.3em; font-weight: 700; }
.sez-qres { border-left: 5px solid; padding: 4px 14px; margin: 12px 0; border-radius: 4px; }
.sez-qres--goed { border-color: var(--sez-gratis); background: #eef8f1; }
.sez-qres--fout { border-color: #b02a2a; background: #fdf0f0; }
.sez-qtext { font-weight: 700; }
.sez-uitleg { font-style: italic; }
.sez-pager { margin-top: 24px; }


/* Leesbaarheid op een donker thema: de cursus is een licht vlak met donkere tekst.
   Zonder deze regels erft de inhoud de themakleuren en wordt donker op donker. */
.sez-course,
.sez-course p,
.sez-course li,
.sez-course td,
.sez-course th,
.sez-course label,
.sez-course h1,
.sez-course h2,
.sez-course h3,
.sez-course h4 { color: var(--sez-tekst); }
.sez-course a { color: var(--sez-accent); }
.sez-course a:hover, .sez-course a:focus { color: var(--sez-accent-donker); }
.sez-course .sez-btn--primary,
.sez-course .sez-badge,
.sez-course .sez-status--niet-gestart,
.sez-course .sez-status--bezig,
.sez-course .sez-status--voltooid { color: #fff; }