/* CodeMetrix course page shared styles (v2 — full student-ready) */
body { font-family: 'Inter', system-ui, sans-serif; -webkit-font-smoothing: antialiased; color: #0f172a; }

/* ===== Lesson body typography ===== */
.lesson-body { font-size: 1rem; line-height: 1.75; color: #334155; }
.lesson-body h3 { font-size: 1.25rem; font-weight: 700; color: #0c1d4a; margin-top: 2rem; margin-bottom: 0.75rem; }
.lesson-body h4 { font-size: 1.05rem; font-weight: 700; color: #1e3a8a; margin-top: 1.5rem; margin-bottom: 0.5rem; }
.lesson-body p { margin-bottom: 1rem; }
.lesson-body ul, .lesson-body ol { margin: 0.75rem 0 1rem 1.5rem; }
.lesson-body ul { list-style: disc; }
.lesson-body ol { list-style: decimal; }
.lesson-body li { margin-bottom: 0.4rem; }
.lesson-body strong { color: #0c1d4a; font-weight: 700; }
.lesson-body em { color: #475569; }
.lesson-body a { color: #1d4ed8; text-decoration: underline; text-underline-offset: 2px; }
.lesson-body code { background: #f1f5f9; color: #1e3a8a; padding: 0.1rem 0.4rem; border-radius: 0.25rem; font-size: 0.85em; }
.lesson-body pre { background: #1e293b; color: #f1f5f9; padding: 1rem 1.25rem; border-radius: 0.5rem; font-size: 0.85rem; overflow-x: auto; margin: 1rem 0; }
.lesson-body pre code { background: transparent; color: inherit; padding: 0; }
.lesson-body blockquote { border-left: 4px solid #2563eb; background: #eff6ff; padding: 1rem 1.25rem; margin: 1.25rem 0; border-radius: 0 0.5rem 0.5rem 0; font-style: italic; color: #1e3a8a; }
.lesson-body .pro-tip { background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%); border: 1px solid #fbbf24; padding: 1rem 1.25rem; border-radius: 0.75rem; margin: 1.25rem 0; }
.lesson-body .pro-tip::before { content: '💡 Pro tip — '; font-weight: 700; color: #92400e; }
.lesson-body .warn { background: #fef2f2; border-left: 4px solid #dc2626; padding: 1rem 1.25rem; border-radius: 0 0.5rem 0.5rem 0; margin: 1.25rem 0; color: #991b1b; }

/* ===== Video card (links to YouTube) ===== */
.video-card {
  display: block;
  border: 1px solid #e2e8f0;
  border-radius: 0.875rem;
  overflow: hidden;
  background: #fff;
  transition: all 0.2s ease;
}
.video-card:hover { border-color: #2563eb; box-shadow: 0 8px 24px rgba(0,0,0,0.08); transform: translateY(-2px); }
.video-thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  background:
    radial-gradient(80% 100% at 50% 50%, rgba(255,255,255,0.06) 0%, transparent 70%),
    linear-gradient(135deg, #1e3a8a 0%, #0c1d4a 100%);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.video-play-overlay {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
}
.play-circle {
  width: 4rem; height: 4rem; border-radius: 9999px;
  background: rgba(255, 255, 255, 0.95); color: #1e3a8a;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; padding-left: 0.3rem;
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
  transition: transform 0.2s ease;
}
.video-card:hover .play-circle { transform: scale(1.1); background: #fff; }
.video-yt-badge {
  position: absolute; top: 0.6rem; left: 0.6rem;
  background: #ff0000; color: #fff;
  font-size: 0.65rem; font-weight: 800;
  padding: 0.15rem 0.5rem; border-radius: 0.25rem;
}
.video-len {
  position: absolute; bottom: 0.6rem; right: 0.6rem;
  background: rgba(0,0,0,0.75); color: #fff;
  font-size: 0.7rem; font-weight: 600;
  padding: 0.1rem 0.4rem; border-radius: 0.25rem;
}
.video-meta { padding: 0.875rem 1rem 1rem; }

/* ===== Quiz ===== */
.quiz-opt { transition: all 0.15s ease; }
.quiz-opt.quiz-correct { background: #dcfce7; border-color: #22c55e; }
.quiz-opt.quiz-correct .quiz-mark { color: #16a34a; font-weight: 800; }
.quiz-opt.quiz-wrong { background: #fee2e2; border-color: #ef4444; }
.quiz-opt.quiz-wrong .quiz-mark { color: #dc2626; font-weight: 800; }
.quiz-q .quiz-explain.hidden { display: none; }

/* ===== Course intro chevron ===== */
details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }
details[open] .chev { transform: rotate(180deg); }
.chev { transition: transform 0.2s ease; display: inline-block; }

/* ===== Course completion certificate ===== */
.cert {
  width: 100%; max-width: 700px;
  background: linear-gradient(135deg, #fefce8 0%, #fff 100%);
  border: 8px double #1e3a8a;
  padding: 2.5rem 2rem;
  text-align: center;
  font-family: 'Inter', sans-serif;
  position: relative;
}
.cert::before, .cert::after {
  content: '';
  position: absolute; width: 4rem; height: 4rem;
  background: radial-gradient(circle, #fbbf24 30%, transparent 31%);
  opacity: 0.4;
}
.cert::before { top: 1rem; left: 1rem; }
.cert::after { bottom: 1rem; right: 1rem; }
.cert h2 { font-size: 1.75rem; font-weight: 800; color: #1e3a8a; margin-bottom: 0.25rem; letter-spacing: 0.02em; }
.cert .seal { font-size: 3rem; margin-bottom: 0.5rem; }

/* Print only the certificate when user prints */
@media print {
  body * { visibility: hidden; }
  .cert, .cert * { visibility: visible; }
  .cert { position: absolute; left: 50%; top: 2cm; transform: translateX(-50%); }
}