/*
  Urdu typography. Linked only on Urdu pages (<x-urdu-font>), and every rule
  is scoped to html[lang="ur"] as well.

  Noto Nastaliq Urdu is self-hosted (public/fonts, SIL OFL — see
  NotoNastaliqUrdu-OFL.txt) and limited by unicode-range to the Arabic
  script. Latin letters and digits — prices, quantities, references, SKUs —
  therefore keep falling through to the Latin stack even inside an Urdu
  sentence, so figures stay the same width and line up.

  Nastaliq is tall: its ascenders and descenders clip at the tight line
  heights the Latin design uses, so Urdu pages open the line height up.
*/
@font-face {
  font-family: "Noto Nastaliq Urdu";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/noto-nastaliq-urdu-arabic-400.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}

@font-face {
  font-family: "Noto Nastaliq Urdu";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/noto-nastaliq-urdu-arabic-700.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}

html[lang="ur"] {
  --tq-latin-font: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Arial, sans-serif;
  --tq-urdu-font: "Noto Nastaliq Urdu", var(--tq-latin-font);
}

html[lang="ur"] body {
  font-family: var(--tq-urdu-font);
  line-height: 1.9;
}

/* Everything that inherits text gets Nastaliq; controls that set their own
   family (buttons, selects styled with font:inherit) follow the body. */
html[lang="ur"] :is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--tq-urdu-font);
  line-height: 1.6;
}

html[lang="ur"] :is(p, li, dd, dt, label, blockquote, figcaption, summary, td, th) {
  line-height: 1.9;
}

/* Short labels on buttons, badges and chips: enough room for Nastaliq
   descenders without making the control much taller. */
html[lang="ur"] :is(button, .btn, .badge, .chip, .pill, .tag, .tab, .seg button) {
  line-height: 1.6;
}

/* Typed values and figures keep a normal line height, and stay in the Latin face for
   Latin letters and digits — but the face now starts with Noto Nastaliq Urdu, whose
   unicode-range covers only the Arabic script, so Urdu typed into a field or written in
   a price or a count cell is Nastaliq too while "Rs 1,200" and SKUs are unchanged. */
html[lang="ur"] :is(input, select, textarea, .num, .money, .amount, [class*="price"], [class*="Price"]) {
  font-family: var(--tq-urdu-font);
  line-height: normal;
}

html[lang="ur"] :is(code, kbd, samp, pre) {
  font-family: "Noto Nastaliq Urdu", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  line-height: normal;
}

/* Everything else that Urdu appears in. A great many components name their own
   font-family (Arial, Segoe UI, Georgia, an "Arial Narrow" stack, inherit chains that
   end at a component), and each would quietly put Urdu back in a system face. One rule,
   so no section is missed; Latin text still falls through to the Latin stack. */
html[lang="ur"] :is(body, body *):not(svg, svg *, code, kbd, samp, pre) {
  font-family: var(--tq-urdu-font) !important;
}

/* Home and List It for Me hero carousels: the headline and the paragraph under it
   in Nastaliq with room for its tall strokes. app.css sets a tight Latin line
   height (1.12) and a negative letter-spacing on the headline; both break
   Nastaliq, whose letters join, so Urdu overrides them here — and only here. */
html[lang="ur"] .hero :is(h1, h2, .hero-title) {
  font-family: var(--tq-urdu-font);
  line-height: 1.85;
  letter-spacing: 0;
  word-spacing: normal;
}

html[lang="ur"] .hero .hero-l p {
  font-family: var(--tq-urdu-font);
  line-height: 2.1;
}