/*
 * Language support: Arabic (right to left) and Kreol.
 * i18n.js sets <html lang="ar" dir="rtl"> for Arabic. Flex and grid rows
 * already follow the direction; these rules flip what style.css places by
 * left/right, and keep content that must stay left to right as it is.
 */

/* Arabic interface text: a font with Arabic glyphs, and no letter-spacing (it breaks the joined letters). */
html[lang="ar"] body {
  font-family: Inter, "Segoe UI", Tahoma, "Noto Sans Arabic", "Geeza Pro", "Arabic Typesetting", Arial, sans-serif;
}
html[lang="ar"] body *:not([lang="en"]) { letter-spacing: normal !important; }
html[lang="ar"] .eyebrow, html[lang="ar"] .drawerNav h4, html[lang="ar"] .rTag, html[lang="ar"] .libTag { text-transform: none; }
html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3 { line-height: 1.35; }
/* The prayer names are already Arabic in Arabic: hide the small duplicate. */
html[lang="ar"] .prayers li small[lang="ar"] { display: none; }

/*
 * Names and titles stay in Latin script inside the Arabic page. "plaintext"
 * lays each one out in its own direction, so "'Uthmaan bin 'Affaan" keeps its
 * apostrophes in place; the explicit right alignment keeps them on the right.
 */
[dir="rtl"] body { text-align: right; }
[dir="rtl"] :is(h1, h2, p, li, b, strong, small, em, cite, h3, h4, a, span, label, option, dt, dd, summary) { unicode-bidi: plaintext; }
/* The brand reads "Al Huda Wan Noor" in both directions. */
[dir="rtl"] .brand > span { direction: ltr; text-align: right; }

/* Header and menu */
[dir="rtl"] .navBurger { margin-right: 0; margin-left: 14px; }
[dir="rtl"] .navIn .brand { margin-right: 0; margin-left: auto; }
[dir="rtl"] .navLive { margin-left: 0; margin-right: 8px; }
[dir="rtl"] .skip { left: auto; right: -999px; }
[dir="rtl"] .skip:focus { right: 8px; }
[dir="rtl"] .drawer { left: auto; right: 0; box-shadow: -20px 0 60px rgba(0, 0, 0, .25); animation-name: drawerInRtl; }
@keyframes drawerInRtl { from { transform: translateX(100%); } to { transform: none; } }
[dir="rtl"] .drawerNav .dotLive { margin: 0 auto 0 4px; }
@media (max-width: 560px) {
  [dir="rtl"] .navBurger { margin-left: 6px; margin-right: 0; }
}

/* Text that style.css aligns left */
[dir="rtl"] .imam, [dir="rtl"] .imamBig, [dir="rtl"] .sources button, [dir="rtl"] .liveNowList button,
[dir="rtl"] .pickRow button, [dir="rtl"] .vItem, [dir="rtl"] .btnAct, [dir="rtl"] .vFacade { text-align: right; }
[dir="rtl"] .madList .call { text-align: left; }
[dir="rtl"] .searchBox { padding: 9px 22px 9px 9px; }
[dir="rtl"] .libSearch { padding: 8px 20px 8px 8px; }
@media (max-width: 760px) {
  [dir="rtl"] .searchBox { padding-left: 9px; padding-right: 16px; }
}
@media (max-width: 560px) {
  [dir="rtl"] .madList .call { text-align: right; }
  [dir="rtl"] .libSearch { padding-left: 8px; padding-right: 14px; }
}

/* Lists with ticks and numbers */
[dir="rtl"] .ticks li { padding-left: 0; padding-right: 30px; }
[dir="rtl"] .ticks li::before { left: auto; right: 0; }
[dir="rtl"] .qzRead ol, [dir="rtl"] .qzIntro ul, [dir="rtl"] .adQs { padding-left: 0; padding-right: 20px; }

/* Cards with a coloured edge */
[dir="rtl"] .fItem { border-left: 1px solid var(--border); border-right: 4px solid var(--k, #1b405b); }
[dir="rtl"] .lQuotes blockquote { border-left: 1px solid var(--border); border-right: 4px solid var(--gold); }
[dir="rtl"] .qzRev article { border-left: 1px solid var(--border); border-right: 4px solid #1c703f; }
[dir="rtl"] .qzRev article.no { border-right-color: var(--red); }

/* Small things placed by left/right */
[dir="rtl"] .rTag { margin-left: 0; margin-right: 6px; }
[dir="rtl"] .qzRead .qzPdf { margin-left: 0; margin-right: 4px; }
[dir="rtl"] .origLink { margin-left: 0; margin-right: auto; }
[dir="rtl"] .pcBar .pcShare { margin-left: 0; margin-right: auto; }
[dir="rtl"] .posterWhen { right: auto; left: 10px; }
[dir="rtl"] .pbClose { right: auto; left: 10px; }
[dir="rtl"] .qa summary { padding-right: 0; padding-left: 28px; }
[dir="rtl"] .qa summary::after { right: auto; left: 0; }
[dir="rtl"] .feature::after { right: auto; left: -30px; }
[dir="rtl"] .vBrand { text-align: right; }
[dir="rtl"] .btnAct { padding: 12px 16px 12px 22px; }
[dir="rtl"] .mHeroImg .mArt { margin-right: auto; margin-left: clamp(0px, 6vw, 80px); }
[dir="rtl"] .mHeroImg.hasPhoto .mPhoto { right: auto; left: clamp(16px, 5vw, 60px); }
[dir="rtl"] .readBody blockquote { border-left: 0; border-right: 4px solid var(--gold); border-radius: 12px 0 0 12px; }

/* Arrows and chevrons point the other way */
[dir="rtl"] .mini-link, [dir="rtl"] .back { unicode-bidi: plaintext; }

/* Keep these left to right: the mushaf turns pages like a book (‹ next on the left),
   numbers, times, phone numbers, emails, code and the Latin-script content. */
[dir="rtl"] .mStage, [dir="rtl"] .mBook { direction: ltr; }
[dir="rtl"] .mBook .mPage { direction: rtl; }
[dir="rtl"] .countdown, [dir="rtl"] .prayers b, [dir="rtl"] .bankNo b, [dir="rtl"] .zDue,
[dir="rtl"] a[href^="tel:"]:not(.btn), [dir="rtl"] a[href^="mailto:"]:not(.btn), [dir="rtl"] input[type="email"], [dir="rtl"] input[type="url"],
[dir="rtl"] input[type="number"], [dir="rtl"] input[inputmode="decimal"], [dir="rtl"] .qzBar b, [dir="rtl"] .lTime, [dir="rtl"] .rTime {
  direction: ltr; unicode-bidi: isolate;
}
[dir="rtl"] .countdown { justify-content: flex-end; }
[dir="rtl"] input[inputmode="decimal"], [dir="rtl"] input[type="number"] { text-align: right; }
/* Articles, quiz questions and other content that is written in English, French or Kreol. */
[dir="rtl"] .readBody, [dir="rtl"] .qzQ h2, [dir="rtl"] .qzRev p[dir="ltr"] { direction: ltr; text-align: left; }
[dir="rtl"] .readBody [lang="ar"], [dir="rtl"] .readBody [dir="rtl"] { direction: rtl; text-align: right; }
[dir="rtl"] .readHead h1, [dir="rtl"] .bookBody h3, [dir="rtl"] .bookBody p, [dir="rtl"] .lesson h4, [dir="rtl"] .lBook,
[dir="rtl"] .fItem > b, [dir="rtl"] .fItem > p, [dir="rtl"] .qa summary b, [dir="rtl"] .rTopic, [dir="rtl"] .ayahEn, [dir="rtl"] .aText .tr,
[dir="rtl"] .lQuotes blockquote p { unicode-bidi: plaintext; text-align: start; }
[dir="rtl"] .aText .tr { direction: ltr; text-align: left; }

/* The marquee of topics scrolls the same way in both directions. */
[dir="rtl"] #topicTrack { direction: ltr; }