/* JustDisplay website — Arabic pages (/ar-sa/, <html lang="ar-SA" dir="rtl">), 2026-11-11.
 * Same rules as urdu.css for html[lang^=ar]: the mirrored layout comes from the *.rtl.css copies; this file adds the
 * Arabic-script font (Noto Naskh Arabic, SIL OFL 1.1, self-hosted) and a few fixes for Arabic-script text.
 */
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:300 500;font-display:swap;src:url('/assets/fonts/naskh-400.woff2') format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-08FF,U+FB50-FDFF,U+FE70-FEFF,U+200C-200F}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:600 900;font-display:swap;src:url('/assets/fonts/naskh-700.woff2') format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-08FF,U+FB50-FDFF,U+FE70-FEFF,U+200C-200F}
@font-face{font-family:'Nunito';font-style:normal;font-weight:300 500;font-display:swap;src:url('/assets/fonts/naskh-400.woff2') format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-08FF,U+FB50-FDFF,U+FE70-FEFF,U+200C-200F}
@font-face{font-family:'Nunito';font-style:normal;font-weight:600 900;font-display:swap;src:url('/assets/fonts/naskh-700.woff2') format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-08FF,U+FB50-FDFF,U+FE70-FEFF,U+200C-200F}
@font-face{font-family:'JD Urdu';font-style:normal;font-weight:300 500;font-display:swap;src:url('/assets/fonts/naskh-400.woff2') format('woff2')}
@font-face{font-family:'JD Urdu';font-style:normal;font-weight:600 900;font-display:swap;src:url('/assets/fonts/naskh-700.woff2') format('woff2')}
/* every site font falls back to Naskh for Urdu letters (the monospace labels too) */
html[lang^=ar]{--f-body:'Plus Jakarta Sans','JD Urdu',ui-sans-serif,system-ui,sans-serif;--f-display:'Nunito','Plus Jakarta Sans','JD Urdu',ui-sans-serif,system-ui,sans-serif;--f-mono:'JetBrains Mono','JD Urdu',ui-monospace,SFMono-Regular,Menlo,monospace}

/* Arabic script joins its letters: no letter spacing, no capitals; a little more line height for the taller letters */
html[lang^=ar] body *{letter-spacing:0!important}
html[lang^=ar] body :is(.eyebrow,.mono,.kicker,.tag,th,small,.lang-title,.foot h4){text-transform:none!important}
html[lang^=ar] body{line-height:1.8}
html[lang^=ar] body :is(h1,h2,h3,h4,h5,h6){line-height:1.45}
html[lang^=ar] body :is(p,li,dd,td,label,summary){line-height:1.85}

/* Left-to-right islands: addresses, codes and numbers are typed and read left to right */
html[dir=rtl] :is(input[type=email],input[type=url],input[type=tel],input[type=password],input[name*=email],code,pre,kbd,.foot-addr a[href^=mailto]){direction:ltr;text-align:right}
html[dir=rtl] :is(input[type=email],input[type=password])::placeholder{direction:rtl}
html[dir=rtl] .foot-addr{direction:ltr;text-align:right}

/* Arrow icons point the way you read: to the left */
html[dir=rtl] svg:has(> path[d^="M4 10h12M11 5"]),html[dir=rtl] svg:has(> path[d^="M4 12h15m-6-6"]){transform:scaleX(-1)}