/* Languages: the FR / EN / ع switcher, and what Arabic text needs. Kept apart from style.css so the two can
   change independently. Bump ?v= in src/layouts/Base.astro on every change (same cache rule as style.css). */

/* Switcher: a small pill next to the contact button, on every screen size */
.langs{display:flex;gap:2px;padding:4px;border-radius:999px;font-size:.82rem;font-weight:600;
  background:color-mix(in srgb,var(--card) 82%,transparent);box-shadow:var(--sh);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.langs a{display:block;min-width:2.2em;text-align:center;padding:.38em .6em;border-radius:999px;text-decoration:none;color:var(--ink-2);transition:background .2s,color .2s}
.langs a:hover{background:var(--y-wash);color:var(--ink)}
.langs a[aria-current]{background:var(--ink);color:#fff}
.nav-in .langs{margin-inline-start:auto}
.nav-in .langs + .btn{margin-inline-start:8px}
@media (max-width:420px){.langs{font-size:.76rem}.langs a{min-width:1.9em;padding:.34em .45em}}

/* Arabic: Latin words (Butter, Google, WhatsApp) stay in Space Grotesk, Arabic letters use IBM Plex Sans Arabic.
   No negative letter-spacing (it breaks the joined letters) and a little more line height. */
:root[lang="ar"]{
  --sans:"Space Grotesk","IBM Plex Sans Arabic",system-ui,-apple-system,"Segoe UI",Tahoma,sans-serif;
  --hand:"IBM Plex Sans Arabic","Kalam",system-ui,sans-serif;
}
:root[lang="ar"] body{line-height:1.75}
:root[lang="ar"] body *{letter-spacing:0!important}
:root[lang="ar"] :is(h1,h2,h3,h4){line-height:1.3}
:root[lang="ar"] .hand{font-weight:700}

/* Arabic pages keep the same left-to-right layout as French and English (owner decision: only the language changes,
   never the structure). Each block of text picks its own direction from its first letter, so Arabic sentences read
   right to left with punctuation in the right place, and Latin-only text (prices, Butter, numbers) stays as is. */
:root[lang="ar"] :is(p,h1,h2,h3,h4,li,dt,dd,summary,label,legend,blockquote,figcaption,td,th,small,input,textarea,select,.btn span){unicode-bidi:plaintext}
/* Text sits on the same side as in French (left) unless a class centres it */
:root[lang="ar"] body{text-align:left}
/* Headings animated word by word: each word is its own box, which carries no direction, so set it */
:root[lang="ar"] [data-split][data-split]{direction:rtl;unicode-bidi:isolate}
/* Breadcrumb separators are drawn before each item, so keep each item left to right */
:root[lang="ar"] .crumbs ol li{unicode-bidi:isolate}
.langs a[lang="ar"]{font-family:"IBM Plex Sans Arabic",var(--sans);font-size:1.08em;line-height:1.2}