/**
 * LTR mirroring overrides.
 *
 * Enqueued LAST (after utilities.css) and ONLY when the current view is not
 * RTL — see the `$is_ltr_view` check in inc/enqueue.php, which prefers
 * Polylang's current language and falls back to is_rtl(). Because this
 * stylesheet is conditionally loaded rather than gated by a `[dir="ltr"]`
 * attribute selector, every rule below is unprefixed: if it's loaded at
 * all, it should apply.
 *
 * base.css, layout.css and components.css are the untouched, verbatim-ported
 * legacy CSS (RTL-first) and MUST NOT be edited — this file only layers
 * overrides on top of them.
 *
 * Audit summary (components.css ~1917 lines, layout.css, base.css read in
 * full): the legacy CSS turned out to be built almost entirely on logical
 * properties already — margin-inline/padding-inline, inset-inline-start/end,
 * text-align: start, and plain flexbox rows (whose start/end edges follow
 * `direction` automatically). Physical `left`/`right`/`margin-left`/
 * `margin-right`/`padding-left`/`padding-right` do not appear anywhere in
 * those three files. That means the single highest-leverage fix — flipping
 * the root `direction` — auto-mirrors the vast majority of the UI (topbar,
 * nav, hero eyebrow rule, about badge, industry card icon/text, footer
 * columns, forms, nav__menu active-state accent bar, etc.) with zero
 * additional rules. What's left below is only the handful of things CSS
 * `direction` cannot fix on its own: a hardcoded diagonal-light gradient and
 * two SVG chevrons whose shape is baked into the PHP markup (which we are
 * not allowed to edit for this pass).
 */

/* ============ Root direction ============
 * base.css:54-56 hardcodes `html { direction: rtl; }` unconditionally, since
 * the theme is RTL-first. This is rule #1 — everything else in this file,
 * and every logical-property rule already in the legacy CSS, depends on it.
 * Loaded after utilities.css (same specificity, later cascade position), so
 * it wins.
 */
html {
  direction: ltr;
}

/* ============ Hero ============
 * .hero__overlay (components.css ~704-710) layers a 90deg horizontal
 * gradient (dark at the inline-start edge fading out by 55%) UNDER a
 * vertical vignette. `direction` doesn't affect gradient angles, so under
 * LTR this would keep darkening the same physical (left) edge instead of
 * mirroring to darken the new inline-start (still left, but let's be
 * explicit and correct rather than relying on coincidence) — mirrored here
 * by flipping the horizontal gradient to 270deg so the darker edge tracks
 * the logical start side the way the rest of the mirrored layout does.
 */
.hero__overlay {
  background:
    linear-gradient(180deg, rgba(5, 12, 23, 0.78) 0%, rgba(8, 20, 37, 0.62) 45%, rgba(5, 12, 23, 0.85) 100%),
    linear-gradient(270deg, rgba(4, 10, 19, 0.55) 0%, rgba(4, 10, 19, 0.15) 55%);
}

/* ============ Cards (practice-areas / experience / insights "read more" links) ============
 * The inline chevron SVG in these card links is hardcoded in the PHP as
 * `M15 6L9 12L15 18` — a left-pointing chevron, correct for RTL where
 * "forward" reads right-to-left. Under LTR the same shape would point
 * backward, so it's mirrored here with scaleX(-1) instead of touching the
 * template markup.
 *
 * The hover state (components.css ~138-140) nudges the arrow with
 * `translateX(-4px)` — visually "further along" in RTL (leftward = forward).
 * Composed with the scaleX(-1) flip already applied to the resting state,
 * `scaleX(-1) translateX(-4px)` renders as a +4px (rightward) nudge, i.e.
 * "further along" in LTR too. (Composing a translate with a preceding
 * scaleX(-1) mirrors the translate's visual direction — verified against
 * the transform-origin math, not guessed.)
 */
.card__link svg {
  transform: scaleX(-1);
}

.card:hover .card__link svg {
  transform: scaleX(-1) translateX(-4px);
}

/* ============ Search ============
 * Two more instances of the same hardcoded `M15 6L9 12L15 18` chevron, this
 * time in search.php's empty-state suggestion tiles. The results list reuses
 * `.card__link` for its "عرض الصفحة" cue, so that one is already covered by
 * the `.card__link svg` rule above and needs nothing here.
 *
 * Same composition rule as the card chevrons: the resting state is mirrored
 * with scaleX(-1), and the hover nudge is written as `scaleX(-1)
 * translateX(-4px)` so it renders as a +4px (rightward, i.e. "further along")
 * movement once the mirror is applied.
 */
.search-suggestion__chevron {
  transform: scaleX(-1);
}

.search-suggestion:hover .search-suggestion__chevron {
  transform: scaleX(-1) translateX(-4px);
}