/* Shared site styles (fonts, RTL helpers, motion preferences). */

html {
  scroll-behavior: smooth;
}

/* Font switching based on document direction (English LTR / Arabic RTL). */
body {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto,
    Arial, "Apple Color Emoji", "Segoe UI Emoji";
}

[dir="rtl"] body {
  font-family: Cairo, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto,
    Arial, "Apple Color Emoji", "Segoe UI Emoji";
}

/* Simple RTL mirroring helpers for key layout rows (nav + header controls). */
/* Grid direction helper (مثل dir-row لكن للـ grid) */

.dir-grid > * {
  order: 0;
}

[dir="rtl"] .dir-grid > :first-child {
  order: 2;
}

[dir="rtl"] .dir-grid > :last-child {
  order: 1;
}

/* نسخة تعمل فقط في الشاشات الكبيرة مثل md */
@media (min-width: 768px) {
  .dir-grid-md > * {
    order: 0;
  }

  [dir="rtl"] .dir-grid-md > :first-child {
    order: 2;
  }

  [dir="rtl"] .dir-grid-md > :last-child {
    order: 1;
  }
}

/* Better focus ring visibility for keyboard users. */
:where(a, button, input, textarea, select):focus-visible {
  outline: 2px solid rgba(79, 70, 229, 0.65); /* indigo-600-ish */
  outline-offset: 3px;
  border-radius: 0.5rem;
}

/* Respect reduced motion preferences. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  * {
    animation: none !important;
    transition: none !important;
  }
}