/* Odecla RTL overrides.
   The main stylesheet uses CSS logical properties throughout, so flipping is
   automatic; this file only handles what logical properties can't. */

:root {
  /* Arabic faces: Almarai for headings/hero (serif contexts), Rubik for body text.
     They sit after the Latin faces, which carry no Arabic glyphs. */
  --serif: "Playfair Display", "Almarai", "Noto Naskh Arabic", Georgia, serif;
  --sans: "Jost", "Rubik", "Noto Kufi Arabic", "Tahoma", sans-serif;
}

/* Wider Latin letter-spacing looks broken in Arabic script */
[dir="rtl"] .beat-title,
[dir="rtl"] .beat-final .beat-title,
[dir="rtl"] .bottom-menu a,
[dir="rtl"] .mobile-menu a,
[dir="rtl"] .btn,
[dir="rtl"] .btn-dark,
[dir="rtl"] .pill,
[dir="rtl"] .kicker,
[dir="rtl"] .beat-kicker,
[dir="rtl"] .account,
[dir="rtl"] .currency {
  letter-spacing: 0;
}

/* Arabic menu text: bigger + heavier for legibility (thin uppercase Latin
   sizing reads as blurry in Arabic script) */
[dir="rtl"] .bottom-menu a {
  font-size: 1rem;
  font-weight: 500;
  opacity: 1;
}
[dir="rtl"] .mobile-menu a { font-weight: 700; }

/* Keep the brand logo horizontally centered (transform is symmetric) */
[dir="rtl"] .brand-logo { left: 50%; right: auto; }

/* WooCommerce floats that predate logical properties */
[dir="rtl"] .woocommerce div.product div.images,
[dir="rtl"] .woocommerce-page div.product div.images { float: right; }
[dir="rtl"] .woocommerce div.product div.summary,
[dir="rtl"] .woocommerce-page div.product div.summary { float: left; }