/* ========== Practice Block ========== */
:root {
  --pr_bg: #ffffff;
  --pr_border: #10b981;          /* Main border for the practice block (green) */
  --pr_title: #064e3b;           /* Title color (dark green) */
  --pr_text: #1e293b;            /* General text color */
  --pr_radius: 12px;             /* Border radius for the block */

  /* Task level colors */
  --pr_lvlA_bg: #ecfdf5;         /* Light green background for Level A tasks */
  --pr_lvlA_border: #34d399;     /* Accent for Level A */

  --pr_lvlB_bg: #eff6ff;         /* Light blue background for Level B tasks */
  --pr_lvlB_border: #60a5fa;     /* Accent for Level B */

  --pr_lvlC_bg: #fef3c7;         /* Light orange background for Level C tasks */
  --pr_lvlC_border: #fbbf24;     /* Accent for Level C */
}

.lesson_practice {
  background: var(--pr_bg);
  padding: 22px;
  border: 2px solid var(--pr_border); /* Green outer border */
  border-radius: var(--pr_radius);    /* Smooth rounded corners */
  margin-bottom: 25px;
}

.lesson_practice h3 {
  margin-top: 0;
  font-size: 1.6rem;
  font-weight: 700;               /* Bold title for emphasis */
  color: var(--pr_title);
}

/* General text inside the practice block */
.lesson_practice p {
  color: var(--pr_text);
  font-size: 1.05rem;
  line-height: 1.55;              /* Comfortable line spacing */
}


/* ======================================
   Level A — Basic Tasks
====================================== */
.lesson_practice_level_a {
  background: var(--pr_lvlA_bg);
  border-left: 4px solid var(--pr_lvlA_border);
  padding: 15px 18px;
  border-radius: 8px;
  margin-bottom: 12px;
  position: relative;
}

/* Title "Level A" */
.lesson_practice_level_a::before {
  content: "Level A";
  font-weight: 700;
  color: var(--pr_lvlA_border);
  font-size: 1.1rem;
  display: block;
  margin-bottom: 8px;
}

/* Ordered list styling */
.lesson_practice_level_a ol {
  counter-reset: task calc(attr(start number, 1) - 1);
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.lesson_practice_level_a ol li {
  counter-increment: task;
  position: relative;
  padding-left: 30px;
  margin-bottom: 8px;
}

.lesson_practice_level_a ol li::before {
  content: counter(task) ".";
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 600;
  color: var(--pr_lvlA_border);
}



/* ======================================
   Level B — Medium Tasks
====================================== */
.lesson_practice_level_b {
  background: var(--pr_lvlB_bg);
  border-left: 4px solid var(--pr_lvlB_border);
  padding: 15px 18px;
  border-radius: 8px;
  margin-bottom: 12px;
  position: relative;
}

/* Title "Level B" */
.lesson_practice_level_b::before {
  content: "Level B";
  font-weight: 700;
  color: var(--pr_lvlB_border);
  font-size: 1.1rem;
  display: block;
  margin-bottom: 8px;
}

/* Ordered list styling */
.lesson_practice_level_b ol {
  counter-reset: task calc(attr(start number, 1) - 1);
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.lesson_practice_level_b ol li {
  counter-increment: task;
  position: relative;
  padding-left: 30px;
  margin-bottom: 8px;
}

.lesson_practice_level_b ol li::before {
  content: counter(task) ".";
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 600;
  color: var(--pr_lvlB_border);
}



/* ======================================
   Level C — Advanced Tasks
====================================== */
.lesson_practice_level_c {
  background: var(--pr_lvlC_bg);
  border-left: 4px solid var(--pr_lvlC_border);
  padding: 15px 18px;
  border-radius: 8px;
  margin-bottom: 12px;
  position: relative;
}

/* Title "Level C" */
.lesson_practice_level_c::before {
  content: "Level C";
  font-weight: 700;
  color: var(--pr_lvlC_border);
  font-size: 1.1rem;
  display: block;
  margin-bottom: 8px;
}

/* Ordered list styling */
.lesson_practice_level_c ol {
  counter-reset: task calc(attr(start number, 1) - 1);
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.lesson_practice_level_c ol li {
  counter-increment: task;
  position: relative;
  padding-left: 30px;
  margin-bottom: 8px;
}

.lesson_practice_level_c ol li::before {
  content: counter(task) ".";
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 600;
  color: var(--pr_lvlC_border);
}