/* ==========================================================================
   URDU / RTL OVERRIDES
   --------------------------------------------------------------------------
   Loaded ONLY on /ur pages, after site.css. Every rule in this file is scoped
   to [dir="rtl"], so even if it were loaded on an English page it could not
   change anything.

   Three jobs:
     1. Flip direction and text alignment where site.css hard-codes `left`.
     2. Swap the Latin font stack for an Urdu one.
     3. Keep numbers, currency and dates rendering left-to-right inside
        right-to-left sentences — Urdu reads RTL but prices do not.
   ========================================================================== */

[dir="rtl"] {
    --font-ur: 'Noto Naskh Arabic', 'Noto Nastaliq Urdu', 'Jameel Noori Nastaleeq', serif;
}

/* ---- Typography ---------------------------------------------------------- */

[dir="rtl"] body {
    font-family: var(--font-ur);
    /* Urdu glyphs sit lower and need more room than Latin at the same size. */
    font-size: 15.5px;
    line-height: 1.95;
    letter-spacing: 0;
}

[dir="rtl"] h1,
[dir="rtl"] h2,
[dir="rtl"] h3,
[dir="rtl"] h4,
[dir="rtl"] h5,
[dir="rtl"] .section-title,
[dir="rtl"] .bento-value,
[dir="rtl"] .karat-panel-title,
[dir="rtl"] .pulse-value,
[dir="rtl"] .related-card-title {
    font-family: var(--font-ur);
    /* Negative tracking is a Latin optimisation and mangles Arabic script. */
    letter-spacing: 0;
    line-height: 1.6;
}

[dir="rtl"] h1 { line-height: 1.5 }

/* ---- Numbers stay LTR ---------------------------------------------------- */
/*
 * A price, a percentage or a date is a Latin-script run inside an RTL
 * paragraph. Without an explicit direction the browser reorders the symbol and
 * the digits — "Rs 431,440" becomes "431,440 Rs" on the wrong side, and a
 * range like "24K–22K" flips end for end.
 */
/* Pure-number runs: always left to right. */
[dir="rtl"] .num,
[dir="rtl"] .karat-price-val,
[dir="rtl"] .city-price-val,
[dir="rtl"] .city-premium-badge,
[dir="rtl"] .status-value,
[dir="rtl"] .ticker-value,
[dir="rtl"] .rate-chip,
[dir="rtl"] time {
    direction: ltr;
    unicode-bidi: isolate;
}

/*
 * Mixed runs — "431,440 روپے", "▲ +0.80% (24 گھنٹے)", "تقریباً 0.22٪".
 *
 * `plaintext` lets the browser pick a direction per element from its first
 * strong character, which is exactly the rule these need: a value that starts
 * with a digit lays out LTR, one that starts with an Urdu word lays out RTL.
 * Hard-coding either direction gets half of them wrong.
 */
[dir="rtl"] .val,
[dir="rtl"] .bento-value,
[dir="rtl"] .bento-change,
[dir="rtl"] .karat-value,
[dir="rtl"] .karat-row-value,
[dir="rtl"] .karat-price-main,
[dir="rtl"] .karat-change,
[dir="rtl"] .pulse-value,
[dir="rtl"] .pulse-change,
[dir="rtl"] .ticker-change,
[dir="rtl"] .compare-table td {
    unicode-bidi: plaintext;
}

/* The first column of a data table is a label, not a number — put it back. */
[dir="rtl"] .compare-table td:first-child,
[dir="rtl"] .compare-table th {
    direction: rtl;
    unicode-bidi: isolate;
    text-align: right;
}

[dir="rtl"] .compare-table td { text-align: right }

/* ---- Layout flips -------------------------------------------------------- */

[dir="rtl"] .hero,
[dir="rtl"] .hero p,
[dir="rtl"] .section-head-left,
[dir="rtl"] .prose,
[dir="rtl"] .faq-q,
[dir="rtl"] .faq-a,
[dir="rtl"] .footer-brand-block p {
    text-align: right;
}

[dir="rtl"] .breadcrumb { direction: rtl }

/* Bullet list markers are drawn with `left`, which needs to become `right`. */
[dir="rtl"] .prose ul li { padding-left: 0; padding-right: 24px }
[dir="rtl"] .prose ul li::before { left: auto; right: 4px }
[dir="rtl"] .prose ol { margin-left: 0; margin-right: 22px }
[dir="rtl"] .prose ol li { padding-left: 0; padding-right: 4px }

[dir="rtl"] .prose h3::before { margin-right: 0 }

[dir="rtl"] .prose .note {
    border-left: none;
    border-right: 3px solid var(--accent);
    padding: 2px 18px 2px 0;
}

[dir="rtl"] .callout {
    border-left: none;
    border-right: 4px solid var(--primary);
}

[dir="rtl"] .callout.gold { border-right-color: var(--accent) }

[dir="rtl"] .footer-col h5::after { left: auto; right: 0 }

/* Arrows point the other way in an RTL reading order. */
[dir="rtl"] .related-card-arrow,
[dir="rtl"] .section-link .arrow { transform: scaleX(-1) }
[dir="rtl"] .related-card:hover .related-card-arrow { transform: scaleX(-1) translateX(2px) }

/*
 * .faq-q and .dropdown-menu need no positional overrides: the first is a
 * flex row (which reverses on its own) and the second is centred on its
 * trigger with a transform, which is direction-agnostic. Only the text
 * alignment inside them has to change.
 */
[dir="rtl"] .dropdown-menu,
[dir="rtl"] .dropdown-label,
[dir="rtl"] .dropdown-menu a { text-align: right }

[dir="rtl"] .back-to-top { right: auto; left: 20px }

/* ---- Urdu-only spacing tweaks -------------------------------------------- */

[dir="rtl"] .city-lede { line-height: 2.05 }
[dir="rtl"] .prose p { margin-bottom: 18px }
[dir="rtl"] .prose ul li { margin-bottom: 15px }
[dir="rtl"] .section-sub { line-height: 1.9 }
[dir="rtl"] .hero-badge { flex-direction: row-reverse }
[dir="rtl"] .prose-byline { flex-direction: row-reverse }