/* ==========================================================================
   XGreen Solar — RTL / Arabic overrides
   Loaded only by the /ar/ pages, after style.css.
   ========================================================================== */

html[lang="ar"] body {
  font-family: "Segoe UI", Tahoma, "Noto Naskh Arabic", "Geeza Pro", "Arial", sans-serif;
  line-height: 1.9;
}

html[lang="ar"] h1,
html[lang="ar"] h2,
html[lang="ar"] h3,
html[lang="ar"] h4 { letter-spacing: 0; line-height: 1.45; }

html[lang="ar"] .eyebrow { letter-spacing: .04em; }
html[lang="ar"] .logo { letter-spacing: 0; }
html[lang="ar"] .logo small { letter-spacing: .06em; }
html[lang="ar"] .footer h4 { letter-spacing: .05em; }
html[lang="ar"] .feature .ico,
html[lang="ar"] .badge-new,
html[lang="ar"] .kpi b,
html[lang="ar"] .stat b { letter-spacing: 0; }

/* Lists with custom markers */
html[lang="ar"] ul { padding-left: 0; padding-right: 20px; }
html[lang="ar"] .speclist li { padding: 8px 26px 8px 0; }
html[lang="ar"] .speclist li::before { left: auto; right: 0; }
html[lang="ar"] .hbeam-list li { padding-left: 0; padding-right: 30px; }
html[lang="ar"] .hbeam-list li::before { left: auto; right: 0; }
html[lang="ar"] .hbeam-list li::after { left: auto; right: 5px; }

/* Absolutely positioned chips */
html[lang="ar"] .mosaic figcaption { left: auto; right: 10px; }
html[lang="ar"] .badge-new { left: auto; right: 12px; }
html[lang="ar"] .skip { left: 0; right: auto; top: -100px; }
html[lang="ar"] .skip:focus { top: 0; border-radius: 0 0 8px 0; }

/* Honeypot field: keep it off-screen without adding horizontal scroll in RTL */
html[lang="ar"] .hp { left: 0; right: auto; top: -200px; width: 1px; height: 1px; opacity: 0; }

/* Bilingual glossary: English column keeps LTR alignment in the Arabic page */
html[lang="ar"] td.glossary-en { direction: ltr; text-align: left; }
html[lang="ar"] td.glossary-ar { text-align: right; }

/* Tables */
html[lang="ar"] th,
html[lang="ar"] td { text-align: right; }

/* Step numbers stay left-to-right inside their own line */
html[lang="ar"] .step::before { display: block; }

/* Spec-heavy elements: let the first strong character decide the direction,
   so "Ø76 / 89 mm" and "1,200–2,500 mm" keep their natural order. */
html[lang="ar"] .chip,
html[lang="ar"] .pcard .tags span,
html[lang="ar"] .topbar span,
html[lang="ar"] .stat b,
html[lang="ar"] .kpi b,
html[lang="ar"] .hero-points b,
html[lang="ar"] td,
html[lang="ar"] .spec-chips { unicode-bidi: plaintext; text-align: right; }
html[lang="ar"] td { text-align: right; }

/* Numbers and units in paragraphs should not mirror around the Arabic text */
html[lang="ar"] .lead,
html[lang="ar"] p { unicode-bidi: plaintext; }

/* Hero mosaic captions and small labels */
html[lang="ar"] .lang a { letter-spacing: 0; }

/* Form controls follow RTL automatically; keep the caret sane */
html[lang="ar"] input,
html[lang="ar"] textarea,
html[lang="ar"] select { text-align: right; }
html[lang="ar"] input[type="email"],
html[lang="ar"] input[type="tel"] { direction: ltr; text-align: right; }

/* Keep spec runs on one line so a wrapped fragment cannot jump lines */
html[lang="ar"] bdi { white-space: nowrap; }

/* Arrow glyphs in links */
html[lang="ar"] .more { display: inline-block; }

@media (max-width: 700px) {
  html[lang="ar"] table { min-width: 520px; font-size: 13px; }
  html[lang="ar"] th,
  html[lang="ar"] td { padding: 10px; }
  html[lang="ar"] .catnav a { font-size: 12.5px; padding: 7px 11px; }
}

@media (max-width: 560px) {
  html[lang="ar"] .hero h1 { font-size: 27px; }
}