/* Arabic edition. Loaded only by /ar, after every other stylesheet.
   Two jobs: give Arabic a real Arabic typeface, and fix the handful of places where the layout was
   built around Latin text. Direction itself comes from <html dir="rtl">, and most of the layout
   follows because the shared CSS now uses logical properties (margin-inline, inset-inline-*,
   text-align:start) rather than left/right. */

/* Tajawal, self-hosted, already in the repo. Arabic and Latin subsets are split by unicode-range so
   Latin brand names inside Arabic copy keep their own shapes. */
@font-face{font-family:"Tajawal";font-style:normal;font-weight:400;font-display:swap;
  src:url(/assets/fonts-v3/tajawal-400-arabic.woff2) format("woff2");
  unicode-range: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}
@font-face{font-family:"Tajawal";font-style:normal;font-weight:500;font-display:swap;
  src:url(/assets/fonts-v3/tajawal-500-arabic.woff2) format("woff2");
  unicode-range: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}
@font-face{font-family:"Tajawal";font-style:normal;font-weight:700;font-display:swap;
  src:url(/assets/fonts-v3/tajawal-700-arabic.woff2) format("woff2");
  unicode-range: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}

/* Arabic sits ahead of Inter, which still serves Latin names inside Arabic sentences. */
html[lang="ar"]{
  --font:"Tajawal",Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-display:"Tajawal",Inter,system-ui,sans-serif;
}

/* Tajawal runs shorter than Inter at the same size and its ascenders and dots need more room, so
   headings get a little more leading and lose the Latin negative tracking, which breaks the joins. */
html[lang="ar"] body{letter-spacing:0;line-height:1.75}
html[lang="ar"] .t-h1,
html[lang="ar"] .gf-hero-h1{letter-spacing:0;line-height:1.3}
html[lang="ar"] .t-h2,
html[lang="ar"] .gf-work-title,
html[lang="ar"] .gf-pricing-h2,
html[lang="ar"] .gf-wyg__title,
html[lang="ar"] .gf-faq-heading,
html[lang="ar"] .gf-cta-heading{letter-spacing:0;line-height:1.42}
html[lang="ar"] .t-h3,
html[lang="ar"] .gf-wyg-card__h,
html[lang="ar"] .gf-offer-title,
html[lang="ar"] .gf-offer-strip-h{letter-spacing:0;line-height:1.45}
html[lang="ar"] .t-body,
html[lang="ar"] .gf-hero-sub,
html[lang="ar"] .gf-intro-p,
html[lang="ar"] .gf-work-lead{letter-spacing:0}
/* never letter-space Arabic: it separates letters that must stay joined */
html[lang="ar"] .gf-hero-pill,
html[lang="ar"] .gf-work-chip-label,
html[lang="ar"] .gf-hero-window-chip,
html[lang="ar"] .gf-work-card-badge,
html[lang="ar"] .gf-pricing-chip-t,
html[lang="ar"] .gf-offer-group-h,
html[lang="ar"] .gf-offer-quote,
html[lang="ar"] .gf-faq-chip-label{letter-spacing:0}
/* The offer panel sets letter-spacing in px on every line it owns, which pulls Arabic letters out
   of their joins. The tokens the rest of the site uses are already zeroed above; these are not. */
html[lang="ar"] .gf-offer-desc,
html[lang="ar"] .gf-offer-quote-sub,
html[lang="ar"] .gf-offer-delivery,
html[lang="ar"] .gf-offer-strip-p,
html[lang="ar"] .gf-pricing-check-t,
html[lang="ar"] .gf-pricing-note{letter-spacing:0}

/* Latin runs inside Arabic text (brand names, the email address, yourbrand.com) stay left-to-right. */
html[lang="ar"] bdi{unicode-bidi:isolate}
html[lang="ar"] .gf-cta-input,
html[lang="ar"] .gf-cta-input::placeholder{letter-spacing:0}
/* email, URL and phone entry stay left-to-right even on an RTL page */
html[lang="ar"] input[type="email"],
html[lang="ar"] input[type="url"],
html[lang="ar"] input[type="tel"]{direction:ltr;text-align:start}

/* The arrow glyph points away from the text, so it mirrors with the page. The hover rule in
   features.css also sets transform, so it has to be restated here with the mirror kept, otherwise
   hovering un-flips the arrow and slides it 6px into the Arabic subtitle. Inside a scaleX(-1) box a
   positive translateX moves visually leftward, which is still away from the text. */
html[lang="ar"] .gf-work-card-arrow{transform:scaleX(-1)}
@media (hover:hover) and (pointer:fine){
  html[lang="ar"] .gf-work-card:hover .gf-work-card-arrow{transform:scaleX(-1) translateX(6px)}
}
/* long Arabic subtitles need the room the fixed English column did not leave them */
html[lang="ar"] .gf-work-card-text{flex:1 1 auto;min-width:0}


/* The nav row is sized around the English labels: a fixed 244px brand column and 48px gaps inside a
   1080px row that clips. The Arabic labels are longer, so without this the row overflows and, because
   RTL puts the brand at the row's end, the wordmark is what gets clipped. Tighten the gaps and let the
   brand column size to its content instead of a fixed English measurement. */
html[lang="ar"] .gf-nav-brand-col{flex:0 1 auto;max-width:none}
html[lang="ar"] .gf-nav-row{gap:20px}
html[lang="ar"] .gf-nav-links{gap:26px;flex:1 1 auto;min-width:0}
@media (max-width:1023.98px){
  html[lang="ar"] .gf-nav-links{gap:18px}
}

/* language switch in the bar and in the mobile menu */
.gf-nav-lang{
  display:inline-flex;align-items:center;justify-content:center;
  height:30px;padding:0 12px;border-radius:var(--radius-pill);
  font-size:13px;line-height:30px;color:var(--ink-80);
  box-shadow:inset 0 0 0 1px var(--ink-10);
  transition:color .3s var(--ease-link),box-shadow .3s var(--ease-link);
  white-space:nowrap;
}
.gf-nav-lang:hover{color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink-25)}
.gf-nav-lang:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
html[lang="ar"] .gf-nav-lang{height:28px;padding:0 10px;font-size:12px;line-height:28px}