/* ============================================================
   RTL support for the Arabic version of gsl.marketing
   Loaded ONLY on /ar/ pages, after gsl-effects.css.
   The v3 components in gsl-v2.css use logical properties
   (margin-inline, inset-inline-*, padding-inline-*, text-align:start),
   so they mirror on their own. This file only carries what logical
   properties cannot express: the font, arrows, transforms, letter-
   spacing, and a couple of overrides for legacy style.css rules.
   ============================================================ */

/* ---- font: Cairo everywhere (headings and buttons read var(--gsl-font)) */
html[dir="rtl"] {
  --gsl-font: "Readex Pro", "Cairo", system-ui, -apple-system, "Segoe UI", Tahoma, Arial, sans-serif;
  --gsl-font-display: var(--gsl-font);
  --gsl-font-accent: var(--gsl-font);
}
/* Arabic display type: one family, heavier, open leading, never italic */
html[dir="rtl"] :is(h1, h2, .home-hero__title, .page-head__title, .cta-band__title) { font-weight: 700; line-height: 1.25; }
html[dir="rtl"] :is(h1, h2) em,
html[dir="rtl"] .home-hero__title em { font-family: inherit; font-style: normal; font-weight: 700; font-size: 1em; }
html[dir="rtl"] .receipt__foot { font-style: normal; font-weight: 600; font-size: 1.25rem; }
html[dir="rtl"] .client-note__quote { font-style: normal; }
html[dir="rtl"] body {
  direction: rtl;
  text-align: start;
  font-family: var(--gsl-font);
}
/* Latin tracking breaks Arabic letter joining — reset it everywhere */
html[dir="rtl"] *,
html[dir="rtl"] *::before,
html[dir="rtl"] *::after { letter-spacing: 0 !important; }
/* Arabic needs more leading than Latin display type */
html[dir="rtl"] h3 { line-height: 1.3; }

/* ---- eyebrows & micro-labels: no uppercase, no tracking in Arabic */
html[dir="rtl"] :is(.gsl-eyebrow, .client-names__label, .founder-card__label, .summary-card__label,
  .side-nav__title, .site-footer__title, .site-header__drawer__heading, .facts dt, .cat, .head-portrait__langs span) {
  text-transform: none;
}

/* ---- things that stay LTR inside RTL pages */
html[dir="rtl"] :is(.site-header__logo, .site-footer__logo, a[href^="tel:"], a[href^="mailto:"], .ltr, .browser-frame__url) {
  direction: ltr;
  unicode-bidi: isolate;
}
html[dir="rtl"] a[href^="tel:"] { display: inline-block; }
/* LTR runs inside RTL rows: keep them next to their icon / label (the
   inline-start side in RTL is the right), not pushed to the far left */
html[dir="rtl"] :is(a[href^="tel:"], a[href^="mailto:"]) { text-align: right; }

/* ---- client-name list: each <li> is dir="ltr" (French names), so its
   ::after dot lands on the li's RIGHT — in an RTL row that is the side
   facing the previous item only for items 2..n. Move the separator from
   "after every item but the last" to "after every item but the first". */
html[dir="rtl"] .client-names__list li:not(:last-child)::after { content: none; }
html[dir="rtl"] .client-names__list li:not(:first-child)::after {
  content: "\00B7"; margin-inline: 12px; color: var(--gsl-accent); font-weight: 700;
}

/* ---- arrows point the reading way */
html[dir="rtl"] .link-arrow::after,
html[dir="rtl"] .side-nav a::after { content: "\2190"; }
html[dir="rtl"] .link-arrow--out::after { content: "\2196"; }
html[dir="rtl"] a.link-arrow:hover::after,
html[dir="rtl"] a.link-arrow:focus-visible::after,
html[dir="rtl"] :is(.offer-card, .work-card):hover .link-arrow::after,
html[dir="rtl"] .side-nav a:is(:hover, :focus-visible)::after { transform: translateX(-3px); }
html[dir="rtl"] .side-nav a[aria-current="page"]::after { content: "\2022"; }

/* ---- drawer slides in from the left (inline-end in RTL) */
html[dir="rtl"] .site-header__drawer__panel { transform: translateX(-100%); }
html[dir="rtl"] .site-header__drawer.is-open .site-header__drawer__panel { transform: none; }

/* ---- page-head zellige backdrop + CTA glow sit on the inline-end side */
@media (min-width: 992px) {
  html[dir="rtl"] .page-head--aside::before {
    -webkit-mask-image: radial-gradient(75% 85% at 0% 50%, #000 15%, transparent 75%);
            mask-image: radial-gradient(75% 85% at 0% 50%, #000 15%, transparent 75%);
  }
}
html[dir="rtl"] .home-hero::before {
  background: radial-gradient(60rem 30rem at 15% 10%, rgba(201, 164, 74, .14), transparent 60%);
}
html[dir="rtl"] .cta-band::before {
  background:
    radial-gradient(40rem 20rem at 0% 0%, rgba(201, 164, 74, .18), transparent 60%),
    var(--gsl-grain-soft);
  background-size: auto, 180px 180px;
}
html[dir="rtl"] .cta-band::after {
  -webkit-mask-image: radial-gradient(80% 90% at 0% 30%, #000 10%, transparent 72%);
          mask-image: radial-gradient(80% 90% at 0% 30%, #000 10%, transparent 72%);
}
/* receipt + head frames + nav underline mirror */
html[dir="rtl"] .receipt { transform: rotate(1.5deg); }
html[dir="rtl"] .head-frames .browser-frame:nth-child(1) { transform: rotate(-2deg); }
html[dir="rtl"] .head-frames .browser-frame:nth-child(2) { transform: rotate(3deg); }
html[dir="rtl"] .site-header__nav > ul > li > a::after,
html[dir="rtl"] .step::before { transform-origin: right center; }
/* marquee mask is symmetric; brand names stay LTR inside RTL rows */
html[dir="rtl"] :is(.logo-wall__name, .platform-pill span, .hero-live-tag b) { unicode-bidi: isolate; }
/* mirror the screenshot stack's tilt */
@media (min-width: 992px) {
  html[dir="rtl"] .home-hero__stack .browser-frame:nth-child(1) { transform: rotate(-3deg); }
  html[dir="rtl"] .home-hero__stack .browser-frame:nth-child(2) { transform: rotate(4deg); }
  html[dir="rtl"] .home-hero__stack .browser-frame:nth-child(3) { transform: rotate(-1.5deg); }
}
/* the reveal/hover nudges are vertical — nothing to mirror */

/* chatbot + floats: WhatsApp float uses inset-inline-end (mirrors to the
   left), so the chatbot moves to the right to avoid a collision */
html[dir="rtl"] chatbot-widget { right: 20px !important; left: auto !important; }
/* scroll-to-top: legacy style.css sets right:20px + margin:0 auto; with
   inset-inline-end resolving to left in RTL, both insets were set and the
   button centred itself on the page. Drop the physical one. */
html[dir="rtl"] .scroll-to-top { right: auto; margin: 0; }

/* ---- round 2: Arabic hero sizing (Readex Pro 700 sets wider than Latin display) */
html[dir="rtl"] .home-hero__title { font-size: clamp(2.2rem, 1.2rem + 3.6vw, 3.75rem); }
html[dir="rtl"] .page-head__title { font-size: clamp(2rem, 1.4rem + 2.2vw, 3rem); }