/* ===================================================
   Miqyas Arabic Typography Overrides
   Injects Noto Naskh Arabic for proper traditional
   Arabic script rendering across all assessment pages
   =================================================== */

/* Import Noto Naskh Arabic — a high-quality traditional Naskh font */
@import url('https://fonts.googleapis.com/css2?family=Noto+Naskh+Arabic:wght@400;500;600;700&display=swap');

/* ── Core Arabic font stack ─────────────────────────── */
:root {
  --font-arabic: 'Noto Naskh Arabic', 'Amiri', 'Traditional Arabic', serif;
}

/* ── Base arabic-text class ─────────────────────────── */
.arabic-text {
  font-family: var(--font-arabic) !important;
  font-size: 1.35rem !important;       /* ~21.6px — up from 1rem/16px */
  line-height: 2.1 !important;
  letter-spacing: 0 !important;
  word-spacing: 0.05em !important;
}

/* ── Arabic passage (reading comprehension) ─────────── */
.arabic-passage {
  font-family: var(--font-arabic) !important;
  font-size: 1.4rem !important;        /* ~22.4px — passages need to be readable */
  line-height: 2.3 !important;
  letter-spacing: 0 !important;
}

/* ── RTL containers ─────────────────────────────────── */
.rtl-container,
[dir="rtl"] {
  font-family: var(--font-arabic) !important;
}

/* ── Student test page — question text ──────────────── */
/* Question text: StudentTest.tsx:256 — arabic-text text-right text-base leading-loose */
.max-w-3xl .arabic-text,
[data-loc*="StudentTest"] .arabic-text {
  font-size: 1.5rem !important;        /* 24px for the main question */
  line-height: 2.2 !important;
}

/* ── Answer choices ─────────────────────────────────── */
/* Answer option text: StudentTest.tsx:292 — flex-1 arabic-text text-right leading-relaxed */
.space-y-3 .arabic-text,
button .arabic-text,
[role="button"] .arabic-text {
  font-size: 1.25rem !important;       /* 20px for answer choices */
  line-height: 2 !important;
}

/* ── Reading passage card ───────────────────────────── */
/* Passage: StudentTest.tsx:246 — arabic-text text-right text-base leading-loose */
.border-l-4 .arabic-text,
.border-l-primary .arabic-text {
  font-size: 1.4rem !important;
  line-height: 2.3 !important;
}

/* ── Admin & Teacher question bank ─────────────────── */
/* Admin questions: AdminQuestions.tsx:190 — arabic-text text-base font-medium */
/* Teacher questions: TeacherQuestions.tsx:196 — arabic-text text-right text-base font-medium */
.arabic-text.text-base {
  font-size: 1.3rem !important;
  line-height: 2 !important;
}

.arabic-text.text-sm {
  font-size: 1.1rem !important;
  line-height: 1.9 !important;
}

.arabic-text.text-xs {
  font-size: 1rem !important;
  line-height: 1.8 !important;
}

/* ── Inline dir=rtl elements (question text in teacher/admin) ── */
[dir="rtl"].arabic-text,
[dir="rtl"] {
  font-family: var(--font-arabic) !important;
}

/* ── Inline style overrides for font-family: Cairo ─── */
/* The JS sets style={{fontFamily: "'Cairo', serif"}} in several places.
   We can't override inline styles with !important in all browsers,
   but we can target the parent containers. */
.miqyas-gradient + span,
.card .arabic-text,
p[dir="rtl"],
div[dir="rtl"] {
  font-family: var(--font-arabic) !important;
}

/* ── Dashboard Arabic labels ────────────────────────── */
/* Domain labels, test window names, etc. */
.text-right[dir="rtl"],
.text-right.arabic-text {
  font-family: var(--font-arabic) !important;
}

/* ── Amiri references — upgrade to Noto Naskh ───────── */
/* Amiri is used for classical/Quranic track */
[style*="Amiri"] {
  font-family: var(--font-arabic) !important;
}

/* ── Worksheet & coloring sheet generators ──────────── */
.font-arabic,
.arabic,
textarea[dir="rtl"],
input[dir="rtl"] {
  font-family: var(--font-arabic) !important;
  font-size: 1.2rem !important;
}