/* ================= Arabic and Urdu pages (right to left) ================= */
/* Arabic script font always comes first, so Safari shapes letters and their marks with one font (review points 1 and 10) */
html[lang="ar"]{--display:"Amiri","Noto Naskh Arabic",serif;--body:"Noto Naskh Arabic","Amiri","Manrope",sans-serif}
html[lang="ur"]{--display:"Noto Nastaliq Urdu","Manrope",serif;--body:"Noto Nastaliq Urdu","Manrope",sans-serif}
/* Latin numerals keep the English display face */
html[dir="rtl"] .stat b,html[dir="rtl"] .step .node,html[dir="rtl"] .strip figcaption b,html[dir="rtl"] .cred .n{font-family:"Marcellus",serif}

/* Arabic script never takes letter spacing or capitals */
html[dir="rtl"] *{letter-spacing:0!important;text-transform:none!important}
html[dir="rtl"] body{font-size:17px}

/* Line heights: Naskh needs a little more room, Nastaliq much more */
html[lang="ar"] body{line-height:1.9}
html[lang="ar"] h1,html[lang="ar"] h2,html[lang="ar"] h3{line-height:1.45;font-weight:700}
html[lang="ar"] .hero h1{line-height:1.25;font-size:clamp(56px,8.5vw,104px)}
html[lang="ur"] body{line-height:2.25}
html[lang="ur"] h1,html[lang="ur"] h2,html[lang="ur"] h3{line-height:1.9;font-weight:600}
html[lang="ur"] .hero h1{line-height:1.7;font-size:clamp(48px,7.5vw,92px)}
html[lang="ur"] h2{font-size:clamp(30px,3.6vw,44px)}
html[lang="ur"] .step h3{font-size:19px}

/* Small labels: give them normal reading sizes */
html[dir="rtl"] .eyebrow{font-size:15px;line-height:1.6}
html[lang="ur"] .eyebrow{font-size:15px;line-height:2}
html[dir="rtl"] .gen .role,html[dir="rtl"] .step .tag,html[dir="rtl"] .field label,html[dir="rtl"] .field .label,
html[dir="rtl"] .vid .thumb .kind,html[dir="rtl"] .hadith cite{font-size:13.5px;line-height:1.6}
html[lang="ur"] .gen .role,html[lang="ur"] .step .tag,html[lang="ur"] .field label,html[lang="ur"] .field .label,
html[lang="ur"] .vid .thumb .kind,html[lang="ur"] .hadith cite{line-height:2.1}
html[dir="rtl"] .brand b{font-family:var(--arabic);font-size:22px;font-weight:700;line-height:1.2}
html[dir="rtl"] .brand small{font-size:11px;line-height:1.6}
html[lang="ur"] .brand small{line-height:2}
html[dir="rtl"] .foot-logo small{font-size:12.5px;line-height:1.8}
html[dir="rtl"] .nav-links a{font-size:15px}
html[lang="ur"] .nav-links a{line-height:1.9;padding-block:4px}
html[dir="rtl"] .btn{font-size:16px}
html[lang="ur"] .btn{line-height:2;padding-block:8px}

/* Hadith translation in Urdu */
html[lang="ur"] .hadith .tr{font-size:17px;line-height:2.2}

/* Numbers, handles and Latin names keep their own direction */
html[dir="rtl"] .stat b,html[dir="rtl"] bdi,html[dir="rtl"] .email-row a,html[dir="rtl"] .strip figcaption b{direction:ltr;unicode-bidi:isolate}
html[dir="rtl"] .stat b{text-align:right}
html[dir="rtl"] .stat b::after{left:10%;right:0;background:linear-gradient(270deg,var(--gold),transparent)}
html[dir="rtl"] .foot-logo small::before{left:auto;right:0;background:linear-gradient(270deg,var(--gold),transparent)}
html[dir="rtl"] .eyebrow::before{background:linear-gradient(270deg,var(--gold),var(--gold-2))}

/* Qualification cards stay bilingual; the English lines read left to right but sit on the right */
html[dir="rtl"] .cred h3,html[dir="rtl"] .cred .inst p:not(.ar),html[dir="rtl"] .masjid-caption h3{direction:ltr;text-align:right;font-family:"Marcellus",serif;font-weight:400;line-height:1.3}
html[dir="rtl"] .cred .inst p:not(.ar){font-family:"Manrope",sans-serif;line-height:1.5}
html[dir="rtl"] .cred .cred-ar,html[dir="rtl"] .cred .inst .ar{text-align:right}

/* Arrows point the other way */
html[dir="rtl"] .hero-actions .btn-primary svg,html[dir="rtl"] .form button[type="submit"] svg{transform:scaleX(-1)}

/* Image shine sweeps from right to left */
html[dir="rtl"] .fx-img > .shine{transform:translateX(120%)}
html[dir="rtl"] .fx-img.is-hover > .shine{transform:translateX(-120%)}

/* Form fields: email is always typed left to right */
html[dir="rtl"] #f-email{direction:ltr;text-align:right}
html[dir="rtl"] .field input,html[dir="rtl"] .field textarea{font-family:var(--body)}
html[lang="ur"] .field input,html[lang="ur"] .field textarea{line-height:2}

/* Arabic and Urdu script reads smaller than Latin at the same size */
html[dir="rtl"] main p:not(.ar):not(.lead),html[dir="rtl"] .branches span,html[dir="rtl"] .stat span,
html[dir="rtl"] .vid span,html[dir="rtl"] .topics span,html[dir="rtl"] .hero-badge span,html[dir="rtl"] .yt-feature .cap span span,
html[dir="rtl"] .channel span,html[dir="rtl"] .strip figcaption,html[dir="rtl"] .vc-bar span{font-size:16px}
html[dir="rtl"] main p:not(.ar):not(.lead){font-size:17px}
html[dir="rtl"] .vid b,html[dir="rtl"] .hero-badge b,html[dir="rtl"] .yt-feature .cap b{font-size:17px}
html[dir="rtl"] .lead{font-size:clamp(18px,1.7vw,20px)}
html[dir="rtl"] .tagline{font-size:clamp(17px,1.6vw,20px)}
html[dir="rtl"] .cred .inst p:not(.ar){font-size:14px}
html[dir="rtl"] .cred .inst .ar{font-size:16px}
html[dir="rtl"] .social span span{font-size:14px}

/* ================= Review of the Arabic page ================= */
/* Point 3 and 12: the name in Ruqaa script */
html[dir="rtl"] .hero h1{font-family:"Aref Ruqaa","Amiri",serif;font-weight:700;line-height:1.55;padding-top:.08em;font-size:clamp(60px,8.6vw,110px)}
html[dir="rtl"] .contact-info h3{font-family:"Aref Ruqaa","Amiri",serif;font-weight:700;font-size:clamp(34px,3.4vw,44px);line-height:1.5}

/* Point 2: photos stay exactly where they are in English; only the text inside each block reads right to left */
html[dir="rtl"] .hero-grid,html[dir="rtl"] .about-grid,html[dir="rtl"] .contact-grid,
html[dir="rtl"] .masjid-grid,html[dir="rtl"] .media-top,html[dir="rtl"] .gallery{direction:ltr}
html[dir="rtl"] .hero-grid > *,html[dir="rtl"] .about-grid > *,html[dir="rtl"] .contact-grid > *,
html[dir="rtl"] .masjid-grid > *,html[dir="rtl"] .media-top > *,html[dir="rtl"] .gallery > *{direction:rtl}
/* Hero: photo and hadith card start on the same line */
html[dir="rtl"] .hero-grid{align-items:start}
/* Latin bits inside Arabic text (email, handles, company name) keep the English face */
html[dir="rtl"] bdi,html[dir="rtl"] [dir="ltr"],html[dir="rtl"] .email-row a,html[dir="rtl"] #f-email,html[dir="rtl"] .lang button[data-lang="en"]{font-family:"Manrope",sans-serif}
/* Header name in Ruqaa as well */
html[dir="rtl"] .brand b{font-family:"Aref Ruqaa","Amiri",serif;font-weight:700;font-size:24px;line-height:1.35}