/* ==========================================================================
   KAN-47 — Urdu: font, line spacing, mixed-direction values, header language toggle.
   Linked by layouts/app and layouts/rider after every other sheet, in both languages
   (the language popup and toggle show Urdu letters on English pages too).

   Font: Noto Naskh Arabic (SIL Open Font License), self-hosted, Arabic-script range only,
   one variable file for weights 400-700 (~90 KB, fetched only when a page shows Urdu letters).
   Nastaliq was heavy and needed very tall lines; Naskh reads cleanly on a small phone screen.

   The same file is also registered under the Latin brand family names, for the Arabic range
   only. Many older rules name 'Inter' / 'Plus Jakarta Sans' / 'Nunito' and nothing else, so
   their Urdu letters fell back to the phone's own Urdu font (Nastaliq on Android). With these
   faces every such rule gets Naskh for Urdu while Latin text keeps its brand font.
   ========================================================================== */

@font-face {
  font-family: 'Orderyfy Urdu';
  src: url('../../fonts/noto-naskh-arabic-urdu.woff2') format('woff2');
  font-weight: 400 700; font-style: normal; font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face {
  font-family: 'Inter';
  src: url('../../fonts/noto-naskh-arabic-urdu.woff2') format('woff2');
  font-weight: 400 700; font-style: normal; font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('../../fonts/noto-naskh-arabic-urdu.woff2') format('woff2');
  font-weight: 400 700; font-style: normal; font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face {
  font-family: 'Nunito';
  src: url('../../fonts/noto-naskh-arabic-urdu.woff2') format('woff2');
  font-weight: 400 700; font-style: normal; font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+FB50-FDFF, U+FE70-FEFF;
}

/* ---- Font tokens in Urdu (oy/app.css, the template, the rider app) ---- */
html[lang="ur"], html[dir="rtl"] {
  --oa-font: 'Inter', 'Orderyfy Urdu', 'Noto Naskh Arabic', system-ui, sans-serif;
  --oa-display: 'Plus Jakarta Sans', 'Orderyfy Urdu', 'Noto Naskh Arabic', system-ui, sans-serif;
  --text-font: 'Inter', 'Orderyfy Urdu', 'Noto Naskh Arabic', system-ui, sans-serif;
  --title-font: 'Plus Jakarta Sans', 'Orderyfy Urdu', 'Noto Naskh Arabic', sans-serif;
  --title-font-two: 'Plus Jakarta Sans', 'Orderyfy Urdu', 'Noto Naskh Arabic', sans-serif;
}
/* resources/css/app.css used to put the whole page in Nastaliq here; same selectors, later sheet. */
[dir="rtl"], [lang="ur"], .font-urdu { font-family: 'Inter', 'Orderyfy Urdu', 'Noto Naskh Arabic', sans-serif; }
/* Rider app: the phone's system font for Latin, Naskh (not the phone's Nastaliq) for Urdu. */
html[lang="ur"] .oy-rider-body {
  --r-font: 'Orderyfy Urdu', -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}
/* "اردو" on the language buttons, in either page language. */
.oa-welcome-ur, .oy-lang-ur .oy-lang-label, .oy-langtgl[lang="ur"] {
  font-family: 'Orderyfy Urdu', 'Noto Naskh Arabic', sans-serif;
}

/* ---- Comfortable line spacing for Urdu ---- */
html[lang="ur"] body,
html[lang="ur"] .oy-rider-body { line-height: 1.8; }
html[lang="ur"] :is(p, li, dd, dt, label, small, blockquote) { line-height: 1.8; }
html[lang="ur"] :is(h1, h2, h3, h4, h5, h6) { line-height: 1.5; letter-spacing: normal; }
/* Letter-spacing breaks the joins of Urdu script. */
html[lang="ur"] body * { letter-spacing: normal; }
/* The old Nastaliq pages asked for extra-tall lines; Naskh needs less. */
html[lang="ur"] .np-page-body { line-height: 1.9; }
html[lang="ur"] .np-page-body :is(h2, h3) { line-height: 1.6; }

/* ---- Mixed-direction values (ltr() / <x-ltr> / <bdi>) ---- */
/* A bdi keeps its own direction; nothing to style except that it never breaks inside. */
bdi[dir="ltr"] { unicode-bidi: isolate; }
.oa-rating bdi, .oa-meta bdi { white-space: nowrap; }
/* Phone numbers and links typed in Latin read left to right in an Urdu page. */
html[dir="rtl"] a[href^="tel:"] { unicode-bidi: isolate; }

/* ---- Header language toggle (partials/lang-toggle) ---- */
.oy-langtgl {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  min-width: 44px; height: 36px; padding: 0 12px; border-radius: 999px;
  border: 1px solid var(--oy-border, #E6E8E1); background: #fff; color: var(--oy-ink, #1F1F1F);
  font-size: 14px; font-weight: 800; line-height: 1; text-decoration: none; white-space: nowrap;
  -webkit-tap-highlight-color: transparent; transition: border-color .15s, background-color .15s;
}
.oy-langtgl:hover { border-color: var(--oy-green, #A6CE39); background: var(--oy-light, #F4F9E6); }
.oy-langtgl:focus-visible { outline: 3px solid var(--oy-green, #A6CE39); outline-offset: 2px; }
.oy-langtgl[lang="ur"] { font-size: 15px; font-weight: 700; padding-bottom: 2px; }
/* In the lime home header it sits on lime: a white pill. */
.oa-hh .oy-langtgl { border-color: rgba(0, 0, 0, .08); }
/* The site header's toggle is the desktop one; phones show it in the home header (and the
   site header itself when a page has no app bar). */
.oy-header .oy-langtgl { margin-inline-end: 4px; }
@media (min-width: 900px) {
  .oa-hh .oy-langtgl { display: none; }
}
/* Home header row: location at the start, the toggle beside the heart at the end. */
.oa-hh-row .oy-langtgl { margin-inline-start: auto; }

/* ---- Photo strips (oy-gallery.js) in Urdu ---- */
/* KAN-47: in an RTL page a card's multi-photo strip became a right-to-left scroller (negative
   scroll offsets, start at the right edge). Its lazy photos and scroll-snap start position then
   misbehaved on phones, and Urdu search results showed an empty grey well where the photo should
   be (the initials tile is hidden while the strip is up). Photos have no reading direction, so
   the strip always runs left to right, exactly as on English pages; oy-gallery.js reads the
   track's computed direction and follows. The dots and the card around it stay RTL. */
html[dir="rtl"] .oy-gal-track { direction: ltr; }