/* =========================================================
   Nayya Abaya — Arabic RTL layer
   Loaded AFTER styles.css on /ar/ pages only.
   Strategy: override font tokens so every var() consumer flips
   to Arabic faces automatically; then a handful of directional fixes.
   ========================================================= */

[dir="rtl"] {
    --serif-display: 'Amiri', 'Times New Roman', serif;
    --serif: 'Amiri', 'Times New Roman', serif;
    --sans: 'IBM Plex Sans Arabic', 'Inter', -apple-system, sans-serif;
}

/* Arabic script must never be letter-spaced (it breaks the connected forms) */
[dir="rtl"] body,
[dir="rtl"] body * {
    letter-spacing: 0 !important;
}

/* Arabic needs taller line rhythm than Latin */
[dir="rtl"] body { line-height: 1.9; }
[dir="rtl"] .h1, [dir="rtl"] .h2, [dir="rtl"] .h3,
[dir="rtl"] .hero-tagline,
[dir="rtl"] .editorial-quote { line-height: 1.55; }
[dir="rtl"] .lede, [dir="rtl"] .body-text { line-height: 2; }

/* Slightly larger UI text: Arabic glyphs read smaller at equal px */
[dir="rtl"] .nav-link { font-size: 12.5px; }
[dir="rtl"] .eyebrow { font-size: 12px; }
[dir="rtl"] .btn, [dir="rtl"] .btn-primary, [dir="rtl"] .btn-outline { font-size: 12.5px; }
[dir="rtl"] .announcement { font-size: 12px; }
[dir="rtl"] .product-meta { font-size: 12px; }
[dir="rtl"] .footer-heading { font-size: 12.5px; }
[dir="rtl"] .link-arrow { font-size: 12.5px; }

/* Directional fixes (physical left/right values in base stylesheet) */
[dir="rtl"] .skip-link { left: auto; right: 8px; }
[dir="rtl"] .product-tag { left: auto; right: var(--s-3); }
[dir="rtl"] .hero-image-tag { left: auto; right: 48px; }
[dir="rtl"] .admin-nav a { border-left: none; border-right: 2px solid transparent; }
[dir="rtl"] .admin-nav a.active { border-right-color: var(--blush); }

@media (max-width: 480px) {
    [dir="rtl"] .hero-image-tag { right: 16px; }
}