/* PrizeBond Multilingual — language switcher + Urdu (Noori Nastaliq) typography. Loaded on every page. */

/* ---- Language switcher (both languages) ---- */
.pbml-switcher { display: inline-flex; align-items: center; gap: 2px; padding: 2px; border: 1px solid #cbd5e1; border-radius: 9999px; background: #fff; line-height: 1; white-space: nowrap; }
.pbml-sw { display: inline-flex; align-items: center; justify-content: center; min-height: 30px; padding: 0 12px; border-radius: 9999px; color: #334155; font-size: 13px; font-weight: 600; text-decoration: none; }
.pbml-sw:hover { background: #f1f5f9; }
.pbml-sw.is-active { background: #0b7040; color: #fff; }
/* The Urdu label uses a light system font on English pages so the 5 MB Nastaliq webfont is only fetched on Urdu pages. */
.pbml-sw[hreflang="ur"] { font-family: "Noto Nastaliq Urdu", "Noto Naskh Arabic", "Segoe UI", Tahoma, serif; font-size: 15px; font-weight: 400; padding-top: 5px; padding-bottom: 1px; }

/* ---- Noori Nastaliq (Jameel Noori Nastaleeq), subset to Urdu/Arabic script + Latin digits & punctuation ---- */
/* One file, two faces: Nastaliq letters are drawn small while its Latin digits are wide, so letters are scaled up
   and digits/Latin scaled down (size-adjust) to make them look the same size. The browser downloads the file once. */
@font-face {
    font-family: "Noori Nastaliq";
    src: url("fonts/noori-nastaliq.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F;
    size-adjust: 112%;
}
@font-face {
    font-family: "Noori Nastaliq";
    src: url("fonts/noori-nastaliq.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-05FF, U+2000-206F, U+00A0-00FF;
    size-adjust: 84%;
}

html[lang^="ur"] {
    --pbml-font: "Noori Nastaliq", "Jameel Noori Nastaleeq", "Noto Nastaliq Urdu", "Noto Naskh Arabic", "Segoe UI", Tahoma, serif;
}

html[lang^="ur"] body,
html[lang^="ur"] body *,
html[lang^="ur"] input,
html[lang^="ur"] select,
html[lang^="ur"] textarea,
html[lang^="ur"] button {
    font-family: var(--pbml-font);
}
html[lang^="ur"] body code,
html[lang^="ur"] body pre,
html[lang^="ur"] body kbd { font-family: ui-monospace, Menlo, Consolas, monospace; }

/* Nastaliq has one weight; synthesised bold smears the joins, so emphasis comes from size/colour instead. */
html[lang^="ur"] body,
html[lang^="ur"] body * {
    font-weight: 400 !important;
    font-synthesis: none;
    letter-spacing: 0 !important;
    text-transform: none !important;
    word-spacing: 0.2em;
    font-kerning: normal;
    text-rendering: optimizeLegibility;
}

/* Nastaliq is drawn small and needs a tall line box (deep descenders / stacked diacritics). */
html[lang^="ur"] body { font-size: 1.35rem; line-height: 2.2; }

html[lang^="ur"] .text-xs { font-size: 1.15rem; line-height: 2.1; }
html[lang^="ur"] .text-sm { font-size: 1.25rem; line-height: 2.15; }
html[lang^="ur"] .text-base { font-size: 1.35rem; line-height: 2.2; }
html[lang^="ur"] .text-lg { font-size: 1.5rem; line-height: 2.2; }
html[lang^="ur"] .text-xl { font-size: 1.7rem; line-height: 2.1; }
html[lang^="ur"] .text-2xl { font-size: 1.95rem; line-height: 2.1; }
html[lang^="ur"] .text-3xl { font-size: 2.3rem; line-height: 2.05; }
html[lang^="ur"] .text-4xl { font-size: 2.75rem; line-height: 2; }
html[lang^="ur"] .text-5xl { font-size: 3.3rem; line-height: 1.95; }
html[lang^="ur"] .text-6xl { font-size: 4rem; line-height: 1.9; }
html[lang^="ur"] .text-\[11px\] { font-size: 16px; line-height: 2.1; }
html[lang^="ur"] .text-\[11\.5px\] { font-size: 17px; line-height: 2.1; }
html[lang^="ur"] .text-\[12px\] { font-size: 17.5px; line-height: 2.1; }
html[lang^="ur"] .text-\[13px\] { font-size: 18.5px; line-height: 2.1; }
html[lang^="ur"] .text-\[13\.5px\] { font-size: 18.5px; line-height: 2.1; }
html[lang^="ur"] .text-\[14\.5px\] { font-size: 19.5px; line-height: 2.1; }
html[lang^="ur"] .text-\[15\.5px\] { font-size: 20.5px; line-height: 2.1; }
html[lang^="ur"] .text-\[15px\] { font-size: 20px; line-height: 2.1; }
html[lang^="ur"] .text-\[18px\] { font-size: 24px; line-height: 2.1; }
html[lang^="ur"] .text-\[28px\] { font-size: 36px; line-height: 2; }
html[lang^="ur"] .leading-none,
html[lang^="ur"] .leading-tight,
html[lang^="ur"] .leading-snug { line-height: 1.9 !important; }
html[lang^="ur"] .leading-relaxed,
html[lang^="ur"] .leading-loose { line-height: 2.3 !important; }

@media (min-width: 640px) {
    html[lang^="ur"] .sm\:text-sm { font-size: 1.25rem; line-height: 2.15; }
    html[lang^="ur"] .sm\:text-lg { font-size: 1.5rem; line-height: 2.2; }
    html[lang^="ur"] .sm\:text-2xl { font-size: 1.95rem; line-height: 2.1; }
    html[lang^="ur"] .sm\:text-3xl { font-size: 2.3rem; line-height: 2.05; }
    html[lang^="ur"] .sm\:text-4xl { font-size: 2.75rem; line-height: 2; }
    html[lang^="ur"] .sm\:text-\[19px\] { font-size: 25px; line-height: 2.1; }
    html[lang^="ur"] .sm\:text-\[25px\] { font-size: 32px; line-height: 2; }
    html[lang^="ur"] .sm\:text-\[32px\] { font-size: 40px; line-height: 2; }
}
@media (min-width: 1024px) {
    html[lang^="ur"] .lg\:text-5xl { font-size: 3.3rem; line-height: 1.95; }
}

/* Long-form content (pages/posts) */
html[lang^="ur"] .prose { font-size: 1.35rem; line-height: 2.3; }
html[lang^="ur"] .prose :where(h1, h2, h3, h4) { line-height: 1.9; }
html[lang^="ur"] .prose :where(li, p) { line-height: 2.3; }

/* Form controls: taller line boxes make inputs oversized, so keep them compact. */
html[lang^="ur"] input,
html[lang^="ur"] select { line-height: 1.7; }
html[lang^="ur"] textarea { line-height: 2; }
html[lang^="ur"] button { line-height: 1.9; }
/* Numbers, e-mails and URLs are typed left-to-right even on an RTL page. */
html[lang^="ur"] input[type="email"],
html[lang^="ur"] input[type="password"],
html[lang^="ur"] input[type="number"],
html[lang^="ur"] input[type="tel"],
html[lang^="ur"] input[type="url"],
html[lang^="ur"] input[inputmode="numeric"] { direction: ltr; text-align: right; }
html[lang^="ur"] ::placeholder { font-family: var(--pbml-font); }

/* Bond numbers, prize tables and other digit strings stay left-to-right, whatever the surrounding text does. */
html[lang^="ur"] .pb-num,
html[lang^="ur"] [class*="number-box"],
html[lang^="ur"] [data-number] { direction: ltr; unicode-bidi: isolate; }

/* Keep the logo lock-up and any element flagged notranslate in the Latin UI face. */
html[lang^="ur"] body .notranslate:not(.pbml-switcher):not(.pbml-switcher *) { font-family: Inter, ui-sans-serif, system-ui, "Segoe UI", Arial, sans-serif; }
html[lang^="ur"] .pbml-switcher { font-family: system-ui, "Segoe UI", Arial, sans-serif; }
html[lang^="ur"] .pbml-sw[hreflang="en"] { font-family: system-ui, "Segoe UI", Arial, sans-serif; font-size: 13px; padding-top: 0; padding-bottom: 0; }
html[lang^="ur"] .pbml-sw[hreflang="ur"] { font-family: var(--pbml-font); font-size: 19px; padding-top: 6px; }

/* Lists of bond numbers are typed and read left-to-right even on an RTL page. */
html[lang^="ur"] textarea#bond-search,
html[lang^="ur"] textarea[id*="numbers"] { direction: ltr; text-align: right; }

/* Phones: table headers and cells (city names, dates, prize amounts) need more size than running text, because
   the small Nastaliq letters otherwise look tiny next to the wide Latin digits. */
@media (max-width: 640px) {
    html[lang^="ur"] table th { font-size: 1.5rem !important; line-height: 1.9 !important; }
    html[lang^="ur"] table td { font-size: 1.75rem !important; line-height: 2 !important; }
    html[lang^="ur"] table td small,
    html[lang^="ur"] table td .text-xs { font-size: 1.25rem !important; }
}