/* fonts.css — the brand typeface, in every language the interface speaks.
 * =============================================================================
 * Loaded BEFORE style.css so the faces are declared by the time anything is
 * painted. Six typefaces cover all eleven languages plus English:
 *
 *   Montserrat          en · it · de · fr · es · pt · ru   (Latin + Cyrillic)
 *   Noto Sans Arabic    ar                                  (Arabic)
 *   Noto Nastaliq Urdu  ur                                  (Urdu calligraphy)
 *   Hind                hi                                  (Devanagari)
 *   Anek Bangla         bn                                  (Bengali)
 *   Anek Malayalam      ml                                  (Malayalam)
 *
 * Every one is SIL Open Font License 1.1 with fsType 0 — free to host and to
 * use commercially. The licence text ships in public/fonts/OFL.txt; keep it.
 *
 * Three decisions worth knowing about:
 *
 * 1. `unicode-range` is what makes this affordable. The browser reads it BEFORE
 *    downloading and fetches a face only if the page actually contains those
 *    characters. An English visitor never downloads the Arabic or Bengali file.
 *    Without it, every visitor would pull all six — roughly 480 KB instead of 38.
 *
 * 2. `font-display: swap` shows text immediately in the fallback and swaps when
 *    ours arrives. The alternative is invisible text for up to three seconds,
 *    which Google measures and penalises.
 *
 * 3. Montserrat, Noto Sans Arabic, Anek Bangla and Anek Malayalam are VARIABLE
 *    fonts: one file holds every weight from 400 to 800, so `font-weight: 500`
 *    is a real Medium and `800` a real ExtraBold, not browser-faked ones. The
 *    design uses 800 in 47 places, which is why the range goes that high.
 *    Hind has no variable version and stops at Bold, so Hindi ships as two
 *    static files and lets 500/600/800 resolve to the nearest real weight.
 * ============================================================================= */

/* ---- Latin + Cyrillic — the default for the whole interface ---------------- */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400 800;          /* variable: every weight in this one file */
  font-display: swap;
  src: url('/fonts/montserrat.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0300-0301, U+0304, U+0308, U+0329, U+0400-045F,
                 U+0490-0491, U+04B0-04B1, U+2000-206F, U+2074, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---- Arabic --------------------------------------------------------------- */
@font-face {
  font-family: 'DS Arabic';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/fonts/noto-arabic.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+08A0-08FF,
                 U+FB50-FDFF, U+FE70-FEFF, U+200C-200F, U+2010-2011, U+204F,
                 U+2E41, U+FDFC;
}

/* ---- Urdu ----------------------------------------------------------------- *
 * Urdu is written in Nastaliq, a flowing calligraphic style that slopes down
 * to the left. Setting Urdu in the Arabic (Naskh) font above is technically
 * readable but looks wrong to an Urdu reader — like setting English entirely
 * in capitals. It is a separate face for that reason, applied via [lang="ur"].
 * Nastaliq needs far more vertical room, so the line-height is raised with it. */
@font-face {
  font-family: 'DS Urdu';
  font-style: normal;
  font-weight: 400 700;   /* Nastaliq ships 400-700 only */
  font-display: swap;
  src: url('/fonts/noto-urdu.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF,
                 U+200C-200F, U+2010-2011;
}

/* ---- Hindi (Devanagari) — two static weights, no variable version exists --- */
@font-face {
  font-family: 'DS Devanagari';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/hind-400.woff2') format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC,
                 U+A830-A839, U+A8E0-A8FF;
}
@font-face {
  font-family: 'DS Devanagari';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/hind-700.woff2') format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC,
                 U+A830-A839, U+A8E0-A8FF;
}

/* ---- Bengali -------------------------------------------------------------- */
@font-face {
  font-family: 'DS Bengali';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/fonts/anek-bangla.woff2') format('woff2');
  unicode-range: U+0980-09FF, U+200C-200D, U+20B9, U+25CC, U+A8F1;
}

/* ---- Malayalam ------------------------------------------------------------ */
@font-face {
  font-family: 'DS Malayalam';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/fonts/anek-malayalam.woff2') format('woff2');
  unicode-range: U+0307, U+0323, U+0D00-0D7F, U+200C-200D, U+20B9, U+25CC,
                 U+A830-A832;
}

/* ---- The stack ------------------------------------------------------------ *
 * One variable used everywhere, so a future change is a single edit. The order
 * matters: the browser walks it left to right per CHARACTER, not per element.
 * So an English label and an Arabic value in the same table row each get the
 * right face automatically, with no markup at all.
 *
 * The system fonts at the end are the fallback shown during the swap, and the
 * safety net if a file ever fails to load. */
:root {
  --font-brand: 'Montserrat', 'DS Arabic', 'DS Devanagari', 'DS Bengali',
                'DS Malayalam', system-ui, -apple-system, 'Segoe UI', Roboto,
                'Helvetica Neue', Arial, sans-serif;
  --font-urdu:  'DS Urdu', 'DS Arabic', 'Montserrat', system-ui, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
}

/* Urdu gets the calligraphic face and the extra height Nastaliq needs.
 *
 * It MUST name `body`. app.js sets lang on <html>, but style.css gives body its
 * own font-family, and an element's own declaration beats anything it would
 * have inherited. Styling <html> alone therefore reaches nothing visible —
 * which is exactly what shipped first, and Urdu came out in blocky Naskh.
 * `html[lang="ur"] body` (0,1,2) outranks `body` (0,0,1), so it sticks, and
 * every element inside inherits from body as usual.
 *
 * The bare [lang="ur"] handles an Urdu span inside an otherwise English page. */
html[lang="ur"] body,
html[lang="ur"] body *,
[lang="ur"] {
  font-family: var(--font-urdu);
}
html[lang="ur"] body,
[lang="ur"] {
  line-height: 2.1;   /* Nastaliq slopes downward and needs the vertical room */
}

/* Setting line-height on body is not enough. Nearly every heading and paragraph
 * in style.css carries its OWN line-height — the hero is 1.08 — and that wins
 * over anything inherited. In Latin that is tight and elegant; in Nastaliq the
 * descenders swing so far below the baseline that consecutive lines collide.
 * That is precisely what happened on the Urdu homepage.
 *
 * `html[lang="ur"] body h1` scores (0,1,3) and beats `.ds2-dhero-cap h1` at
 * (0,1,1), so these stick without a single !important.
 *
 * Buttons, chips and badges are deliberately NOT included: they are single-line
 * and their own padding already clears the descenders. Forcing 2.0 on them
 * would stretch every control on the page. */
html[lang="ur"] body h1,
html[lang="ur"] body h2,
html[lang="ur"] body h3,
html[lang="ur"] body h4,
html[lang="ur"] body h5,
html[lang="ur"] body h6 {
  line-height: 1.95;
  padding-block: 0.10em;   /* the tail of a final letter still overshoots */
}
html[lang="ur"] body p,
html[lang="ur"] body li,
html[lang="ur"] body td,
html[lang="ur"] body th,
html[lang="ur"] body label,
html[lang="ur"] body small {
  line-height: 2.05;
}