/**
 * Envision Dark — RTL (Right-to-Left) Stylesheet
 * Arabic language support
 */

:root {
    --font-primary: 'Estedad', 'Roboto', 'Noto Kufi Arabic', sans-serif;
}

/* Base RTL */
html[dir="rtl"],
body.rtl {
    direction: rtl;
    text-align: right;
    font-family: var(--font-primary);
}

/* Typography adjustments for Arabic */
html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3,
html[dir="rtl"] h4,
html[dir="rtl"] h5,
html[dir="rtl"] h6 {
    letter-spacing: 0;
    line-height: 1.4;
}

/* Flip margins/paddings */
html[dir="rtl"] .footer-links a:hover {
    padding-right: 6px;
    padding-left: 0;
}

/* Timeline — reverse direction */
html[dir="rtl"] .timeline-item {
    flex-direction: row-reverse;
    text-align: right;
}

/* Stats */
html[dir="rtl"] .stat-card { direction: rtl; }

/* FAQ */
html[dir="rtl"] .faq-question {
    flex-direction: row-reverse;
    text-align: right;
}

/* Service icon — flip margin */
html[dir="rtl"] .service-icon {
    margin-right: 0;
    margin-left: 1.25rem;
}

/* Social icons — reverse wrap */
html[dir="rtl"] .social-icons { flex-direction: row-reverse; }

/* Footer bottom */
html[dir="rtl"] .footer-bottom { flex-direction: row-reverse; }

/* Navigation items
   NOTE: do NOT use flex-direction:row-reverse on the header <nav> — dir="rtl"
   already reverses the flex main axis, so row-reverse double-flips it back to
   LTR order (this was placing "الرئيسية" on the wrong side and breaking the
   mobile column nav). Let dir:rtl handle ordering. */
html[dir="rtl"] .nav-menu {
    /* legacy class, no longer used by the .edv-* header */
}

/* Buttons */
html[dir="rtl"] .btn-primary,
html[dir="rtl"] .btn-outline {
    flex-direction: row-reverse;
}

/* Icons preceding text */
html[dir="rtl"] .fas,
html[dir="rtl"] .fab,
html[dir="rtl"] .far {
    margin-right: 0;
    margin-left: 8px;
}

/* Hero text alignment */
html[dir="rtl"] .hero-section .hero-content,
html[dir="rtl"] .hero-text {
    text-align: right;
}

html[dir="rtl"] .hero-section .btn-group,
html[dir="rtl"] .cta-buttons {
    flex-direction: row-reverse;
    justify-content: flex-end;
}

/* Blog card body */
html[dir="rtl"] .blog-card-body,
html[dir="rtl"] .blog-category {
    text-align: right;
}

/* Section eyebrow */
html[dir="rtl"] .section-eyebrow { text-align: right; }

/* Form labels */
html[dir="rtl"] .form-label { text-align: right; }
html[dir="rtl"] .form-input {
    text-align: right;
    direction: rtl;
}
html[dir="rtl"] .form-input::placeholder { text-align: right; }

/* Pricing features list */
html[dir="rtl"] .pricing-feature {
    flex-direction: row-reverse;
    text-align: right;
}

/* Process steps */
html[dir="rtl"] .process-step { text-align: right; }

/* Testimonials */
html[dir="rtl"] .testimonial-card { text-align: right; }
html[dir="rtl"] .testimonial-avatar-wrap { flex-direction: row-reverse; }

/* Logo strip */
html[dir="rtl"] .logo-strip { flex-direction: row-reverse; }

/* WhatsApp button — mirror to left */
html[dir="rtl"] .whatsapp-float {
    right: auto !important;
    left: 28px !important;
}

/* Scroll reveal — RTL slide from right */
html[dir="rtl"] .reveal {
    transform: translateX(30px);
}
html[dir="rtl"] .reveal.visible {
    transform: translateX(0);
}

/* Elementor RTL fixes */
html[dir="rtl"] .elementor-widget-wrap,
html[dir="rtl"] .e-con-inner {
    direction: rtl;
}

/* Arabic number styling */
html[dir="rtl"] .stat-number {
    font-family: 'Estedad', sans-serif;
    font-feature-settings: "locl" 1;
}

/* Grid/Flex RTL */
html[dir="rtl"] .grid-cols-3,
html[dir="rtl"] .grid-cols-4,
html[dir="rtl"] .flex-row {
    direction: rtl;
}

/* Mobile menu RTL */
html[dir="rtl"] .mobile-menu {
    transform: translateX(-100%);
}
html[dir="rtl"] .mobile-menu.open {
    transform: translateX(0);
}

/* Border-left → border-right for RTL indicators */
html[dir="rtl"] .border-l-accent {
    border-left: none;
    border-right: 3px solid var(--accent-magenta);
}

/* Dropdown menus */
html[dir="rtl"] .dropdown-menu {
    left: auto;
    right: 0;
}

/* Breadcrumbs */
html[dir="rtl"] .breadcrumb {
    direction: rtl;
    text-align: right;
}
html[dir="rtl"] .breadcrumb .separator {
    transform: scaleX(-1);
}

/* Media queries for RTL mobile */
@media (max-width: 768px) {
    html[dir="rtl"] h1 { font-size: 2rem; line-height: 1.35; }
    html[dir="rtl"] h2 { font-size: 1.75rem; }
    html[dir="rtl"] .hero-section .btn-group { justify-content: center; }
    html[dir="rtl"] .footer-bottom { flex-direction: column; align-items: flex-end; }
}