/* i18n.css — language dropdown + RTL support layer.
   Loaded after styles.css. Self-contained: adds no dependency on product CSS
   beyond the existing design tokens (--fg, --dim, --elev, --hair-2, --nav-bg). */

/* ---------- Language dropdown ---------- */

.nav__lang--select {
  padding: 0;
  border: 0;
  height: auto;
}

.langsel {
  position: relative;
  display: inline-block;
}

.langsel__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 10px;
  border: 1px solid var(--hair-2);
  border-radius: 8px;
  color: var(--dim);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  line-height: 1;
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
}

.langsel__btn::-webkit-details-marker { display: none; }
.langsel__btn::marker { content: ""; }

.langsel__btn:hover { color: var(--fg); }
.langsel__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.langsel[open] .langsel__btn { color: var(--fg); border-color: var(--fg); }

.langsel__globe { width: 13px; height: 13px; flex: none; opacity: 0.8; }
.langsel__chev  { width: 9px;  height: 9px;  flex: none; transition: transform 0.15s; }
.langsel[open] .langsel__chev { transform: rotate(180deg); }

.langsel__menu {
  position: absolute;
  inset-inline-end: 0;
  top: calc(100% + 6px);
  z-index: 60;
  min-width: 176px;
  margin: 0;
  padding: 4px;
  list-style: none;
  background: var(--elev);
  border: 1px solid var(--hair-2);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.42);
}

.langsel__opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  height: 32px;
  padding: 0 10px;
  border-radius: 6px;
  color: var(--dim);
  font-size: 13px;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.15s, background 0.15s;
}

.langsel__opt:hover { color: var(--fg); background: var(--elev-2); }

.langsel__opt--active {
  color: var(--fg);
  background: var(--elev-2);
  cursor: default;
  pointer-events: none;
}

.langsel__name { font-size: 13px; }

.langsel__code {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--faint);
}

.langsel__opt--active .langsel__code { color: var(--dim); }

@media (max-width: 640px) {
  .langsel__btn { padding: 0 8px; }
  .langsel__btn .langsel__label { display: none; }
}

/* The site header sits at z-index 1 and <main> at z-index 1 too, so main wins
   on paint order. Lift the header only while the menu is open — leaving the
   base z-index alone keeps every other overlay behaving as before. */
.nav:has(.langsel[open]),
.nav.nav--langopen { z-index: 90; }

/* ---------- RTL ---------- */

/* .langsel__menu is pinned with inset-inline-end, which already mirrors by
   itself. An explicit [dir="rtl"] override flips it a second time and hangs
   the menu off the left edge of the viewport. */

/* Direction-aware icons: chevrons, arrows, carets flip with the reading
   direction. Decorative marks (logo dot, status dots) must not. */
[dir="rtl"] .icon--dir,
[dir="rtl"] .btn__arrow,
[dir="rtl"] .card__arrow,
[dir="rtl"] .link-arrow { transform: scaleX(-1); }

/* Latin brand strings inside Arabic text keep their own direction. */
bdi { unicode-bidi: isolate; }

/* ---------- Arabic typography ----------
   Geist and Archivo Black carry no Arabic block. IBM Plex Sans Arabic is the
   nearest neutral grotesque, so the Arabic locale keeps the same voice.
   Latin runs inside Arabic text still resolve to Geist via the fallback list. */

html[lang="ar"] {
  --sans: "IBM Plex Sans Arabic", "Geist", "Segoe UI", Tahoma, sans-serif;
  --grotesk: "IBM Plex Sans Arabic", "Geist", "Segoe UI", Tahoma, sans-serif;
  --mono: "IBM Plex Sans Arabic", "JetBrains Mono", ui-monospace, monospace;
}

/* Arabic runs longer than English at the same point size; the hero clamp is
   tuned for Latin caps height and overflows two lines otherwise. */
html[lang="ar"] {
  --fs-hero: clamp(34px, 5.4vw, 60px);
  --fs-section: clamp(26px, 3.4vw, 42px);
}

html[lang="ar"] body { line-height: 1.7; letter-spacing: 0; }
html[lang="ar"] .langsel__code,
html[lang="ar"] code,
html[lang="ar"] pre { font-family: "JetBrains Mono", ui-monospace, monospace; }