/*
 * dr-page-les-4-5-6.css
 * Darja Rihla - Nederlandse les 4, 5 en 6
 * Scoped to .dr-les-page and body.dr-page-les-4-5-6-active
 */

body.dr-page-les-4-5-6-active .wp-site-blocks > header,
body.dr-page-les-4-5-6-active header.wp-block-template-part,
body.dr-page-les-4-5-6-active .wp-site-blocks > footer,
body.dr-page-les-4-5-6-active footer.wp-block-template-part,
body.dr-page-les-4-5-6-active .dr-post-rail,
body.dr-page-les-4-5-6-active .dr-single-tags,
body.dr-page-les-4-5-6-active .dr-single-post-nav,
body.dr-page-les-4-5-6-active .dr-single-comments,
body.dr-page-les-4-5-6-active .dr-single-more-posts-wrap {
  display: none !important;
}

body.dr-page-les-4-5-6-active,
body.dr-page-les-4-5-6-active .dr-single-template-main,
body.dr-page-les-4-5-6-active .wp-block-post-content,
body.dr-page-les-4-5-6-active .dr-single-content-wrap,
body.dr-page-les-4-5-6-active .dr-single-body-wrap,
body.dr-page-les-4-5-6-active .dr-single-shell {
  background: #faf8f4 !important;
  color: #1a1612 !important;
  box-shadow: none !important;
}

body.dr-page-les-4-5-6-active .wp-block-post-content,
body.dr-page-les-4-5-6-active .dr-single-template-main,
body.dr-page-les-4-5-6-active .dr-single-content-wrap,
body.dr-page-les-4-5-6-active .dr-single-content-wrap > .wp-block-post-content,
body.dr-page-les-4-5-6-active .dr-single-body-wrap,
body.dr-page-les-4-5-6-active .dr-single-shell {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.dr-page-les-4-5-6-active .wp-block-post-content > .dr-les-page {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
}

body.dr-page-les-4-5-6-active .dr-single-hero-wrap {
  display: none !important;
}

.dr-les-page {
  --les-cream: #faf8f4;
  --les-cream-2: #f2ede4;
  --les-card: #fffaf3;
  --les-ink: #1a1612;
  --les-muted: #6d6258;
  --les-border: rgba(26, 22, 18, 0.14);
  --les-orange: #d4541a;
  --les-orange-soft: #fff0e6;
  --les-blue: #214f8f;
  --les-blue-soft: #eaf2ff;
  --les-red: #b73535;
  --les-red-soft: #fdecec;
  --les-green: #1f7a55;
  --les-green-soft: #e8f6ef;
  --les-teal: #176f72;
  font-family: var(--dr-font-body, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
  color: var(--les-ink);
  background: radial-gradient(circle at top left, #fff3df 0, var(--les-cream) 34%, #f7fbff 100%);
  line-height: 1.65;
  overflow-x: hidden;
}

.dr-les-page *,
.dr-les-page *::before,
.dr-les-page *::after {
  box-sizing: border-box;
}

.dr-les-page a {
  color: inherit;
  text-decoration: none;
}

.dr-les-container {
  width: min(1120px, calc(100% - 32px));
  margin: 0 auto;
}

.dr-les-topbar {
  padding: 9px 18px;
  text-align: center;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--les-ink);
  background: linear-gradient(90deg, var(--les-red) 0 18%, #fff 18% 82%, var(--les-blue) 82% 100%);
}

.dr-les-nav {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(255, 250, 243, 0.96);
  border-bottom: 1px solid var(--les-border);
  box-shadow: 0 10px 28px rgba(26, 22, 18, 0.08);
  backdrop-filter: blur(16px);
}

.dr-les-nav::after {
  content: "";
  display: block;
  height: 3px;
  background: linear-gradient(90deg, var(--les-red), #fff 50%, var(--les-blue));
}

.dr-les-nav-inner {
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.dr-les-nav-logo-main {
  font-weight: 800;
  color: var(--les-orange);
}

.dr-les-nav-logo-sub {
  font-size: 12px;
  color: var(--les-muted);
}

.dr-les-nav-links {
  list-style: none;
  display: flex;
  gap: 8px;
  padding: 0;
  margin: 0;
}

.dr-les-nav-links a,
.dr-les-nav-dot {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--les-border);
  border-radius: 999px;
  background: #fff;
  color: var(--les-ink);
  font-weight: 750;
}

.dr-les-nav-links a {
  padding: 8px 14px;
}

.dr-les-nav-dots {
  display: flex;
  gap: 6px;
}

.dr-les-nav-dot {
  width: 34px;
}

.dr-les-nav-dot.is-done {
  background: var(--les-green);
  border-color: var(--les-green);
  color: #fff;
}

.dr-les-hero {
  padding: 58px 0 36px;
}

.dr-les-hero-inner,
.dr-les-progress-card,
.dr-les-completion-card {
  border: 1px solid var(--les-border);
  border-radius: 8px;
  background: rgba(255, 250, 243, 0.88);
  box-shadow: 0 22px 60px rgba(26, 22, 18, 0.1);
}

.dr-les-hero-inner {
  padding: clamp(28px, 5vw, 58px);
}

.dr-les-hero-eyebrow,
.dr-les-progress-kicker,
.dr-les-completion-kicker {
  color: var(--les-orange);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.dr-les-hero-h1 {
  max-width: 780px;
  margin: 14px 0 18px;
  font-size: clamp(42px, 8vw, 92px);
  line-height: 0.94;
  letter-spacing: 0;
}

.dr-les-hero-h1 em {
  color: var(--les-orange);
  font-style: normal;
}

.dr-les-hero-desc,
.dr-les-hero-darija {
  max-width: 760px;
  font-size: 18px;
  color: var(--les-muted);
}

.dr-les-hero-darija,
.dr-les-lesson-intro--darija,
.dr-les-phrase-darija {
  direction: auto;
}

.dr-les-hero-lesson-nav {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 28px;
}

.dr-les-hero-lesson-link,
.dr-les-vocab-card,
.dr-les-phrase-item,
.dr-les-dialogue-card,
.dr-les-practice,
.dr-les-quiz,
.dr-les-security {
  border: 1px solid var(--les-border);
  border-radius: 8px;
  background: #fff;
}

.dr-les-hero-lesson-link {
  display: grid;
  gap: 4px;
  padding: 16px;
}

.dr-les-hero-lesson-num {
  color: var(--les-orange);
  font-weight: 900;
}

.dr-les-hero-lesson-name {
  font-weight: 850;
}

.dr-les-hero-lesson-sub {
  color: var(--les-muted);
  font-size: 13px;
}

.dr-les-progress {
  padding: 20px 0 46px;
}

.dr-les-progress-card {
  display: grid;
  grid-template-columns: 1.1fr 1.4fr auto;
  gap: 20px;
  align-items: center;
  padding: 22px;
}

.dr-les-progress-title {
  margin: 4px 0;
  font-size: 26px;
}

.dr-les-progress-text,
.dr-les-progress-tounsi {
  margin: 4px 0;
  color: var(--les-muted);
}

.dr-les-progress-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.dr-les-progress-stat {
  min-width: 0;
  padding: 14px;
  border-radius: 8px;
  background: var(--les-orange-soft);
  border: 1px solid rgba(212, 84, 26, 0.22);
}

.dr-les-progress-label,
.dr-les-progress-stat small {
  display: block;
  color: var(--les-muted);
  font-size: 12px;
}

.dr-les-progress-stat strong {
  display: block;
  color: var(--les-ink);
  font-size: 20px;
  overflow-wrap: anywhere;
}

.dr-les-progress-reset,
.dr-les-audio-btn,
.dr-les-hint-btn,
.dr-les-mini-btn,
.dr-les-quiz-next-btn,
.dr-les-quiz-restart-btn,
.dr-les-completion-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  border: 0;
  border-radius: 999px;
  padding: 10px 16px;
  background: var(--les-orange);
  color: #fff;
  font-weight: 850;
  cursor: pointer;
}

.dr-les-progress-reset small,
.dr-les-audio-btn small,
.dr-les-hint-btn small,
.dr-les-mini-btn small,
.dr-les-quiz-next-btn small,
.dr-les-quiz-restart-btn small {
  color: inherit;
  opacity: 0.86;
}

.dr-les-lesson {
  padding: 54px 0;
}

.dr-les-lesson:nth-of-type(odd) {
  background: rgba(255, 255, 255, 0.48);
}

.dr-les-lesson-header {
  max-width: 850px;
  margin-bottom: 26px;
}

.dr-les-lesson-num-wrap {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 12px;
}

.dr-les-lesson-num {
  display: inline-flex;
  width: 56px;
  height: 56px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--les-orange);
  color: #fff;
  font-weight: 900;
}

.dr-les-lesson-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.dr-les-tag {
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--les-blue-soft);
  color: var(--les-blue);
  font-size: 12px;
  font-weight: 800;
}

.dr-les-tag--level {
  background: var(--les-red-soft);
  color: var(--les-red);
}

.dr-les-lesson-title {
  margin: 0 0 8px;
  font-size: clamp(32px, 5vw, 56px);
  line-height: 1;
  letter-spacing: 0;
}

.dr-les-lesson-darija-title,
.dr-les-lesson-intro {
  color: var(--les-muted);
}

.dr-les-block {
  margin: 28px 0;
}

.dr-les-block-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.dr-les-block-title {
  margin: 0;
  font-size: 24px;
}

.dr-les-block-title-ar {
  color: var(--les-muted);
  font-size: 0.8em;
}

.dr-les-vocab-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.dr-les-vocab-card {
  min-height: 154px;
  padding: 16px;
  display: grid;
  gap: 4px;
  align-content: start;
}

.dr-les-vocab-nl {
  font-size: 22px;
  font-weight: 900;
  color: var(--les-orange);
}

.dr-les-vocab-ar {
  font-size: 20px;
}

.dr-les-vocab-dj {
  font-weight: 800;
  color: var(--les-teal);
}

.dr-les-vocab-en {
  color: var(--les-muted);
  font-size: 13px;
}

.dr-les-phrase-list {
  display: grid;
  gap: 10px;
}

.dr-les-phrase-item {
  padding: 15px;
}

.dr-les-phrase-audio {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.dr-les-phrase-nl {
  font-size: 20px;
  font-weight: 850;
}

.dr-les-phrase-darija {
  margin-top: 6px;
  color: var(--les-muted);
}

.dr-les-dialogue-card {
  padding: 18px;
}

.dr-les-dialogue-card p {
  margin: 8px 0;
}

.dr-les-security {
  margin: 20px 0 28px;
  padding: 20px;
  background: var(--les-green-soft);
  border-color: rgba(31, 122, 85, 0.25);
}

.dr-les-security h3 {
  margin: 0 0 10px;
  color: var(--les-green);
}

.dr-les-security ul {
  margin: 0;
  padding-left: 20px;
}

.dr-les-practice {
  margin: 16px 0 28px;
  padding: 18px;
  background: #fffdf8;
}

.dr-les-practice-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 16px;
}

.dr-les-practice-kicker,
.dr-les-practice-pill,
.dr-les-mini-meta,
.dr-les-quiz-num,
.dr-les-quiz-score-display {
  color: var(--les-orange);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.dr-les-practice-title {
  margin: 0;
  font-size: 22px;
}

.dr-les-practice-pill {
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--les-orange-soft);
}

.dr-les-flashcards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 18px;
}

.dr-les-flashcard {
  position: relative;
  min-height: 174px;
  border: 1px solid rgba(212, 84, 26, 0.22);
  border-radius: 8px;
  background: linear-gradient(135deg, #fff, var(--les-orange-soft));
  color: var(--les-ink);
  text-align: left;
  padding: 16px;
  cursor: pointer;
}

.dr-les-flashcard-count,
.dr-les-flashcard-hint {
  display: block;
  color: var(--les-muted);
  font-size: 12px;
}

.dr-les-flashcard-front {
  display: block;
  margin: 18px 0 12px;
  color: var(--les-orange);
  font-size: 26px;
  font-weight: 900;
}

.dr-les-flashcard-back {
  display: none;
  gap: 3px;
}

.dr-les-flashcard.is-flipped .dr-les-flashcard-front {
  display: none;
}

.dr-les-flashcard.is-flipped .dr-les-flashcard-back {
  display: grid;
  margin: 18px 0 12px;
}

.dr-les-flashcard-ar {
  font-size: 24px;
  font-weight: 850;
}

.dr-les-flashcard-tounsi {
  color: var(--les-teal);
  font-weight: 850;
}

.dr-les-flashcard-small {
  color: var(--les-muted);
}

.dr-les-builder {
  margin: 16px 0;
  padding: 16px;
  border: 1px solid var(--les-border);
  border-radius: 8px;
  background: var(--les-blue-soft);
}

.dr-les-builder-prompt,
.dr-les-mini-question,
.dr-les-quiz-question {
  font-size: 20px;
  font-weight: 850;
}

.dr-les-builder-support,
.dr-les-quiz-help,
.dr-les-mini-help {
  margin-top: 8px;
  color: var(--les-muted);
}

.dr-les-builder-bank,
.dr-les-builder-answer,
.dr-les-builder-actions,
.dr-les-mini-options,
.dr-les-quiz-options,
.dr-les-quiz-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

.dr-les-builder-chip,
.dr-les-builder-picked,
.dr-les-mini-option,
.dr-les-quiz-opt {
  min-height: 44px;
  border: 1px solid var(--les-border);
  border-radius: 8px;
  padding: 10px 12px;
  background: #fff;
  color: var(--les-ink);
  font-weight: 800;
  cursor: pointer;
}

.dr-les-builder-chip:disabled {
  opacity: 0.44;
  cursor: not-allowed;
}

.dr-les-builder-picked {
  background: var(--les-orange);
  color: #fff;
  border-color: var(--les-orange);
}

.dr-les-mini-btn--ghost,
.dr-les-completion-btn--ghost {
  background: #fff;
  color: var(--les-orange);
  border: 1px solid rgba(212, 84, 26, 0.35);
}

.dr-les-hint-wrap {
  margin-top: 12px;
}

.dr-les-hint-btn {
  background: var(--les-blue);
}

.dr-les-hint-panel,
.dr-les-mini-feedback,
.dr-les-builder-feedback,
.dr-les-quiz-feedback {
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 8px;
  background: var(--les-blue-soft);
  color: var(--les-ink);
}

.dr-les-mini-feedback,
.dr-les-builder-feedback {
  display: grid;
  gap: 4px;
}

.dr-les-mini-feedback:empty,
.dr-les-builder-feedback:empty,
.dr-les-quiz-feedback:empty {
  display: none;
}

.dr-les-quiz {
  padding: 18px;
}

.dr-les-quiz-progress-wrap {
  height: 8px;
  border-radius: 999px;
  background: var(--les-cream-2);
  overflow: hidden;
  margin-bottom: 14px;
}

.dr-les-quiz-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--les-orange), var(--les-blue));
}

.dr-les-quiz-meta {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

.dr-les-quiz-opt {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.dr-les-quiz-opt-letter {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--les-orange-soft);
  color: var(--les-orange);
}

.dr-les-mini-option.is-correct,
.dr-les-quiz-opt.is-correct,
.dr-les-feedback-success,
.dr-les-mini-feedback.is-correct,
.dr-les-builder-feedback.is-correct,
.dr-les-quiz-feedback.is-correct {
  background: var(--les-green-soft);
  border-color: rgba(31, 122, 85, 0.4);
  color: #103e2b;
}

.dr-les-mini-option.is-wrong,
.dr-les-quiz-opt.is-wrong,
.dr-les-mini-feedback.is-wrong,
.dr-les-builder-feedback.is-wrong,
.dr-les-quiz-feedback.is-wrong {
  background: var(--les-red-soft);
  border-color: rgba(183, 53, 53, 0.4);
  color: #5f1616;
}

.dr-les-quiz-next-btn {
  display: none;
}

.dr-les-quiz-next-btn.is-visible {
  display: inline-flex;
}

.dr-les-quiz-complete,
.dr-les-mini-complete {
  display: grid;
  gap: 10px;
  padding: 18px;
  border-radius: 8px;
  background: var(--les-green-soft);
  color: #103e2b;
}

.dr-les-completion {
  padding: 54px 0 70px;
}

.dr-les-completion-card {
  padding: clamp(24px, 4vw, 44px);
}

.dr-les-completion-card h2 {
  margin: 8px 0;
  font-size: clamp(30px, 5vw, 52px);
  line-height: 1.05;
}

.dr-les-completion-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 20px;
}

html[data-theme="dark"] body.dr-page-les-4-5-6-active,
html[data-theme="dark"] body.dr-page-les-4-5-6-active .wp-block-post-content,
html[data-theme="dark"] body.dr-page-les-4-5-6-active .dr-single-content-wrap,
html[data-theme="dark"] body.dr-page-les-4-5-6-active .dr-single-body-wrap,
html[data-theme="dark"] body.dr-page-les-4-5-6-active .dr-single-shell {
  background: #13110f !important;
  color: #f8efe5 !important;
}

html[data-theme="dark"] .dr-les-page {
  --les-cream: #13110f;
  --les-cream-2: #211d19;
  --les-card: #1d1916;
  --les-ink: #f8efe5;
  --les-muted: #d4c5b7;
  --les-border: rgba(248, 239, 229, 0.18);
  --les-orange-soft: rgba(212, 84, 26, 0.2);
  --les-blue-soft: rgba(33, 79, 143, 0.24);
  --les-red-soft: rgba(183, 53, 53, 0.22);
  --les-green-soft: rgba(31, 122, 85, 0.24);
  background: radial-gradient(circle at top left, #2a1b13 0, #13110f 42%, #0f1722 100%);
}

html[data-theme="dark"] .dr-les-nav,
html[data-theme="dark"] .dr-les-hero-inner,
html[data-theme="dark"] .dr-les-progress-card,
html[data-theme="dark"] .dr-les-completion-card,
html[data-theme="dark"] .dr-les-vocab-card,
html[data-theme="dark"] .dr-les-phrase-item,
html[data-theme="dark"] .dr-les-dialogue-card,
html[data-theme="dark"] .dr-les-practice,
html[data-theme="dark"] .dr-les-quiz,
html[data-theme="dark"] .dr-les-builder-chip,
html[data-theme="dark"] .dr-les-mini-option,
html[data-theme="dark"] .dr-les-quiz-opt,
html[data-theme="dark"] .dr-les-nav-links a,
html[data-theme="dark"] .dr-les-nav-dot {
  background: #1d1916;
  color: var(--les-ink);
}

html[data-theme="dark"] .dr-les-mini-option.is-correct,
html[data-theme="dark"] .dr-les-quiz-opt.is-correct,
html[data-theme="dark"] .dr-les-mini-feedback.is-correct,
html[data-theme="dark"] .dr-les-builder-feedback.is-correct,
html[data-theme="dark"] .dr-les-quiz-feedback.is-correct {
  background: #174b36;
  color: #effff6;
}

html[data-theme="dark"] .dr-les-mini-option.is-wrong,
html[data-theme="dark"] .dr-les-quiz-opt.is-wrong,
html[data-theme="dark"] .dr-les-mini-feedback.is-wrong,
html[data-theme="dark"] .dr-les-builder-feedback.is-wrong,
html[data-theme="dark"] .dr-les-quiz-feedback.is-wrong {
  background: #5b1f1f;
  color: #fff0f0;
}

@media (max-width: 900px) {
  .dr-les-nav-inner,
  .dr-les-progress-card {
    grid-template-columns: 1fr;
  }

  .dr-les-nav-inner {
    flex-wrap: wrap;
    padding: 12px 0;
  }

  .dr-les-hero-lesson-nav,
  .dr-les-progress-stats,
  .dr-les-vocab-grid,
  .dr-les-flashcards {
    grid-template-columns: 1fr;
  }

  .dr-les-phrase-audio,
  .dr-les-quiz-meta {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 560px) {
  .dr-les-container {
    width: min(100% - 20px, 1120px);
  }

  .dr-les-nav-links {
    width: 100%;
    justify-content: space-between;
  }

  .dr-les-nav-links a {
    padding: 8px 10px;
    font-size: 13px;
  }

  .dr-les-hero {
    padding-top: 34px;
  }

  .dr-les-hero-inner,
  .dr-les-progress-card,
  .dr-les-completion-card {
    padding: 18px;
  }

  .dr-les-lesson {
    padding: 38px 0;
  }

  .dr-les-builder-bank,
  .dr-les-builder-answer,
  .dr-les-builder-actions,
  .dr-les-mini-options,
  .dr-les-quiz-options {
    display: grid;
  }
}