/* i18n.css — the language picker, and the type adjustments a second script
   needs. Its own file rather than lines added to styles.css: the shared sheet
   is every page's, and this is one component plus one script's metrics.

   Tokens only — nothing here invents a colour or a size. */

/* The picker sits in .site-header__actions beside the CTAs and reads as a
   third, quieter control: the same pill and border weight as .btn--quiet, so
   the row keeps one optical bounding box. */
.lang { display: inline-flex; align-items: center; }

/* i18n.js writes `hidden` off once the picker can actually switch. An author
   `display` beats the user agent's [hidden] rule at any specificity, so the
   rule above has to be undone explicitly or the picker shows up on the pages
   where the script never ran. */
.lang[hidden] { display: none; }

.lang__select {
  appearance: none;
  -webkit-appearance: none;
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 550;
  line-height: 1.2;
  color: var(--ink);
  background-color: transparent;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 0.8rem 2.2rem 0.8rem 1.05rem;
  cursor: pointer;
  /* Chevron as a data URI: `img-src 'self' data:` allows it, and it saves a
     request for eight pixels of line art. The stroke is --ink's value, which
     a custom property cannot reach inside a URL. */
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2010%206'%3E%3Cpath%20d%3D'M1%201l4%204%204-4'%20fill%3D'none'%20stroke%3D'%230B2239'%20stroke-width%3D'1.6'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%2F%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  background-size: 10px 6px;
  transition: border-color 0.18s ease;
}
.lang__select:hover { border-color: var(--ink); }

/* The open list is drawn by the OS, which does not inherit the page's colours
   on every platform. Naming both keeps it legible where it does. */
.lang__select option { color: var(--ink); background: var(--surface); }

/* The header gets tight before the nav breaks. Trim the picker rather than the
   CTA next to it — "Start free" is what the page is for. */
@media (max-width: 40rem) {
  .lang__select { padding: 0.62rem 1.9rem 0.62rem 0.8rem; }
}

/* Below 26rem the header is down to a brand and one button — the same
   breakpoint at which styles.css drops the ghost CTA. A third pill here costs
   about 100px and pushes the row over, and `.site-header__inner` wraps rather
   than overflows, so the sticky header silently doubles in height on every
   phone. So the picker sheds its pill and becomes a bare inline control: text
   and chevron, still a full-height tap target. The row's minimum gap comes
   down with it — three items on a 360px row cannot afford a 24px minimum, and
   `justify-content: space-between` still spreads them when there IS room. */
@media (max-width: 26rem) {
  .site-header__inner { gap: var(--sp-2xs); }
  .lang__select {
    border-color: transparent;
    padding: 0.62rem 1.1rem 0.62rem 0;
    background-position: right 0.1rem center;
  }
  .lang__select:hover { border-color: transparent; }
}

/* ---- Devanagari metrics ----------------------------------------------------
   The display line-heights (1.12 on headings) are set for Latin, which has
   nothing above the cap line. Devanagari stacks matras above the shirorekha
   and ि ु ृ below the baseline, so at those values consecutive lines collide
   and the marks clip. This is a per-script fact, not a per-language one: any
   future language written in an Indic script wants the same block. */
html[lang="hi"] h1,
html[lang="hi"] h2,
html[lang="hi"] h3,
html[lang="hi"] .hero__title,
html[lang="hi"] .page__title,
html[lang="hi"] .section__title {
  line-height: 1.32;
}
html[lang="hi"] .hero__title,
html[lang="hi"] .section__title {
  /* The tight negative tracking that stops a Latin system font looking like a
     default does the opposite in Devanagari: it pulls conjuncts into each
     other. */
  letter-spacing: 0;
}