/* Script fonts and language-specific typography.
   Fonts are bundled (SIL Open Font Licence, see assets/fonts/OFL-LICENSE.txt) so nothing is loaded
   from a remote service. unicode-range means each file is downloaded only when its script is used. */
@font-face {
  font-family: "PR Nastaliq";
  src: url("../assets/fonts/noto-nastaliq-urdu-arabic-400-normal.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-089F, U+08A0-08FF, U+200C-200F, U+2068-2069, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face {
  font-family: "PR Nastaliq";
  src: url("../assets/fonts/noto-nastaliq-urdu-arabic-700-normal.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-089F, U+08A0-08FF, U+200C-200F, U+2068-2069, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face {
  font-family: "PR Naskh";
  src: url("../assets/fonts/noto-naskh-arabic-arabic-400-normal.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-089F, U+08A0-08FF, U+200C-200F, U+2068-2069, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face {
  font-family: "PR Naskh";
  src: url("../assets/fonts/noto-naskh-arabic-arabic-700-normal.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-089F, U+08A0-08FF, U+200C-200F, U+2068-2069, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face {
  font-family: "PR Devanagari";
  src: url("../assets/fonts/noto-sans-devanagari-devanagari-400-normal.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FF;
}
@font-face {
  font-family: "PR Devanagari";
  src: url("../assets/fonts/noto-sans-devanagari-devanagari-700-normal.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FF;
}

/* Urdu: Nastaliq is tall and sloping, so it needs generous line height and a slightly larger size. */
:lang(ur) {
  --font-sans: "PR Nastaliq", "Noto Nastaliq Urdu", "Jameel Noori Nastaleeq", "PR Naskh", "Noto Naskh Arabic", "Segoe UI", Tahoma, sans-serif;
  --font-serif: var(--font-sans);
  font-family: var(--font-sans);
}
html[lang="ur"] body { line-height: 2.15; font-size: calc(var(--step-0) * 1.06); }
html[lang="ur"] h1, html[lang="ur"] h2, html[lang="ur"] h3, html[lang="ur"] h4 { line-height: 1.9; letter-spacing: 0; }
:lang(ur) .btn, :lang(ur) .tag, :lang(ur) .nav-link { line-height: 1.9; }
:lang(ur) input, :lang(ur) textarea, :lang(ur) select { line-height: 2; }

/* Arabic: Naskh. */
:lang(ar) {
  --font-sans: "PR Naskh", "Noto Naskh Arabic", "Segoe UI", Tahoma, "Arial", sans-serif;
  --font-serif: var(--font-sans);
  font-family: var(--font-sans);
}
html[lang="ar"] body { line-height: 1.85; }
html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3 { line-height: 1.5; letter-spacing: 0; }

/* Hindi: Devanagari needs room for the headline (shirorekha) and vowel signs. */
:lang(hi) {
  --font-sans: "PR Devanagari", "Noto Sans Devanagari", "Nirmala UI", "Mangal", system-ui, sans-serif;
  --font-serif: var(--font-sans);
  font-family: var(--font-sans);
}
html[lang="hi"] body { line-height: 1.75; }
html[lang="hi"] h1, html[lang="hi"] h2, html[lang="hi"] h3 { line-height: 1.45; letter-spacing: 0; }

/* Elements marked lang="en" inside another language (e.g. an exercise not yet translated). */
:lang(en) {
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  --font-serif: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino, "Charter", Georgia, serif;
}

/* Italics don't exist in Arabic-script or Devanagari typography. */
:lang(ur) em, :lang(ar) em, :lang(hi) em, :lang(ur) i, :lang(ar) i, :lang(hi) i { font-style: normal; font-weight: 700; }

/* Directional icons point the other way in right-to-left layouts. Other icons are not mirrored. */
[dir="rtl"] .icon-back, [dir="rtl"] .icon-forward, [dir="rtl"] .icon-exit { transform: scaleX(-1); }

/* Phone numbers, dates and timers always read left to right. */
:not(html)[dir="ltr"] { unicode-bidi: isolate; }

/* Language controls */
.lang-buttons { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-5); }
.lang-button {
  min-height: var(--tap);
  min-width: 6.5rem;
  padding: var(--space-1) var(--space-4);
  border: 1.5px solid var(--rule-strong);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  font-size: var(--step-0);
  cursor: pointer;
}
.lang-button:lang(ur) { font-family: "PR Nastaliq", "Noto Nastaliq Urdu", serif; line-height: 2; }
.lang-button:lang(ar) { font-family: "PR Naskh", "Noto Naskh Arabic", serif; }
.lang-button:lang(hi) { font-family: "PR Devanagari", "Noto Sans Devanagari", sans-serif; }
.lang-button:lang(en) { font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.lang-button[aria-pressed="true"] { background: var(--teal); border-color: var(--teal); color: #fff; font-weight: 700; }
:root[data-theme="dark"] .lang-button[aria-pressed="true"] { color: #0D1B1C; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .lang-button[aria-pressed="true"] { color: #0D1B1C; } }
.lang-button:hover { border-color: var(--teal); }

.lang-select-wrap { display: inline-flex; align-items: center; gap: var(--space-1); color: var(--ink-soft); }
.lang-select { width: auto; min-height: 36px; padding: 2px var(--space-2); font-size: var(--step--1); border-width: 1px; }
.lang-select option:lang(ur) { font-family: "PR Nastaliq", "Noto Nastaliq Urdu", serif; }
.lang-select option:lang(ar) { font-family: "PR Naskh", "Noto Naskh Arabic", serif; }
.lang-select option:lang(hi) { font-family: "PR Devanagari", "Noto Sans Devanagari", sans-serif; }
.sidebar-lang { padding: 0 var(--space-5) var(--space-3); }
@media (max-width: 959px) { .sidebar-lang { display: none; } }
@media (max-width: 400px) { .site-topbar .lang-select-wrap .icon { display: none; } }

.tag-lang { background: var(--clinician-wash); color: var(--clinician); border-color: transparent; }