/* UAE Retro Forecast - Arabic page (/ar/), loaded after /style.css.
   Right-to-left mirroring and Arabic type (Handjet). The maps keep real
   geography: only their labels change, and callout boxes mirror inside. */

/* Handjet for the Arabic; the page also loads just the digits 0-9 of Jersey 15
   (Handjet's dotted zero reads as an 8 at these sizes). Jersey 15 has a single
   weight, so never fake-bold it. */
body { font-family: 'Jersey 15', 'Handjet', 'Segoe UI', Tahoma, system-ui, sans-serif; font-synthesis: none; }
/* Arabic letters join up: no letter-spacing and no case transforms anywhere */
#stage, #stage *, #hud * { letter-spacing: 0; }
#stage { font-weight: 600; }
.lf, #ldl-text, #ldl-crawl, .btn-start, .btn-city { text-transform: none; }
b, strong, th, h2 { font-weight: 700; }

/* ---------- header: logo right, title beside it, clock left ---------- */
#hdr .band { background: linear-gradient(270deg, #22186a 0%, #3c2a8e 40%, #873e90 70%, #e0743d 100%); }
#logo { left: auto; right: 24px; }
#title { left: auto; right: 126px; text-align: right; font-weight: 700; }
#clock { right: auto; left: 28px; text-align: left; }

/* ---------- main panel ---------- */
.src { right: auto; left: 12px; }

/* current conditions: big temperature column on the right, details on the left */
.cc-left { left: auto; right: 14px; }
.cc-right { left: auto; right: 266px; }
.rows dd { text-align: left; }
.trend { margin-left: 0; margin-right: 4px; }

/* latest observations: columns run right to left */
table.obs th { text-align: right; }
table.obs .num { text-align: left; padding-right: 4px; padding-left: 22px; }

/* maps and the climate chart lay out their own SVG text left-to-right */
svg.map, .clim svg { direction: ltr; }
.m-temp, .m-name { font-family: 'Jersey 15', 'Handjet', sans-serif; font-weight: 700; }
/* Arabic place names have no capitals to lean on: a little larger than the English labels */
.m-name[font-size="14"] { font-size: 16px; }
.m-name[font-size="15"] { font-size: 18px; }
.map-tag { left: auto; right: 12px; }

/* almanac */
.alm td:first-child { text-align: left; }

/* climate */
.clim-facts { left: auto; right: 22px; }
.clim svg { left: auto; right: 248px; }

/* ---------- intro, settings, HUD ---------- */
.lang-link { left: auto; right: 14px; }
/* Arabic needs a wider label column, so the options wrap more: slightly smaller buttons
   (the compact row spacing is shared, in style.css) */
.set-row > span { width: 150px; }
.opt { font-size: 18px; padding: 1px 8px 0; }
.set-done { right: auto; left: 20px; }
.set-lang { right: auto; left: 22px; }
#hud { right: auto; left: 12px; }
#hud-prev svg, #hud-next svg { transform: scaleX(-1); }