/* =============================================================================
   Devanagari word breaking
   -----------------------------------------------------------------------------
   Loaded last.

   polish.css set `overflow-wrap: anywhere` on headings and table cells to stop
   a long unbroken value widening its container. On Latin that is harmless —
   the break lands between two letters. On Devanagari it is not: the browser
   is permitted to break anywhere at all, including between a consonant and
   the matra that belongs to it, so "कैलकुलेटर" can split as "कैलकुले" / "टर"
   or worse, leave a vowel sign stranded at the start of a line.

   This was the "Hindi words getting cut" problem, and it was introduced by my
   own layout fix rather than being a font or content issue.

   `break-word` breaks only when a word genuinely cannot fit, and respects
   grapheme cluster boundaries, which is what Devanagari needs.
   ========================================================================== */

[lang="hi"], :lang(hi),
[lang="hi"] *, :lang(hi) * {
    overflow-wrap: break-word;
    word-break: normal;
    line-break: auto;
    hyphens: none;
    -webkit-hyphens: none;
}

/* Explicitly undo the three places polish.css and tune.css set `anywhere`. */
[lang="hi"] h1, [lang="hi"] h2, [lang="hi"] h3,
:lang(hi) h1, :lang(hi) h2, :lang(hi) h3,
[lang="hi"] .table td, [lang="hi"] .table th,
:lang(hi) .table td, :lang(hi) .table th {
    overflow-wrap: break-word;
    word-break: normal;
}

/* Devanagari conjuncts sit taller than Latin, so a fixed-height container that
   works in English clips the top of a matra in Hindi. Anything that scrolls or
   clamps gets room to breathe. */
[lang="hi"] .badge, :lang(hi) .badge {
    line-height: 1.6;
    height: auto;
    padding-block: .3rem;
}

[lang="hi"] .btn, :lang(hi) .btn {
    line-height: 1.5;
    height: auto;
    min-height: 44px;
    padding-block: .6rem;
}

/* Card titles were being clipped at a fixed number of lines. Hindi says the
   same thing in more characters, so the clamp cut mid-sentence far more often
   than in English. Two extra lines costs little and stops the truncation. */
[lang="hi"] .card h3, :lang(hi) .card h3,
[lang="hi"] .card p,  :lang(hi) .card p {
    -webkit-line-clamp: unset;
    line-clamp: unset;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
}

/* Nav items wrap rather than clip when the label is longer. */
[lang="hi"] .nav__link, :lang(hi) .nav__link,
[lang="hi"] .footer__list a, :lang(hi) .footer__list a {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
}

/* The eyebrow labels are uppercase + wide tracking in Latin. Devanagari has no
   uppercase, and tracking is exactly what breaks matras, so for Hindi the
   label keeps its size but drops both. */
[lang="hi"] .eyebrow, :lang(hi) .eyebrow {
    text-transform: none;
    letter-spacing: normal;
}

/* Table cells holding Hindi need a minimum width or the browser wraps every
   word onto its own line to satisfy the column. */
[lang="hi"] .table td:first-child,
:lang(hi) .table td:first-child {
    min-width: 8rem;
}

/* =============================================================================
   Truncation
   ========================================================================== */

/* Anywhere a fade-out is used instead of a hard cut, the gradient must not
   land mid-glyph. Give it a little more room in Hindi. */
[lang="hi"] .truncate-fade::after,
:lang(hi) .truncate-fade::after {
    width: 4rem;
}

/* =============================================================================
   Devanagari headings — the matra bug
   -----------------------------------------------------------------------------
   This is the fix for "निःशुल्क" rendering as "ांनःशुल्क".

   devanagari.css contained this rule, which I wrote:

       [lang="hi"] h1 { font-family: var(--font-display), var(--font-devanagari); }

   The intention was that a mixed heading would keep the site's display face for
   its Latin characters and fall through to Devanagari for the rest. That is not
   how fallback works for a complex script. The browser takes the first font in
   the list that has a glyph for the character — and a Latin display serif very
   often does carry base Devanagari consonants while carrying none of the GPOS
   mark-attachment tables that position the vowel signs. So the consonants come
   from the display font and render fine, while every matra lands at its default
   unpositioned coordinate: floating before the syllable, or attached to the
   wrong letter.

   It affected headings only, which is exactly what the site showed — body
   paragraphs were correct throughout, because they inherit the Devanagari stack
   directly.

   The rule below removes the display font from Devanagari headings entirely. A
   heading in Hindi is set in a Devanagari face; there is no partial version of
   that decision that works.
   ========================================================================== */

[lang="hi"] h1, :lang(hi) h1,
[lang="hi"] h2, :lang(hi) h2,
[lang="hi"] h3, :lang(hi) h3,
[lang="hi"] h4, :lang(hi) h4,
[lang="hi"] .display,     :lang(hi) .display,
[lang="hi"] .grad-text,   :lang(hi) .grad-text,
[lang="hi"] .brand__text, :lang(hi) .brand__text,
[lang="hi"] .eyebrow,     :lang(hi) .eyebrow,
[lang="hi"] legend,       :lang(hi) legend,
[lang="hi"] .label,       :lang(hi) .label,
[lang="hi"] .btn,         :lang(hi) .btn,
[lang="hi"] figcaption,   :lang(hi) figcaption {
    font-family: var(--font-devanagari) !important;
}

/* Devanagari has no uppercase, no small caps, and no tradition of tight
   tracking. All three are Latin display conventions that damage it. */
[lang="hi"] h1, :lang(hi) h1,
[lang="hi"] h2, :lang(hi) h2,
[lang="hi"] h3, :lang(hi) h3,
[lang="hi"] .display,   :lang(hi) .display,
[lang="hi"] .grad-text, :lang(hi) .grad-text {
    letter-spacing: normal !important;
    word-spacing: normal !important;
    font-variant: normal !important;
    font-feature-settings: normal !important;
    text-transform: none !important;
    font-synthesis: none;
}

/* Gradient text clips its fill to the glyph outlines. Devanagari extends
   further above and below the em box than Latin — the shirorekha above and the
   hanging matras below — so a line-height tuned for Latin clips them. */
[lang="hi"] .grad-text, :lang(hi) .grad-text {
    line-height: 1.45;
    padding-block: 0.06em;
    display: inline-block;
}

[lang="hi"] h1, :lang(hi) h1 { line-height: 1.4; }
[lang="hi"] h2, :lang(hi) h2 { line-height: 1.4; }

/* Hinglish is entirely Latin, so it keeps the display face and needs nothing
   here. Stated so the omission does not read as an oversight. */

/* Date and time inputs keep their monospace face — a dd-mm-yyyy placeholder in
   a Devanagari font loses the fixed-width alignment that makes it scannable. */
[lang="hi"] input[type="date"], :lang(hi) input[type="date"],
[lang="hi"] input[type="time"], :lang(hi) input[type="time"] {
    font-family: var(--font-mono, ui-monospace, monospace) !important;
}