/* =====================================================================
   EvoTechnik — DEVANAGARI SUPPORT
   Sprint 11 · 17 August 2026

   LOADED ONLY WHEN THE ACTIVE LANGUAGE IS HINDI OR MARATHI.
   header.php emits the <link> for this file inside an isDevanagari()
   check, so an English visitor downloads neither this stylesheet nor
   the 120 KB font it references. See D-120.

   It loads AFTER public.css / admin.css, so the font-family overrides
   below win without needing !important.

   ---------------------------------------------------------------------
   WHY A FONT IS NEEDED AT ALL

   Archivo and Barlow contain NO Devanagari glyphs. Without this file
   every Hindi and Marathi string falls back to whatever the OS happens
   to have — Nirmala UI on Windows, Noto on Android, something else on
   iOS — which means the site would render in three different typefaces
   depending on the visitor's device, at inconsistent weights, next to
   Latin text that is still Archivo. Unreadable is too strong; unowned
   is exactly right.

   ---------------------------------------------------------------------
   THE STACK PUTS NOTO FIRST, LATIN FONTS SECOND — DELIBERATELY

   A Hindi page is NOT entirely Hindi. Product names, SKUs, voltages and
   chemistry names stay in English by design (D-116), so almost every
   line mixes both scripts.

   Because @font-face declares a unicode-range, the browser picks per
   CHARACTER, not per element: Devanagari characters come from Noto,
   Latin characters fall through to Archivo or Barlow exactly as they do
   in English. "LiFePO4 बैटरी पैक 60V" renders with the Latin half in
   Barlow and the Devanagari half in Noto, automatically.
   ===================================================================== */


/* ---------------------------------------------------------------------
   The face. Variable, 100-900 — one file covers every weight the site
   uses. unicode-range keeps it strictly to Devanagari so it can never
   claim a Latin character.
   --------------------------------------------------------------------- */
@font-face {
  font-family: 'Noto Sans Devanagari';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/noto-sans-devanagari-var.woff2') format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9,
                 U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}


/* ---------------------------------------------------------------------
   Prepend Noto to both token stacks.

   These redefine the SAME tokens tokens.css declares, so every existing
   rule in the site picks the change up without being touched. Nothing
   else in this file needs to know which elements are headings.
   --------------------------------------------------------------------- */
:root {
  --font-heading: 'Noto Sans Devanagari', Archivo, "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-body:    'Noto Sans Devanagari', Barlow, "Segoe UI", system-ui, -apple-system, sans-serif;
}


/* ---------------------------------------------------------------------
   LINE HEIGHT — the real layout problem with Devanagari.

   Devanagari stacks matras ABOVE the shirorekha and conjuncts BELOW the
   baseline, so a line of Hindi occupies noticeably more vertical space
   than the same line of Latin at the same font-size. At the tight
   heading line-heights this design uses, the descenders of one line
   collide with the matras of the next.

   The fix is per-language and modest: loosen the lines, leave the sizes
   alone. Changing font-size would break the type scale in brand.md §5;
   changing line-height does not.
   --------------------------------------------------------------------- */
body {
  line-height: 1.75;      /* public.css baseline is 1.6 */
}

h1, h2, h3, h4, h5, h6,
.page-banner__title,
.section__title {
  line-height: 1.35;      /* headings are ~1.15 in the Latin design */
}


/* ---------------------------------------------------------------------
   COMPONENTS THAT CONSTRAIN HEIGHT

   Anything with a fixed height, a tight padding or a single-line
   assumption needs room for the taller script. These are the components
   the 320px Hindi screenshot pass actually caught.
   --------------------------------------------------------------------- */

/* Buttons: let the label wrap rather than overflow, and give the taller
   glyphs vertical room. */
.btn {
  line-height: 1.4;
  height: auto;
  min-height: 44px;       /* the 44px touch target from brand.md §9 holds */
  white-space: normal;
}

/* Nav items — Hindi labels run longer than English ones. */
.nav-main__link,
.drawer__link {
  line-height: 1.5;
}

/* Badges and pills: "Out of Stock" stays English, but "ज़रूरी" and the
   category counts do not. */
.badge,
.status,
.chip {
  line-height: 1.5;
  height: auto;
  padding-top: 3px;
  padding-bottom: 3px;
}

/* Table headers and cells in the spec table. */
.spec-table th,
.spec-table td,
.data-table th,
.data-table td {
  line-height: 1.6;
}

/* Form labels and help text. */
.label,
.help,
.field label {
  line-height: 1.6;
}

/* Product card titles are clamped to two lines in the Latin design; the
   taller script needs the box to grow with them rather than clip. */
.product-card__title {
  line-height: 1.45;
}

/* The footer's small print and the top bar both sit in tight rows. */
.site-footer__link,
.site-footer__bar,
.topbar__link {
  line-height: 1.6;
}