/* Right-to-left overrides for /ur/ and /ar/. Loaded after styles.css; the English page never loads this file. */
@font-face { font-family: "Noto Naskh Arabic"; src: url("assets/fonts/NotoNaskhArabic-Regular.ttf") format("truetype"); font-weight: 400 500; font-display: swap; }
@font-face { font-family: "Noto Naskh Arabic"; src: url("assets/fonts/NotoNaskhArabic-SemiBold.ttf") format("truetype"); font-weight: 600 800; font-display: swap; }
@font-face { font-family: "Noto Nastaliq Urdu"; src: url("assets/fonts/NotoNastaliqUrdu-Regular.ttf") format("truetype"); font-weight: 400 500; font-display: swap; }
@font-face { font-family: "Noto Nastaliq Urdu"; src: url("assets/fonts/NotoNastaliqUrdu-Bold.ttf") format("truetype"); font-weight: 600 800; font-display: swap; }

:root[lang="ar"] { --f-head: "Noto Naskh Arabic", "Fraunces", serif; --f-body: "Noto Naskh Arabic", "Fraunces", -apple-system, "Segoe UI", Arial, sans-serif; }
:root[lang="ur"] { --f-head: "Noto Nastaliq Urdu", "Fraunces", serif; --f-body: "Noto Nastaliq Urdu", "Fraunces", -apple-system, "Segoe UI", Arial, sans-serif; }
[dir="rtl"] .brand, [dir="rtl"] .brand span { font-family: "Fraunces", Georgia, serif; }
[dir="rtl"] .langs span[lang="ur"] { font-family: "Noto Nastaliq Urdu", serif; line-height: 2; }
[dir="rtl"] .langs span[lang="ar"] { font-family: "Noto Naskh Arabic", serif; }
[dir="rtl"] .langsw a[lang="ur"] { font-family: "Noto Nastaliq Urdu", serif; }
[dir="rtl"] .langsw a[lang="ar"] { font-family: "Noto Naskh Arabic", serif; }

/* Arabic script: no letter-spacing/uppercase, taller line boxes */
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3 { letter-spacing: 0; line-height: 1.4; }
[dir="rtl"] .eyebrow, [dir="rtl"] .pill { letter-spacing: 0; text-transform: none; }
:root[lang="ur"] body { line-height: 2.1; }
:root[lang="ur"] h1, :root[lang="ur"] h2, :root[lang="ur"] h3 { line-height: 1.75; }
:root[lang="ur"] h1 { font-size: clamp(2.2rem, 5.2vw, 4rem); }
:root[lang="ur"] h2 { font-size: clamp(1.7rem, 3.8vw, 2.6rem); }
:root[lang="ur"] .store b, :root[lang="ur"] .ribbon span { line-height: 1.9; }

/* Mirrored layout (logical properties where the base CSS used left/right) */
[dir="rtl"] .nav nav { margin-left: 0; margin-inline-start: auto; }
[dir="rtl"] .ticks li { padding: .8em 3.1em .8em 1.1em; }
[dir="rtl"] .ticks li::before { left: auto; right: 1em; inset-inline-start: auto; }
[dir="rtl"] footer a { margin-left: 0; margin-inline-start: 18px; }
[dir="rtl"] .float { padding: .55em .8em .55em 1em; }
[dir="rtl"] .f1 { left: auto; right: -2%; }
[dir="rtl"] .f2 { right: auto; left: -1%; }
[dir="rtl"] .ph-l { left: auto; right: 4%; transform: rotate(9deg) translateY(-6px); }
[dir="rtl"] .ph-r { right: auto; left: 4%; transform: rotate(-9deg) translateY(-6px); }
[dir="rtl"] .phone-col .phone { transform: rotate(2.5deg); }
[dir="rtl"] .feat.flip .phone-col .phone { transform: rotate(-2.5deg); }
[dir="rtl"] .ribbon-in { direction: ltr; }
[dir="rtl"] .ribbon-in span { direction: rtl; }

@media (max-width: 960px) {
  [dir="rtl"] .ticks { text-align: right; }
  [dir="rtl"] footer a { margin: 0 9px; }
}
@media (max-width: 520px) {
  [dir="rtl"] .f1 { left: auto; right: -4%; }
  [dir="rtl"] .f2 { right: auto; left: -4%; }
  [dir="rtl"] .ph-l { left: auto; right: -6%; }
  [dir="rtl"] .ph-r { right: auto; left: -6%; }
}

/* Typography tuning. Nastaliq (Urdu) and Naskh (Arabic) read smaller than Latin at the same size, and
   Nastaliq most of all, so body text is stepped up and headings are balanced so a single word is
   never stranded on the last line. */
:root[dir="rtl"] h1, :root[dir="rtl"] h2, :root[dir="rtl"] h3 { text-wrap: balance; }
:root[dir="rtl"] .eyebrow { font-size: 1.1rem; }
:root[lang="ar"] .nav nav a { font-size: 1.05rem; }
:root[lang="ar"] .hero .lead { font-size: 1.32rem; }
:root[lang="ar"] .feat p { font-size: 1.22rem; }
:root[lang="ar"] .ticks li, :root[lang="ar"] .faq details p, :root[lang="ar"] .cards p { font-size: 1.1rem; }
:root[lang="ur"] .eyebrow { font-size: 1.22rem; }
:root[lang="ur"] .nav nav a { font-size: 1.15rem; }
:root[lang="ur"] .hero .lead { font-size: 1.5rem; }
:root[lang="ur"] .feat p { font-size: 1.32rem; }
:root[lang="ur"] .ticks li, :root[lang="ur"] .faq details p, :root[lang="ur"] .cards p, :root[lang="ur"] .steps p { font-size: 1.2rem; }
:root[lang="ur"] .faq summary { font-size: 1.28rem; }
@media (max-width: 520px) {
  :root[lang="ar"] .hero .lead { font-size: 1.12rem; }
  :root[lang="ar"] .feat p { font-size: 1.12rem; }
  :root[lang="ur"] .hero .lead { font-size: 1.2rem; }
  :root[lang="ur"] .feat p { font-size: 1.2rem; }
  :root[lang="ur"] .ticks li, :root[lang="ur"] .faq details p, :root[lang="ur"] .cards p, :root[lang="ur"] .steps p { font-size: 1.1rem; }
}