/*==================================================================
  AL-FAJR FOUNDATION — RIGHT-TO-LEFT (اردو)

  Loaded LAST, and only when the active language is Urdu.

  Short, because the system uses logical properties throughout —
  inset-inline-start, padding-inline, border-inline-start,
  margin-inline — so dir="rtl" flips most of the layout on its own.

  What remains is what direction alone cannot fix: the Nastaliq font
  stack, its much deeper leading, letter-spacing resets (tracking
  severs Arabic letter joins), mirrored directional glyphs, and LTR
  islands for numerals, emails and account numbers.
==================================================================*/

/*==============================
  1. TYPOGRAPHY
==============================*/

.lang-ur body,
.lang-ur {
    font-family: var(--font-urdu);
    line-height: var(--leading-urdu);
}

.lang-ur h1, .lang-ur h2, .lang-ur h3, .lang-ur h4, .lang-ur h5,
.lang-ur p, .lang-ur li, .lang-ur a, .lang-ur span, .lang-ur label,
.lang-ur button, .lang-ur blockquote, .lang-ur strong, .lang-ur small,
.lang-ur dt, .lang-ur dd, .lang-ur th, .lang-ur td,
.lang-ur input, .lang-ur textarea, .lang-ur select {
    font-family: var(--font-urdu);
}

/* Nastaliq needs roughly double the leading of Latin type and no
   negative tracking — its letterforms slope and descend deeply. */
.lang-ur h1 { line-height: 1.75; letter-spacing: 0; }
.lang-ur h2 { line-height: 1.8;  letter-spacing: 0; }
.lang-ur h3, .lang-ur h4, .lang-ur h5 { line-height: 1.85; letter-spacing: 0; }

/* Display sizes come down a step: Nastaliq reads larger than Latin
   at the same point size. */
.lang-ur .hero h1 { font-size: clamp(1.75rem, 1.3rem + 2.2vw, 3rem); }
.lang-ur .page-header h1 { font-size: clamp(1.6rem, 1.25rem + 1.9vw, 2.5rem); }
.lang-ur .page-404-code { font-family: var(--font-head); }

.lang-ur .lede,
.lang-ur .hero-lede,
.lang-ur .prose,
.lang-ur .body-text { line-height: var(--leading-urdu); }

/* Letter-spacing breaks the joins between Arabic letterforms, so
   every tracked element has to be reset. */
.lang-ur .eyebrow,
.lang-ur .brand-tagline,
.lang-ur .footer-col-title,
.lang-ur .dept-card-cat,
.lang-ur .news-cat,
.lang-ur .contact-label,
.lang-ur .tier-flag,
.lang-ur .bank-title,
.lang-ur .aside-title,
.lang-ur .card-flag,
.lang-ur .gallery-kind,
.lang-ur .lb-category,
.lang-ur .trust-badge {
    letter-spacing: 0 !important;
    text-transform: none;
}

/* Latin islands: numerals, email, phone, account numbers, and every
   figure. These keep Inter and stay left-to-right. */
.lang-ur .ltr,
.lang-ur .num,
.lang-ur .counter-figure,
.lang-ur .dept-figure strong,
.lang-ur .tier-amount strong,
.lang-ur .filter-count,
.lang-ur .lb-counter,
.lang-ur time,
.lang-ur .bank-box dd.ltr,
.lang-ur input[type="email"],
.lang-ur input[type="tel"],
.lang-ur input[type="url"] {
    font-family: var(--font-body);
    direction: ltr;
    unicode-bidi: isolate;
}

/* Arabic scripture always keeps Amiri — never Nastaliq. */
.lang-ur [lang="ar"],
.lang-ur .hero-hadith-ar {
    font-family: var(--font-arabic) !important;
    line-height: 1.95;
}

/*==============================
  2. MIRRORED GLYPHS
  Arrows are directional; dir="rtl" does not flip their artwork.
==============================*/

.lang-ur .link-more::after { content: "←"; }
.lang-ur .link-more:hover::after { transform: translateX(-.3em); }

.lang-ur .footer-links a::before { content: "‹"; }
.lang-ur .footer-links a:hover { gap: var(--sp-3); }

.lang-ur .breadcrumb .sep i,
.lang-ur .fa-chevron-right,
.lang-ur .fa-arrow-right,
.lang-ur .fa-arrow-left {
    transform: scaleX(-1);
}

/* The dropdown caret points down in both directions — leave it. */
.lang-ur .nav-caret { transform: none; }
.lang-ur .nav-item:hover > .nav-link .nav-caret,
.lang-ur .nav-item.is-open > .nav-link .nav-caret { transform: rotate(180deg); }

/*==============================
  3. NAVIGATION
==============================*/

.lang-ur .nav-list { flex-direction: row-reverse; }

/* Dropdowns anchor to the correct edge. */
.lang-ur .nav-submenu { inset-inline-start: 0; inset-inline-end: auto; }

.lang-ur .nav-item:nth-last-child(-n+2) > .nav-submenu {
    inset-inline-start: auto;
    inset-inline-end: 0;
}

.lang-ur .nav-list a { font-size: 1rem; }

@media (max-width: 1140px) {
    .lang-ur .nav-list { flex-direction: column; }

    /* The drawer slides in from the left in RTL. */
    .lang-ur .site-nav { transform: translateX(-100%); }
    .lang-ur .site-nav.is-open { transform: none; }
}

/*==============================
  4. FORMS
==============================*/

.lang-ur .input,
.lang-ur .textarea,
.lang-ur .select {
    text-align: right;
    direction: rtl;
}

/* Fields holding Latin data stay LTR even on the Urdu build. */
.lang-ur input[type="email"],
.lang-ur input[type="tel"],
.lang-ur input[type="url"] {
    text-align: left;
}

.lang-ur .bank-box dt { text-align: right; }

/*==============================
  5. URDU SPACING
  Nastaliq's deep descenders need extra room in dense components.
==============================*/

.lang-ur .counter-label,
.lang-ur .counter-note,
.lang-ur .dept-figure span,
.lang-ur .tier p,
.lang-ur .card-body p,
.lang-ur .feature p,
.lang-ur .footer-about,
.lang-ur .footer-contact li,
.lang-ur .footer-links a,
.lang-ur .footer-trust,
.lang-ur .ways-list p {
    line-height: 1.95;
}

.lang-ur .chip,
.lang-ur .provides-list li { padding-block: .45em; line-height: 1.75; }

.lang-ur .btn { padding-block: .75em; line-height: 1.6; }

.lang-ur .trust-badge { line-height: 1.8; }

/*==============================
  6. DIRECTIONAL DECORATION
==============================*/

/* The gold rule under a heading grows from the reading edge. */
.lang-ur .rule-gold { margin-inline-start: 0; margin-inline-end: auto; }
.lang-ur .section-head--center .rule-gold { margin-inline: auto; }

/* Nav underline on the active item. */
.lang-ur .nav-item.is-active > .nav-link::after { inset-inline: .7rem; }