/* =========================================================================
 * Right-to-left.
 *
 * Loaded only while Arabic is on (see zouma_enqueue_assets), after every other
 * stylesheet, so it can override without !important and the English site is
 * bit-for-bit unaffected.
 *
 * Most of the layout needs nothing here. The site is built on flex and grid,
 * and both mirror themselves once the document direction changes — rows run the
 * other way, `justify-content: flex-start` starts on the right, and the ~34
 * declarations already written as padding-inline / margin-inline flip on their
 * own. What is left is the physical properties: text-align, the left/right
 * paddings, margins and borders, and the handful of absolutely positioned
 * pieces that name an edge.
 *
 * Written against a scan of the actual stylesheets rather than by guesswork —
 * every rule below mirrors a declaration that exists somewhere in the theme.
 *
 * The `[dir="rtl"]` guard is belt and braces: the file is only enqueued for
 * Arabic, but scoping it means nothing here can leak if that ever changes.
 * ====================================================================== */

/* -------------------------------------------------------------------------
 * Typography.
 *
 * The site's Latin faces carry no Arabic glyphs. Left alone the browser falls
 * back per character, which mixes two or three typefaces inside a single word
 * and throws the line rhythm out. Naming an Arabic stack keeps a run of text in
 * one face; the Latin families stay in the list so a product name or a figure
 * inside an Arabic sentence still renders in the brand face.
 * ---------------------------------------------------------------------- */

[dir="rtl"] body,
[dir="rtl"] button,
[dir="rtl"] input,
[dir="rtl"] select,
[dir="rtl"] textarea {
  font-family: "Noto Naskh Arabic", "Segoe UI", "Tahoma", var(--zouma-font-body), sans-serif;
}

[dir="rtl"] h1,
[dir="rtl"] h2,
[dir="rtl"] h3,
[dir="rtl"] h4,
[dir="rtl"] .zouma-section-title,
[dir="rtl"] .zouma-hero__title {
  font-family: "Noto Kufi Arabic", "Noto Naskh Arabic", "Segoe UI", var(--zouma-font-heading), sans-serif;
  /* The Latin headings are tightened; Arabic letterforms join, and negative
   * tracking closes the joins up until the word reads as one shape. */
  letter-spacing: 0;
}

/* Arabic has no capital forms, so uppercasing does nothing to the glyphs and
 * the tracking that goes with it only pulls the joins apart. */
[dir="rtl"] .zouma-eyebrow,
[dir="rtl"] .zouma-trust__title,
[dir="rtl"] .zouma-pillars__tab,
[dir="rtl"] .zouma-wwdpil__tab,
[dir="rtl"] .zouma-indtabs__tab {
  text-transform: none;
  letter-spacing: 0;
}

/* -------------------------------------------------------------------------
 * Alignment.
 *
 * `start` rather than `right`: it resolves per direction, so the same
 * declaration stays correct if any of these ever render inside an LTR island.
 * ---------------------------------------------------------------------- */

[dir="rtl"] .zouma-global__head,
[dir="rtl"] .zouma-team__head,
[dir="rtl"] .zouma-bkhero__inner,
[dir="rtl"] .zouma-bkhero__card,
[dir="rtl"] .zouma-hero--left,
[dir="rtl"] .zouma-stats,
[dir="rtl"] .zouma-stats__head,
[dir="rtl"] .zouma-stats__title,
[dir="rtl"] .zouma-journey,
[dir="rtl"] .zouma-pillars__tab,
[dir="rtl"] .zouma-wwdpil__tab,
[dir="rtl"] .zouma-clock,
[dir="rtl"] .zouma-sunbar,
[dir="rtl"] .zouma-piltow__num,
[dir="rtl"] .zouma-piltow__row.is-flipped .zouma-piltow__num {
  text-align: start;
}

[dir="rtl"] .zouma-post-nav .nav-next {
  text-align: end;
}

/* -------------------------------------------------------------------------
 * Borders that divide columns.
 *
 * These draw the rule between cards in a row, so the edge they sit on has to
 * swap or the outermost card grows a stray line and the join between two cards
 * loses one.
 * ---------------------------------------------------------------------- */

[dir="rtl"] .zouma-bkexpect__card + .zouma-bkexpect__card,
[dir="rtl"] .zouma-crben__card + .zouma-crben__card,
[dir="rtl"] .zouma-crben__card:nth-child(2n),
[dir="rtl"] .zouma-pt-why__item {
  border-left: 0;
  border-right: 1px solid var(--zouma-color-border, #dbe4ec);
}

[dir="rtl"] .zouma-pt-why__item:first-child {
  border-right: 0;
}

[dir="rtl"] .zouma-statgrid__cell:nth-child(3n),
[dir="rtl"] .zouma-statgrid__cell:nth-child(2n),
[dir="rtl"] .zouma-outcomes__cell:nth-child(2n) {
  border-right: 0;
}

/* The status page draws its accent down the leading edge of each incident. */
[dir="rtl"] .zouma-stincident,
[dir="rtl"] .zouma-sttimeline {
  border-left: 0;
  border-right: 3px solid #34c08a;
}

[dir="rtl"] .zouma-sttimeline {
  border-right-width: 2px;
  border-right-color: #e2e8f0;
}

[dir="rtl"] .zouma-stincident.is-watch {
  border-right-color: var(--zouma-cyan);
}

[dir="rtl"] .zouma-stincident__body {
  padding-left: 0;
  padding-right: 22px;
}

/* -------------------------------------------------------------------------
 * Padding and margin that name an edge.
 * ---------------------------------------------------------------------- */

[dir="rtl"] .zouma-legal__body ul,
[dir="rtl"] .zouma-comments .comment-list ul,
[dir="rtl"] .zouma-pt-tier__list,
[dir="rtl"] .zouma-pilhero__marks li {
  padding-left: 0;
}

[dir="rtl"] .zouma-legal__body ul {
  padding-right: 21px;
}

[dir="rtl"] .zouma-comments .comment-list ul {
  padding-right: 1.5rem;
}

[dir="rtl"] .zouma-pt-tier__list {
  padding-right: 28px;
}

[dir="rtl"] .zouma-pilhero__marks li {
  padding-right: 14px;
}

[dir="rtl"] .zouma-pt-hero__copy {
  padding-left: clamp(1.25rem, calc(3 * var(--zouma-vw)), 3rem);
  padding-right: clamp(1.25rem, calc(8 * var(--zouma-vw)), 7rem);
}

[dir="rtl"] .zouma-ctform__select select {
  padding-right: 0;
  padding-left: 34px;
}

/* The caret the select draws for itself sits on the trailing edge. */
[dir="rtl"] .zouma-ctform__select::after {
  right: auto;
  left: 14px;
}

[dir="rtl"] .zouma-instinct__card {
  margin-left: 0;
  margin-right: auto;
}

[dir="rtl"] .zouma-stbanner__live {
  margin-left: 0;
  margin-right: 48px;
}

[dir="rtl"] .zouma-post__meta span + span::before {
  margin-right: 0;
  margin-left: 6px;
}

/* -------------------------------------------------------------------------
 * The typewriter caret on the intro statement.
 *
 * It is a border on the trailing edge of the last character, so in Arabic it
 * belongs on the left — otherwise the cursor sits where the sentence began.
 * ---------------------------------------------------------------------- */

[dir="rtl"] .zouma-char.is-cursor {
  border-right: 0;
  border-left: 2px solid var(--zouma-blue);
  margin-right: 0;
  margin-left: -2px;
}

/* -------------------------------------------------------------------------
 * Positioned artwork.
 *
 * Only the pieces that carry meaning or would collide with the copy. Purely
 * decorative glows and dot fields are left where they are: they are symmetric
 * enough that mirroring them buys nothing and risks moving them onto the text.
 * ---------------------------------------------------------------------- */

/* The split hero puts the photograph beside the copy; the two swap sides. */
[dir="rtl"] .zouma-pilhero--split .zouma-pilhero__media {
  left: auto;
  right: calc(var(--zouma-pilhero-inset) + var(--zouma-pilhero-copy) + var(--zouma-pilhero-gap));
}

/* The fade that softens the photograph's inner edge has to turn round with it. */
[dir="rtl"] .zouma-pilhero--split .zouma-pilhero__media::after {
  background: linear-gradient(270deg, var(--zouma-dark) 0%, rgba(13, 13, 13, 0) 22%);
}

[dir="rtl"] .zouma-pilhero--split .zouma-pilhero__inner {
  padding-right: 0;
  padding-left: 0;
}

/* Below 900px the photograph is back in the flow and full width, so the
 * mirrored offset above must not reintroduce the shove it used to have. */
@media (max-width: 900px) {
  [dir="rtl"] .zouma-pilhero--split .zouma-pilhero__media {
    right: 0;
  }

  [dir="rtl"] .zouma-pilhero--split .zouma-pilhero__media::after {
    background: linear-gradient(0deg, var(--zouma-dark) 0%, rgba(13, 13, 13, 0) 30%);
  }
}

/* The tower number panel sits in the frame's leading corner.
 *
 * The radius has to travel with it. In LTR only the bottom-right corner is
 * rounded, because the other three meet the card's own clipped edges; mirrored
 * to the top-right, that same corner now faces the outside of the card and
 * draws a second curve inside the frame's — the exact double-curve the rule in
 * pillars.css exists to avoid. The rounding moves to the bottom-left, which is
 * the corner that now sits inside the image. */
[dir="rtl"] .zouma-towcard__num {
  left: auto;
  right: 0;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 18px;
}

/* -------------------------------------------------------------------------
 * Things that must not mirror.
 *
 * Latin text, numbers and anything read left to right regardless of the page.
 * Marking them keeps the bidirectional algorithm from reordering punctuation —
 * "24/7" and "45%+" in particular come out reversed without this.
 * ---------------------------------------------------------------------- */

[dir="rtl"] .zouma-clock__hm,
[dir="rtl"] .zouma-clock__sec,
[dir="rtl"] .zouma-stat__value,
[dir="rtl"] .zouma-towcard__num,
[dir="rtl"] .zouma-piltow__num,
[dir="rtl"] .zouma-office__link[href^="tel:"],
[dir="rtl"] .zouma-office__link[href^="mailto:"] {
  direction: ltr;
  unicode-bidi: isolate;
}

/* The horizontal scrollers start at the leading edge, which is now the right. */
[dir="rtl"] .zouma-pilhero__bar ul,
[dir="rtl"] .zouma-indtabs,
[dir="rtl"] .zouma-wwdpil__tabs {
  direction: rtl;
}

/* -------------------------------------------------------------------------
 * The header switcher's own menu.
 *
 * Already written with inset-inline-end, so it hangs from the correct edge on
 * its own. Only the Latin label needs isolating.
 * ---------------------------------------------------------------------- */

[dir="rtl"] .zouma-lang span {
  direction: ltr;
  unicode-bidi: isolate;
}


/* -------------------------------------------------------------------------
 * Mixed English and Arabic in the same page.
 *
 * Until a field has been translated the front end falls back to the English,
 * so an Arabic page always holds some Latin text — and on day one, nearly all
 * of it. Dropped into an RTL paragraph, the bidirectional algorithm treats a
 * trailing full stop or comma as neutral and moves it to the paragraph's own
 * leading edge: "AI-Powered Operations, Delivered Globally." came out as
 * "AI-Powered ,Operations .Delivered Globally", which looks like a typo rather
 * than a language setting.
 *
 * `plaintext` takes each element's direction from the first strong character
 * it actually contains, so English reads left to right with its punctuation
 * where it belongs, Arabic reads right to left, and the same rule keeps
 * working as fields are translated one at a time. Sentences that genuinely mix
 * the two — a product name inside an Arabic line — still resolve correctly,
 * because the paragraph direction comes from the text and not from a guess.
 *
 * Applied to the elements that hold sentences rather than to everything: the
 * flex and grid containers must keep the page's own RTL direction or the
 * layout would unmirror itself.
 * ---------------------------------------------------------------------- */

[dir="rtl"] h1,
[dir="rtl"] h2,
[dir="rtl"] h3,
[dir="rtl"] h4,
[dir="rtl"] h5,
[dir="rtl"] h6,
[dir="rtl"] p,
[dir="rtl"] li,
[dir="rtl"] dd,
[dir="rtl"] dt,
[dir="rtl"] blockquote,
[dir="rtl"] figcaption,
[dir="rtl"] label,
[dir="rtl"] th,
[dir="rtl"] td,
[dir="rtl"] .zouma-btn,
[dir="rtl"] button,
[dir="rtl"] a {
  unicode-bidi: plaintext;
}

/* plaintext resolves alignment from the text too, so an untranslated English
 * heading would align left inside an otherwise right-aligned page. Pinning the
 * alignment to the page keeps the column edge straight while the punctuation
 * fix still applies. */
[dir="rtl"] h1,
[dir="rtl"] h2,
[dir="rtl"] h3,
[dir="rtl"] h4,
[dir="rtl"] p,
[dir="rtl"] li {
  text-align: start;
}

/* Centred by design, and must stay centred whichever language is in them. */
[dir="rtl"] .zouma-section-head,
[dir="rtl"] .zouma-section-head h2,
[dir="rtl"] .zouma-section-head p,
[dir="rtl"] .zouma-hero__title,
[dir="rtl"] .zouma-hero__lede,
[dir="rtl"] .zouma-piltow__head,
[dir="rtl"] .zouma-piltow__head h2,
[dir="rtl"] .zouma-stsla__head,
[dir="rtl"] .zouma-stsla__head h2,
[dir="rtl"] .zouma-stsla__head p {
  text-align: center;
}


/* unicode-bidi does not inherit.
 *
 * Several headings wrap their text in spans — the hero splits itself into
 * .zouma-hero__line so each line can animate in on its own — and the rule
 * above, set on the h1, never reached them: the heading still read
 * ",Operations .Delivered Globally" while the lede beside it was correct.
 *
 * Applying it to the inline runs as well fixes those. On an element with no
 * text of its own it does nothing, so covering span and div broadly here costs
 * nothing and saves chasing each wrapper as it turns up. */
[dir="rtl"] h1 span,
[dir="rtl"] h2 span,
[dir="rtl"] h3 span,
[dir="rtl"] h4 span,
[dir="rtl"] p span,
[dir="rtl"] li span,
[dir="rtl"] a span,
[dir="rtl"] button span,
[dir="rtl"] .zouma-hero__line,
[dir="rtl"] .zouma-hero__line span {
  unicode-bidi: plaintext;
}


/* -------------------------------------------------------------------------
 * Hero artwork that shares the row with the copy.
 *
 * These heroes put a photograph on one side and the text on the other, with
 * the picture absolutely positioned against a named edge. The copy column
 * mirrors on its own — it is flex — but the photograph does not, so both ended
 * up on the right and the Arabic heading was printed straight over the
 * photograph on What We Do.
 *
 * The world map on About is mirrored too. Its pins are positioned by an --x
 * percentage, which sounded like a reason to leave the map alone — but the
 * pins and dots are nested inside .zouma-global__map, so their offsets are
 * measured against the map and they travel with it. Moving the map keeps
 * every marker over its own country.
 * ---------------------------------------------------------------------- */

[dir="rtl"] .zouma-wwdhero__photo {
  left: 0;
  right: 46%;
}

[dir="rtl"] .zouma-abhero__photo {
  left: auto;
  right: 50%;
  transform: translateX(50%);
}

[dir="rtl"] .zouma-indhero__photo,
[dir="rtl"] .zouma-cshero__photo {
  right: auto;
  left: 0;
}

[dir="rtl"] .zouma-indhero__dots,
[dir="rtl"] .zouma-cshero__dots {
  left: auto;
  right: 0;
}

/* The office list flows to the right in Arabic, which is where the map's
 * dense landmass sits — the cards landed on top of it and the pin labels
 * poked out over the cards. Sending the map the other way gives each side
 * of the row back to one thing. */
[dir="rtl"] .zouma-global__map {
  right: auto;
  left: 0;
  /* A little narrower than the 69.375% it has in English.
   *
   * The office cards are 450px on the right; at full width the map runs
   * about 58px under them, and the Adelaide pin — which sits near the map's
   * right edge — disappeared behind a card. Every pin is placed by a
   * percentage of the map, so narrowing the map brings them all in with it
   * and each marker stays over its own country. The aspect-ratio keeps the
   * artwork in proportion. */
  width: 63%;
}

/* The list is in normal flow, so it takes the right on its own; this only
 * keeps it off the map on the narrower desktop widths where the two would
 * otherwise still meet in the middle. */
[dir="rtl"] .zouma-global__list {
  margin-inline-start: 0;
  margin-inline-end: auto;
}

[dir="rtl"] .zouma-crhero__map {
  right: auto;
  left: -4%;
}

/* The copy columns cap themselves against the half of the screen the picture
 * does not use; that measure is the same on either side, so only the edge the
 * padding hangs from has to change — and both already use padding-inline. */

/* -------------------------------------------------------------------------
 * Bullets, markers and field icons.
 *
 * Each is drawn with a negative or fixed offset from the leading edge, which
 * puts it on the wrong side of the text once the page turns round.
 * ---------------------------------------------------------------------- */

[dir="rtl"] .zouma-esgcard__points li::before,
[dir="rtl"] .zouma-legal__body li::before,
[dir="rtl"] .zouma-pilcard__points li::before {
  left: auto;
  right: -13px;
}

[dir="rtl"] .zouma-pilcard__points li::before {
  right: -14.5px;
}

[dir="rtl"] .zouma-pt-tier__list li::before {
  left: auto;
  right: -16.5px;
}

[dir="rtl"] .zouma-pilhero__marks li::before {
  left: auto;
  right: 0;
}

[dir="rtl"] .zouma-pilstep::before {
  left: auto;
  right: var(--zouma-pilstep-padx);
}

[dir="rtl"] .zouma-sthealth__list::before {
  left: auto;
  right: 29px;
}

[dir="rtl"] .zouma-journey__marker {
  left: auto;
  right: -5px;
}

[dir="rtl"] .zouma-post__date {
  left: auto;
  right: 0;
}

/* The chevron a select draws for itself sits on the trailing edge. */
[dir="rtl"] .zouma-crjobs__filter .zouma-icon,
[dir="rtl"] .zouma-ctform__select .zouma-icon {
  right: auto;
  left: 12px;
}


/* -------------------------------------------------------------------------
 * Footer, above 1080px.
 *
 * The measured gap is the same 24px in both languages, but it reads tighter in
 * Arabic. Left-aligned English runs away from the booking panel and most links
 * stop short of the column edge; right-aligned Arabic runs towards it, so the
 * long entries — "الحوكمة البيئية والاستدامة" and "الذكاء الاصطناعي المسؤول" —
 * end level with the panel's edge and the 24px is all that is left between
 * them.
 *
 * The tracks are fr units, so widening the gap simply narrows the columns to
 * suit; nothing overflows and the panel keeps its proportion.
 *
 * Scoped to the four-column layout. Below 1080px the booking panel drops to a
 * full-width row of its own and there is nothing for the links to crowd.
 * ---------------------------------------------------------------------- */

@media (min-width: 1081px) {
  [dir="rtl"] .zouma-footer__grid {
    column-gap: 52px;
  }
}