/* ==========================================================================
   Arabic (RTL) pages only - loaded by includes/i18n_head on /ar/... pages.

   The bulk of the RTL layout comes from the mirrored copies of the site's own
   stylesheets (public/css/rtl/*.css, generated automatically). This file
   holds the Arabic typeface and the few things a mechanical mirror can't
   decide: number/phone direction, sections that should stay left-to-right,
   and Arabic typography.
   ========================================================================== */

/* ---- Arabic typeface ------------------------------------------------------
   Readex Pro (SIL Open Font License, see /fonts/arabic/OFL-Readex-Pro.txt):
   a geometric Arabic that sits well next to Onest. One variable file, 23 KB,
   covers every weight, and its unicode-range is Arabic only - so on these
   pages every element asks for C6Arabic first: Arabic letters come from
   Readex Pro, and Latin text (CLOUD6, Shopify, SEO ...) falls through to Onest
   exactly as on the English site. */
@font-face {
    font-family: C6Arabic;
    font-style: normal;
    font-display: swap;
    font-weight: 160 900;
    src: url(../fonts/arabic/readex-pro-arabic.woff2) format('woff2-variations'),
         url(../fonts/arabic/readex-pro-arabic.woff2) format('woff2');
    /* the space characters too (U+0020, U+00A0): when the spaces between
       Arabic words come from another font, Chrome breaks letter joins in
       justified Arabic paragraphs */
    unicode-range: U+0020, U+00A0, U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF,
        U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}

html[dir="rtl"] body,
html[dir="rtl"] body * {
    font-family: C6Arabic, Onest, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

/* ---- Arabic typography -----------------------------------------------------
   Letter-spacing pulls Arabic letters apart and breaks their joins, and the
   script needs more room between lines than Latin. */
html[dir="rtl"] body,
html[dir="rtl"] body * {
    letter-spacing: 0 !important;
}
html[dir="rtl"] p,
html[dir="rtl"] li {
    line-height: 1.8;
}
html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3,
html[dir="rtl"] h4,
html[dir="rtl"] h5,
html[dir="rtl"] h6 {
    line-height: 1.45;
}

/* ---- Numbers, phones and e-mail stay left-to-right -------------------------- */
html[dir="rtl"] a[href^="tel:"],
html[dir="rtl"] a[href^="mailto:"],
html[dir="rtl"] input[type="tel"],
html[dir="rtl"] input[type="email"],
html[dir="rtl"] input[type="url"],
html[dir="rtl"] input[name="phone_number"],
html[dir="rtl"] input[name="phone"] {
    direction: ltr;
    unicode-bidi: isolate;
}
html[dir="rtl"] input[type="tel"],
html[dir="rtl"] input[type="email"],
html[dir="rtl"] input[type="url"],
html[dir="rtl"] input[name="phone_number"],
html[dir="rtl"] input[name="phone"] {
    text-align: right;
}

/* ---- Code samples read left-to-right in any language ----------------------- */
html[dir="rtl"] pre,
html[dir="rtl"] code,
html[dir="rtl"] kbd {
    direction: ltr;
    text-align: left;
    unicode-bidi: isolate;
}
html[dir="rtl"] body pre,
html[dir="rtl"] body code,
html[dir="rtl"] body kbd,
html[dir="rtl"] body pre * {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
}

/* ==========================================================================
   Page sections
   ========================================================================== */

/* ---- Arrows that mean "go / open" point the other way in Arabic ----------- */
html[dir="rtl"] .our_service_card .arrow img,
html[dir="rtl"] .blog-item .read-more img {
    transform: scaleX(-1);
}

/* ---- Home "Our Clients" logos ------------------------------------------------
   The home page centres each logo's visible ink with left:50% and a transform
   worked out from the measured ink (--logo-cx, the ink centre from the left).
   The mirror turns left:50% into right:50% but cannot rewrite that calc(), so
   every logo slid out of its cell to the left. Logos are not text: keep the
   English (left-anchored) placement; the cells still run right to left. */
html[dir="rtl"] main .container-logo .partners_logo_item img {
    left: 50%;
    right: auto;
    transform: translate(-50%, -50%) translateZ(0);
}
html[dir="rtl"] main .container-logo .partners_logo_item img.logo-fitted {
    transform: translate(calc(-100% * var(--logo-cx)), calc(-100% * var(--logo-cy))) translateZ(0);
}