/* ===== Lesson Topic Block Styles ===== */

:root {
  --lesson-topic-bg: #eef2ff;
  --lesson-topic-border: #6366f1;
  --lesson-topic-title-color: #4f46e5;

  --lesson-questions-title-size: 1.4rem;
  --lesson-questions-color: #374151;
}

.lesson_topic {
  background: var(--lesson-topic-bg);
  border-left: 4px solid var(--lesson-topic-border);
  padding: 16px;
  border-radius: 10px;
  margin-bottom: 24px;
}

/* Topic title */
.lesson_topic_title {
  font-size: 1.8rem;
  text-align: center;
  color: var(--lesson-topic-title-color);
  margin: 0 0 10px 0;
  font-weight: 600;
}

/* “Key questions” heading */
.lesson_questions_title {
  font-size: var(--lesson-questions-title-size);
  font-weight: bold;
  margin-top: 10px;
  margin-bottom: 8px;
  color: var(--lesson-topic-title-color);
}

/* ---------- Lesson Questions List with Question Marks ---------- */
.lesson_questions {
  list-style: none; /* Remove default bullets */
  padding-left: 0;  /* Remove default padding */
}

.lesson_questions li {
  margin-bottom: 12px;       /* Space between items */
  position: relative;       /* For positioning the custom marker */
  padding-left: 25px;       /* Space for the marker */
  font-size: 1.2rem;
}

.lesson_questions li::before {
  content: "❓";            /* Custom marker: question mark */
  position: absolute;       /* Position relative to the li */
  left: 0;                  /* Align marker to the left edge */
  top: 0;                   /* Align marker to the top */
  color: #4f46e5;           /* Marker color: deep blue */
  font-weight: bold;        /* Bold marker */
  font-size: 1.1rem;        /* Optional: adjust marker size */
}

/* ---------- Source / attribution line ---------- */
.lesson_topic_source {
  display: block;
  margin-top: 14px;
  font-size: 0.85rem;
  font-style: italic;
  color: var(--lesson-topic-source-color);
}