/* french-basic-2: colours and course-only rules for language.css */

.language-lesson.french-basic-2 {
  --c1: #4f8ef7;
  --c2: #12263f;
}

.language-lesson:where(.french-basic-2) .pronun-key {
  background: #1a1d27;
  border: 1px solid #2a2d3a;
  border-radius: 6px;
  padding: 12px 16px;
  margin-bottom: 20px;
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 0.85em;
  color: #a0a4b8;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
}

.language-lesson:where(.french-basic-2) .pronun-key span {
  white-space: nowrap;
}

.language-lesson:where(.french-basic-2) .pronun-key strong {
  color: #4f8ef7;
}

.language-lesson:where(.french-basic-2) .dialog-line .fr {
  font-size: 1.05em;
  display: block;
  margin-left: 28px;
  color: #e2e4ec;
}

.language-lesson:where(.french-basic-2) .recap-box {
  background: #1a1d27;
  border: 1px solid #4f8ef7;
  border-radius: 8px;
  padding: 16px 20px;
  margin-top: 28px;
}

.language-lesson:where(.french-basic-2) .recap-box h3 {
  margin: 0 0 6px;
  color: #4f8ef7;
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 1.05rem;
}

.language-lesson:where(.french-basic-2) h2.part-head {
  background: #1a1d27;
  border: 1px solid #2a2d3a;
  border-left: 4px solid #4f8ef7;
  border-radius: 6px;
  padding: 10px 16px;
  margin-top: 2.6rem;
}

.language-lesson:where(.french-basic-2) .num-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px;
  margin-bottom: 20px;
  font-family: system-ui, -apple-system, sans-serif;
}

.language-lesson:where(.french-basic-2) .num-grid span {
  background: #1a1d27;
  border: 1px solid #2a2d3a;
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 0.9em;
  color: #e2e4ec;
  line-height: 1.35;
}

.language-lesson:where(.french-basic-2) .num-grid strong {
  color: #4f8ef7;
  font-size: 1.15em;
  margin-right: 6px;
}

.language-lesson:where(.french-basic-2) .num-grid em {
  display: block;
  color: #7a7f96;
  font-size: 0.8em;
  margin-left: 1.6em;
}