/* ==========================================================================
   Ouderquiz "Wat heeft jouw kind van jou nodig?" — eigen stijl bovenop de Leerlab-huisstijl
   (styles.css levert de tokens, kaarten, knoppen, voortgangsbalk en foot).
   ========================================================================== */

/* --- Vraag + antwoordknoppen (single-select, mobiel-vriendelijk) -------- */
.question-card { min-height: 340px; }

.quiz-q {
  font-weight: 800; font-size: clamp(20px, 5.2vw, 24px); line-height: 1.25;
  margin: 4px 0 22px; display: flex; gap: 12px; align-items: flex-start;
}
.quiz-q .qnum {
  flex: none; min-width: 32px; height: 32px; padding: 0 8px; border-radius: 9px;
  background: var(--pink); color: #fff; font-size: 15px; font-weight: 800;
  display: grid; place-items: center;
}

.quiz-opts { display: grid; gap: 12px; }
.quiz-opt {
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
  border: 2.5px solid var(--line); background: var(--surface); color: var(--ink);
  border-radius: var(--radius-sm); padding: 16px 18px; cursor: pointer;
  font-family: inherit; font-size: 16px; line-height: 1.4; font-weight: 600;
  transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease, background .12s ease;
}
.quiz-opt:hover { transform: translateY(-2px); border-color: var(--ink); box-shadow: var(--shadow-lift); }
.quiz-opt:focus-visible { outline: 3px solid var(--pink); outline-offset: 2px; }
.quiz-opt .dot {
  flex: none; width: 22px; height: 22px; border-radius: 50%;
  border: 2.5px solid var(--line); background: #fff; position: relative;
  transition: border-color .12s ease, background .12s ease;
}
.quiz-opt .opt-txt { flex: 1; }
.quiz-opt.selected { border-color: var(--ink); background: var(--pink-tint); box-shadow: 0 4px 0 var(--pink); }
.quiz-opt.selected .dot { border-color: var(--pink); background: var(--pink); }
.quiz-opt.selected .dot::after {
  content: ''; position: absolute; inset: 4px; border-radius: 50%; background: #fff;
}

/* --- Akkoord-checkbox --------------------------------------------------- */
.check { display: flex; align-items: flex-start; gap: 10px; margin: 6px 0 4px; font-size: 14.5px; line-height: 1.5; color: var(--ink-soft); cursor: pointer; }
.check input { margin-top: 2px; width: 18px; height: 18px; accent-color: var(--pink); flex: none; }
.check a { color: var(--pink-deep); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }

/* --- Uitslag ------------------------------------------------------------ */
.result-hero { border-color: var(--ink); box-shadow: 0 6px 0 var(--pink); }
.result-hero h1 { text-transform: none; font-size: clamp(26px, 6.5vw, 38px); }
.profiel-tekst { font-size: 16.5px; color: var(--ink-soft); }

/* Eén consistente tekstkleur voor alle leestekst (geen grijs-dan-zwart). */
.hero .lead, .profiel-tekst, .section-head .sub, .check, .klik-intro,
.tips-list, .klik-list, .klik-helpt, .capture-ok { color: var(--ink); }

/* Introparagrafen op de startpagina, met ruimte ertussen. */
#start-tekst p { margin: 0 0 14px; }
#start-tekst p:last-child { margin-bottom: 0; }

/* Suggesties ("waar je nu al mee kunt beginnen") — dit is de KERN, dus nadruk. */
.tips-card { border: 2.5px solid var(--ink); box-shadow: 0 6px 0 var(--yellow); }
.tips-card .lead-hand {
  font-family: var(--font-hand); font-weight: 700; color: var(--pink); font-size: 24px; display: block; margin-bottom: 14px;
}
.tips-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.tips-list li { display: flex; gap: 12px; align-items: flex-start; font-size: 16.5px; line-height: 1.5; font-weight: 600; }
.tip-ico { flex: none; }

/* Klikgesprek = het hoofddoel: één blok met hook + uitleg + CTA-knop. */
.klik-card { border: 2.5px solid var(--ink); box-shadow: 0 6px 0 var(--pink); }
.klik-hook { font-size: 22px; margin: 0 0 8px; font-weight: 800; line-height: 1.25; }
.klik-intro { font-size: 15.5px; margin: 0 0 14px; }
.klik-list { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 10px; }
.klik-list li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; line-height: 1.5; }
.klik-check {
  flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--green);
  color: #fff; font-weight: 900; font-size: 12px; display: grid; place-items: center; margin-top: 1px;
}
.klik-helpt {
  margin: 0 0 18px; padding: 14px 16px; background: var(--pink-tint); border-radius: var(--radius-sm);
  font-size: 15.5px; line-height: 1.55;
}
.klik-helpt strong { color: var(--pink-deep); }
.klik-card .btn { margin-top: 2px; }

.capture-card .lead-hand,
.capture-card .capture-ok ~ .lead-hand { }
.capture-card .lead-hand {
  font-family: var(--font-hand); font-weight: 700; color: var(--pink); font-size: 22px; display: block; margin-bottom: 2px;
}
.capture-ok { font-size: 16px; margin: 8px 0 0; }

.result-actions { display: flex; gap: 12px; justify-content: center; }

/* --- Kleine schermen ---------------------------------------------------- */
@media (max-width: 520px) {
  .quiz-opt { padding: 15px 15px; font-size: 15.5px; }
}

/* --- Print -------------------------------------------------------------- */
@media print {
  .brand, .foot, .no-print, .close-btn, .progress-wrap, .capture-card { display: none !important; }
  .btn { display: none !important; }
}

/* Honeypot: visueel weg, buiten tab-volgorde. Bots vullen 'm, mensen niet. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }