/* DNS-cursus: quiz en opdrachten (Michel 7-8 nov 2026). Huisstijlkleuren: navy #152a80, blauw #1d65af/#1062fe.
   Verdere vormgeving via Danny (taak 152). */

/* ---------- Quiz ---------- */
.dnsc-quiz { counter-reset: dnsc; margin: 18px 0 8px; padding: 22px; border-radius: 16px;
	background: linear-gradient(135deg, #eef4ff 0%, #f6f0ff 100%); border: 1px solid #dfe6fb; }
/* De opties worden geschud; de <br>'s blijven dan bovenaan staan en gaven een groot gat. */
.dnsc-vraag > br { display: none; }
.dnsc-vraag { position: relative; margin: 0 0 16px; padding: 18px 18px 14px; border: 0; border-radius: 14px; background: #fff;
	box-shadow: 0 1px 2px rgba(21, 42, 128, .06), 0 6px 20px rgba(21, 42, 128, .07); border-left: 6px solid #1d65af; }
.dnsc-vraag:nth-of-type(4n+2) { border-left-color: #7c3aed; }
.dnsc-vraag:nth-of-type(4n+3) { border-left-color: #0d9488; }
.dnsc-vraag:nth-of-type(4n+4) { border-left-color: #ea580c; }
.dnsc-vraag legend { float: left; width: 100%; padding: 0; margin: 0 0 12px; font-weight: 800; font-size: 17px; line-height: 1.4; color: #152a80; }
.dnsc-vraag legend + * { clear: both; }

.dnsc-optie { display: flex; align-items: center; gap: 10px; position: relative; margin: 0 0 8px; padding: 11px 44px 11px 14px;
	border: 2px solid #e4e8f2; border-radius: 10px; background: #fafbfe; cursor: pointer; line-height: 1.4;
	transition: border-color .15s, background .15s, transform .1s; }
.dnsc-optie:hover { border-color: #9db8ec; background: #f2f6ff; }
.dnsc-optie input { flex: 0 0 auto; width: 18px; height: 18px; margin: 0; accent-color: #1062fe; }
.dnsc-optie:has(input:checked) { border-color: #1062fe; background: #e9f0ff; box-shadow: 0 0 0 3px rgba(16, 98, 254, .12); }
.dnsc-optie:has(input:focus-visible) { outline: 3px solid #f59e0b; outline-offset: 2px; }
fieldset[data-uitslag] .dnsc-optie { cursor: default; }
fieldset[data-uitslag] .dnsc-optie:hover { transform: none; }

/* Nakijken: groen vinkje bij het juiste antwoord, rood kruisje bij een fout gekozen antwoord. */
.dnsc-optie-juist, .dnsc-optie-juist:hover, .dnsc-optie.dnsc-optie-juist:has(input:checked) { border-color: #16a34a; background: #e8f6ec; color: #14532d; font-weight: 600; box-shadow: none; }
.dnsc-optie-fout, .dnsc-optie-fout:hover, .dnsc-optie.dnsc-optie-fout:has(input:checked) { border-color: #dc2626; background: #fdecec; color: #7f1d1d; box-shadow: none; }
.dnsc-optie-fout { text-decoration: line-through; text-decoration-thickness: 1px; }
.dnsc-optie-juist::after, .dnsc-optie-fout::after {
	position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
	width: 24px; height: 24px; line-height: 24px; border-radius: 50%; text-align: center; font-weight: 700; color: #fff; text-decoration: none; }
.dnsc-optie-juist::after { content: "\2713"; background: #16a34a; }
.dnsc-optie-fout::after { content: "\2717"; background: #dc2626; }

.dnsc-uitleg { margin: 10px 0 2px; padding: 12px 14px; border-radius: 10px; background: #f5f7fb; color: #2b3340; font-size: 15px; }
.dnsc-uitleg p { margin: 0; }
.dnsc-oordeel { display: block; margin-bottom: 4px; }
fieldset[data-uitslag="goed"] .dnsc-uitleg { background: #edf8f0; }
fieldset[data-uitslag="fout"] .dnsc-uitleg { background: #fdf1f1; }
fieldset[data-uitslag="goed"] .dnsc-oordeel { color: #15803d; }
fieldset[data-uitslag="fout"] .dnsc-oordeel { color: #b91c1c; }

.dnsc-quiz-acties { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 6px; }
.dnsc-quiz-acties .eoh-knop { background: linear-gradient(90deg, #152a80, #1062fe); color: #fff; border: 0; box-shadow: 0 6px 18px rgba(16, 98, 254, .28); }
.dnsc-quiz-acties .eoh-knop:hover { filter: brightness(1.08); }
.dnsc-quiz-score { margin: 0; font-weight: 800; font-size: 17px; color: #152a80; }

/* ---------- Opdrachten ---------- */
.dnsc-opdracht { margin: 18px 0; padding: 20px 22px; border-radius: 16px; background: #fff;
	border: 1px solid #e3e8f3; border-top: 6px solid #0d9488; box-shadow: 0 6px 20px rgba(21, 42, 128, .07); }
.dnsc-opdracht h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; color: #0f5f58; }
.dnsc-opdracht h3::before { content: "\270E"; display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
	background: #ccfbf1; color: #0f766e; font-size: 16px; }
.dnsc-opdracht label { font-weight: 700; color: #1f2937; }
.dnsc-opdracht input[type="text"] { width: 100%; max-width: 560px; margin-top: 6px; padding: 11px 13px; border: 2px solid #dbe2ee; border-radius: 10px;
	font: inherit; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 15px; background: #fbfcfe; }
.dnsc-opdracht input[type="text"]:focus { outline: none; border-color: #0d9488; box-shadow: 0 0 0 3px rgba(13, 148, 136, .15); background: #fff; }
.dnsc-opdracht .eoh-knop { background: linear-gradient(90deg, #0f766e, #14b8a6); color: #fff; border: 0; box-shadow: 0 6px 18px rgba(13, 148, 136, .25); }
.dnsc-opdracht .eoh-knop:hover { filter: brightness(1.06); }
.dnsc-uitslag:empty { display: none; }
.dnsc-uitslag { margin: 10px 0; padding: 12px 14px; border-radius: 10px; background: #f5f7fb; }
.dnsc-uitslag > p { margin: 0 0 6px; font-weight: 700; }
.dnsc-uitslag ul { margin: 0; padding-left: 1.1em; }
.dnsc-uitslag-goed { color: #15803d; }
.dnsc-uitslag-bijna { color: #b45309; }
.dnsc-uitslag-fout { color: #b91c1c; }
.dnsc-regel-goed { color: #166534; }
.dnsc-regel-bijna { color: #92400e; }
.dnsc-regel-fout { color: #991b1b; }
.dnsc-uitslag code { font-size: 13px; word-break: break-all; }

@media (max-width: 600px) {
	.dnsc-quiz { padding: 14px; }
	.dnsc-vraag { padding: 14px 12px 10px; }
	.dnsc-optie { padding: 10px 40px 10px 12px; }
}

/* ---------- Les gelezen ---------- */
.eoh-knop.dnsc-gelezen-knop { background: linear-gradient(90deg, #152a80, #1062fe); color: #fff; border: 0; box-shadow: 0 6px 18px rgba(16, 98, 254, .25); }
.eoh-knop.dnsc-gelezen-knop:hover { filter: brightness(1.08); }
.eoh-knop.dnsc-gelezen-klaar, .eoh-knop.dnsc-gelezen-klaar:disabled { background: #e8f6ec; color: #15803d; border: 2px solid #16a34a; box-shadow: none; opacity: 1; cursor: default; filter: none; }

/* ---------- Oefenzone-widget (O-opdrachten, 8 nov 2026; functioneel, vormgeving via Danny) ---------- */
.dnsc-oefen h4 { margin: 16px 0 8px; color: #152a80; }
.dnsc-oefen input[type="email"], .dnsc-oefen input[type="number"], .dnsc-oefen select, .dnsc-oefen textarea {
	width: 100%; max-width: 560px; margin-top: 6px; padding: 10px 12px; border: 2px solid #dbe2ee; border-radius: 10px; font: inherit; background: #fbfcfe; box-sizing: border-box; }
.dnsc-oefen input[type="number"] { max-width: 140px; }
.dnsc-oefen select { max-width: 200px; }
.dnsc-oefen textarea { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 14px; }
.dnsc-oefen input:focus, .dnsc-oefen select:focus, .dnsc-oefen textarea:focus { outline: none; border-color: #0d9488; box-shadow: 0 0 0 3px rgba(13, 148, 136, .15); background: #fff; }
.dnsc-oefen .eoh-knop-sec { cursor: pointer; }
.dnsc-oefen-klein { padding: 4px 10px; font-size: 14px; }
.dnsc-oefen-wie { margin: 0 0 6px; color: #4b5563; font-size: 14px; }
.dnsc-oefen-zone { margin: 0 0 4px; font-size: 17px; }
.dnsc-oefen-zone code { font-size: 16px; }
.dnsc-oefen-verloop, .dnsc-oefen-dig { margin: 0 0 8px; color: #4b5563; font-size: 14px; }
.dnsc-oefen-dig code { display: inline-block; margin: 2px 0; font-size: 13px; }
.dnsc-oefen-letop { margin: 10px 0; }
.dnsc-oefen-waarden { margin: 12px 0; padding: 12px 14px; border-radius: 10px; background: #f0fdfa; border: 1px solid #ccfbf1; }
.dnsc-oefen-waarden p { margin: 6px 0 0; }
.dnsc-oefen-waarde { word-break: break-all; }
.dnsc-oefen-begin { margin: 12px 0; padding: 12px 14px; border-radius: 10px; background: #fff7ed; border: 1px solid #fed7aa; }
.dnsc-oefen-begin p { margin: 0 0 8px; }
.dnsc-oefen-begin p:last-child { margin: 0; }
.dnsc-oefen-lijst { overflow-x: auto; }
.dnsc-oefen-records { width: 100%; border-collapse: collapse; font-size: 14px; }
.dnsc-oefen-records th, .dnsc-oefen-records td { padding: 6px 8px; border-bottom: 1px solid #e5e7eb; text-align: left; vertical-align: top; }
.dnsc-oefen-records code { word-break: break-all; font-size: 13px; }
.dnsc-oefen-acties { white-space: nowrap; }
.dnsc-oefen-acties .eoh-knop-sec { padding: 3px 8px; font-size: 13px; }
.dnsc-oefen-form { margin-top: 8px; padding-top: 4px; border-top: 1px dashed #dbe2ee; }
.dnsc-oefen-melding { margin: 6px 0; font-weight: 600; }
.dnsc-oefen-melding:empty { display: none; }
.dnsc-oefen-goed { color: #15803d; }
.dnsc-oefen-fout { color: #b91c1c; }
.dnsc-oefen-nakijken { margin-top: 14px; }
.dnsc-oefen-onder { margin: 14px 0 0; text-align: right; }
.dnsc-token { background: #fff7ed; }