/* Qutbnuma: Urdu pages only (/ur/, <html lang="ur" dir="rtl">). Loaded after style.css, and ONLY by /ur/ pages.
 * Generated by site-generator/gen_static.py: edit site-generator/static/ur.css, not website/assets/css/ur.css.
 * Spec: research/21-website-language-decision.md A4. Brand: BRAND-BOOK 5 (Urdu ~1.12x size, line-height 2.0-2.2,
 * never fake-bold, italicise or letter-space Urdu). Layout mirrors through logical properties in style.css.
 */

/* Noto Nastaliq Urdu (SIL OFL 1.1, licence in /assets/fonts/OFL.txt): Google Fonts' Arabic-script subset,
   variable weight 400-700, self-hosted. The URL is relative to this file, so it works on file:// previews too;
   it resolves to /assets/fonts/noto-nastaliq-urdu.woff2, the same URL the <link rel="preload"> uses. */
@font-face {
  font-family: "Noto Nastaliq Urdu";
  src: url("../fonts/noto-nastaliq-urdu.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  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;
}

/* Latin letters and the digits 0-9 are not in the subset above, so they fall through to Figtree. */
html[lang="ur"] {
  --q-font-ur-page: "Noto Nastaliq Urdu", "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 112.5%;              /* 18px base: Nastaliq reads small at the Latin size */
  font-family: var(--q-font-ur-page);
  line-height: 2.2;
}

/* Reset style.css's "Urdu snippet on an English page" rules (:lang(ur) font + line-height 1 inside p/li/h1/h2):
   here everything inherits the page font and the tall line-height. Same-specificity rules below win by order. */
html[lang="ur"] :lang(ur) { font-family: inherit; line-height: inherit; letter-spacing: normal; font-style: normal; }
html[lang="ur"] :is(.eyebrow, .example .label, .site-footer h2, .job-date, .toc h2) { text-transform: none; }

/* Headings: Nastaliq is tall, so a smaller size and line-height 1.8 */
html[lang="ur"] :is(h1, h2, h3, .h3) { line-height: 1.8; }
:where(html[lang="ur"]) h1 { font-size: clamp(1.7rem, 1.4rem + 1.4vw, 2.1rem); }
:where(html[lang="ur"]) h1.display { font-size: clamp(1.85rem, 1.45rem + 1.8vw, 2.4rem); line-height: 1.8; }
html[lang="ur"] .lead { font-size: 1.06rem; }
@media (min-width: 768px) { html[lang="ur"] .lead { font-size: 1.12rem; } }

/* Controls: padding, never fixed heights; no overflow:hidden on Urdu text (Nastaliq dots clip easily) */
html[lang="ur"] .btn { line-height: 1.9; padding-block: 8px; }
html[lang="ur"] .btn-lg { padding-block: 10px; }
html[lang="ur"] .option span { line-height: 1.9; padding-block: 6px; }
html[lang="ur"] .field :is(input[type="text"], input[type="tel"], select, textarea) { line-height: 2; padding-block: 6px; }
html[lang="ur"] .field textarea { padding-block: 10px; }
html[dir="rtl"] .field input[dir="ltr"] { text-align: end; }   /* phone number: LTR digits, lined up with the Urdu labels */
html[lang="ur"] bdi { white-space: nowrap; }     /* 0313-2988345, amounts and Order IDs never split at "-" or "," */
@media (max-width: 420px) { html[lang="ur"] .btn-lg { padding-inline: 18px; } }
html[lang="ur"] .big-number { font-size: 1.7rem; line-height: 1.6; }
html[lang="ur"] .notfound .code { line-height: 1; }
html[lang="ur"] .checklist li::before { top: .6em; }
html[lang="ur"] .success-panel textarea { unicode-bidi: plaintext; text-align: start; line-height: 1.9; } /* each line keeps its own direction, like WhatsApp */

/* Header: the Urdu lockup (logo-urdu.svg, 268.76 x 108) and a compact nav */
html[lang="ur"] .brand img { width: auto; height: 42px; }
@media (min-width: 400px) { html[lang="ur"] .brand img { width: auto; height: 45px; } }
html[lang="ur"] .site-nav a { line-height: 1.9; }
@media (min-width: 900px) { html[lang="ur"] .site-nav a { padding-block: 12px; } }
@media (max-width: 899px) {
  html[dir="rtl"].js .site-nav a[aria-current="page"] { box-shadow: inset -4px 0 0 var(--q-needle); }
}

/* Urdu-page-only blocks */
html[lang="ur"] .en-note { font-size: var(--q-fs-small); color: var(--q-slate); }
html[lang="ur"] .name-meaning { font-size: 1.12rem; }
