/* ============================================
   RTL Overrides for Arabic version
   Loaded AFTER styles.css on [dir="rtl"] pages
   ============================================ */

/* Typography */
html[dir="rtl"] body {
  font-family: 'Noto Sans Arabic', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3,
html[dir="rtl"] h4,
html[dir="rtl"] .logo-name {
  font-family: 'Noto Sans Arabic', 'Inter', sans-serif;
}

/* Text alignment */
html[dir="rtl"] .page-header,
html[dir="rtl"] .content-section,
html[dir="rtl"] .info-box {
  text-align: right;
}

/* Flexbox direction reversal */
html[dir="rtl"] .header-top .container,
html[dir="rtl"] .header-main .container,
html[dir="rtl"] .header-contact,
html[dir="rtl"] .hero-buttons,
html[dir="rtl"] .hero-info,
html[dir="rtl"] .footer-main,
html[dir="rtl"] .footer-bottom .container {
  direction: rtl;
}

/* Content list icons */
html[dir="rtl"] .content-list li {
  flex-direction: row-reverse;
}

html[dir="rtl"] .content-list-icon {
  margin-left: var(--space-md);
  margin-right: 0;
}

/* Info box border */
html[dir="rtl"] .info-box {
  border-left: none;
  border-right: 4px solid var(--color-secondary);
  padding-left: 0;
  padding-right: var(--space-lg);
}

/* Breadcrumb */
html[dir="rtl"] .breadcrumb {
  direction: rtl;
}

/* Footer contact items */
html[dir="rtl"] .footer-contact-item {
  flex-direction: row-reverse;
  text-align: right;
}

/* CTA box */
html[dir="rtl"] .cta-box {
  text-align: center;
}

/* Service cards */
html[dir="rtl"] .service-card {
  text-align: center;
}

/* Feature items */
html[dir="rtl"] .feature-item {
  text-align: center;
}

/* Contact grid */
html[dir="rtl"] .contact-item {
  flex-direction: row-reverse;
  text-align: right;
}

/* Phone numbers and LTR content in RTL context */
html[dir="rtl"] a[href^="tel:"],
html[dir="rtl"] .ltr-num {
  direction: ltr;
  unicode-bidi: embed;
  display: inline-block;
}

/* Lang switch button */
.lang-switch {
  font-size: 0.85rem;
  padding: 0.35em 0.75em;
  border-radius: var(--radius-md);
  text-decoration: none;
}

/* Mobile nav RTL */
@media (max-width: 768px) {
  html[dir="rtl"] .main-nav {
    text-align: right;
  }
  
  html[dir="rtl"] .main-nav ul {
    align-items: flex-end;
  }
}