/* Step 3E.5 — multilingual visual/RTL safety layer.
   This file intentionally stays framework-agnostic so it can protect localized
   pages even before the application bundle has finished hydrating. */

/* Complex scripts need more vertical breathing room than the Latin display face.
   The main stylesheet already swaps the font family; this layer also neutralizes
   aggressive tracking and tight display line-heights that can clip glyphs. */
html[data-locale="ta"] .font-display,
html[data-locale="hi"] .font-display,
html[data-locale="ur"] .font-display,
html[data-locale="pa-Guru"] .font-display,
html[data-locale="pa-Arab"] .font-display,
html[data-locale="ml"] .font-display,
html[data-locale="te"] .font-display,
html[data-locale="ar"] .font-display {
  line-height: 1.16 !important;
  letter-spacing: normal !important;
  overflow-wrap: break-word;
  word-break: normal;
  text-wrap: pretty;
}

html[dir="rtl"] .font-display {
  line-height: 1.24 !important;
}

html[data-locale="ta"] .eyebrow,
html[data-locale="hi"] .eyebrow,
html[data-locale="ur"] .eyebrow,
html[data-locale="pa-Guru"] .eyebrow,
html[data-locale="pa-Arab"] .eyebrow,
html[data-locale="ml"] .eyebrow,
html[data-locale="te"] .eyebrow,
html[data-locale="ar"] .eyebrow,
html[data-locale="ta"] [class*="tracking-"],
html[data-locale="hi"] [class*="tracking-"],
html[data-locale="ur"] [class*="tracking-"],
html[data-locale="pa-Guru"] [class*="tracking-"],
html[data-locale="pa-Arab"] [class*="tracking-"],
html[data-locale="ml"] [class*="tracking-"],
html[data-locale="te"] [class*="tracking-"],
html[data-locale="ar"] [class*="tracking-"] {
  letter-spacing: normal !important;
  text-transform: none !important;
}

/* Guard remaining physical Tailwind spacing utilities in RTL components until
   every shared component has fully migrated to logical start/end utilities. */
html[dir="rtl"] .ml-auto {
  margin-left: 0 !important;
  margin-right: auto !important;
}

html[dir="rtl"] .mr-auto {
  margin-right: 0 !important;
  margin-left: auto !important;
}

html[dir="rtl"] .focus\:left-4:focus {
  left: auto !important;
  right: 1rem !important;
}

/* Contact data is inherently LTR, even inside Arabic/Urdu/Shahmukhi layouts. */
html[dir="rtl"] footer a[href^="mailto:"],
html[dir="rtl"] footer a[href^="tel:"] {
  direction: ltr;
  unicode-bidi: isolate;
  width: max-content;
  max-width: 100%;
}

/* Long translated language names can collide with the brand and menu trigger on
   narrow phones. Keep the full accessible name while switching the visual pill
   to its icon-only state below 480 px. */
@media (max-width: 479px) {
  .site-header button.inline-flex > span {
    display: none !important;
  }

  .site-header button.inline-flex {
    width: 2.75rem !important;
    min-width: 2.75rem !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    flex: 0 0 2.75rem;
  }

  .site-header .container {
    gap: 0.5rem !important;
  }

  /* The founder timeline summary uses two columns on larger phones. For scripts
     with longer labels, one column prevents cramped or visually unbalanced cards. */
  html[data-locale="ta"] .grid.max-w-xl.grid-cols-2,
  html[data-locale="hi"] .grid.max-w-xl.grid-cols-2,
  html[data-locale="ur"] .grid.max-w-xl.grid-cols-2,
  html[data-locale="pa-Guru"] .grid.max-w-xl.grid-cols-2,
  html[data-locale="pa-Arab"] .grid.max-w-xl.grid-cols-2,
  html[data-locale="ml"] .grid.max-w-xl.grid-cols-2,
  html[data-locale="te"] .grid.max-w-xl.grid-cols-2,
  html[data-locale="ar"] .grid.max-w-xl.grid-cols-2 {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* The fixed mobile sales CTA must grow when translated labels wrap. */
@media (max-width: 767px) {
  .fixed.inset-x-0.bottom-0.z-40 .motion-cta {
    min-height: 3rem;
    height: auto !important;
    padding: 0.7rem 1rem;
    line-height: 1.25;
    text-align: center;
    white-space: normal;
  }
}