/* ============ i18n: language switcher, no-flash gate, RTL ============ */

/* Hide content until the chosen non-English language is applied (prevents a flash of English). */
html.i18n-busy body { visibility: hidden; }

/* ---- language switcher (header) ---- */
.lang-switch { position: relative; display: inline-flex; }
.lang-btn {
  height: 34px; display: inline-flex; align-items: center; gap: 6px;
  padding: 0 11px; border: 1px solid var(--border); border-radius: 9999px;
  background: transparent; color: var(--text2); cursor: pointer;
  transition: color .2s, background .2s, border-color .2s;
}
.lang-btn:hover { color: var(--text); background: var(--surface); }
.lang-cur { font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: .1em; }
.lang-btn svg { opacity: .55; transition: transform .25s ease; }
.lang-switch.open .lang-btn svg { transform: rotate(180deg); }

.lang-menu {
  position: absolute; top: calc(100% + 8px); right: 0; min-width: 168px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  padding: 6px; display: none; flex-direction: column; gap: 2px; z-index: 80;
  box-shadow: 0 12px 40px rgba(0,0,0,.28), var(--shadow-card);
}
.lang-switch.open .lang-menu { display: flex; }
.lang-opt {
  display: flex; align-items: center; gap: 11px; width: 100%;
  padding: 9px 10px; border: 0; border-radius: 8px; background: transparent;
  color: var(--text2); cursor: pointer; font-family: inherit; font-size: 14px;
  text-align: left; transition: color .15s, background .15s;
}
.lang-opt:hover { background: color-mix(in srgb, var(--text) 7%, transparent); color: var(--text); }
.lang-opt i { font-family: "JetBrains Mono", monospace; font-style: normal; font-size: 10px; letter-spacing: .1em; color: var(--text3); width: 22px; flex: none; }
.lang-opt.on { color: var(--text); }
.lang-opt.on i { color: var(--accent); }

/* ---- RTL (Arabic) ---- */
html.rtl .lang-menu { right: auto; left: 0; }
html.rtl .lang-opt { text-align: right; }
html.rtl .site-nav a { flex-direction: row-reverse; }
html.rtl .hero h1 .indent { padding-left: 0; padding-right: clamp(34px, 9vw, 160px); }
/* arrows point the reading direction */
html.rtl .arr { display: inline-block; transform: scaleX(-1); }
html.rtl .btn:hover .arr { transform: scaleX(-1) translateX(5px); }
/* keep the latin/mono data bits and the roadmap timeline left-to-right inside an RTL page */
html.rtl .mono,
html.rtl .data-strip .wrap,
html.rtl .rm,
html.rtl .cs-tags,
html.rtl .proj-tags,
html.rtl .dims { direction: ltr; }
html.rtl .data-strip .cell,
html.rtl .dim,
html.rtl .inv-row p { text-align: right; }
html.rtl .reel-use,
html.rtl .form-note,
html.rtl .reassure li { text-align: right; }
/* Arabic reads more comfortably a touch larger / looser */
html[lang="ar"] body { font-size: 16.5px; line-height: 1.8; }
html[lang="ar"] .sub { letter-spacing: 0; }

/* German has long compounds ("ausgeliefert") — tame the giant hero a notch so it never overflows */
html[lang="de"] .hero h1 { font-size: clamp(44px, 12.5vw, 178px); }