/* css/rtl.css — Arabic / right-to-left layer for ChalkBox.
   Keeps the neo-brutalist identity (borders, hard shadows, colors) while
   flipping direction and swapping in chunky Arabic fonts. */

[dir="rtl"] { direction: rtl; }

/* Arabic typography: Cairo (chunky headings) + Tajawal (clean body). */
[dir="rtl"] body,
[dir="rtl"] .nb-subtitle,
[dir="rtl"] .nb-label,
[dir="rtl"] .nb-input,
[dir="rtl"] .nb-textarea,
[dir="rtl"] .nb-select,
[dir="rtl"] .nb-btn,
[dir="rtl"] p, [dir="rtl"] td, [dir="rtl"] th, [dir="rtl"] li, [dir="rtl"] span {
  font-family: 'Tajawal', 'Space Grotesk', 'Segoe UI', Tahoma, sans-serif;
}
[dir="rtl"] .nb-title,
[dir="rtl"] .nb-hero h1,
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3 {
  font-family: 'Cairo', 'Archivo Black', sans-serif;
  font-weight: 900;
  letter-spacing: 0; /* Arabic shouldn't be letter-spaced */
}

/* Alignment */
[dir="rtl"] .nb-title,
[dir="rtl"] .nb-subtitle,
[dir="rtl"] .nb-label,
[dir="rtl"] .nb-hero,
[dir="rtl"] p, [dir="rtl"] li,
[dir="rtl"] td, [dir="rtl"] th {
  text-align: right;
}
[dir="rtl"] .nb-input,
[dir="rtl"] .nb-textarea,
[dir="rtl"] .nb-select {
  text-align: right;
}

/* Flip the nav links row so brand/links read naturally in RTL */
[dir="rtl"] .nb-nav__links { flex-direction: row-reverse; }
[dir="rtl"] .nb-row { /* keep rows readable; let flex wrap naturally */ }

/* Keep the brutalist hard shadow but mirror its offset for RTL balance */
[dir="rtl"] .nb-card,
[dir="rtl"] .nb-panel,
[dir="rtl"] .nb-hero { /* shadow stays; mirroring is optional and can look off, so leave as-is */ }

/* Language toggle sits bottom-left in Arabic, bottom-right in English */
[dir="rtl"] #cb-lang-toggle { left: 16px; right: auto; }
[dir="ltr"] #cb-lang-toggle { right: 16px; left: auto; }

/* Numbers/codes stay LTR even inside RTL (exam passwords, emails, keys) */
[dir="rtl"] code,
[dir="rtl"] .nb-chip code,
[dir="rtl"] input[type="email"],
[dir="rtl"] input[type="password"] { direction: ltr; text-align: left; unicode-bidi: plaintext; }