/* Internationalisation: the language switcher, and Devanagari-friendly type.
 *
 * Loaded last (index.html / web/app/layout.js) so the Hindi rules can win over
 * the per-component font declarations without touching them. English pages are
 * unchanged: every Hindi rule below is scoped to html[lang="hi"]. Another Indic
 * language copies that block, swapping in its own Noto family.
 */

/* ---------------------------------------------------------- the switcher */
.lang-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex: none;
  color: inherit;
}
.lang-switch-globe {
  position: absolute;
  left: 9px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  pointer-events: none;
  opacity: .75;
}
.lang-switch-select {
  appearance: none;
  -webkit-appearance: none;
  height: 36px;
  min-width: 112px;
  padding: 0 28px 0 30px;
  border: 1px solid var(--lang-line, currentColor);
  border-radius: 8px;
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' width='12' height='12' fill='none' stroke='%23888' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 9px center;
  color: inherit;
  font: 500 13.5px/1.4 inherit;
  font-family: inherit;
  cursor: pointer;
}
.lang-switch-select option { color: #0b1220; background: #fff; }
.lang-switch-select:hover { border-color: var(--lang-hover, currentColor); }
.lang-switch-select:focus-visible { outline: 2px solid var(--lang-focus, #2563eb); outline-offset: 2px; }

/* In the shell's top bar: the deck tokens, same 36px height as search. */
.lang-switch-shell {
  --lang-line: var(--ds-line, var(--rule-2, #cbd5e1));
  --lang-hover: var(--ds-line-2, var(--ink-3, #94a3b8));
  --lang-focus: var(--ds-focus-ring, var(--accent, #2563eb));
  color: var(--ds-deck-ink-2, var(--ink-2, inherit));
}
.lang-switch-shell .lang-switch-select { min-width: 104px; background-color: var(--ds-deck, transparent); }
/* Inside the phone profile menu it fills the row. */
.pm-lang .lang-switch, .pm-lang .lang-switch-select { width: 100%; }

/* On the public pages (light, standalone): quiet, neutral. */
.lang-switch-public {
  --lang-line: var(--line, var(--ap-line, #d0d5dd));
  --lang-hover: var(--ink-2, var(--ap-ink-2, #667085));
  --lang-focus: var(--brand, var(--ap-blue, #2563eb));
  color: var(--ink-2, var(--ap-ink-2, #3b4557));
}
.lp-nav-cta .lang-switch-public .lang-switch-select { height: 40px; min-width: 104px; }
.lp-footer .lang-switch-public { margin-top: 14px; color: inherit; --lang-line: rgba(255, 255, 255, .35); --lang-hover: rgba(255, 255, 255, .7); }
.ap-top .lang-switch-public .lang-switch-select { height: 40px; }

/* Settings row. */
.lang-switch-settings { --lang-line: var(--rule-2, #cbd5e1); color: var(--ink, inherit); }
.lang-switch-settings .lang-switch-select { min-width: 140px; }

/* Narrow bars: the label collapses to the globe + code-length text. */
@media (max-width: 1100px) {
  .lang-switch-shell .lang-switch-select { min-width: 92px; padding-left: 28px; }
}
@media (max-width: 768px) {
  .lp-nav-cta .lang-switch-public .lang-switch-select { min-width: 88px; padding-right: 24px; }
  .lp-nav-cta { gap: 8px; }
}
@media (max-width: 420px) {
  .lp-nav-cta .lang-switch-public .lang-switch-select { min-width: 0; width: 74px; padding: 0 20px 0 26px; }
  .lp-nav-cta .lang-switch-globe { left: 7px; }
}

/* ------------------------------------------------------- Devanagari type */
/* The Google Fonts link loads Noto Sans Devanagari; Latin faces have no
 * Devanagari glyphs, so name it explicitly (per-glyph fallback then uses the
 * Latin face for digits and identifiers and Noto for the script). */
html[lang="hi"] {
  --i18n-sans: "IBM Plex Sans Condensed", "Inter", "Noto Sans Devanagari", "Nirmala UI", "Mangal", system-ui, sans-serif;
  --i18n-serif: "Source Serif 4", "Noto Sans Devanagari", "Nirmala UI", "Mangal", Georgia, serif;
  --i18n-mono: "IBM Plex Mono", "Noto Sans Devanagari", "Nirmala UI", ui-monospace, monospace;
  --sh-font: var(--i18n-sans);
  --sh-mono: var(--i18n-mono);
  --ap-font: "Inter", "Noto Sans Devanagari", "Nirmala UI", "Mangal", system-ui, sans-serif;
  --lph-mono: var(--i18n-mono);
}
html[lang="hi"] body,
html[lang="hi"] .landing-pro,
html[lang="hi"] .ap,
html[lang="hi"] .lp-h1, html[lang="hi"] .lp-h2, html[lang="hi"] .lp-h3, html[lang="hi"] .lp-h3xl {
  font-family: var(--i18n-sans);
}
html[lang="hi"] .landing-pro, html[lang="hi"] .ap, html[lang="hi"] .landing-pro :is(h1, h2, h3, h4, p, span, a, button, li, b, label, figcaption, summary, select) {
  font-family: var(--ap-font);
}
html[lang="hi"] :is(.prose, .lesson-story, .lesson-tagline, .learn-now-hook, .vd) { font-family: var(--i18n-serif); }
/* Labels set in tracked IBM Plex Mono capitals elsewhere: in Hindi they read as
 * ordinary sans text (letter-spacing tears Devanagari conjuncts apart). */
html[lang="hi"] :is(.mono, .lp-mono, [class*="-mono"], .kicker, .sec-h, .chip, .pill, .sl, .sn, .tb-label, .legend, .row-state, .no,
  .chapter-count, .learn-map-cap, .learn-stats, .mc-eyebrow, .mc-metric-sub, .mc-kicker, .stat .sn, .lp-kicker, .lp-cap, .lp-chip,
  .playground-eyebrow, .playground-chip, .pg-count, .sidebar-group, .sidebar-brand-tag, .sidebar-user-meta, .bn-label,
  .lesson .no, .learn-now-ch, .learn-meta-i, .learn-overall-k, .pt, .lesson-lead-h, .lph-kicker, .lph-sub) {
  font-family: var(--i18n-sans);
  letter-spacing: 0 !important;
  word-spacing: normal !important;
}
html[lang="hi"] :is(pre, code, kbd, samp, .lp-code, .lp-editor, .ide-editor, .ide-output, .codewrap, .monaco-editor, [class*="cm-"]) {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
}
html[lang="hi"] svg text { font-family: var(--i18n-sans); }

/* Devanagari stacks its marks above and below the line: it needs ~1.6. */
html[lang="hi"] body { line-height: 1.65; }
html[lang="hi"] :is(p, li, dd, .lp-p, .lp-lede, .lp-sub, .vd, .prose) { line-height: 1.7; }
html[lang="hi"] :is(h1, h2, h3, h4, .lp-h1, .lp-h2, .lp-h3, .lp-h3xl, .ap-title, .ap-tagline, .learn-now-title) { line-height: 1.35; letter-spacing: 0; }
html[lang="hi"] :is(.lp-h1) { line-height: 1.25; }
/* Fixed one-line boxes need room for the marks: a min-height, never a clip. */
html[lang="hi"] :is(.btn, .lp-btn, .chip, .pill, .learn-chip, .playground-chip, .lp-navlink, .lp-navsignin, .sidebar-item, .pm-item, .lp-tab, .lp-ptab, .auth-tab, .lp-flink) { line-height: 1.5; }
html[lang="hi"] :is(.btn, .lp-btn) { min-height: 38px; }
html[lang="hi"] .btn.tiny { min-height: 32px; }
/* Uppercase / tracking labels have no meaning in Devanagari. */
html[lang="hi"] * { text-transform: none !important; }
html[lang="hi"] :is(.kicker, .sec-h, .lp-kicker, .sidebar-group, .tb-label, .mc-kicker, .lp-cap) { letter-spacing: 0; }

/* Longer words: wrap instead of clipping or overflowing. */
html[lang="hi"] :is(.btn, .lp-btn, .chip, .pill, .learn-chip, .playground-chip, .sidebar-item-label, .row-title, .lesson-row, .lp-ptab, .lp-tab,
  .lp-navlink, .lp-flink, .pm-item, .pg-action-text, .learn-meta-i, .stat-chip, .sidebar-resume-title, .sidebar-resume-kicker, .learn-now-go) {
  white-space: normal;
  overflow-wrap: break-word;
}
html[lang="hi"] .lp-navlinks { flex-wrap: wrap; row-gap: 0; }
html[lang="hi"] .lp-nav-in { gap: 20px; }
html[lang="hi"] .lp-navlink { padding: 8px 9px; font-size: 14.5px; white-space: nowrap; }
html[lang="hi"] .bn-label { white-space: normal; text-align: center; line-height: 1.3; font-size: 10.5px; }
html[lang="hi"] .sidebar-item-label { line-height: 1.4; }

/* Narrow phones: brand + language + menu fit; the hero's own CTA is right below. */
html[lang="hi"] .lp-brand, html[lang="hi"] .lp-brand-mark { flex: none; }
html[lang="hi"] .lp-nav-cta .lp-btn { white-space: nowrap; flex: none; }
@media (max-width: 480px) {
  html[lang="hi"] .lp-nav-cta .lp-btn-sm { display: none; }
  html[lang="hi"] .lp-nav-in { gap: 8px; }
}

/* Devanagari is unreadable below ~12px (the English labels are 9.5-11px). */
html[lang="hi"] :is(.kicker, .sec-h, .sl, .sn, .tb-label, .legend, .row-state, .no, .chapter-count, .learn-map-cap, .mc-eyebrow, .mc-metric-sub,
  .mc-kicker, .lp-kicker, .lp-cap, .lp-chip, .playground-eyebrow, .pg-count, .sidebar-group, .sidebar-brand-tag, .sidebar-user-meta,
  .learn-now-ch, .learn-overall-k, .pt, .lesson-lead-h, .lph-kicker, .lph-sub, .stat-chip, .chip, .pill, .playground-chip) { font-size: 12px; }
html[lang="hi"] .bn-label { font-size: 11.5px; }