/* ==========================================================================
   ZArabia — Arabic-only adjustments
   Loaded after style.css on the Arabic pages only. The layout itself is
   mirrored by style.css (dir="rtl"); this file holds what Arabic needs
   on top of that.
   1. Lettering          3. Mirrored card pictures
   2. Centred icons      4. Language link
   5. Contact form        6. Values list (home)
   ========================================================================== */

/* 1. Lettering ------------------------------------------------------------ */
/* Arabic letters join, so extra space between letters must be off everywhere. */
html[dir="rtl"] body * { letter-spacing: 0; }

/* 2. Centred icons -------------------------------------------------------- */
/* Icons drawn from their centre need the opposite horizontal shift. */
[dir="rtl"] .accordion__icon::before { transform: translate(50%, -50%); }
[dir="rtl"] .accordion__icon::after { transform: translate(50%, -50%) rotate(90deg); }
[dir="rtl"] .accordion__trigger[aria-expanded="true"] .accordion__icon::after { transform: translate(50%, -50%) rotate(0deg); }
[dir="rtl"] .testimonials__nav--prev::before { transform: translate(30%, -50%) rotate(-135deg); }
[dir="rtl"] .testimonials__nav--next::before { transform: translate(70%, -50%) rotate(45deg); }

/* 3. Mirrored card pictures ----------------------------------------------- */
/* These cards have their picture on one side and text on the other, so the
   picture is flipped to keep it clear of the Arabic text. (The Arabic-training
   card is left alone: its picture is Arabic handwriting.) */
[dir="rtl"] .card--migration,
[dir="rtl"] .card--consultation,
[dir="rtl"] .about-cards .card--busywork,
[dir="rtl"] .about-cards .card--mapping { background-image: none; isolation: isolate; overflow: hidden; }
[dir="rtl"] .card--migration::before,
[dir="rtl"] .card--consultation::before,
[dir="rtl"] .about-cards .card--busywork::before,
[dir="rtl"] .about-cards .card--mapping::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: center / cover no-repeat; transform: scaleX(-1);
}
[dir="rtl"] .card--migration::before { background-image: url("../img/home/card-data-migration.jpg"); }
[dir="rtl"] .card--consultation::before { background-image: url("../img/home/card-consultation.jpg"); }
[dir="rtl"] .about-cards .card--busywork::before { background-image: url("../img/pages/card-busywork.jpg"); }
[dir="rtl"] .about-cards .card--mapping::before { background-image: url("../img/pages/card-consultation-wide.jpg"); }

/* 4. Language link -------------------------------------------------------- */
/* The word "English" in the Arabic menu. */
.lang-link { font-family: "Cairo", "Segoe UI", Tahoma, Arial, sans-serif; }

/* 5. Contact form --------------------------------------------------------- */
/* Phone numbers are typed left to right, but the box still lines up with the others. */
[dir="rtl"] input[type="tel"] { direction: ltr; text-align: right; }

/* 6. Values list (home) --------------------------------------------------- */
/* In English the long heading beside the list sets where this section ends.
   Arabic text is shorter, so here the list itself sets it: the dark band below
   always starts just under the last item, whichever item is open, and the
   white rounded tab stays attached to the bottom of the list. */
@media (min-width: 1025px) {
  [dir="rtl"] .values__accordion-wrap { padding-block-end: 68px; }
  [dir="rtl"] .values__tab { inset-block-start: auto; inset-block-end: 50px; }
}