/* ── RTL Overrides (loaded only when dir="rtl") ──────────────────── */

/* Font */
[dir="rtl"] body,
[dir="rtl"] * {
  font-family: 'IBM Plex Sans Arabic', system-ui, sans-serif;
}

/* Text alignment */
[dir="rtl"] .text-start { text-align: start; }
[dir="rtl"] .text-end   { text-align: end; }

/* Flex direction for row-based layouts */
[dir="rtl"] .rtl\:flex-row-reverse { flex-direction: row-reverse; }

/* Arrow icons — flip horizontally for RTL context */
[dir="rtl"] .arrow-icon {
  transform: scaleX(-1);
}

/* Logical property helpers */
[dir="rtl"] .ms-auto { margin-inline-start: auto; margin-inline-end: 0; }
[dir="rtl"] .me-auto { margin-inline-end: auto;   margin-inline-start: 0; }

/* Prose RTL */
[dir="rtl"] .prose {
  text-align: right;
}
[dir="rtl"] .prose blockquote {
  border-inline-start: 4px solid #6366f1;
  border-inline-end: none;
  padding-inline-start: 1rem;
  padding-inline-end: 0;
}
[dir="rtl"] .prose ul > li::marker,
[dir="rtl"] .prose ol > li::marker {
  color: #6366f1;
}

/* Navigation */
[dir="rtl"] .nav-link {
  letter-spacing: 0;
}

/* Form elements */
[dir="rtl"] select {
  background-position: left 0.75rem center;
  padding-inline-start: 0.75rem;
  padding-inline-end: 2rem;
}

/* Card content alignment */
[dir="rtl"] .service-card {
  text-align: right;
}
[dir="rtl"] .service-card .flex {
  flex-direction: row-reverse;
}
[dir="rtl"] .service-card .flex.mt-auto {
  flex-direction: row-reverse;
}

/* Tag chips in RTL */
[dir="rtl"] .tag-chip {
  direction: ltr; /* Keep tech tags LTR */
}

/* Section label alignment */
[dir="rtl"] .section-label {
  letter-spacing: 0.05em;
}

/* Footer columns */
[dir="rtl"] .footer-col {
  text-align: right;
}

/* Scroll progress direction */
[dir="rtl"] #scroll-progress {
  right: 0;
  left: auto;
}

/* Mobile menu arrow */
[dir="rtl"] .mobile-arrow {
  transform: rotate(180deg);
}

/* Details/summary accordion */
[dir="rtl"] details summary {
  text-align: right;
}

/* Stat strip */
[dir="rtl"] .stat-item {
  text-align: right;
}

/* Masonry columns — maintain LTR for layout */
[dir="rtl"] .columns-1,
[dir="rtl"] .columns-2,
[dir="rtl"] .columns-3 {
  column-fill: balance;
}

/* Gradient text — preserve rendering */
[dir="rtl"] .gradient-text {
  -webkit-text-fill-color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
  background-image: linear-gradient(135deg, #818cf8, #06b6d4);
  display: inline-block;
}

/* Auto-grid RTL (already handled by CSS Grid — no changes needed) */

/* Input placeholder alignment */
[dir="rtl"] input::placeholder,
[dir="rtl"] textarea::placeholder {
  text-align: right;
}