/*
  rtl.css — Right-to-left overrides for Arabic (/ar/ pages)
  Applied via <html dir="rtl"> set in BaseLayout when locale === 'ar'.
  Uses CSS logical properties where possible; explicit flips for older patterns.
*/

[dir="rtl"] {
  /* === Typography === */
  font-family: Tahoma, 'Segoe UI', 'Arabic Typesetting', 'Noto Naskh Arabic', system-ui, sans-serif;
  text-align: right;
}

/* Display headings: Playfair Display has no Arabic glyphs — fall back to system Arabic */
[dir="rtl"] h1,
[dir="rtl"] h2,
[dir="rtl"] h3,
[dir="rtl"] h4,
[dir="rtl"] .h-display-1,
[dir="rtl"] .h-display-2,
[dir="rtl"] .h-title-1,
[dir="rtl"] .h-title-2,
[dir="rtl"] .eyebrow,
[dir="rtl"] .family-name,
[dir="rtl"] .footer-tagline,
[dir="rtl"] .mobile-nav-list a {
  font-family: Tahoma, 'Segoe UI', 'Arabic Typesetting', system-ui, sans-serif;
}

/* === Header === */
[dir="rtl"] .header-container {
  flex-direction: row-reverse;
}

[dir="rtl"] .logo {
  margin-right: 0;
  margin-left: var(--space-6);
}

[dir="rtl"] .header-actions {
  flex-direction: row-reverse;
}

[dir="rtl"] .primary-nav a::after {
  transform-origin: right;
}

[dir="rtl"] .mobile-menu-toggle {
  margin-left: 0;
  margin-right: auto;
}

[dir="rtl"] .mobile-menu-close {
  align-self: flex-start;
}

/* === Breadcrumb === */
[dir="rtl"] .breadcrumb {
  flex-direction: row-reverse;
}

/* === Footer === */
[dir="rtl"] .footer-inner {
  direction: rtl;
}

[dir="rtl"] .footer-links {
  text-align: right;
}

[dir="rtl"] .footer-contact-links a {
  flex-direction: row-reverse;
}

[dir="rtl"] .footer-bottom-inner {
  flex-direction: row-reverse;
}

[dir="rtl"] .footer-legal-nav {
  flex-direction: row-reverse;
}

[dir="rtl"] .footer-newsletter-inner {
  flex-direction: row-reverse;
}

/* === Cards === */
[dir="rtl"] .family-card-header {
  flex-direction: row-reverse;
}

[dir="rtl"] .family-cta,
[dir="rtl"] .tool-cta,
[dir="rtl"] .industry-cta {
  flex-direction: row-reverse;
}

[dir="rtl"] .tool-card {
  flex-direction: row-reverse;
}

/* === Product pages === */
[dir="rtl"] .spec-row {
  flex-direction: row-reverse;
}

[dir="rtl"] .product-actions {
  flex-direction: row-reverse;
}

[dir="rtl"] .download-item {
  flex-direction: row-reverse;
}

[dir="rtl"] .breadcrumb-wrap .breadcrumb {
  flex-direction: row-reverse;
}

/* === Compare bar === */
[dir="rtl"] .compare-bar-inner {
  flex-direction: row-reverse;
}

[dir="rtl"] .compare-slot {
  flex-direction: row-reverse;
}

/* === Forms === */
[dir="rtl"] .form-group label {
  text-align: right;
}

[dir="rtl"] input,
[dir="rtl"] textarea,
[dir="rtl"] select {
  text-align: right;
}

[dir="rtl"] .checkbox-label {
  flex-direction: row-reverse;
}

/* === Cookie banner === */
[dir="rtl"] .cookie-banner-inner {
  flex-direction: row-reverse;
}

[dir="rtl"] .cookie-banner-actions {
  flex-direction: row-reverse;
}

[dir="rtl"] .cookie-category-header {
  flex-direction: row-reverse;
}

[dir="rtl"] .cookie-modal-footer {
  flex-direction: row-reverse;
}

/* === Search overlay === */
[dir="rtl"] .search-input-wrap {
  flex-direction: row-reverse;
}

[dir="rtl"] .search-footer {
  flex-direction: row-reverse;
}

[dir="rtl"] .search-hint-chips {
  flex-direction: row-reverse;
}

/* === Transforms: flip horizontal transitions === */
[dir="rtl"] .mobile-menu {
  transform: translateX(-100%);
}

[dir="rtl"] .mobile-menu:not([hidden]) {
  transform: translateX(0);
}

/* === Positioning === */
[dir="rtl"] .compare-bar {
  /* Compare bar slide-in from bottom is direction-neutral */
}

/* === Prose / content sections === */
/* Body prose is justified in RTL on desktop as well; on mobile (<=600px) it */
/* reverts to right via the shared `text-align: start` rule in global.css.   */
@media (min-width: 601px) {
  [dir="rtl"] .section-intro,
  [dir="rtl"] .hero-body,
  [dir="rtl"] .hub-intro,
  [dir="rtl"] .body-lg,
  [dir="rtl"] .body-md {
    text-align: justify;
  }
}

/* Family compare table */
[dir="rtl"] .family-compare-scroll {
  direction: rtl;
}

/* Step indicators (finder quiz) */
[dir="rtl"] .step-indicators {
  flex-direction: row-reverse;
}

/* === Logical property fallbacks for older patterns === */
[dir="rtl"] .industry-card-icon {
  margin-right: 0;
  margin-left: var(--space-4);
}

/* Flip border radii on one-sided elements */
[dir="rtl"] .hint-chip {
  /* chips are symmetric — no flip needed */
}

/* Skip link stays top-left in RTL (accessibility standard) */
[dir="rtl"] .skip-link {
  left: var(--space-4);
  right: auto;
}