/* Free self-paced course page: lessons, knowledge check and printable certificate. */
.course-body .lesson { padding: 8px 0 44px; margin-bottom: 44px; border-bottom: 1px solid var(--line); scroll-margin-top: 96px; }
.course-body .lesson:last-of-type { border-bottom: 0; }
.lesson-num { display: block; font-family: var(--mono); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--teal-dim); margin-bottom: 10px; }
.course-body ul { margin: 14px 0 14px 20px; }
.course-body li { margin: 6px 0; }
.course-aside { background: var(--paper); border-left: 3px solid var(--teal); border-radius: 0 10px 10px 0; padding: 16px 18px; margin-top: 18px; font-size: 15px; }
.course-aside a { color: var(--teal-dim); text-decoration: underline; }
.course-toc { margin: 12px 0 0 18px; font-size: 15px; line-height: 1.5; }
.course-toc li { margin: 7px 0; }
.course-toc a { color: var(--navy); }
.course-toc a:hover { color: var(--teal-dim); }

.quiz { margin-top: 22px; }
.quiz .q { border: 1px solid var(--line); border-radius: 12px; padding: 18px 20px 14px; margin: 0 0 16px; background: #fff; }
.quiz .q legend { font-weight: 600; color: var(--navy); padding: 0 6px; margin-left: -6px; font-size: 16px; line-height: 1.45; }
.quiz .q label { display: flex; gap: 10px; align-items: flex-start; padding: 7px 4px; font-size: 15px; cursor: pointer; border-radius: 6px; }
.quiz .q label:hover { background: var(--paper); }
.quiz .q input { margin-top: 5px; accent-color: #13A09A; flex: 0 0 auto; }
.quiz .q.right { border-color: #1BB3A6; }
.quiz .q.wrong { border-color: #c9772c; }
.q-why { font-size: 14px; margin-top: 8px; color: var(--ink-soft); }
.quiz .q.right .q-why { color: #0f7d74; }
.quiz .q.wrong .q-why { color: #9a5516; }
.quiz .btn { margin-top: 6px; border: 0; cursor: pointer; font: inherit; font-weight: 600; }
.quiz-result { margin-top: 18px; padding: 14px 18px; border-radius: 10px; background: var(--paper); font-weight: 600; color: var(--navy); }
.quiz-result.pass { background: #e3f6f3; color: #0f6d65; }
.quiz-result.fail { background: #fbefe3; color: #8a4b12; }
.quiz-note { font-size: 13.5px; color: var(--ink-soft); margin-top: 14px; }

.cert-form { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; margin-top: 18px; }
.cert-form label { width: 100%; font-weight: 600; color: var(--navy); font-size: 14.5px; }
.cert-form input { flex: 1 1 260px; font: inherit; padding: 11px 14px; border: 1px solid var(--line); border-radius: 8px; }
.cert-form input[aria-invalid="true"] { border-color: #c9772c; }
.cert-form .btn { border: 0; cursor: pointer; font: inherit; font-weight: 600; }

.lesson-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin-top: 26px; padding-top: 18px; border-top: 1px dashed var(--line); }
.lesson-time { font-family: var(--mono); font-size: 12.5px; color: var(--ink-soft); }
.lesson-next { border: 0; cursor: pointer; font: inherit; font-weight: 600; }
.lesson-next[hidden], .course-total[hidden], .lesson-locked[hidden] { display: none !important; }
.lesson.is-done .lesson-num::after { content: " · Completed"; color: #0f7d74; }
.lesson-locked { font-family: var(--mono); font-size: 12.5px; color: var(--ink-soft); background: var(--paper); border: 1px dashed var(--line); border-radius: 10px; padding: 16px 18px; }
.course-toc li { display: flex; justify-content: space-between; gap: 10px; }
.course-toc li .t { font-family: var(--mono); font-size: 12px; color: var(--ink-soft); white-space: nowrap; }
.course-toc li.locked a { color: #9aa8b4; cursor: not-allowed; }
.course-toc li.done a::before { content: "✓ "; color: #13A09A; }
.course-toc li.current a { font-weight: 600; }
.course-total { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 14px; color: var(--navy); display: flex; justify-content: space-between; }
.course-total b { font-family: var(--mono); }
.course-reset { margin-top: 12px; align-self: flex-start; background: none; border: 0; padding: 0; font: inherit; font-size: 13.5px; color: var(--teal-dim); text-decoration: underline; cursor: pointer; }

.cert-sheet { display: none; }

@media (max-width: 900px) {
  .course-body .lesson { padding-bottom: 32px; margin-bottom: 32px; }
}

@media print {
  @page { size: A4 landscape; margin: 0; }
  body > *:not(main):not(.cert-sheet) { display: none !important; }
  main > *:not(.cert-sheet) { display: none !important; }
  #saolix-consent { display: none !important; }
  html, body { background: #fff !important; }
  .cert-sheet { display: flex !important; width: 297mm; height: 210mm; align-items: center; justify-content: center; background: #fff; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .cert-inner { width: 265mm; height: 180mm; border: 2.5mm solid #0E3A5F; outline: 0.6mm solid #1BB3A6; outline-offset: -5mm; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 14mm 20mm; color: #091B2E; font-family: 'IBM Plex Sans', Arial, sans-serif; }
  .cert-logo { width: 16mm; height: auto; margin-bottom: 6mm; }
  .cert-kicker { font-family: 'IBM Plex Mono', monospace; font-size: 10pt; letter-spacing: .18em; text-transform: uppercase; color: #13A09A; margin-bottom: 9mm; }
  .cert-line { font-size: 13pt; color: #3c4a57; margin: 2mm 0; }
  .cert-name { font-family: 'Archivo', Arial, sans-serif; font-weight: 800; font-size: 32pt; color: #0E3A5F; margin: 4mm 0; letter-spacing: -.01em; }
  .cert-course { font-family: 'Archivo', Arial, sans-serif; font-weight: 800; font-size: 20pt; color: #0E3A5F; margin: 3mm 0; }
  .cert-time { margin-top: 3mm; }
  .cert-date { font-size: 12pt; color: #3c4a57; margin-top: 6mm; }
  .cert-foot { font-size: 8.5pt; color: #5B6B7A; margin-top: 10mm; line-height: 1.5; }
}