/*
 * Urdu. Loaded after the page's own stylesheet, only when the language is
 * Urdu (layouts check lang()). Bootstrap pages load bootstrap.rtl.min.css
 * instead of bootstrap.min.css; this adds the script and its spacing.
 *
 * Noto Nastaliq Urdu (SIL Open Font License, ../fonts/OFL.txt), the Arabic-
 * script part only: Latin letters and digits — tag codes, numbers, phone
 * numbers — stay in the system font, so T-001 reads the same in both languages.
 */
@font-face {
  font-family: "Noto Nastaliq Urdu";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  /* The name carries the first 8 hex of the file's SHA-256: it is cached for a
     year (public/.htaccess), so a changed font must get a new name. */
  src: url("../fonts/noto-nastaliq-urdu-arabic.7dde60c1.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+200C-200E, U+2010-2011,
                 U+FB50-FDFF, U+FE70-FEFC;
}

:root {
  --urdu-font: "Noto Nastaliq Urdu", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --bs-body-font-family: var(--urdu-font);
  --bs-body-line-height: 2;
}

/* Nastaliq is tall: every line needs more room than Latin text, or the dots
   of one line sit in the next. */
body { font-family: var(--urdu-font); line-height: 2; }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { line-height: 1.9; }
button, input, select, textarea, .btn, .form-control, .form-select { font-family: inherit; }
.btn, .form-control, .form-select, .nav-link, .navbar-brand, .dropdown-item { line-height: 1.9; }
.badge { line-height: 1.7; font-weight: 600; }
.small, small, .form-text { line-height: 1.9; }

/* Cut-off text (navbar brand) clips Nastaliq's descenders without room. */
.text-truncate { padding-block: .15em; }

/* Codes, numbers and machine text read left to right inside Urdu lines. */
code, kbd, pre, .font-monospace, input[type="number"], input[type="email"],
input[type="tel"], input[inputmode="numeric"], .ltr { direction: ltr; unicode-bidi: isolate; }
input[type="number"], input[type="email"], input[type="tel"], input[inputmode="numeric"] { text-align: right; }

/* Arrows that point "back" or "on" flip with the reading direction. */
.flip-rtl { display: inline-block; transform: scaleX(-1); }