/* ===================================================== Holy Quran App — RTL Overrides Activated when is set by lang.js ===================================================== */ /* ---- Base Direction ---- */ html.rtl body { direction: rtl; text-align: right; } /* ---- Arabic Font Stack ---- */ body.arabic-mode { font-family: 'Noto Naskh Arabic', 'Amiri', system-ui, sans-serif; } body.arabic-mode h1, body.arabic-mode h2, body.arabic-mode h3 { font-family: 'Amiri', 'Noto Naskh Arabic', serif; line-height: 1.6; } body.arabic-mode p, body.arabic-mode li, body.arabic-mode a, body.arabic-mode button, body.arabic-mode .feature-desc, body.arabic-mode .footer-tagline { font-family: 'Noto Naskh Arabic', 'Amiri', sans-serif; line-height: 2.0; font-size: 1.05em; } body.arabic-mode .nav-links a, body.arabic-mode .lang-toggle, body.arabic-mode .btn-primary, body.arabic-mode .btn-ghost, body.arabic-mode h1, body.arabic-mode h2, body.arabic-mode h3, body.arabic-mode .feature-title, body.arabic-mode .footer-col h4, body.arabic-mode .nav-app, body.arabic-mode .nav-company { font-family: 'Amiri', 'Noto Naskh Arabic', serif; letter-spacing: 0; } /* ---- Navigation RTL ---- */ html.rtl .nav-inner { flex-direction: row-reverse; } html.rtl .nav-links { flex-direction: row-reverse; } html.rtl .nav-right { flex-direction: row-reverse; } html.rtl .nav-wordmark { align-items: flex-end; } /* ---- Hero RTL ---- */ html.rtl .hero-content { direction: rtl; } /* ---- Feature Cards RTL ---- */ html.rtl .feature-card { text-align: right; } html.rtl .feature-icon { margin-right: 0; margin-left: auto; } /* ---- About RTL ---- */ html.rtl .about-split { grid-template-columns: auto 1fr; } html.rtl .about-text { order: 2; } html.rtl .about-star { order: 1; } html.rtl .about-links { flex-direction: row-reverse; } /* ---- Carousel RTL ---- */ html.rtl .carousel { direction: rtl; } /* ---- Footer RTL ---- */ html.rtl .footer-grid { direction: rtl; } html.rtl .footer-bottom { flex-direction: row-reverse; } html.rtl .footer-legal { flex-direction: row-reverse; } html.rtl .footer-tagline { text-align: right; } /* ---- Ornament RTL — stays centered, no change needed ---- */ /* ---- Mobile nav RTL ---- */ html.rtl .nav-mobile a { text-align: right; } html.rtl .nav-mobile a:hover { padding-left: 1.5rem; padding-right: 2rem; } /* ---- Button icon order ---- */ html.rtl .btn-primary { flex-direction: row-reverse; } /* ---- CTA download section ---- */ html.rtl .download-section { direction: rtl; } /* ---- Nav brand RTL (reverse logo + text order) ---- */ html.rtl .nav-brand { flex-direction: row-reverse; } /* ---- Hero Bismillah — same, it's already Arabic ---- */ /* ---- Privacy policy doc ---- */ html.rtl .privacy-content { direction: rtl; text-align: right; } html.rtl .privacy-content h2 { text-align: right; } html.rtl .privacy-content ul { padding-right: 1.5rem; padding-left: 0; } /* ---- Carousel controls (flip arrows) ---- */ html.rtl .carousel-btn.prev svg { transform: scaleX(-1); } html.rtl .carousel-btn.next svg { transform: scaleX(-1); }