/* ============================================================
   Naba Al-Ikram — language layer
   Loaded on every page. Contains the per-language typography and
   the RTL exceptions: things that must NOT mirror when the page
   flips (logos, phone numbers, Latin brand name, carousels).
   ============================================================ */

/* ---------- 1. Per-language type ---------------------------- */

/* Arabic: Naskh. Sits beside Inter without either face looking borrowed. */
html[lang="ar"],
html[lang="ar"] body{
  font-family:"IBM Plex Sans Arabic","Noto Sans Arabic",
              "Segoe UI",Tahoma,sans-serif;
}
html[lang="ar"] h1,html[lang="ar"] h2,html[lang="ar"] h3,
html[lang="ar"] h4,html[lang="ar"] h5,html[lang="ar"] h6,
html[lang="ar"] .title,html[lang="ar"] .heading-title,
html[lang="ar"] .banner-title{
  font-family:"IBM Plex Sans Arabic","Noto Sans Arabic",sans-serif;
  font-weight:600;
  letter-spacing:0;            /* Arabic must never be letter-spaced */
  line-height:1.45;
}
html[lang="ar"] p,html[lang="ar"] li,html[lang="ar"] .desc{ line-height:1.95; }

/* Urdu: Nastaliq, not Naskh. The cascading baseline needs far more
   leading and a larger optical size than Latin or Arabic. */
html[lang="ur"],
html[lang="ur"] body{
  font-family:"Noto Nastaliq Urdu","Jameel Noori Nastaleeq",
              "IBM Plex Sans Arabic",serif;
  font-size:17px;
  line-height:2.35;
}
html[lang="ur"] h1,html[lang="ur"] h2,html[lang="ur"] h3,
html[lang="ur"] h4,html[lang="ur"] h5,html[lang="ur"] h6,
html[lang="ur"] .title,html[lang="ur"] .heading-title,
html[lang="ur"] .banner-title{
  font-family:"Noto Nastaliq Urdu","Jameel Noori Nastaleeq",serif;
  font-weight:600;
  letter-spacing:0;
  line-height:2.05;            /* descenders collide below this */
}
html[lang="ur"] .banner-title{ font-size:clamp(30px,4.4vw,52px); }
html[lang="ur"] .heading-title{ font-size:clamp(24px,3.2vw,38px); }
html[lang="ur"] p,html[lang="ur"] li,html[lang="ur"] .desc{ line-height:2.4; }
/* Nastaliq needs vertical room inside buttons and pills */
html[lang="ur"] .rts__btn,
html[lang="ur"] .rts-btn,
html[lang="ur"] .btn{ line-height:2; padding-block:.55em; }
html[lang="ur"] .car-list-service li,
html[lang="ur"] .nav-area ul li a{ line-height:2.1; }

/* Neither Arabic nor Urdu uses uppercase or small-caps. */
html[lang="ar"] .text-uppercase,html[lang="ur"] .text-uppercase{
  text-transform:none !important;
}
html[lang="ar"] .subtitle,html[lang="ur"] .subtitle{ letter-spacing:0; }


/* ---------- 2. RTL exceptions: keep these LTR ---------------- */

/* Phone numbers, emails and Latin identifiers read left-to-right even
   inside an RTL paragraph. Without this a number renders reversed. */
[dir="rtl"] a[href^="tel:"],
[dir="rtl"] a[href^="mailto:"],
[dir="rtl"] .ltr{
  direction:ltr;
  unicode-bidi:isolate;
  display:inline-block;
}
/* Inside the header/footer contact blocks the label is RTL but the
   value beneath it is a number — isolate just the value. */
[dir="rtl"] .map-area .text a{ direction:ltr; unicode-bidi:isolate; text-align:right; }

/* The logo is artwork. It never mirrors. */
[dir="rtl"] .logo-area img,
[dir="rtl"] .logo img,
[dir="rtl"] .footer-logo img{ transform:none !important; }

/* Icons that encode "forward" should point the other way in RTL;
   decorative icons should not be touched. */
[dir="rtl"] .rts__btn__icon i,
[dir="rtl"] .link-icon svg{ transform:scaleX(-1); }

/* Swiper handles RTL from the dir attribute, but the theme pins some
   translations in inline styles — let the library own the axis. */
[dir="rtl"] .swiper{ direction:rtl; }
[dir="rtl"] .swiper-wrapper{ direction:rtl; }


/* ---------- 3. Language switcher ---------------------------- */

.lang-switch{
  display:inline-flex;
  align-items:center;
  gap:2px;
  padding:3px;
  border:1px solid var(--color-border);
  border-radius:999px;
  background:var(--color-white);
  margin-inline-start:14px;
  flex:none;
}
.lang-switch a{
  display:inline-block;
  padding:4px 11px;
  border-radius:999px;
  font-size:13px;
  font-weight:500;
  line-height:1.5;
  color:var(--color-body);
  text-decoration:none;
  white-space:nowrap;
  transition:var(--transition);
}
.lang-switch a:hover{ color:var(--color-primary); }
.lang-switch a[aria-current="true"]{
  background:var(--color-primary);
  color:var(--color-white);
}
/* each label is set in its own script, whatever the page language */
.lang-switch a[hreflang="ar"]{ font-family:"IBM Plex Sans Arabic",sans-serif; }
.lang-switch a[hreflang="ur"]{ font-family:"Noto Nastaliq Urdu",serif; padding-block:2px; }

@media (max-width:991px){
  .lang-switch{ margin-inline-start:0; }
}

/* On the nav row the pills sit beside search and the socials. */
.bottom-right .lang-switch,
.social-area-transparent + .lang-switch{ margin-inline-end:14px; }
.nav-area + .bottom-right .lang-switch{ margin-inline-start:0; }

/* A language this page has not been translated into. Not a link: it goes
   nowhere, and says why on hover or focus. */
.lang-switch{ position:relative; overflow:visible; }
.lang-switch .is-unavailable{
  display:inline-block;
  padding:4px 11px;
  border-radius:999px;
  font-size:13px;
  font-weight:500;
  line-height:1.5;
  white-space:nowrap;
  /* muted via colour, never opacity - opacity on the pill would cascade
     into its ::after and wash the tooltip out with it */
  color:#A9A1A6;
  cursor:not-allowed;
  position:relative;
  text-decoration:line-through;
  text-decoration-thickness:1px;
  text-decoration-color:currentColor;
}
.lang-switch .is-unavailable[lang="ar"]{ font-family:"IBM Plex Sans Arabic",sans-serif; }
.lang-switch .is-unavailable[lang="ur"]{ font-family:"Noto Nastaliq Urdu",serif; padding-block:2px; }

/* tooltip */
.lang-switch .is-unavailable::after,
.lang-switch .is-unavailable::before{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .15s ease;
}
.lang-switch .is-unavailable::after{
  content:attr(data-tip);
  position:absolute;
  top:calc(100% + 11px);
  inset-inline-end:-6px;
  z-index:120;
  width:max-content;
  max-width:264px;
  white-space:normal;
  direction:ltr;
  text-align:left;
  text-decoration:none;
  font-family:var(--font-secondary,"Inter",sans-serif);
  font-size:12.5px;
  font-weight:400;
  line-height:1.55;
  letter-spacing:0;
  color:#fff;
  background:var(--color-heading);
  padding:9px 12px;
  border-radius:7px;
  box-shadow:0 8px 24px -10px rgba(26,16,22,.55);
}
.lang-switch .is-unavailable::before{        /* arrow */
  content:"";
  position:absolute;
  top:calc(100% + 5px);
  inset-inline-end:12px;
  z-index:121;
  border:6px solid transparent;
  border-bottom-color:var(--color-heading);
}
.lang-switch .is-unavailable:hover::after,
.lang-switch .is-unavailable:hover::before,
.lang-switch .is-unavailable:focus-visible::after,
.lang-switch .is-unavailable:focus-visible::before{
  opacity:1;
  visibility:visible;
}
.lang-switch .is-unavailable:focus-visible{
  outline:2px solid var(--color-primary);
  outline-offset:2px;
  color:var(--color-body);
}

/* the header rows must not clip the tooltip */
.header-wrapper-area,.header-right,.bottom,.bottom-right,
.social-area-transparent{ overflow:visible; }

/* Numbers now live on WhatsApp links as often as on tel: links, so isolate the
   value wherever a contact button prints one, not just under a[href^="tel:"]. */
[dir="rtl"] .rts-btn.call-btn .content p,
[dir="rtl"] .desk-slip__num,
[dir="rtl"] .plaque-row__num span{
  direction:ltr;
  unicode-bidi:isolate;
}

/* The footer's Call link is a word, not a number, so it must not inherit the
   left-to-right treatment the rule above gives every value in that column --
   that pushed its middot separator to the far side of the word. */
[dir="rtl"] .map-area .text a.ftr-call{ direction:rtl; unicode-bidi:isolate; }