/*
 * Carrington Website - RTL (Right-to-Left) Layout Overrides
 *
 * Loaded dynamically by locale-switcher.js when Arabic (ar) is active.
 * Can also be linked statically in Arabic locale pages.
 *
 * Approach:
 *   - Uses CSS logical properties where possible (inset-inline-*, margin-inline-*,
 *     padding-inline-*, border-inline-*) so overrides are minimal.
 *   - Physical property overrides are scoped to [dir="rtl"] to avoid affecting LTR.
 *   - Text alignment is handled via text-align: start (logical), which browsers
 *     resolve to right in RTL context automatically — no override needed.
 *
 * Typography note:
 *   Arabic text is set in the system sans-serif stack by default. The Google Fonts
 *   preconnect on the main page does not load an Arabic font; if a custom Arabic
 *   typeface is added later, import it here.
 */

/* ---------------------------------------------------------------------------
   Root / Document
--------------------------------------------------------------------------- */

[dir='rtl'] {
  /* Logical text alignment resolves to right in RTL automatically.
     Only override if a physical "text-align: left" is hardcoded somewhere. */
  font-family:
    'Segoe UI',
    Tahoma,
    system-ui,
    -apple-system,
    'Helvetica Neue',
    Arial,
    sans-serif;
}

/* ---------------------------------------------------------------------------
   Navigation
--------------------------------------------------------------------------- */

/* Logo + menu reverse their visual order */
[dir='rtl'] .nav {
  flex-direction: row-reverse;
}

[dir='rtl'] .nav__menu {
  flex-direction: row-reverse;
}

/* Hamburger toggle sits on the left in RTL */
[dir='rtl'] .nav__toggle {
  margin-inline-start: 0;
  margin-inline-end: auto;
}

/* ---------------------------------------------------------------------------
   Hero section
--------------------------------------------------------------------------- */

[dir='rtl'] .hero__content {
  text-align: right;
}

[dir='rtl'] .hero__actions {
  justify-content: flex-end;
}

/* ---------------------------------------------------------------------------
   Section headers
--------------------------------------------------------------------------- */

[dir='rtl'] .section-header {
  text-align: right;
}

[dir='rtl'] .section-title::after {
  /* Decorative underline — shift to right */
  margin-inline-start: auto;
  margin-inline-end: 0;
}

/* ---------------------------------------------------------------------------
   Feature cards
--------------------------------------------------------------------------- */

[dir='rtl'] .feature-card {
  text-align: right;
}

[dir='rtl'] .feature-card__list {
  /* Bullets appear on the right */
  padding-inline-start: 0;
  padding-inline-end: 1.25rem;
  list-style-position: inside;
}

[dir='rtl'] .feature-card__list li::before {
  /* Custom bullet — swap margin side */
  margin-inline-start: 0;
  margin-inline-end: 0.5rem;
}

/* ---------------------------------------------------------------------------
   Download section
--------------------------------------------------------------------------- */

[dir='rtl'] .download__content {
  text-align: right;
}

[dir='rtl'] .download__badges {
  justify-content: flex-end;
}

[dir='rtl'] .download__sources {
  justify-content: flex-end;
}

/* ---------------------------------------------------------------------------
   Footer
--------------------------------------------------------------------------- */

[dir='rtl'] .footer__content {
  flex-direction: row-reverse;
}

[dir='rtl'] .footer__nav {
  flex-direction: row-reverse;
}

[dir='rtl'] .footer__nav-list {
  text-align: right;
}

[dir='rtl'] .footer__bottom {
  flex-direction: row-reverse;
  text-align: right;
}

/* ---------------------------------------------------------------------------
   Forms (contact modal)
--------------------------------------------------------------------------- */

[dir='rtl'] .form-label {
  text-align: right;
  display: block;
}

[dir='rtl'] .form-input,
[dir='rtl'] .form-textarea {
  text-align: right;
  direction: rtl;
}

[dir='rtl'] .modal__header {
  flex-direction: row-reverse;
}

/* ---------------------------------------------------------------------------
   Locale switcher — dropdown alignment already handled in locale-switcher.css
   via inset-inline-end. Reiterated here for clarity.
--------------------------------------------------------------------------- */

[dir='rtl'] .locale-switcher__dropdown {
  inset-inline-start: auto;
  inset-inline-end: 0;
}

/* ---------------------------------------------------------------------------
   Utility: prevent double-mirroring of icons/images that should not flip
--------------------------------------------------------------------------- */

[dir='rtl'] .no-rtl-flip {
  transform: scaleX(1) !important;
  direction: ltr;
}

/* App store badges should not flip */
[dir='rtl'] .download__badge img {
  transform: none;
}

/* Logo mark should not flip */
[dir='rtl'] .nav__logo-img,
[dir='rtl'] .footer__logo-img {
  transform: none;
}

/* SVG icons that are directionally neutral — no flip needed */
[dir='rtl'] .feature-card__icon svg,
[dir='rtl'] .locale-switcher__globe svg {
  transform: none;
}

/* ---------------------------------------------------------------------------
   Scrollbar (Webkit)  — RTL pages have scrollbar on the left
   This is handled automatically by the browser when dir=rtl is on <html>.
   No CSS override needed.
--------------------------------------------------------------------------- */