/* =============================================================
   Il tema 2026 da destra a sinistra, per le pagine in arabo.
   La pagina porta <html lang="ar" dir="rtl">, e il foglio si carica DOPO theme-2026.css:
       <link href="/css/caratteri-ar.css?v=AAAAMMGG" rel="stylesheet">
       <link href="/css/theme-2026.css?v=AAAAMMGG" rel="stylesheet">
       <link href="/css/theme-2026-rtl.css?v=AAAAMMGG" rel="stylesheet">
   Fa tre cose, e solo queste:
   1. rovescia le proprietà orientate del tema (rientri, bordi, margini, allineamenti), che sono
      dieci: il resto del tema è fatto di flex e di griglie, che seguono la direzione da sé;
   2. mette i caratteri con l'arabo: Space Grotesk e Inter non lo hanno, e la pagina cadrebbe sul
      carattere di sistema. IBM Plex Sans Arabic (OFL) ha l'arabo e il latino, quindi i nomi dei
      marchi e le cifre restano nello stesso disegno;
   3. azzera la spaziatura delle lettere: l'arabo è una scrittura legata, e qualunque
      letter-spacing stacca le lettere della parola. Per lo stesso motivo il corsivo diventa
      grassetto (i caratteri arabi non hanno il corsivo, e il browser lo inclinerebbe a forza) e i
      titoli prendono più interlinea, perché l'arabo scende e sale più del latino.
   Le frecce scritte nel testo dei link («→», «›») si scrivono rovesciate dal generatore («←», «‹»):
   il foglio non le tocca. Le cifre e i nomi latini dentro la frase araba stanno in <bdi> quando
   chiudono la riga o portano un segno attaccato (`09_TEMI_E_FOGLI_DI_STILE.md`, sezione 8).
   ============================================================= */

:root:lang(ar){
  --display:'IBM Plex Sans Arabic',system-ui,'Segoe UI',Tahoma,sans-serif;
  --body:'IBM Plex Sans Arabic',system-ui,-apple-system,'Segoe UI',Tahoma,sans-serif;
}
html:lang(ar) body{line-height:1.85}
html:lang(ar) *, html:lang(ar) *::before, html:lang(ar) *::after{letter-spacing:0!important}
html:lang(ar) h1, html:lang(ar) h2, html:lang(ar) h3{line-height:1.4}
html:lang(ar) .eyebrow, html:lang(ar) .gcard .tag{text-transform:none}
html:lang(ar) em, html:lang(ar) i, html:lang(ar) cite, html:lang(ar) address{font-style:normal;font-weight:600}

/* le proprietà orientate del tema, rovesciate */
[dir="rtl"] .hero .trust .ti:before{margin-right:0;margin-left:7px}
[dir="rtl"] .hero h1 .free:after{left:-2px;right:0}
[dir="rtl"] .why:before{right:auto;left:-60px}
[dir="rtl"] .post h2{padding-left:0;border-left:0;padding-right:14px;border-right:4px solid var(--red)}
[dir="rtl"] .post ul, [dir="rtl"] .post ol{padding-left:0;padding-right:1.3em}
[dir="rtl"] .post blockquote{border-left:0;border-right:4px solid var(--gold);border-radius:10px 0 0 10px}
[dir="rtl"] .facts th, [dir="rtl"] .facts td{text-align:right}
[dir="rtl"] .pc ul{padding-left:0;padding-right:1.1em}
[dir="rtl"] .chip{transform:rotate(1.6deg)}