/* ══════════════════════════════════════
   RTL OVERRIDES — Arabic language pages
   Loaded AFTER shared.css / lessons.css
══════════════════════════════════════ */

/* ── Base direction ── */
html[dir="rtl"] body {
  direction: rtl;
  text-align: right;
}

/* ── Font stack: Arabic first ── */
html[dir="rtl"] {
  --font-sans: 'Noto Sans Arabic', 'DM Sans', sans-serif;
}

/* ── Site Logo: flip to right side ── */
html[dir="rtl"] .site-logo {
  left: auto;
  right: var(--pad-section);
}

/* ── Nav Pill ── */
html[dir="rtl"] .nav-pill-links {
  margin-left: 0;
  margin-right: 8px;
}

/* ── Arrow SVGs: flip for RTL ── */
html[dir="rtl"] .s1-btn-arrow,
html[dir="rtl"] .s2-cta svg,
html[dir="rtl"] .explore-lessons-btn svg,
html[dir="rtl"] .s4-btn svg,
html[dir="rtl"] .about-cta svg,
html[dir="rtl"] .course-enrol-btn svg,
html[dir="rtl"] .ask-modal-option-arrow,
html[dir="rtl"] .lesson-prev-next .next svg,
html[dir="rtl"] .lesson-prev-next .prev svg {
  transform: scaleX(-1);
}

html[dir="rtl"] .ask-modal-option:hover .ask-modal-option-arrow {
  transform: scaleX(-1) translateX(4px);
}

html[dir="rtl"] .about-cta:hover svg {
  transform: scaleX(-1) translateX(3px);
}

/* ── Footer ── */
html[dir="rtl"] .footer-tagline {
  text-align: right;
}

/* ── Breadcrumb ── */
html[dir="rtl"] .breadcrumb {
  text-align: right;
}

/* ── Lesson Header ── */
html[dir="rtl"] .lesson-meta {
  justify-content: flex-start;
}

/* ── Series Nav ── */
html[dir="rtl"] .series-nav-dot {
  margin-left: 8px;
  margin-right: 0;
}

/* ── Lesson Actions ── */
html[dir="rtl"] .lesson-actions {
  justify-content: flex-start;
}

/* ── Lesson Content ── */
html[dir="rtl"] .lesson-content {
  text-align: right;
}

html[dir="rtl"] .lesson-toc {
  border-left: none;
  border-right: 3px solid var(--color-orange);
  padding-left: 0;
  padding-right: 20px;
}

html[dir="rtl"] .lesson-toc-list {
  padding-left: 0;
  padding-right: 20px;
}

/* ── Compare Cards ── */
html[dir="rtl"] .compare-card {
  text-align: right;
}

/* ── Building Block Cards ── */
html[dir="rtl"] .bb-card {
  text-align: right;
}

html[dir="rtl"] .bb-card-icon {
  margin-left: 16px;
  margin-right: 0;
}

/* ── Key Insight ── */
html[dir="rtl"] .key-insight {
  border-left: none;
  border-right: 3px solid var(--color-orange);
  padding-left: 0;
  padding-right: 20px;
}

/* ── Used Four List ── */
html[dir="rtl"] .used-four-icon {
  margin-left: 12px;
  margin-right: 0;
}

html[dir="rtl"] .used-four-label {
  margin-left: 0;
  margin-right: auto;
}

/* ── Level Badges ── */
html[dir="rtl"] .level-badge,
html[dir="rtl"] .bb-level-badge {
  margin-left: 8px;
  margin-right: 0;
}

/* ── Constraint Cards ── */
html[dir="rtl"] .constraint-card {
  text-align: right;
}

/* ── Prev/Next Nav ── */
html[dir="rtl"] .lesson-prev-next {
  flex-direction: row-reverse;
}

/* ── Parts Nav ── */
html[dir="rtl"] .parts-nav {
  direction: rtl;
}

/* ── Course Tiles ── */
html[dir="rtl"] .course-tile {
  text-align: right;
}

/* ── Carousel (S3) ── */
html[dir="rtl"] .tools-card-workflow {
  text-align: right;
}

/* ── Modal ── */
html[dir="rtl"] .ask-modal-close {
  right: auto;
  left: 18px;
}

html[dir="rtl"] .ask-modal-option {
  text-align: right;
  flex-direction: row-reverse;
}

html[dir="rtl"] .ask-modal-option-arrow {
  transform: scaleX(-1);
}

/* ── Tools Section (S3) ── */
html[dir="rtl"] .tools-pills {
  text-align: right;
}

/* ── S1 Hero ── */
html[dir="rtl"] .s1-outline-btn {
  flex-direction: row-reverse;
}

/* ── FAQ accordion ── */
html[dir="rtl"] .faq-question {
  text-align: right;
}

html[dir="rtl"] .faq-icon {
  margin-left: 0;
  margin-right: auto;
}

/* ── BB Accordion ── */
html[dir="rtl"] .bb-accordion-num {
  margin-left: 10px;
  margin-right: 0;
}

/* ── Stat Visual ── */
html[dir="rtl"] .stat-donut {
  margin-left: 32px;
  margin-right: 0;
}

/* ── Video Tile ── */
html[dir="rtl"] .video-tile-label {
  text-align: right;
}

/* ── OS Toggle (Lesson 2) ── */
html[dir="rtl"] .os-toggle {
  direction: ltr; /* Keep toggle button order natural */
}

/* ── Language Toggle ── */
.lang-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.55);
  text-decoration: none;
  transition: color 0.2s ease, background 0.2s ease;
  line-height: 1;
  height: 24px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  margin-left: 4px;
}

.lang-toggle:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.25);
}

html[dir="rtl"] .lang-toggle {
  margin-left: 0;
  margin-right: 4px;
}

/* ── Mobile: language toggle in mobile menu ── */
.nav-mobile-menu .lang-toggle {
  display: flex;
  padding: 14px 24px;
  border-radius: 12px;
  font-size: 15px;
  height: auto;
  border: none;
  margin: 0;
}

/* ── Showcase grid (Lesson 3 overview) ── */
html[dir="rtl"] .showcase-grid .showcase-card {
  text-align: right;
}

/* Arabic font size: same as English (no bump) */

/* ── Setup Step: flip numbered list icons to right for RTL ── */
html[dir="rtl"] .setup-step ol li {
  padding-left: 0;
  padding-right: 32px;
}

html[dir="rtl"] .setup-step ol li::before {
  left: auto;
  right: 0;
}

/* setup-step-header: default RTL flex already goes right-to-left */

/* ── S1 Hero: fix CTA button order for RTL ── */
html[dir="rtl"] .s1-outline-btn {
  flex-direction: row;
  direction: rtl;
}

/* ── Tools Card: flip brand label position ── */
html[dir="rtl"] .tools-card-brand {
  right: auto;
  left: clamp(20px, 2.5vw, 32px);
}

/* ── Rotating text: proper RTL direction ── */
html[dir="rtl"] .rotating-wrapper {
  direction: rtl;
}

html[dir="rtl"] .rotating-inner {
  direction: rtl;
}

/* ── S2 Hero: right-align text for RTL ── */
html[dir="rtl"] .s2-name,
html[dir="rtl"] .s2-description {
  text-align: right;
}

/* ── S3 Tools: right-align headline for RTL ── */
html[dir="rtl"] .tools-headline {
  text-align: right;
}

/* ── Arabic letter spacing: prevent dots crowding ── */
html[dir="rtl"] .s1-headline,
html[dir="rtl"] .s2-name,
html[dir="rtl"] .s2-description,
html[dir="rtl"] .tools-headline,
html[dir="rtl"] .s4-headline,
html[dir="rtl"] .s4-sub {
  letter-spacing: 0.01em;
}

/* ── Tools card: prevent icon overlap with brand label ── */
html[dir="rtl"] .tools-card-icon {
  margin-top: 8px;
}

/* ── Course overview: brand label + icon overlap fix ── */
html[dir="rtl"] .course-sections-card-brand {
  right: auto;
  left: clamp(20px, 2.5vw, 32px);
}

html[dir="rtl"] .course-sections-card-icon {
  margin-top: 8px;
}

/* ── Course tiles: flip num/badge positions for RTL ── */
html[dir="rtl"] .course-tile-num {
  left: auto;
  right: 14px;
}

html[dir="rtl"] .course-tile-badge {
  right: auto;
  left: 12px;
}

/* ── Course tile text: give Arabic more breathing room ── */
html[dir="rtl"] .course-tile-name {
  line-height: 1.5;
}

html[dir="rtl"] .course-tile-label {
  line-height: 1.5;
}

/* ── Tools card: flip num/badge for RTL ── */
html[dir="rtl"] .tools-card-workflow-num {
  left: auto;
  right: 12px;
}

html[dir="rtl"] .tools-card-workflow-badge {
  right: auto;
  left: 10px;
}

/* ── Mobile adjustments ── */
@media (max-width: 768px) {
  html[dir="rtl"] .site-logo {
    left: auto;
    right: 16px;
  }

  html[dir="rtl"] .s2-name,
  html[dir="rtl"] .s2-description,
  html[dir="rtl"] .s4-sub,
  html[dir="rtl"] .s4-igotu {
    text-align: right;
  }

  html[dir="rtl"] .tools-headline {
    text-align: right;
  }

  /* More breathing room for Arabic on small cards */
  html[dir="rtl"] .tools-card-workflow {
    padding: 16px;
  }

  html[dir="rtl"] .tools-card-workflow-name {
    font-size: 11px;
    line-height: 1.5;
  }

  html[dir="rtl"] .tools-card-workflow-badge {
    font-size: 9px;
  }
}