/* ==========================================================================
   rtl.css — [dir="rtl"] override layer, loaded ONLY for the `ar` locale.
   ==========================================================================

   WHY A SEPARATE OVERRIDE FILE, NOT AN EDIT TO THE VENDOR SHEETS

   `master.css`/`nuxt.css`/`customV1.css` are deliberately byte-identical to
   the reference (nuxt.config.ts's `css: []` docblock) and drive the
   100/100 pixel-diff baseline (`npm run visual`). Editing them — even to
   convert a physical property to a logical one — would both violate that
   fidelity contract and force a full baseline re-shoot. This file changes
   NOTHING for `en`/`tr` (it is never even requested outside `ar`) and adds
   exactly the rules verified to be load-bearing for RTL, nothing more.

   Good news doing this: the vendor sheets already lean heavily on logical
   properties upstream (`margin-inline-*`/`padding-inline-*`/`inset-inline-*`
   — hundreds of declarations, plus 5 existing `[dir=rtl]` rules already in
   master.css/customV1.css) — most of the surface area needed no touching
   at all. This file covers the parts measured to still break: this
   project's OWN hover-arrow nudges (a `translateX(Npx)` "move right on
   hover" pattern repeated across the redesigned card grids, which a plain
   `[dir=rtl]` inherit does NOT flip on its own — CSS transforms are always
   in the element's physical coordinate space, direction-agnostic).

   Anything NOT listed here that turns out to break in `/i18n-demo` or a
   real `/ar/*` page is a REAL gap — see content/REVIEW.md's RTL section for
   the current known-incomplete list (the ~380 physical declarations in the
   vendor sheets that were audited but deliberately NOT touched here).

   LOAD POSITION: tagPriority 11 in app/layouts/default.vue — after every
   other stylesheet (2–10), so it always wins the cascade for the rules it
   actually declares. `!important` is not needed and not used.
   ========================================================================== */

/* ── typography ───────────────────────────────────────────────────────── */

[dir='rtl'] body {
  /* Latin text (brand names, numerals in some contexts) inside this stack
     still renders via Fira Sans — Noto Sans Arabic's unicode-range
     (fonts-ar.css) covers Arabic codepoints only, so the browser falls
     through to the next family for anything outside that range. */
  font-family: 'Noto Sans Arabic', 'Fira Sans', sans-serif;
}

[dir='rtl'] {
  /* Arabic needs more vertical breathing room per line than Latin at the
     same font-size — a single sitewide bump rather than hand-tuning every
     heading/paragraph rule. Multiplicative (not a fixed px value) so it
     scales with each element's own font-size. */
  --ar-line-height-scale: 1.15;
}

[dir='rtl'] body,
[dir='rtl'] p,
[dir='rtl'] .bs-input-v1,
[dir='rtl'] .bs-select-v1 {
  line-height: calc(1em * var(--ar-line-height-scale));
}

/* ── forms ────────────────────────────────────────────────────────────── */

/* `text-align: start` already does the right thing on its own in most of
   this app's own SFCs (ReferenceGroupGrid.vue/HomeFeatures.vue already use
   it) — this covers the vendor form controls, which use a hardcoded
   `text-align: left` (master.css) that a bare `[dir]` attribute does not
   override on its own. */
[dir='rtl'] .bs-input-v1,
[dir='rtl'] .bs-select-v1,
[dir='rtl'] .bs-country-id {
  text-align: right;
}

/* ── hover-arrow nudges — this project's own components ─────────────────
   Every one of these pairs a base rule (LTR: nudge toward reading-end,
   i.e. right) with an RTL override (nudge toward reading-end, i.e. left —
   negative X). `:focus-visible`/`:focus-within` variants included
   alongside each `:hover`, matching what each component itself defines. */

[dir='rtl'] .hero-btn:hover .hero-btn-arrow {
  transform: translateX(-3px);
}

[dir='rtl'] .features-cta-btn:hover .features-cta-arrow,
[dir='rtl'] .features-cta-btn:focus-visible .features-cta-arrow {
  transform: translateX(-3px);
}

[dir='rtl'] .gf-item:hover .gf-item-arrow,
[dir='rtl'] .gf-item:focus-within .gf-item-arrow {
  transform: translateX(-4px);
}

[dir='rtl'] .sectors-cta:hover .sectors-cta-arrow {
  transform: translateX(-3px);
}

[dir='rtl'] .blog-card:hover .blog-card-arrow,
[dir='rtl'] .blog-card:focus-visible .blog-card-arrow {
  transform: translateX(-5px);
}

[dir='rtl'] .news-card:hover .news-card-arrow,
[dir='rtl'] .news-card:focus-visible .news-card-arrow {
  transform: translateX(-5px);
}

[dir='rtl'] .ref-card:hover .ref-card-arrow,
[dir='rtl'] .ref-card:focus-visible .ref-card-arrow {
  transform: translateX(-4px);
}

[dir='rtl'] .ref-row:hover .ref-row-cta svg,
[dir='rtl'] .ref-row-cta:hover svg {
  transform: translateX(-3px);
}

/* ── directional icons ────────────────────────────────────────────────── */

/* Arrow/chevron glyphs that point "forward" (reading-end) — mirrored so
   they still point toward reading-end in RTL, not stay pinned physically
   right. `scaleX(-1)` (not a redrawn path) keeps every SVG's `<path>` data
   untouched. */
[dir='rtl'] .ref-card-arrow,
[dir='rtl'] .ref-banner-cta svg,
[dir='rtl'] .ref-row-cta svg,
[dir='rtl'] .blog-card-arrow,
[dir='rtl'] .news-card-arrow,
[dir='rtl'] .gf-item-arrow,
[dir='rtl'] .features-cta-arrow,
[dir='rtl'] .hero-btn-arrow,
[dir='rtl'] .sectors-cta-arrow {
  transform: scaleX(-1);
}

/* The "back" link on a reference-group detail page (← Tüm referanslar /
   ← All references) — its arrow points toward reading-start already (it's
   a BACK link, not a forward one), so in RTL it needs to point the other
   physical way too: reading-start is now the right edge. */
[dir='rtl'] .ref-back-link svg {
  transform: scaleX(-1);
}

/* Mobile nav "back" chevron (leftmobilemenu) — master.css already ships
   `[dir=rtl] .bs-leftmobilemenu-back:before` / `.bs-leftmobilemenu i:after`
   (master.css:9978-9981) for the vendor accordion icon font; nothing to
   add here, listed for completeness so this file stays the map of what
   WAS checked, not just what needed a rule. */

/* ── owl-carousel prev/next ──────────────────────────────────────────────
   customV1.css:1025 already flips `.owl-carousel` itself under [dir=rtl];
   BsBanner.vue's own `‹`/`›` glyphs (aria-labelled via a11y.carouselPrevious/
   Next, app/components/common/BsBanner.vue) read correctly either way since
   they're generic chevrons, not arrows — no override needed. */