/*
  Loaded only when the resolved locale is Dari (fa) or Pashto (ps).

  Most of the layout is flex/grid and mirrors itself from <html dir="rtl">;
  what lives here are the physical properties the rest of the CSS hard-codes
  (left/right offsets, margin-left, translateX) plus an Arabic-script font.
*/

/*
  config.css sets font-family on `*`, which kills normal inheritance, so the
  override has to be just as broad. Icon elements use SVG masks and do not need
  an Arabic-script font.
*/
[dir="rtl"] *:not([class*="fa-"]):not(.fab):not(.fas):not(.far) {
  font-family: "Vazirmatn", "Noto Naskh Arabic", Tahoma, sans-serif;
}

[dir="rtl"] body {
  text-align: right;
}

/* ---------- Header ---------- */

[dir="rtl"] .top-content p i {
  margin-right: 0;
  margin-left: 12px;
}

[dir="rtl"] .dropdown {
  left: auto;
  right: 0;
}

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

/* ---------- Home ---------- */

[dir="rtl"] .trust-item i {
  margin-right: 0;
  margin-left: 10px;
}

/* Mirror the photos so the people face into the right-aligned text. */
[dir="rtl"] .hero-section .background-image {
  transform: scaleX(-1);
}

/*
  The help cards carry their photo as a background behind the text, and the
  card's own transform is taken by the hover lift, so the flip goes on a
  pseudo-element copy. `background: inherit` picks up whichever image applies:
  the donate rule, its iPad breakpoint, or the volunteer card's inline style.
*/
[dir="rtl"] .help-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: inherit;
  transform: scaleX(-1);
}

[dir="rtl"] .help-content {
  position: relative;
  z-index: 1;
}

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

[dir="rtl"] .footer-links a:hover {
  padding-left: 0;
  padding-right: 5px;
}

/* ---------- Shared content ---------- */

/*
  Bulleted/numbered lists are the one place where a list marker would sit on
  the wrong side; the global reset removes markers anyway, but any list that
  opts back in should indent from the right.
*/
[dir="rtl"] ul[style*="list-style"],
[dir="rtl"] ol {
  padding-right: 20px;
  padding-left: 0;
}

/* Latin runs (emails, URLs, "DMV", "501(c)(3)") keep their own direction. */
[dir="rtl"] .footer-contact span,
[dir="rtl"] .tax-box {
  unicode-bidi: plaintext;
}

@media (max-width: 992px) {
  [dir="rtl"] .nav-content .logo {
    margin-right: 0;
    margin-left: auto;
  }

  /* Off-canvas menu slides in from the right instead of the left. */
  [dir="rtl"] .navbar {
    left: auto;
    right: 0;
    transform: translateX(100%);
  }

  [dir="rtl"] .navbar.active {
    transform: translateX(0%);
  }

  [dir="rtl"] .navbar ul li a i {
    transform: rotate(90deg);
  }

  [dir="rtl"] .navbar ul li a i.active {
    transform: rotate(0deg);
  }

  [dir="rtl"] .menu-bar {
    margin-left: 0;
    margin-right: 20px;
  }

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

@media (max-width: 600px) {
  [dir="rtl"] .footer-tax {
    align-items: flex-start;
  }
}

/* ---------- Directional icons ---------- */

/*
  Arrows point along the reading direction: "See More →" in LTR, "← بیشتر" in
  RTL. The flex/inline order already puts the icon after the label (on the
  left in RTL); icons are masks on the <i> itself, so a flip turns the head.
*/
[dir="rtl"] .fa-arrow-right,
[dir="rtl"] .fa-arrow-left {
  transform: scaleX(-1);
}

[dir="rtl"] .back-link:hover {
  transform: translateX(3px);
}