/* =========================================================================
   CFO International LLC — cfointl.com
   RTL overrides for the Arabic (/ar/) build.

   Loaded ONLY by /ar/ pages, and ONLY after styles.css so these rules win.
   styles.css is authored mostly with logical properties (margin-inline,
   padding-inline, text-align defaults to `start`), which already flip under
   dir="rtl". This sheet mirrors the *physical* direction properties that do
   not flip on their own: hard-coded left/right offsets, transform origins,
   directional arrows, and background positions. Everything is scoped to
   [dir="rtl"] so the file is inert if ever loaded on an LTR page.
   ========================================================================= */

/* ---- Keep intentionally-Latin fragments left-to-right ------------------- */
/* The wordmark holds the English brand name + "Certified Public Accountants",
   and the language button shows a Latin language code ("AR"). Force LTR inside
   them so the Latin text reads correctly within the surrounding RTL page. */
[dir="rtl"] .wordmark-text { direction: ltr; text-align: right; }
[dir="rtl"] .lang-btn { direction: ltr; }

/* ---- Nav hover underline ------------------------------------------------ */
/* LTR: collapsed at the left (right:100%), grows rightward on hover.
   RTL: collapse at the right (left:100%), grow leftward on hover. */
[dir="rtl"] .nav-link::after {
  left: 100%;
  right: 0;
  transition: left 0.28s var(--ease);
}
[dir="rtl"] .nav-link:hover::after { left: 0; }

/* ---- Card top-accent sweep --------------------------------------------- */
[dir="rtl"] .card::before { transform-origin: right; }

/* ---- Language dropdown -------------------------------------------------- */
/* Desktop popover is anchored to the right edge in LTR; anchor to the left. */
[dir="rtl"] .lang-list { right: auto; left: 0; }

/* ---- Hero glow (decorative) -------------------------------------------- */
[dir="rtl"] .hero::after { right: auto; left: -6%; }

/* ---- Select caret ------------------------------------------------------- */
/* The chevron is a background image pinned to the right; move it to the left
   and swap the reserved padding side. */
[dir="rtl"] .field select {
  background-position: left 1rem center;
  padding-right: 0.95rem;
  padding-left: 2.6rem;
}

/* ---- Process steps ------------------------------------------------------ */
/* Leading numeral and the connector line are pinned physically left→right. */
[dir="rtl"] .step::before { left: auto; right: 0; }
[dir="rtl"] .step::after { left: 0; right: 3.2rem; }
/* (journey: last-in-row is still :nth-child(3n), and :last-child::after is
   already hidden — both selectors are direction-agnostic, so no change.) */

/* ---- Note / callout ----------------------------------------------------- */
/* Accent bar moves from the left edge to the right edge. */
[dir="rtl"] .note {
  border-left: 1px solid var(--line);
  border-right: 3px solid var(--gold);
}
[dir="rtl"] .section--ink .note {
  border-left: 1px solid var(--hairline-ink);
  border-right: 3px solid var(--gold);
}

/* ---- Package list bullets ---------------------------------------------- */
[dir="rtl"] .pkg-list li { padding-left: 0; padding-right: 1.4rem; }
[dir="rtl"] .pkg-list li::before { left: auto; right: 0; }

/* ---- Prose lists (privacy / long-form) --------------------------------- */
[dir="rtl"] .prose ul { padding-left: 0; padding-right: 1.3rem; }

/* ---- Directional arrows ------------------------------------------------- */
/* Every forward-pointing arrow (CTA buttons, arrow links, card tags, the
   by-country card feet) must point toward the reading direction — left. */
[dir="rtl"] .btn svg,
[dir="rtl"] .card-tag svg,
[dir="rtl"] .arrow-link svg { transform: scaleX(-1); }
/* Preserve the hover nudge (now leftward) on arrow links. */
[dir="rtl"] .arrow-link:hover svg { transform: scaleX(-1) translateX(4px); }

/* ---- Mobile nav drawer -------------------------------------------------- */
@media (max-width: 900px) {
  /* Drawer slides in from the LEFT in RTL (from the right in LTR). */
  [dir="rtl"] .nav-links {
    inset: 0 auto 0 0;
    transform: translateX(-100%);
    box-shadow: 30px 0 60px -20px rgba(0, 0, 0, 0.5);
  }
  /* Must beat both `.nav-links` (translateX(-100%)) and the equal-specificity
     base `.nav-links.is-open { transform:none }` that loads earlier. */
  [dir="rtl"] .nav-links.is-open { transform: none; }
  /* Indent the collapsed language list on the correct side. */
  [dir="rtl"] .lang-list { padding: 0 1.6rem 0.4rem 0; }
}