/* plantora.info — language toggle button + the RTL corrections the main
 * stylesheet needs once <html dir="rtl"> is set (2026-09-17).
 *
 * Loaded after site.css / the per-page <style> block, so these rules win
 * without any !important.
 */

/* ---------- the EN / AR button ---------- */

/* Sits where "Get notified" sits relative to the nav links: at the end of
   the bar, next to the CTA. Styled as a quiet glass pill so it reads as
   chrome rather than competing with the mint CTA. */
.lang-switch { display: inline-flex; align-items: center; }

.lang-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 42px;
  padding: 9px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .22);
  background: rgba(255, 255, 255, .10);
  color: rgba(255, 255, 255, .92);
  font: inherit;
  font-weight: 700;
  font-size: .95rem;
  letter-spacing: .02em;
  cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.lang-btn:hover { background: rgba(255, 255, 255, .18); color: #fff; }
.lang-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.lang-btn__label { line-height: 1; }
.lang-btn__caret { flex: none; opacity: .8; }

/* The caret always points down (it opens a choice), so it must NOT mirror
   with the rest of the layout the way a chevron would. */
[dir="rtl"] .lang-btn__caret { transform: none; }

/* On narrow screens the nav links are hidden (see site.css's 860px query);
   the language button stays — it is the one control with no other home. */
@media (max-width: 520px) {
  .lang-btn { padding: 9px 11px; font-size: .9rem; }
}

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

/* The page's own font stack is Nunito, which has no Arabic coverage — the
   browser would fall back to whatever default it has, usually a mismatched
   serif. Name the faces that actually ship on the platforms this site is
   read on, and keep Nunito at the front for the Latin runs (brand name,
   "EN"/"AR", email addresses) that remain inside Arabic text. */
[lang="ar"] body,
[lang="ar"] .lang-btn {
  font-family: 'Nunito', 'Noto Naskh Arabic', 'Geeza Pro', 'Segoe UI',
    Tahoma, system-ui, sans-serif;
}

/* Arabic has no letter case, and `text-transform: uppercase` on an Arabic
   run is a no-op that still widens tracking oddly. */
[dir="rtl"] .eyebrow,
[dir="rtl"] .kicker,
[dir="rtl"] [style*="text-transform"] {
  letter-spacing: normal;
}

/* Anything the stylesheet aligns to a physical side. `start`/`end` resolve
   against the ambient direction, so these are direction-correct in both. */
[dir="rtl"] .nav,
[dir="rtl"] .nav-links { direction: rtl; }

/* Latin-only runs inside an Arabic paragraph — a version string, an email
   address, a URL — get reordered by the bidi algorithm. Mark them LTR. */
[dir="rtl"] code,
[dir="rtl"] .ltr,
[dir="rtl"] a[href^="mailto:"],
[dir="rtl"] a[href^="tel:"] { direction: ltr; unicode-bidi: isolate; }

/* ---------- Arabic-only content ---------- */

/* A translated legal page needs to say which version governs. The note is
   authored directly in Arabic (and carries data-i18n-skip so the swapper
   leaves it alone), so it is hidden entirely while the page is English. */
.ar-only { display: none; }
[lang="ar"] .ar-only { display: block; }