/* ==========================================================================
   MEDLINE — LAYER 8: RTL / URDU
   Loaded only on the Urdu site. Most mirroring is already handled by logical
   properties (inset-inline, margin-inline, padding-inline) in the earlier
   layers; this file covers what genuinely differs.
   ========================================================================== */

[dir="rtl"] {
  /* Nastaliq needs far more line height and NO negative tracking — the Latin
     display tracking crushes the script and breaks joins. */
  --lh-tight:   1.5;
  --lh-heading: 1.6;
  --lh-snug:    1.8;
  --lh-body:    2.05;
  --ls-display: 0;
  --ls-heading: 0;
  --ls-body:    0;
  --ls-eyebrow: 0.04em;
}

[dir="rtl"] body {
  font-family: var(--font-urdu);
  text-align: right;
}

/* Headings: the Latin scale is too tight for Nastaliq's tall ascenders. */
[dir="rtl"] .t-display,
[dir="rtl"] .t-h1,
[dir="rtl"] .t-h2,
[dir="rtl"] .t-h3,
[dir="rtl"] .t-h4 {
  letter-spacing: 0;
  font-weight: var(--fw-bold);   /* 800 renders muddy in Nastaliq */
  padding-block: 0.12em;         /* stop descenders being clipped */
}
[dir="rtl"] .t-display { font-size: clamp(2rem, 4vw, 3.25rem); line-height: 1.5; }
[dir="rtl"] .t-h1      { font-size: clamp(1.75rem, 3.4vw, 2.75rem); line-height: 1.55; }
[dir="rtl"] .t-h2      { font-size: clamp(1.5rem, 2.6vw, 2.125rem); line-height: 1.6; }
[dir="rtl"] .t-h3      { font-size: 1.375rem; }
[dir="rtl"] .t-h4      { font-size: 1.125rem; }

/* The accent phrase inside a heading. */
[dir="rtl"] .t-em { font-style: normal; }

/* Eyebrows: uppercase is meaningless in Urdu and letterspacing breaks joins. */
[dir="rtl"] .t-eyebrow {
  text-transform: none;
  letter-spacing: 0;
  font-weight: var(--fw-bold);
}

/* Numbers, prices, phone numbers and dates stay LTR inside RTL text. */
[dir="rtl"] .e-card__price,
[dir="rtl"] .deal__now,
[dir="rtl"] .stat b,
[dir="rtl"] .hero__stat b,
[dir="rtl"] .pager__item,
[dir="rtl"] .step b,
[dir="rtl"] time,
[dir="rtl"] [data-ltr] {
  direction: ltr;
  unicode-bidi: isolate;
  display: inline-block;
}

/* Arrows in CTAs point the wrong way once mirrored. */
[dir="rtl"] .dept-card__link,
[dir="rtl"] .btn--text,
[dir="rtl"] .sec-head a { unicode-bidi: isolate; }
[dir="rtl"] .arrow { display: inline-block; transform: scaleX(-1); }

/* Form controls */
[dir="rtl"] .field__control { text-align: right; }
[dir="rtl"] input[type="date"],
[dir="rtl"] input[type="tel"],
[dir="rtl"] input[inputmode="numeric"],
[dir="rtl"] input[inputmode="decimal"],
[dir="rtl"] input[inputmode="tel"] { direction: ltr; text-align: left; }

/* Breadcrumb separator flips visually. */
[dir="rtl"] .crumbs li + li::before { content: "\\";  }

/* The mobile drawer slides from the left in RTL — already handled in 4-nav,
   this only fixes the border side. */
[dir="rtl"] .drawer {
  border-inline-start: 0;
  border-inline-end: 1px solid var(--border);
}

/* Search results: the type chip sits on the correct side automatically via
   flex, but the loading skeleton alignment needs a nudge. */
[dir="rtl"] .sr__loading { direction: rtl; }

/* Tables in admin */
[dir="rtl"] .tbl th,
[dir="rtl"] .tbl td { text-align: right; }

/* Language switcher */
.lang-switch {
  display: inline-flex; align-items: center;
  min-height: var(--tap-min);
  padding-inline: var(--sp-3);
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  background: var(--surface-1);
  color: var(--text-muted);
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
}
.lang-switch:hover { color: var(--text-strong); border-color: var(--border-strong); }