/* ─────────────────────────────────────────────────────────────────────────────
   Arabic (RTL) layer — loaded ONLY on /ar/ pages by render-page-variants.mjs.
   It never ships on the French/LTR build, so it cannot cause a regression there.

   Two jobs:
     1. Premium Arabic typography (IBM Plex Sans Arabic, self-hosted woff2 with
        unicode-range so Latin pages never download it).
     2. Mirror READING DIRECTION only. Images, logos, icons, brand marks and
        decorative botanicals are explicitly NOT mirrored.

   Everything keys off [dir="rtl"], and prefers logical properties so the
   existing LTR rules stay untouched.
   ───────────────────────────────────────────────────────────────────────────── */

/* ── 1. Arabic typeface ──────────────────────────────────────────────────── */
@font-face {
  font-family: "IBMPlexSansArabic";
  src: url("/assets/fonts/IBMPlexSansArabic-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1,
    U+08E3-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200E, U+2010-2011, U+204F,
    U+2E41, U+FD3E-FD3F, U+FDFD;
}
@font-face {
  font-family: "IBMPlexSansArabic";
  src: url("/assets/fonts/IBMPlexSansArabic-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1,
    U+08E3-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200E, U+2010-2011, U+204F,
    U+2E41, U+FD3E-FD3F, U+FDFD;
}
@font-face {
  font-family: "IBMPlexSansArabic";
  src: url("/assets/fonts/IBMPlexSansArabic-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1,
    U+08E3-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200E, U+2010-2011, U+204F,
    U+2E41, U+FD3E-FD3F, U+FDFD;
}

/* Prepend the Arabic face to every family the site uses. The Latin faces stay
   in the stack (unicode-range keeps each script on its own font), so brand
   names and numerals still render in the original brand typography. */
[dir="rtl"] body,
[dir="rtl"] input,
[dir="rtl"] textarea,
[dir="rtl"] button,
[dir="rtl"] select {
  font-family: "IBMPlexSansArabic", "InterTight", "Geist", ui-sans-serif, system-ui, sans-serif;
}

/* Display/serif headings: Instrument Serif and Halant have no Arabic coverage,
   so Arabic headings use the Plex Arabic 500/700 — visually close in weight and
   tone to the French display face. */
[dir="rtl"] h1,
[dir="rtl"] h2,
[dir="rtl"] h3,
[dir="rtl"] h4,
[dir="rtl"] .font-display,
[dir="rtl"] .products-title,
[dir="rtl"] .hero-title {
  font-family: "IBMPlexSansArabic", "InstrumentSerif", "Halant", Georgia, serif;
  font-weight: 500;
  letter-spacing: 0; /* the Latin display faces use negative tracking; Arabic must not */
}

/* Arabic needs a little more line-height for its ascenders/descenders */
[dir="rtl"] body { line-height: 1.75; }

/* ── 2. Direction & alignment ────────────────────────────────────────────── */
[dir="rtl"] body { text-align: right; }

/* Flex/grid rows that were authored left-to-right */
[dir="rtl"] .flex-row { flex-direction: row-reverse; }
[dir="rtl"] .text-left { text-align: right; }
[dir="rtl"] .text-right { text-align: left; }

/* Lists and quotes */
[dir="rtl"] ul,
[dir="rtl"] ol { padding-right: 1.4em; padding-left: 0; }
[dir="rtl"] blockquote { border-right: 3px solid currentColor; border-left: 0; padding-right: 1em; padding-left: 0; }

/* Tables (tarifs) */
[dir="rtl"] th,
[dir="rtl"] td { text-align: right; }

/* ── 3. Things that must NOT mirror ──────────────────────────────────────── */
/* Media and brand marks keep their natural orientation. */
[dir="rtl"] img,
[dir="rtl"] svg,
[dir="rtl"] video,
[dir="rtl"] picture,
[dir="rtl"] canvas,
[dir="rtl"] .az-fab,
[dir="rtl"] [class*="botanical"],
[dir="rtl"] [class*="logo"] {
  transform: none;
}

/* Latin-script data must stay LTR even inside Arabic text: phone numbers,
   emails, URLs, prices and the practice name. Without this, "+212 5 37 …"
   renders with its parts reordered and becomes wrong to dial. */
[dir="rtl"] a[href^="tel:"],
[dir="rtl"] a[href^="mailto:"],
[dir="rtl"] a[href^="http"],
[dir="rtl"] .ltr,
[dir="rtl"] time,
[dir="rtl"] [data-ltr] {
  direction: ltr;
  unicode-bidi: isolate;
  display: inline-block;
}

/* Numerals: keep Western digits (the practice's phone/prices are advertised
   that way offline). Do not switch to Eastern Arabic numerals. */
[dir="rtl"] { font-variant-numeric: lining-nums; }

/* ── 4. Scroll/anchor niceties ───────────────────────────────────────────── */
[dir="rtl"] .overflow-x-auto,
[dir="rtl"] .overflow-x-scroll { direction: rtl; }

/* Reading-progress and any left-anchored decorations flip side */
[dir="rtl"] .reading-progress { left: auto; right: 0; }