/* ============================================================================
   GEC — Arabic / right-to-left layer (spec §4.2)

   Loaded only on /ar pages, after every other sheet. Most of the layout already
   mirrors itself because it is built on flex, grid and logical properties; what
   remains here is the type stack, the handful of physical offsets, and the
   directional ornaments.
   ========================================================================= */

:root[dir="rtl"] {
  --font-display: "Amiri", "Times New Roman", serif;
  --font-body: "IBM Plex Sans Arabic", -apple-system, "Segoe UI", sans-serif;

  /* Arabic sits smaller on the line than Latin at the same point size, and its
     ascenders/descenders need more room, so the scale is nudged and leading
     opened up. */
  --fs-hero:    clamp(2.5rem, 6.2vw, 5.6rem);
  --fs-display: clamp(2.1rem, 4.6vw, 4rem);
  --fs-title:   clamp(1.7rem, 3.2vw, 2.7rem);
}

/* Letter-spacing breaks Arabic: it separates letters that must stay joined.
   Removed everywhere, including on the uppercase-style labels. */
[dir="rtl"] body,
[dir="rtl"] .label,
[dir="rtl"] .btn,
[dir="rtl"] .nav__link,
[dir="rtl"] .lang,
[dir="rtl"] .tab,
[dir="rtl"] .crumb,
[dir="rtl"] .places,
[dir="rtl"] .marquee__item,
[dir="rtl"] .stat span,
[dir="rtl"] .tile__no,
[dir="rtl"] .tile__go,
[dir="rtl"] .dest__count,
[dir="rtl"] .item__pos,
[dir="rtl"] .shot__cap,
[dir="rtl"] .post__cat,
[dir="rtl"] .post__meta,
[dir="rtl"] .article__meta,
[dir="rtl"] .footer__col h4,
[dir="rtl"] .field label,
[dir="rtl"] .founder__role,
[dir="rtl"] .founder__hl span,
[dir="rtl"] .about__badge span,
[dir="rtl"] .scroll-cue,
[dir="rtl"] .link-u,
[dir="rtl"] .other__go,
[dir="rtl"] .includes h3,
[dir="rtl"] .direct__txt b,
[dir="rtl"] .menu__n,
[dir="rtl"] .form-msg,
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4 {
  letter-spacing: 0 !important;
}

/* Arabic has no case distinction; UPPERCASE is a no-op that only hurts spacing. */
[dir="rtl"] .label,
[dir="rtl"] .btn,
[dir="rtl"] .nav__link,
[dir="rtl"] .tab,
[dir="rtl"] .crumb,
[dir="rtl"] .places,
[dir="rtl"] .marquee__item,
[dir="rtl"] .stat span,
[dir="rtl"] .dest__count,
[dir="rtl"] .footer__col h4,
[dir="rtl"] .field label,
[dir="rtl"] .founder__role,
[dir="rtl"] .tile__go,
[dir="rtl"] .other__go,
[dir="rtl"] .link-u,
[dir="rtl"] .shot__cap,
[dir="rtl"] .post__cat,
[dir="rtl"] .includes h3,
[dir="rtl"] .direct__txt b {
  text-transform: none;
}

/* Comfortable leading for the script */
[dir="rtl"] body        { line-height: 1.95; }
[dir="rtl"] .lead       { line-height: 1.95; }
[dir="rtl"] .prose p,
[dir="rtl"] .prose li   { line-height: 2.05; }
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3 { line-height: 1.35; }
[dir="rtl"] .t-hero     { line-height: 1.22; }
[dir="rtl"] .brand__name{ line-height: 1.4; }

/* The rise mask is cut to Latin metrics; Arabic descenders need more room. */
[dir="rtl"] .rise { padding-bottom: .34em; margin-bottom: -.34em; }

/* ---- Directional flips that logical properties do not cover ---- */

/* Eyebrow rule sits on the other side */
[dir="rtl"] .label::before  { background: linear-gradient(270deg, transparent, var(--gold)); }
[dir="rtl"] .label--center::after { background: linear-gradient(270deg, var(--gold), transparent); }

/* Arrow glyphs point the other way, and travel the other way on hover */
[dir="rtl"] .btn__ico,
[dir="rtl"] .tile__go svg,
[dir="rtl"] .other__go svg,
[dir="rtl"] .post__meta .go svg,
[dir="rtl"] .svcx__go svg,
[dir="rtl"] .includes button svg.go { transform: scaleX(-1); }

/* The mega-menu arrow slides in from the reading edge, so it carries its own
   translate and cannot share the plain flip above. */
[dir="rtl"] .mega__go { transform: scaleX(-1) translateX(-6px); }

/* Same for the overlay menu: the arrow points along the reading direction and
   slides in from it, so the flip has to carry the translate with it. */
[dir="rtl"] .menu__go { transform: scaleX(-1) translateX(8px); }
[dir="rtl"] .menu__link:hover .menu__go,
[dir="rtl"] .menu__link:focus-visible .menu__go,
[dir="rtl"] .menu__svc-link:hover .menu__go,
[dir="rtl"] .menu__svc-link:focus-visible .menu__go { transform: scaleX(-1); }
[dir="rtl"] .mega__card:hover .mega__go { transform: scaleX(-1); }

[dir="rtl"] .btn:hover .btn__ico            { transform: scaleX(-1) translateX(4px); }
[dir="rtl"] .link-u:hover .btn__ico         { transform: scaleX(-1) translateX(5px); }
[dir="rtl"] .tile:hover .tile__go svg       { transform: scaleX(-1) translateX(7px); }
[dir="rtl"] .other:hover .other__go svg     { transform: scaleX(-1) translateX(6px); }
[dir="rtl"] .post:hover .post__meta .go svg { transform: scaleX(-1) translateX(6px); }

/* Underline sweeps from the opposite edge */
[dir="rtl"] .nav__link::after,
[dir="rtl"] .link-u::after { transform-origin: left; }
[dir="rtl"] .nav__link:hover::after,
[dir="rtl"] .nav__link.is-active::after { transform-origin: right; }

[dir="rtl"] .reason::before,
[dir="rtl"] .other::before { transform-origin: right; }

/* Spec §4.2 — the WhatsApp button moves to the bottom LEFT on Arabic pages.
   Only the anchoring changes. flex-direction stays `row-reverse`: in an RTL
   container `row` already runs right-to-left, so overriding it to `row` put the
   button at the container's right end, ~270px in from the left edge.
   `row-reverse` under RTL runs left-to-right, which is what puts the button
   against the left edge with the bubble opening to its right. */
[dir="rtl"] .wa {
  right: auto;
  left: clamp(1rem, 3vw, 2.2rem);
}

/* The bubble now sits to the RIGHT of the button, so it slides in from that side. */
[dir="rtl"] .wa__bubble { transform: translateX(14px) scale(.96); }
[dir="rtl"] .wa__bubble.is-shown { transform: none; }

/* Full-screen menu opens from the opposite corner */
[dir="rtl"] .menu          { clip-path: circle(0% at 44px 44px); }
[dir="rtl"] .menu.is-open  { clip-path: circle(155% at 44px 44px); }

/* Hero scrim gradient runs the other way so the text side stays the dark side */
[dir="rtl"] .hero__scrim {
  background:
    linear-gradient(to top, rgba(0,0,0,.95) 0%, rgba(0,0,0,.7) 30%, rgba(0,0,0,.42) 58%, rgba(0,0,0,.62) 100%),
    linear-gradient(to left, rgba(0,0,0,.8) 0%, rgba(0,0,0,.44) 46%, rgba(0,0,0,.12) 100%);
}

[dir="rtl"] .phero__scrim {
  background:
    linear-gradient(to top, rgba(0,0,0,.95) 0%, rgba(0,0,0,.6) 38%, rgba(0,0,0,.2) 72%, rgba(0,0,0,.5) 100%),
    linear-gradient(to left, rgba(0,0,0,.72) 0%, rgba(0,0,0,.3) 52%, transparent 100%);
}

/* Badge overhangs the other edge of the arch */
[dir="rtl"] .about__badge {
  right: auto;
  left: clamp(-2.4rem, -2vw, -1.5rem);
}

@media (max-width: 900px) {
  [dir="rtl"] .about__badge { left: 1rem; right: auto; }
}

/* Marquee travels the other way */
[dir="rtl"] .marquee__group { padding-right: 0; padding-left: 2.6rem; }
[dir="rtl"] .marquee__track { animation-name: slideRtl; }
@keyframes slideRtl { to { transform: translateX(50%); } }

/* Hover nudges */
[dir="rtl"] .footer__col a:hover     { padding-left: 0; padding-right: 5px; }
[dir="rtl"] .includes button:hover   { padding-left: 0; padding-right: 6px; }
[dir="rtl"] .cat li                  { padding-left: 0; padding-right: 1.05rem; }
[dir="rtl"] .cat li::before          { left: auto; right: 0; }
[dir="rtl"] .prose ul                { padding-left: 0; padding-right: 1.2rem; }

/* Select chevron */
[dir="rtl"] .field select {
  background-position: left 1.15rem center;
  padding-right: 1.15rem;
  padding-left: 2.8rem;
}

/* The skip link and scroll cue follow the reading edge */
[dir="rtl"] .skip-link { left: auto; right: var(--gutter); }

/* Numerals, addresses and phone numbers are typed left to right (spec §4.2) */
[dir="rtl"] input[type="email"],
[dir="rtl"] input[type="tel"],
[dir="rtl"] .ltr {
  direction: ltr;
  text-align: right;
}

[dir="rtl"] .reason__no,
[dir="rtl"] .tile__no,
[dir="rtl"] .item__pos,
[dir="rtl"] .menu__n,
[dir="rtl"] .stat b,
[dir="rtl"] .about__badge b,
[dir="rtl"] .founder__hl b {
  direction: ltr;
  unicode-bidi: isolate;
}

/* Footer bar and hero foot sit the other way round */
[dir="rtl"] .item__next { justify-content: flex-start; }

/* ---- Light theme, mirrored ----
   The directional wash has to run the other way, so its solid end stays behind
   the Arabic text column. Specificity is raised past the LTR light rules in
   home.css / page.css, which are (0,2,1). */
:root[data-theme="light"][dir="rtl"] .hero__scrim {
  background:
    linear-gradient(to left,
      rgba(247,245,240,.96) 0%,  rgba(247,245,240,.93) 42%,
      rgba(247,245,240,.8)  62%, rgba(247,245,240,.36) 80%,
      rgba(247,245,240,.08) 100%),
    linear-gradient(to top,
      rgba(247,245,240,.48) 0%, rgba(247,245,240,.1) 30%,
      rgba(247,245,240,.04) 60%, rgba(247,245,240,.56) 100%);
}

:root[data-theme="light"][dir="rtl"] .phero__scrim {
  background:
    linear-gradient(to left,
      rgba(247,245,240,.96) 0%,  rgba(247,245,240,.92) 30%,
      rgba(247,245,240,.68) 54%, rgba(247,245,240,.28) 78%,
      rgba(247,245,240,.08) 100%),
    linear-gradient(to top,
      rgba(247,245,240,.52) 0%, rgba(247,245,240,.12) 32%,
      rgba(247,245,240,0)   64%, rgba(247,245,240,.26) 100%);
}

/* The mobile light wash is vertical, so it needs no mirroring — but the RTL
   side-wash rules above are (0,3,1) and would otherwise beat the (0,2,1) media
   query in home.css / page.css. Re-stated here at matching specificity. */
@media (max-width: 860px) {
  :root[data-theme="light"][dir="rtl"] .hero__scrim {
    background: linear-gradient(to bottom,
      rgba(247,245,240,.5)  0%,
      rgba(247,245,240,.78) 11%,
      rgba(247,245,240,.94) 24%,
      rgba(247,245,240,.94) 66%,
      rgba(247,245,240,.6)  84%,
      rgba(247,245,240,.28) 100%);
  }
  :root[data-theme="light"][dir="rtl"] .phero__scrim {
    background: linear-gradient(to bottom,
      rgba(247,245,240,.52) 0%,
      rgba(247,245,240,.8)  14%,
      rgba(247,245,240,.94) 30%,
      rgba(247,245,240,.92) 70%,
      rgba(247,245,240,.62) 88%,
      rgba(247,245,240,.3)  100%);
  }
}