/* Localized pages (website languages, 2026-10-20). Loaded after styles.css, library.css and quran.css.
   Script fonts per language through the site tokens, right-to-left fixes, the language switcher,
   and a dark theme that redefines the tokens (same palette as quran/ayah-page.css). */

@font-face{font-family:"Noto Nastaliq Urdu";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/i18n/noto-nastaliq-urdu-arabic-400-normal.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+200C-200E,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:"Noto Nastaliq Urdu";font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/i18n/noto-nastaliq-urdu-arabic-700-normal.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+200C-200E,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:"Vazirmatn";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/i18n/vazirmatn-arabic-400-normal.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+200C-200E,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:"Vazirmatn";font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/i18n/vazirmatn-arabic-700-normal.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+200C-200E,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:"IBM Plex Sans Arabic";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/i18n/ibm-plex-sans-arabic-arabic-400-normal.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+200C-200E,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:"IBM Plex Sans Arabic";font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/i18n/ibm-plex-sans-arabic-arabic-700-normal.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+200C-200E,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:"Noto Sans Bengali";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/i18n/noto-sans-bengali-bengali-400-normal.woff2) format("woff2");unicode-range:U+0964-0965,U+0980-09FE,U+200C-200D,U+25CC}
@font-face{font-family:"Noto Sans Bengali";font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/i18n/noto-sans-bengali-bengali-700-normal.woff2) format("woff2");unicode-range:U+0964-0965,U+0980-09FE,U+200C-200D,U+25CC}
@font-face{font-family:"Noto Sans Devanagari";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/i18n/noto-sans-devanagari-devanagari-400-normal.woff2) format("woff2");unicode-range:U+0900-097F,U+1CD0-1CF9,U+200C-200D,U+20B9,U+25CC,U+A8E0-A8FF}
@font-face{font-family:"Noto Sans Devanagari";font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/i18n/noto-sans-devanagari-devanagari-700-normal.woff2) format("woff2");unicode-range:U+0900-097F,U+1CD0-1CF9,U+200C-200D,U+20B9,U+25CC,U+A8E0-A8FF}

/* Qur'anic Arabic: the full Arabic Amiri (styles.css's "Amiri" file is an 8 KB subset). */
@font-face{font-family:AmiriWeb;src:url(/assets/fonts/Amiri-Arabic.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+08A0-08FF,U+200C-200E,U+FB50-FDFF,U+FE70-FEFF}
:root[data-shell="native"]{--arabic:"AmiriWeb","Amiri","Scheherazade New",serif}
[lang="ar"] .arn,[lang="ar"].arn,.i18n [lang="ar"]{font-family:var(--arabic)}

/* Script fonts: Latin falls through to the site fonts, so mixed text (Niyat, numbers) stays on brand. */
:root[lang="ar"]{--sans:"IBM Plex Sans Arabic","Manrope",system-ui,sans-serif;--serif:"AmiriWeb","IBM Plex Sans Arabic",serif}
:root[lang="ur"]{--sans:"Noto Nastaliq Urdu","Manrope",system-ui,sans-serif;--serif:"Noto Nastaliq Urdu","Newsreader",serif}
:root[lang="fa"],:root[lang="ps"]{--sans:"Vazirmatn","Manrope",system-ui,sans-serif;--serif:"Vazirmatn","Newsreader",serif}
:root[lang="bn"]{--sans:"Noto Sans Bengali","Manrope",system-ui,sans-serif;--serif:"Noto Sans Bengali","Newsreader",serif}
:root:is([lang="hi"],[lang="bn"],[lang="ar"],[lang="ur"],[lang="fa"],[lang="ps"]) .eyebrow{letter-spacing:0;text-transform:none}
:root[lang="hi"]{--sans:"Noto Sans Devanagari","Manrope",system-ui,sans-serif;--serif:"Noto Sans Devanagari","Newsreader",serif}
:root[lang] body{font-family:var(--sans)}
/* Nastaliq hangs far below the baseline: give it room everywhere. */
:root[lang="ur"] body{line-height:2}
:root[lang="ur"] .reader-h1,:root[lang="ur"] .lib-display{line-height:1.9}
:root[lang="ur"] .nav-links a{line-height:2.2}

/* Translation text in the reader. */
.i18n .q-ayah .tr{font:400 18px/1.75 var(--serif);color:var(--cream)}
:root[lang="ur"] .i18n .q-ayah .tr{font-size:20px;line-height:2.25}
:root[lang="fa"] .i18n .q-ayah .tr,:root[lang="ps"] .i18n .q-ayah .tr{font-size:19px;line-height:2}
:root[lang="ar"] .i18n .q-ayah .tr{font:400 18px/1.9 var(--sans);color:var(--cream-dim)}
.i18n .q-ayah .tr sup{font-size:.7em;color:var(--gold-text)}
.i18n .fn{margin:10px 0 0;padding:10px 14px;border-inline-start:3px solid var(--gold-soft);background:var(--bg-elevated);border-radius:8px;font:400 14.5px/1.65 var(--sans);color:var(--cream-dim);white-space:pre-line}
.i18n .fn summary{cursor:pointer;color:var(--emerald);font-weight:600;min-height:32px}
.i18n .credit{font:400 14px/1.6 var(--sans);color:var(--cream-dim);margin:8px 0 0}
.i18n .credit a{color:var(--emerald)}

/* Right to left. */
[dir="rtl"] .surah-item .arn{margin-left:0;margin-inline-start:auto}
[dir="rtl"] .q-ayah.reciting{background:linear-gradient(270deg,color-mix(in srgb,var(--gold) 12%,transparent),transparent)}
[dir="rtl"] .lib-search input{text-align:right}
[dir="rtl"] .footer-grid ul{padding-inline-start:0}

/* Language switcher (nav and footer). */
.lang-switch{position:relative}
.lang-switch>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 10px;border:1px solid var(--line);border-radius:999px;font:500 14px var(--sans);color:var(--cream)}
.lang-switch>summary::-webkit-details-marker{display:none}
.lang-switch>summary svg{width:16px;height:16px}
.lang-switch ul{position:absolute;inset-inline-end:0;top:calc(100% + 6px);z-index:60;margin:0;padding:6px;list-style:none;background:var(--bg-card);border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 32px rgba(0,0,0,.12);display:grid;grid-template-columns:repeat(2,minmax(120px,1fr));gap:2px;min-width:280px}
.lang-switch li a{display:block;padding:8px 10px;border-radius:8px;color:var(--cream);text-decoration:none;font:500 14px/1.4 var(--sans)}
.lang-switch li a:hover,.lang-switch li a[aria-current="true"]{background:var(--bg-elevated);color:var(--emerald)}
.footer .footer-langs{display:flex;flex-direction:row;flex-wrap:wrap;gap:6px 14px;margin:18px 0 0;padding:16px 0 0;border-top:1px solid var(--line);list-style:none}
.footer-langs a{font-size:14px}
.also-in{margin:32px 0 0;font:400 14px/1.7 var(--sans);color:var(--cream-dim)}
.also-in a{color:var(--emerald);margin-inline-end:12px}
@media(max-width:860px){.nav .lang-switch ul{position:fixed;inset-inline:16px;top:64px;min-width:0}}

/* Dark: localized pages theme the whole page, shell included, by redefining the site tokens. */
@media (prefers-color-scheme:dark){
:root:not([data-theme="light"]){color-scheme:dark;--bg:#121b15;--bg-elevated:#223028;--bg-card:#1b261f;--bg-deep:#18221c;--cream:#f2ede2;--cream-dim:#c9c3b5;--cream-muted:#bdb8aa;--line:rgba(255,255,255,.14);--line-strong:rgba(255,255,255,.22);--emerald:#8fd0aa;--emerald-hover:#a6dcbb;--gold-text:#ebd3a0;--gold-soft:rgba(235,211,160,.45)}
:root:not([data-theme="light"]) body{background:var(--bg);color:var(--cream)}
:root:not([data-theme="light"]) .nav{background:rgba(18,27,21,.86)}
:root:not([data-theme="light"]) .nav-cta{background:#f2ede2;color:#121b15!important}
:root:not([data-theme="light"]) .lib-banner a{color:#0f1a13}
:root:not([data-theme="light"]) .lang-switch ul{box-shadow:0 12px 32px rgba(0,0,0,.5)}
}
@media(max-width:560px){.nav .lang-switch>summary span{display:none}.nav .lang-switch>summary{padding:0 11px}}