/* Language menu in the nav of every page (lang.js saves the choice). A
   <details> disclosure with plain links: it works without JavaScript and the
   links are what crawlers follow. Same tokens as the site. Logical properties
   (inline-start/end) so it sits right in Arabic too. */
.lang-menu { position: relative; }
.nav .lang-menu.spacer { margin-left: 0; margin-inline-start: auto; }
.lang-menu > summary {
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 6px 12px;
  border: 1.4px solid #131211;
  border-radius: 999px;
  background: #fff;
  color: #131211;
  cursor: pointer;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  user-select: none;
  -webkit-user-select: none;
}
.lang-menu > summary::-webkit-details-marker { display: none; }
.lang-menu > summary svg { flex: none; }
.lang-menu > summary .lang-caret { font-size: 9px; }
.lang-menu[open] > summary { box-shadow: 2px 2px 0 #131211; }
.lang-menu > summary:focus-visible,
.lang-menu a:focus-visible { outline: 3px solid #6c3bff; outline-offset: 2px; }
.lang-menu ul {
  position: absolute;
  top: calc(100% + 8px);
  inset-inline-end: 0;
  z-index: 30;
  min-width: 190px;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: #fff;
  border: 1.4px solid #131211;
  border-radius: 14px;
  box-shadow: 3.5px 3.5px 0 #131211;
}
/* li in the selectors: beats `.nav a:not(.brand)` of site.css/legal.css,
   which load after this file. */
.nav .lang-menu li a,
.lang-menu li a {
  display: block;
  padding: 9px 12px;
  border-radius: 9px;
  color: #131211;
  text-decoration: none;
  font-family: -apple-system, system-ui, "Segoe UI", sans-serif;
  font-size: 15px;
  text-transform: none;
  letter-spacing: 0;
}
.nav .lang-menu li a:hover, .lang-menu li a:hover { background: #f7f3eb; color: #131211; }
.lang-menu a[aria-current="true"] { font-weight: 800; }
.lang-menu a[aria-current="true"]::after { content: " ✓"; color: #6c3bff; }

/* Arabic pages: the nav spacer and lists that used physical sides. */
[dir="rtl"] .nav .spacer { margin-left: 0; margin-right: auto; }
[dir="rtl"] main.legal-card ul,
[dir="rtl"] main.legal-card ol { padding-left: 0; padding-right: 22px; }
[dir="rtl"] .hero::before { left: auto; right: -140px; }
/* The marquee slides with translateX; keep its track left-to-right so the loop
   has no gap (each pill's text is still Arabic). */
[dir="rtl"] .marquee { direction: ltr; }
[dir="rtl"] .marquee .world { direction: rtl; }
/* The wordmark "BLAB." keeps its dot on the right in Arabic. */
[dir="rtl"] .brand { direction: ltr; unicode-bidi: isolate; }
[dir="rtl"] .logo { direction: ltr; text-align: right; }