/* Arabo: scrittura da destra a sinistra.
   Caricato solo da ar.html, dopo gli altri fogli di stile.
   Il grosso del sito usa già proprietà logiche: qui restano i casi
   in cui la direzione era scritta a mano. */

[dir="rtl"] {
  /* Jost e Archivo non hanno l'arabo. Noto Kufi ha lo stesso spirito geometrico. */
  --font-display: "Noto Kufi Arabic", "Jost", system-ui, sans-serif;
  --font-text: "Noto Sans Arabic", "Archivo", system-ui, sans-serif;
  --track-display: 0;
  /* L'arabo occupa più spazio in altezza e meno in larghezza: il titolo va rimpicciolito */
  --text-display: clamp(2.1rem, 1rem + 4.4vw, 4.6rem);
  --text-h2: clamp(1.6rem, 1.1rem + 1.8vw, 2.6rem);
}

[dir="rtl"] .hero h1 {
  max-width: 20ch;
}

/* La scrittura araba è legata: distanziare le lettere la spezza.
   Il marchio «Pure Drive» resta in latino e tiene la sua spaziatura. */
[dir="rtl"] h1,
[dir="rtl"] h2,
[dir="rtl"] h3,
[dir="rtl"] .btn,
[dir="rtl"] .rule-node,
[dir="rtl"] .assurances b,
[dir="rtl"] .service__meta,
[dir="rtl"] .car__specs dt,
[dir="rtl"] .car__specs dd,
[dir="rtl"] .voice blockquote,
[dir="rtl"] .faq summary,
[dir="rtl"] .quote__direct a,
[dir="rtl"] .field label,
[dir="rtl"] .footer__col h3,
[dir="rtl"] .mobile-nav a,
[dir="rtl"] .action-bar a {
  letter-spacing: normal;
}

/* L'arabo ha le ascendenti e discendenti lunghe: serve più respiro fra le righe */
[dir="rtl"] h1 {
  line-height: 1.3;
}

[dir="rtl"] h2 {
  line-height: 1.4;
}

[dir="rtl"] body {
  line-height: 1.85;
}

/* Filetti e velature che puntavano a destra ora puntano a sinistra */
[dir="rtl"] .rule-node::after {
  background: linear-gradient(270deg, var(--line-strong), transparent);
}

[dir="rtl"] .service:hover {
  background: linear-gradient(270deg, rgba(246, 247, 248, 0.045), transparent 70%);
}

[dir="rtl"] .car__figure::after {
  background: linear-gradient(to top, rgba(6, 6, 8, 0.9) 0%, transparent 28%),
    linear-gradient(to bottom, rgba(6, 6, 8, 0.75) 0%, transparent 20%),
    linear-gradient(to left, rgba(6, 6, 8, 0.7) 0%, transparent 16%),
    linear-gradient(to right, rgba(6, 6, 8, 0.55) 0%, transparent 14%);
}

[dir="rtl"] .quote::before {
  mask-image: radial-gradient(90% 70% at 20% 10%, #000 0%, transparent 70%);
  -webkit-mask-image: radial-gradient(90% 70% at 20% 10%, #000 0%, transparent 70%);
}

/* La freccia della tendina passa dall'altro lato */
[dir="rtl"] .field select {
  background-position: 18px 50%, 13px 50%;
  padding-right: 0.9rem;
  padding-left: 2.5rem;
}

/* Numeri di telefono e indirizzi restano leggibili da sinistra a destra */
[dir="rtl"] span[dir="ltr"],
[dir="rtl"] a[dir="ltr"],
[dir="rtl"] input[dir="ltr"] {
  display: inline-block;
  text-align: left;
}

/* Il motto è in inglese: si legge da sinistra a destra ma resta allineato
   al bordo di partenza della pagina araba, cioè a destra. */
[dir="rtl"] .voice blockquote {
  text-align: right;
}