/* Arabic page only. Loaded from /ar/index.html before motion.css. */

:root {
  --ar-font: "IBM Plex Sans Arabic", "Noto Naskh Arabic", "Geeza Pro", Tahoma, sans-serif;
}

/* The page sets its font per element through inline custom properties, so the
   override has to be !important to win against them. */
html[lang="ar"] body,
html[lang="ar"] .framer-text,
html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3,
html[lang="ar"] h4, html[lang="ar"] h5, html[lang="ar"] h6,
html[lang="ar"] p, html[lang="ar"] a, html[lang="ar"] div, html[lang="ar"] span {
  font-family: var(--ar-font) !important;
  --framer-font-family: var(--ar-font) !important;
  --framer-link-font-family: var(--ar-font) !important;
}

/* Arabic letters join; tracking pulls them apart and makes words unreadable. */
html[lang="ar"] * {
  letter-spacing: normal !important;
  --framer-letter-spacing: normal !important;
}

/* Arabic ascenders and descenders need more room than the Latin design allows. */
html[lang="ar"] p.framer-text,
html[lang="ar"] h5.framer-text,
html[lang="ar"] h6.framer-text {
  line-height: 1.7 !important;
}

/* Latin runs inside right-to-left text: phone numbers, Google, the address
   house number. Keep them reading left-to-right and correctly punctuated. */
html[lang="ar"] a[href^="tel:"],
html[lang="ar"] a[href^="https://wa.me"] {
  direction: ltr;
  unicode-bidi: isolate;
}

/* The switcher uses logical properties, so it needs no mirroring — but the
   Arabic label should sit at the same optical size as FR / EN. */
html[lang="ar"] .i18n-lang[lang="ar"] .i18n-code,
html[lang="ar"] .i18n-current { font-size: 1.15em; }

/* Section fixes found during visual verification (Task 12) go below. */

/* Hero background photograph. Framer centers it with the classic
   `left: 50%; transform: translate(-50%)` trick (box starts with its left
   edge at the midpoint, then is pulled back by half its own width). rtl.mjs
   mirrors `left` to `right` (correctly, in general) but deliberately leaves
   `transform: translate()` alone since elsewhere it drives scroll-linked
   motion, not layout. Here the same declaration IS layout: with `right: 50%`
   and an unflipped `translate(-50%)`, the box's right edge starts at the
   midpoint and then gets pulled another half-width to the left, landing
   almost entirely off-screen (this made the whole photo disappear behind
   the solid black page background). Flipping the sign of the translate
   compensates and lands the image at the correctly mirrored position for
   every breakpoint (the rule's left/top/width vary by breakpoint but the
   transform is only ever declared once, so one override covers them all).

   `transform` is a single property, not a shorthand with independent parts:
   an `!important` rule here that only names the centering (`translate(50%)`)
   wins the whole property against assets/motion.css's own `!important` rule
   on the same element and silently drops that rule's `scale(1.06)` and
   scroll-linked `translate3d(0, var(--m-parallax), 0)` too, leaving the
   Arabic hero static and 6% smaller than the French one. So this override
   must restate the complete transform — scale and parallax translate
   included, copied verbatim from motion.css's .framer-snsgll rule — with
   only the centering term's sign flipped for the mirrored layout. */
html[lang="ar"] .framer-snsgll {
  transform: translateX(50%) translate3d(0, calc(var(--m-parallax, 0) * 1px), 0) scale(1.06) !important;
}

/* motion.css also strips the parallax/scale down to just the centering term
   for visitors who ask for reduced motion. Because the normal-state override
   above has higher specificity than BOTH of motion.css's rules (not just the
   one it targets), it would otherwise keep winning here too and give Arabic
   visitors motion that French/English visitors with the same preference
   correctly don't get. Mirror motion.css's reduced-motion rule the same way:
   same specificity relationship, only the centering term's sign flipped. */
@media (prefers-reduced-motion: reduce){
  html[lang="ar"] .framer-snsgll { transform: translateX(50%) !important; }
}