/* ==========================================================================
   BOOM Interactive: language menu + translation-safe layout
   Ported from the CoreSpec 3D site, re-skinned with Boom tokens (tokens.css).
   Non-English copy runs longer than English, and Anton and Figtree have no
   Cyrillic, CJK or Arabic glyphs, so each of those languages gets its own
   type stack. Rules are scoped to html.i18n-translated / html.lang-xx, so
   English is never affected.
   ========================================================================== */

/* ---- Language menu (dropdown) ----------------------------------------- */
.lang-menu { position: relative; display: inline-flex; font-family: var(--font-body, 'Figtree', system-ui, sans-serif); user-select: none; flex-shrink: 0; }
.lang-menu__btn {
  display: inline-flex; align-items: center; gap: 5px;
  background: none; border: none; cursor: pointer; padding: 6px 4px;
  font: inherit; font-size: 13px; font-weight: 600; letter-spacing: 0.04em; line-height: 1;
  color: var(--color-slate, #7A7570); transition: color 150ms ease;
}
.lang-menu__btn:hover, .lang-menu.open .lang-menu__btn { color: var(--color-charcoal, #211E1A); }
.lang-menu__btn svg:last-child { transition: transform 200ms ease; }
.lang-menu.open .lang-menu__btn svg:last-child { transform: rotate(180deg); }

.lang-menu__flag { display: inline-flex; }
.lang-menu__flag .flag { width: 18px; height: 13px; border-radius: 2px; display: block; box-shadow: 0 0 0 1px rgba(33,30,26,0.14) inset; }
.lang-menu__opt .flag { width: 20px; height: 14px; flex-shrink: 0; }

.lang-menu__list {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 400;
  min-width: 170px; margin: 0; padding: 6px; list-style: none;
  background: var(--color-warm-white, #E2DEDA); border: 1px solid var(--color-cream-dark, #C8C1B8);
  border-radius: var(--radius-md, 8px); box-shadow: 0 10px 30px rgba(33,30,26,0.16);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity 160ms ease, transform 160ms ease, visibility 0ms linear 160ms;
}
.lang-menu.open .lang-menu__list { opacity: 1; visibility: visible; transform: none; transition: opacity 160ms ease, transform 160ms ease; }
.lang-menu__opt {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px;
  font-size: 14px; font-weight: 500; color: var(--color-charcoal-light, #4A4540);
  border-radius: 5px; cursor: pointer; white-space: nowrap; transition: background 120ms ease;
}
.lang-menu__opt:hover { background: var(--color-cream, #D6CFC6); }
.lang-menu__opt.is-active { color: var(--color-charcoal, #211E1A); font-weight: 700; }
.lang-menu__opt.is-active::after { content: "\2713"; margin-left: auto; padding-left: 14px; color: var(--color-gold, #9E763C); }

/* Top nav: sits just before Investor Login. On phones it lives in the overlay + footer. */
.site-nav__inner > .lang-menu { margin-left: auto; margin-right: -4px; }
@media (min-width: 900px) { .site-nav__inner > .lang-menu { margin-left: 0; margin-right: 0; } }
@media (max-width: 560px) { .site-nav__inner > .lang-menu { display: none; } }

/* Mobile overlay */
.lang-menu--overlay { margin-top: var(--space-4, 16px); }
.lang-menu--overlay .lang-menu__btn { font-size: 15px; }
.lang-menu--overlay .lang-menu__list { left: 50%; right: auto; transform: translate(-50%, -6px); }
.lang-menu--overlay.open .lang-menu__list { transform: translate(-50%, 0); }

/* Footer: dark ground, list opens upward */
.lang-menu--footer .lang-menu__btn { color: rgba(255,255,255,0.62); }
.lang-menu--footer .lang-menu__btn:hover, .lang-menu--footer.open .lang-menu__btn { color: #fff; }
.lang-menu--footer .lang-menu__list { top: auto; bottom: calc(100% + 8px); right: auto; left: 0; transform: translateY(6px); }
.lang-menu--footer.open .lang-menu__list { transform: none; }
.site-footer__bottom { flex-wrap: wrap; gap: var(--space-4, 16px); }

/* ---- Legal "English governs" notice (translated legal pages only) ------- */
.legal-i18n-notice {
  background: var(--color-gold-subtle, #EDE3D4); border-left: 3px solid var(--color-gold, #9E763C);
  padding: 12px 16px; margin: 0 0 32px; font-size: 13.5px; line-height: 1.6;
  color: var(--color-charcoal-light, #4A4540); border-radius: 4px;
}

/* ==========================================================================
   TRANSLATION-SAFE RULES: any non-English language
   ========================================================================== */
.i18n-translated .btn { height: auto; line-height: 1.25; text-align: center; }
.site-nav__inner > .btn { white-space: nowrap; flex-shrink: 0; }
.i18n-translated .site-nav__links { gap: 22px; }
.i18n-translated .site-nav__links .nav-link { white-space: nowrap; }
/* Longer labels (German, Ukrainian, French) overflow the desktop nav between 900 and ~1120px,
   so translated pages switch to the hamburger a little earlier. English is untouched. */
@media (max-width: 1119px) {
  html.i18n-translated .site-nav__links { display: none; }
  html.i18n-translated .nav-hamburger { display: flex; }
}
.i18n-translated h1, .i18n-translated h2, .i18n-translated h3, .i18n-translated h4 { overflow-wrap: break-word; }
.i18n-translated .eyebrow, .i18n-translated .tagline { white-space: normal; overflow-wrap: break-word; }
.lang-de h1, .lang-de h2, .lang-de h3, .lang-de .bz__h1 { hyphens: auto; word-break: break-word; }

/* ==========================================================================
   TYPE STACKS: scripts Anton / Figtree do not cover.
   The html tag carries inline --font-* values, so these need !important.
   ========================================================================== */
html.lang-uk { --font-display: 'Oswald', 'Noto Sans', Impact, sans-serif !important; --font-body: 'Noto Sans', system-ui, sans-serif !important; }
html.lang-ko { --font-display: 'Noto Sans KR', 'Malgun Gothic', sans-serif !important; --font-body: 'Noto Sans KR', 'Malgun Gothic', sans-serif !important; --font-eyebrow: 'Noto Sans KR', 'Roboto Mono', monospace !important; }
html.lang-ja { --font-display: 'Noto Sans JP', 'Yu Gothic', Meiryo, sans-serif !important; --font-body: 'Noto Sans JP', 'Yu Gothic', Meiryo, sans-serif !important; --font-eyebrow: 'Noto Sans JP', 'Roboto Mono', monospace !important; }
html.lang-ar { --font-display: 'Noto Sans Arabic', Tahoma, sans-serif !important; --font-body: 'Noto Sans Arabic', Tahoma, sans-serif !important; --font-eyebrow: 'Noto Sans Arabic', Tahoma, sans-serif !important; }

/* Display weight: Anton is one heavy weight; the fallbacks need it asked for. */
html.lang-uk h1, html.lang-uk h2, html.lang-uk h3, html.lang-uk .bz__h1 { font-weight: 600; text-transform: none; }
html.lang-ko h1, html.lang-ko h2, html.lang-ko h3, html.lang-ko .bz__h1,
html.lang-ja h1, html.lang-ja h2, html.lang-ja h3, html.lang-ja .bz__h1 { font-weight: 800; line-height: 1.28 !important; letter-spacing: 0 !important; word-break: keep-all; overflow-wrap: anywhere; }
html.lang-ar h1, html.lang-ar h2, html.lang-ar h3, html.lang-ar .bz__h1 { font-weight: 800; line-height: 1.4 !important; }
html.lang-ja h1, html.lang-ja h2, html.lang-ja h3, html.lang-ja p, html.lang-ja li { word-break: auto-phrase; line-break: strict; overflow-wrap: break-word; }

/* Inline SVG diagrams set Latin font stacks on <text>; use the language stack instead. */
html.lang-uk svg text, html.lang-ko svg text, html.lang-ja svg text, html.lang-ar svg text { font-family: var(--font-body) !important; letter-spacing: 0 !important; }

/* Arabic letters join: any letter-spacing breaks the script. Mono caps labels
   are Latin-only styling, so drop the case and tracking in CJK / Arabic too. */
html.lang-ar *, html.lang-ar *::before, html.lang-ar *::after { letter-spacing: 0 !important; }
html.lang-ko .eyebrow, html.lang-ja .eyebrow, html.lang-ar .eyebrow,
html.lang-ko .tagline, html.lang-ja .tagline, html.lang-ar .tagline { text-transform: none; letter-spacing: 0.02em; }
html.lang-ko body, html.lang-ja body { line-height: 1.75; }
html.lang-ar body { line-height: 1.85; }

/* ==========================================================================
   RTL (Arabic)
   ========================================================================== */
[dir="rtl"] .lang-menu__list { right: auto; left: 0; }
[dir="rtl"] .lang-menu__opt.is-active::after { margin-left: 0; margin-right: auto; padding-left: 0; padding-right: 14px; }
[dir="rtl"] .lang-menu--footer .lang-menu__list { left: auto; right: 0; }
[dir="rtl"] .site-nav__links .nav-contact { margin-left: 0; margin-right: auto; }
[dir="rtl"] .legal-i18n-notice { border-left: 0; border-right: 3px solid var(--color-gold, #9E763C); }
[dir="rtl"] .footer-brand__desc, [dir="rtl"] .footer-col { text-align: right; }