/* =============================================================================
   Languages — loaded on every page by _Layout.
   -----------------------------------------------------------------------------
   The header's language switcher, and what the translated pages (/ar, /fr, /es)
   need on top of the site's own stylesheets (for Arabic, their generated .rtl.css
   mirrors). Every rule except the switcher is keyed on html[lang]/[dir], so English
   pages are unaffected.
   ========================================================================== */

/* --- Arabic: faces that contain the script, and no letter-spacing ------------
   Manrope, Inter and IBM Plex Mono have no Arabic glyphs; the browser's fallback is
   inconsistent from one machine to the next. Icon fonts (material-icons, ionicons,
   Bootstrap and Font Awesome icons) must keep their own family or they turn into
   words, hence the exclusions. Letter-spacing breaks the joins between Arabic
   letters, so it is removed everywhere. */
html[lang="ar"] body,
html[lang="ar"] :is(p, li, a, span, small, strong, b, em, label, button, input, select, textarea, td, th, div, blockquote, figcaption, dt, dd):not(.material-icons):not([class*="ion-"]):not([class^="icon"]):not([class*=" icon"]):not([class^="bi-"]):not([class*=" bi-"]):not([class^="fa"]):not([class*=" fa-"]) {
  font-family: 'IBM Plex Sans Arabic', 'Cairo', 'Segoe UI', Tahoma, sans-serif;
}
html[lang="ar"] :is(h1, h2, h3, h4, h5, h6, .display-1, .display-2, .display-3, .display-4, .display-5, .display-6) {
  font-family: 'Cairo', 'IBM Plex Sans Arabic', 'Segoe UI', Tahoma, sans-serif;
  line-height: 1.35;
}
html[lang="ar"] * { letter-spacing: 0 !important; }
html[lang="ar"] body { text-align: right; }

/* Things that read left-to-right in any language: phone numbers, emails, scores,
   code, URLs. */
html[dir="rtl"] :is([href^="tel:"], [href^="mailto:"], input[type="email"], input[type="tel"], input[type="url"], .ltr) {
  direction: ltr;
  unicode-bidi: isolate;
}

/* Phone numbers, postal addresses and the live match clock (626') are written in
   left-to-right order; resolve each line by its own first letter so "+91 …" and
   "1005 W Amity ST," keep their order, while the block stays right-aligned. */
html[dir="rtl"] :is(.contact-card-para, .address, .country-para) {
  unicode-bidi: plaintext;
  text-align: right;
}
html[dir="rtl"] .ls-dur { direction: ltr; unicode-bidi: isolate; }

/* Arrows and chevrons that point "forward" point the other way in Arabic. */
html[dir="rtl"] :is([class*="bi-arrow-right"], [class*="bi-arrow-left"], [class*="bi-chevron-right"], [class*="bi-chevron-left"],
  .ion-ios-arrow-forward, .ion-ios-arrow-back, .ion-android-arrow-forward, .ion-android-arrow-back,
  .read-arrow, .learn-arrow, .beyond-arrow, .beyond-arrow-right, .right-arrow, .icon-right, .icon-up) {
  transform: scaleX(-1);
}

/* --- French and Spanish run 15–30% longer than English ---------------------
   Navigation items and buttons may wrap rather than overflow. */
html:not([lang="en"]) :is(.btn, .nav-link, button) { white-space: normal; }

/* ...except in the header, where a wrapped item ("QUI / SOMMES- / NOUS") breaks the bar.
   Keep every item on one line and tighten the spacing instead: always for the longer
   languages, and for everyone on laptop widths now that PRODUCTS is in the bar too. */
#navbar-container :is(.nav-link, .contact-us-btn, .live-matches-btn, .i18n-switch > summary) { white-space: nowrap; }
@media (min-width: 1440px) {
  html:is([lang="fr"], [lang="es"], [lang="pt"], [lang="de"], [lang="ru"], [lang="hi"]) #navbar-container .navbar-nav .nav-link { padding-inline: .42rem; font-size: .8rem; }
  html:is([lang="fr"], [lang="es"], [lang="pt"], [lang="de"], [lang="ru"], [lang="hi"]) #navbar-container :is(.contact-us-btn, .live-matches-btn, .i18n-switch > summary) { font-size: .8rem; }
}
@media (min-width: 992px) and (max-width: 1439.98px) {
  html #navbar-container .navbar-nav .nav-link { padding-inline: .28rem; font-size: .74rem; }
  html #navbar-container :is(.contact-us-btn, .live-matches-btn) { font-size: .74rem; padding-inline: .6rem !important; }
  /* the switcher keeps its globe; its list still names every language */
  html #navbar-container .i18n-switch > summary { font-size: 0; }
  html #navbar-container .i18n-switch > summary .eng-icon { font-size: 20px; margin: 0 !important; }
  html:is([lang="fr"], [lang="es"], [lang="pt"], [lang="de"], [lang="ru"], [lang="hi"]) #navbar-container .live-matches-btn { font-size: 0; }
  html:is([lang="fr"], [lang="es"], [lang="pt"], [lang="de"], [lang="ru"], [lang="hi"]) #navbar-container .live-matches-btn img { margin: 0 !important; }
  html:is([lang="fr"], [lang="de"], [lang="ru"], [lang="pt"]) #navbar-container .navbar-nav .nav-link { padding-inline: .2rem; font-size: .7rem; }
}
@media (min-width: 992px) and (max-width: 1099.98px) {
  html #navbar-container .navbar-nav .nav-link { padding-inline: .2rem; font-size: .68rem; }
  html:is([lang="fr"], [lang="de"], [lang="ru"], [lang="pt"]) #navbar-container .navbar-nav .nav-link { padding-inline: .1rem; font-size: .62rem; }
  html #navbar-container .live-matches-btn { font-size: 0; }
  html #navbar-container .live-matches-btn img { margin: 0 !important; }
}
html:not([lang="en"]) :is(h1, h2, h3, .display-1, .display-2, .display-3, .display-4, .display-5, .display-6) {
  overflow-wrap: break-word;
  hyphens: auto;
}

/* --- The language switcher in the header --------------------------------- */
.i18n-switch { position: relative; }
.i18n-switch > summary {
  display: inline-flex; align-items: center; gap: 0.35rem; cursor: pointer; list-style: none;
  padding: 0.35rem 0.7rem; border-radius: 999px; font-size: 0.9rem;
}
.i18n-switch > summary::-webkit-details-marker { display: none; }
.i18n-switch > ul {
  position: absolute; inset-block-start: calc(100% + 6px); inset-inline-end: 0; z-index: 1100;
  min-width: 10rem; margin: 0; padding: 0.35rem; list-style: none;
  background: #fff; border: 1px solid #E3E6EA; border-radius: 12px;
  box-shadow: 0 16px 40px -18px rgb(14 42 58 / 0.4);
}
.i18n-switch > ul a { display: block; padding: 0.5rem 0.75rem; border-radius: 8px; color: #1E2126; text-decoration: none; font-weight: 600; }
.i18n-switch > ul a:hover { background: #F5F7F9; }
.i18n-switch > ul a[aria-current="true"] { background: #E3F4FB; color: #0C7AAA; }

/* --- Hindi: Devanagari face, line height for its taller glyphs ---------- */
html[lang="hi"] body,
html[lang="hi"] :is(p, li, a, span, small, strong, b, em, label, button, input, select, textarea, td, th, div, h1, h2, h3, h4, h5, h6, blockquote, figcaption):not(.material-icons):not([class*="ion-"]):not([class^="icon"]):not([class*=" icon"]):not([class^="bi-"]):not([class*=" bi-"]):not([class^="fa"]):not([class*=" fa-"]) {
  font-family: "Noto Sans Devanagari", Manrope, Inter, system-ui, sans-serif !important;
}
html[lang="hi"] :is(p, li) { line-height: 1.75; }
html[lang="hi"] * { letter-spacing: 0 !important; }
/* German and Russian compound words are long: let headings break inside them */
html:is([lang="de"], [lang="ru"]) :is(h1, h2, h3, .pd-title, .pi-title, .pd-h2) { hyphens: auto; overflow-wrap: anywhere; }

/* --- Long words (German compounds, Russian) on phones ------------------------
   Grid and flex children default to min-width:auto, so one long word can widen a whole
   section past the screen. Let them shrink and break inside words instead. */
html:not([lang="en"]) :is(.zetai-home-content, .zetai-home-visual, .zetai-home-feature, .footer-items, .footer-heading) { min-width: 0; }
html:not([lang="en"]) :is(.zetai-home-title, .zetai-home-desc, .footer-items, .footer-heading) { overflow-wrap: anywhere; hyphens: auto; }
@media (max-width: 575.98px) {
  html:not([lang="en"]) .footer-items { white-space: normal; }
}