/* ==========================================================================
   Arabic / RTL overrides — loaded AFTER style.css on every /ar/ page.
   Scoped to [dir="rtl"] so it only ever affects Arabic pages, never English.
   Flexbox rows already mirror automatically under dir="rtl" per spec; this
   file handles the properties that don't auto-flip (fonts, text-align,
   absolute positions, grid item order, form alignment).
   ========================================================================== */

[dir="rtl"] body{
  font-family: "Tajawal", "IBM Plex Mono", var(--font-body);
}
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3,
[dir="rtl"] .stat-num, [dir="rtl"] .seal-year,
[dir="rtl"] .mark-text, [dir="rtl"] .leader-mark{
  font-family: "Amiri", var(--font-display);
}
[dir="rtl"] .eyebrow, [dir="rtl"] .label, [dir="rtl"] .v-tag, [dir="rtl"] .b-eyebrow,
[dir="rtl"] .p-brand, [dir="rtl"] .stat-label, [dir="rtl"] .footer-inner,
[dir="rtl"] .mark-tagline{
  font-family: "Tajawal", var(--font-body);
  letter-spacing: 0;
}

/* Numbers stay legible in Western Arabic numerals — keep mono font for them */
[dir="rtl"] .stat-num, [dir="rtl"] .seal-year, [dir="rtl"] .nutrition-table td,
[dir="rtl"] .compare-table td, [dir="rtl"] .calc-breakdown td{
  font-family: var(--font-mono);
  direction: ltr;
  unicode-bidi: embed;
}

/* Base direction + text alignment */
[dir="rtl"] body{text-align: right;}
[dir="rtl"] .hero-cta, [dir="rtl"] .header-inner, [dir="rtl"] .footer-inner,
[dir="rtl"] .compare-picker{flex-direction: row;} /* flex already mirrors under rtl; explicit for clarity */

/* Logo mark: emblem should sit on the right in RTL reading order */
[dir="rtl"] .mark{flex-direction: row-reverse;}
[dir="rtl"] .mark-text{text-align: right;}

/* Nav underline slider direction handled in JS via getBoundingClientRect — no change needed */

/* Hero + section text alignment */
[dir="rtl"] .hero-copy, [dir="rtl"] .page-hero, [dir="rtl"] .tool-hero,
[dir="rtl"] .section-lede, [dir="rtl"] .hero-sub{text-align: right;}

/* Stat grids / capability lists — center-aligned content is unaffected;
   left-aligned card text needs to flip to right */
[dir="rtl"] .stat-label, [dir="rtl"] .cap-copy, [dir="rtl"] .value-card,
[dir="rtl"] .brand-card, [dir="rtl"] .variety-card, [dir="rtl"] .product-card,
[dir="rtl"] .contact-card, [dir="rtl"] .leader, [dir="rtl"] .timeline,
[dir="rtl"] .faq, [dir="rtl"] .resource-card, [dir="rtl"] .calc-card,
[dir="rtl"] .calc-field{text-align: right;}

/* Timeline rule + dot: mirror to the right edge */
[dir="rtl"] .timeline{padding-right: 0;}

/* Forms: labels and inputs read right-to-left */
[dir="rtl"] .calc-field label{flex-direction: row-reverse;}
[dir="rtl"] .calc-field input, [dir="rtl"] .calc-field select{text-align: right;}

/* Tables: header/row label column moves to the right */
[dir="rtl"] .compare-table th, [dir="rtl"] .compare-table td,
[dir="rtl"] .nutrition-table th, [dir="rtl"] .nutrition-table td,
[dir="rtl"] .spec-table th, [dir="rtl"] .spec-table td{text-align: right;}

/* FAB (WhatsApp/email button): mirror to bottom-left in RTL layouts */
[dir="rtl"] .fab{right: auto; left: 24px;}
[dir="rtl"] .fab-options{align-items: flex-start;}

/* Mobile nav active-page left border flips to the reading-start edge (right) */
@media (max-width: 900px){
  [dir="rtl"] .main-nav a.active{
    border-left: none; border-right: 2px solid var(--rust);
    padding-left: 0; padding-right: 12px;
  }
}

/* FAQ chevron mirrors */
[dir="rtl"] .faq summary{flex-direction: row-reverse;}

/* Leadership avatar + text pairing mirrors via flex row-reverse */
[dir="rtl"] .leader{flex-direction: row-reverse;}
[dir="rtl"] .leader-mark{margin-left: 0; margin-right: 0;}