/* Urdu pages. Only the WORDS change: the layout, colours, sizes and left/right placement stay exactly as on the English page. */

:root { --bk-ur-font: 'Noto Naskh Arabic', 'Plus Jakarta Sans', 'Segoe UI', Tahoma, serif; }

html[lang="ur"] body,
html[lang="ur"] button, html[lang="ur"] input, html[lang="ur"] select, html[lang="ur"] textarea,
html[lang="ur"] h1, html[lang="ur"] h2, html[lang="ur"] h3, html[lang="ur"] h4, html[lang="ur"] h5, html[lang="ur"] h6,
html[lang="ur"] [class*="bk-"] {
  font-family: var(--bk-ur-font) !important;
}

/* Letter spacing breaks the joins between Urdu letters, and capital letters do not exist in Urdu. */
html[lang="ur"] *, html[lang="ur"] *::before, html[lang="ur"] *::after { letter-spacing: normal !important; text-transform: none !important; }

/* Urdu letters are taller than English ones: a little more room so lines do not touch. */
html[lang="ur"] body { line-height: 1.8; }
html[lang="ur"] h1, html[lang="ur"] h2, html[lang="ur"] h3, html[lang="ur"] h4 { line-height: 1.6; }
html[lang="ur"] .bk-hero__title { line-height: 1.5; }
html[lang="ur"] .bk-header__link, html[lang="ur"] .bk-btn, html[lang="ur"] button { line-height: 1.5; }

/* Each paragraph picks its own reading direction from its words (full stops and question marks land on the correct
   side), while the box itself stays where it was: text-align is still left or right exactly as before. */
html[lang="ur"] h1, html[lang="ur"] h2, html[lang="ur"] h3, html[lang="ur"] h4, html[lang="ur"] h5, html[lang="ur"] h6,
html[lang="ur"] p, html[lang="ur"] li, html[lang="ur"] label, html[lang="ur"] td, html[lang="ur"] th,
html[lang="ur"] blockquote, html[lang="ur"] figcaption, html[lang="ur"] summary { unicode-bidi: plaintext; }