/* ==========================================================================
   Urdu pages (right to left). Loaded only when the page language is Urdu (is_rtl()).
   Urdu text is set in Noto Nastaliq Urdu; Latin text (names, numbers) stays in Jost and Cormorant Garamond.
   Nastaliq needs no letter-spacing (it breaks the joins), no capitals and taller lines.
   ========================================================================== */

@font-face { font-family: "Noto Nastaliq Urdu"; src: url(../fonts/noto-nastaliq-urdu-400.woff2) format("woff2"); font-weight: 100 900; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
/* One weight serves every weight (headings included): saves ~160 KB on Urdu pages and avoids faux bold in Nastaliq. */

:root {
  --f-urdu: "Noto Nastaliq Urdu", "Jameel Noori Nastaleeq", "Urdu Typesetting", serif;
  --f-body: "Jost", var(--f-urdu);
  --f-display: "Cormorant Garamond", var(--f-urdu);
  --f-script: var(--f-urdu);
}

[dir="rtl"] body { line-height: 2.05; }
[dir="rtl"] * { letter-spacing: 0 !important; }
[dir="rtl"] :is(h1, h2, h3, h4, h5, h6, .kicker, .btn, .nav__link, .mega__heading, .mega__promo-title, .bento__title, .steps__title, .stat__value, [class*="__title"]) { text-transform: none; }
[dir="rtl"] :is(h1, h2, h3, h4, h5, h6, [class*="__title"]) { line-height: 1.75; font-weight: 500; }
[dir="rtl"] .hero__title { line-height: 1.55; font-size: clamp(2rem, 1rem + 3vw + 1vh, 3.8rem); }
[dir="rtl"] .hero__title .script, [dir="rtl"] .script { font-family: var(--f-urdu); font-style: normal; font-size: .8em; line-height: 1.6; margin: 0; font-weight: 400; }
/* No faux italics on Nastaliq (accent numbers and planner title included). */
[dir="rtl"] :is(.planner__title, .gstep__n, .path__num, .steps__n, .hl__n, .zrow__n, .zlist__n, .gnav__n, .howto li) { font-style: normal; }
/* Hotel and ziyarat names on the maps are Latin: isolate them so they read and truncate left to right (L1). */
[dir="rtl"] :is(.chip-label, .zpin__name, .hmap__centre-label) { direction: ltr; unicode-bidi: isolate; }
[dir="rtl"] .kicker { font-size: .95rem; font-weight: 400; }
[dir="rtl"] .btn { line-height: 1.5; padding-bottom: .2em; }
[dir="rtl"] :is(p, li, .prose, .field__label, .bento__text) { line-height: 2.05; }

/* Arrows and chevrons point the other way. */
[dir="rtl"] .icon:has(use[href$="#i-arrow-right"]),
[dir="rtl"] .icon:has(use[href$="#i-arrow-left"]),
[dir="rtl"] .icon:has(use[href$="#i-chevron-right"]),
[dir="rtl"] .icon:has(use[href$="#i-chevron-left"]),
[dir="rtl"] .icon:has(use[href$="#i-arrow-up-right"]) { transform: scaleX(-1); }
[dir="rtl"] .link-arrow:hover .icon, [dir="rtl"] .bento__tile:hover .bento__more .icon { transform: scaleX(-1) translateX(4px); }

/* Phone numbers, codes and other Latin runs read left to right. */
[dir="rtl"] :is(a[href^="tel:"], .header-phone span, .phone, .stepper, .trust__num, [data-ltr]) { direction: ltr; unicode-bidi: isolate; }
[dir="rtl"] input[type="tel"], [dir="rtl"] input[type="email"] { direction: ltr; text-align: right; }

/* Form controls */
[dir="rtl"] select.field__input { background-position: left .9em center; padding-right: 1em; padding-left: 2.6em; }

/* Header, drawer, floating buttons */
[dir="rtl"] .nav { margin-left: 0; margin-right: auto; }
[dir="rtl"] .brand__logo--white { left: auto; right: 0; }
@media (max-width: 1179px) { [dir="rtl"] .header-actions { margin-left: 0; margin-right: auto; } }
[dir="rtl"] .drawer__panel { right: auto; left: 0; transform: translateX(-100%); }
[dir="rtl"] .drawer.is-open .drawer__panel { transform: none; }
[dir="rtl"] .wa-float { right: auto; left: 22px; }
[dir="rtl"] .to-top { right: auto; left: 30px; }
@media (max-width: 767px) { [dir="rtl"] .to-top { left: 16px; } }

/* Small direction details */
[dir="rtl"] .prose :where(ul, ol) { padding-left: 0; padding-right: 1.3em; }
[dir="rtl"] .crumbs li + li::before { margin-right: 0; margin-left: .4em; }
[dir="rtl"] .notice { border-left: 0; border-right: 4px solid var(--gold); }
[dir="rtl"] .pcard__days { left: auto; right: 14px; }
[dir="rtl"] .skip-link { left: auto; right: 16px; }
[dir="rtl"] .faq__q { text-align: right; }

/* Arabic duas keep their own script (Amiri) and size inside Urdu text. */
[dir="rtl"] :is([lang="ar"], .ar, .dua__ar) { font-family: var(--f-arabic); line-height: 2.1; }

/* Umrah guide: transliteration and references are Latin text, read left to right. */
[dir="rtl"] :is(.dua__tr, .dua__ref) { direction: ltr; text-align: left; unicode-bidi: isolate; }
[dir="rtl"] .dua__ar, [dir="rtl"] .gstep__ar, [dir="rtl"] .gloss__ar { direction: rtl; }

/* Package pages: itinerary line on the icon side, list bullets on the right. */
[dir="rtl"] .timeline::before { left: auto; right: 27px; border-left: 0; border-right: 2px dashed var(--line-strong); }
[dir="rtl"] :is(.incl-col ul, .gtk ul) { padding-left: 0; padding-right: 1.1em; }

/* Urdu guide: Nastaliq shaping makes layout of this very long page expensive (PSI: 1.4 s of Style & Layout),
   so steps off screen skip layout until they come near. Only here: on the English guide the cost is small,
   and content-visibility makes accessibility checkers misread the du'a section's colours. */
[dir="rtl"] .gstep { content-visibility: auto; contain-intrinsic-size: auto 1600px; }