/* Leesbaarheidslaag: bewust na style.css geladen zodat deze regels ook mobiel gelden. */
body { font-size: 17px; line-height: 1.65; }

.nav-links a, .header-link { font-size: 14px; }
.eyebrow { font-size: 12px; }
.intro { max-width: 540px; font-size: 18px; }
.button { min-height: 51px; padding: 13px 20px; font-size: 15px; }

.hero-card small, .skill-pills span, .theme-list b, .theme-badge,
.progress-copy, .result-score span, .table-head, .rank, .score-value,
.metric span, .site-footer, .toast { font-size: 12px; }
.hero-card p, .side-copy p:not(.eyebrow), .form-note,
.scoreboard-header p, .result-copy p, .teacher-login p,
.teacher-head p, .board-aside p { font-size: 15px; }
.info-strip span, .score-item span, .privacy-note, .export-note,
.quiz-actions small { font-size: 12px; }

.theme-list div, .field, .filter-row label { font-size: 14px; }
.field input, .field select, .code-input { height: 51px; padding: 0 14px; font-size: 16px; }
.filter-row select { height: 43px; font-size: 14px; }

.answer { padding: 16px; font-size: 16px; line-height: 1.45; }
.answer-key { width: 26px; height: 26px; font-size: 12px; }
.score-row { min-height: 64px; font-size: 15px; }
.tabs button { padding: 9px 12px; font-size: 12px; }
.empty, .loading { font-size: 14px; }

@media (max-width: 720px) {
  body { font-size: 16px; }
  .answer { font-size: 16px; }
  .page { padding-top: 32px; }
}

/* Extra ruime desktopweergave voor gebruik in het lokaal. */
@media (min-width: 721px) {
  body { font-size: 19px; }

  .nav-links a, .header-link { font-size: 16px; }
  .eyebrow { font-size: 13px; }
  .intro { font-size: 20px; }
  .button { min-height: 55px; font-size: 17px; }

  .hero-card small, .skill-pills span, .theme-list b, .theme-badge,
  .progress-copy, .result-score span, .table-head, .rank, .score-value,
  .metric span, .site-footer, .toast { font-size: 14px; }
  .hero-card p, .side-copy p:not(.eyebrow), .form-note,
  .scoreboard-header p, .result-copy p, .teacher-login p,
  .teacher-head p, .board-aside p { font-size: 17px; }
  .info-strip span, .score-item span, .privacy-note, .export-note,
  .quiz-actions small { font-size: 14px; }

  .theme-list div, .field, .filter-row label { font-size: 16px; }
  .field input, .field select, .code-input { height: 55px; font-size: 18px; }
  .filter-row select { height: 47px; font-size: 16px; }

  .question { font-size: 28px; }
  .answer { padding: 18px; font-size: 18px; }
  .answer-key { width: 29px; height: 29px; font-size: 13px; }
  .score-row { min-height: 68px; font-size: 17px; }
  .tabs button { font-size: 14px; }
  .empty, .loading { font-size: 16px; }
}