/* ar.css: Arabic pages (/ar/*), right-to-left. Loaded after zh.css (which supplies the
   shared .zh-* components: welcome block, Telegram CTA, tables, prose, callouts) by
   partials/head-i18n.njk via langCss. Everything here is scoped to html[lang="ar"].
   The page is <html lang="ar" dir="rtl">, so flex/grid rows and the nav already mirror;
   this file fixes what dir alone cannot: physical paddings/borders, text-align,
   letter-spacing (breaks Arabic joining), arrows, fonts and LTR islands.
   No web fonts: system Arabic faces only (no extra requests). Space Grotesk stays first
   so Latin text (handles, prices, code) keeps the brand face. */

html[lang="ar"] {
  --font-sans: 'Space Grotesk', "Segoe UI", Tahoma, "Geeza Pro", "SF Arabic", "Noto Sans Arabic",
    "Noto Naskh Arabic", "Arabic Typesetting", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-display: var(--font-sans);
  direction: rtl;
}

html[lang="ar"] body {
  direction: rtl;
  text-align: start;
  line-height: 1.9;
  overflow-wrap: break-word;
}

/* Letter-spacing and uppercase break Arabic letter joining: turn both off everywhere. */
html[lang="ar"] *,
html[lang="ar"] *::before,
html[lang="ar"] *::after {
  letter-spacing: 0 !important;
  text-transform: none !important;
}

html[lang="ar"] .nav__links a { font-size: 14px; }
html[lang="ar"] .nav__links a.btn { font-size: 13px; }
html[lang="ar"] .section-label { font-size: 13px; }

/* Latin / code / handles stay left-to-right inside RTL text. */
html[lang="ar"] code,
html[lang="ar"] pre,
html[lang="ar"] kbd,
html[lang="ar"] samp {
  direction: ltr;
  unicode-bidi: isolate;
  text-align: left;
}
html[lang="ar"] .num { direction: rtl; }
html[lang="ar"] .hero__stat-value,
html[lang="ar"] .price-card__accounts { unicode-bidi: plaintext; }

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

html[lang="ar"] .hero h1 {
  font-size: clamp(28px, 4.6vw, 50px);
  line-height: 1.5;
}

html[lang="ar"] .hero__subtitle {
  font-size: clamp(16px, 1.8vw, 18px);
  line-height: 2;
  max-width: 780px;
  margin-bottom: 28px;
}
html[lang="ar"] .hero__subtitle a { text-decoration: underline; text-underline-offset: 4px; }

html[lang="ar"] .hero__updated { font-size: 13px; color: var(--text-muted); margin: -12px 0 28px; }
html[lang="ar"] .section-subtitle { line-height: 2; }
html[lang="ar"] .hero__stats { flex-wrap: wrap; justify-content: center; row-gap: 24px; }

/* Cards and grids: body copy reads right-aligned (start), steps stay centred as in the source. */
html[lang="ar"] .event-card,
html[lang="ar"] .feature-item,
html[lang="ar"] .price-card,
html[lang="ar"] .webhook-section__header { text-align: start; }
html[lang="ar"] .step,
html[lang="ar"] .hero,
html[lang="ar"] .cta-section { text-align: center; }

/* ── Nav: mobile menu and dropdown ───────────────────────────────────── */
@media (max-width: 768px) {
  html[lang="ar"] .nav__dropdown-menu { padding: 0 8px 0 0; }
  html[lang="ar"] .nav__links.open { text-align: right; }
}
html[lang="ar"] .nav__dropdown-item__text { text-align: start; }

/* ── FAQ ─────────────────────────────────────────────────────────────── */
html[lang="ar"] .faq__question { text-align: right; justify-content: space-between; line-height: 1.7; gap: 16px; }
html[lang="ar"] .faq__question-icon { flex-shrink: 0; margin-inline-start: auto; margin-inline-end: 0; }
html[lang="ar"] .faq__item.open .faq__answer { max-height: 1400px; }
html[lang="ar"] .faq__answer-inner { text-align: right; padding: 0 32px 20px; font-size: 15px; line-height: 2; }

/* ── Footer ──────────────────────────────────────────────────────────── */
html[lang="ar"] .footer__machine a { margin-left: 0; margin-right: 10px; }
html[lang="ar"] .footer__col a,
html[lang="ar"] .footer__copy { text-align: start; }
html[lang="ar"] .footer__machine { text-align: left; }

/* ── Founder welcome block ───────────────────────────────────────────── */
html[lang="ar"] .zh-welcome { text-align: right; }
html[lang="ar"] .zh-welcome__text { line-height: 2; }
html[lang="ar"] .zh-welcome__actions a[dir="ltr"] { unicode-bidi: isolate; }
html[lang="ar"] .zh-tg--left { align-items: flex-start; }

/* ── Inline code ─────────────────────────────────────────────────────── */
html[lang="ar"] main code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--accent-bright);
  overflow-wrap: anywhere;
}
html[lang="ar"] main pre code { padding: 0; border: 0; background: none; color: inherit; font-size: inherit; overflow-wrap: normal; }
html[lang="ar"] pre { font-variant-ligatures: none; }

/* ── Tables: RTL columns, right-aligned text; wrapper scrolls, page never does ── */
html[lang="ar"] .zh-table-wrap { direction: rtl; }
html[lang="ar"] .zh-table { direction: rtl; }
html[lang="ar"] .zh-table th,
html[lang="ar"] .zh-table td { text-align: right; line-height: 1.85; }
html[lang="ar"] .zh-table tr.is-us td:first-child { box-shadow: inset -2px 0 0 var(--accent); }
html[lang="ar"] .zh-table .num { white-space: normal; }
html[lang="ar"] .zh-note { text-align: right; line-height: 2; }
html[lang="ar"] .zh-note.zh-center { text-align: center; }

/* Protocol / API tables carry LTR content (op codes, event names): keep them LTR but text start-aligned. */
html[lang="ar"] .ar-ltr-table .zh-table { direction: ltr; }
html[lang="ar"] .ar-ltr-table .zh-table th,
html[lang="ar"] .ar-ltr-table .zh-table td { text-align: left; }

/* ── Long-form guide text ────────────────────────────────────────────── */
html[lang="ar"] .zh-prose { text-align: right; line-height: 2.05; }
html[lang="ar"] .zh-prose h2,
html[lang="ar"] .zh-prose h3 { line-height: 1.6; }
html[lang="ar"] .zh-prose ol,
html[lang="ar"] .zh-prose ul { padding-left: 0; padding-right: 1.6em; }

html[lang="ar"] .zh-callout {
  border-left: 0;
  border-right: 3px solid var(--accent);
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  line-height: 2;
  text-align: right;
}

html[lang="ar"] .zh-links,
html[lang="ar"] .zh-disclaimer { line-height: 2.1; }

/* ── Code samples stay LTR ───────────────────────────────────────────── */
html[lang="ar"] .zh-code-grid,
html[lang="ar"] .webhook-code { direction: ltr; text-align: left; }
html[lang="ar"] .webhook-code__header { direction: ltr; justify-content: flex-start; }

/* ── Pricing cards ───────────────────────────────────────────────────── */
html[lang="ar"] .price-card__features { padding-right: 0; }
html[lang="ar"] .price-card__features li { text-align: right; }

@media (max-width: 640px) {
  html[lang="ar"] .faq__question { padding: 16px 18px; }
  html[lang="ar"] .faq__answer-inner { padding: 0 18px 16px; }
  html[lang="ar"] .zh-prose { font-size: 15px; }
  html[lang="ar"] .hero h1 { font-size: clamp(26px, 7vw, 34px); }
}