/*
RTL Stylesheet for Lumoria Custom Theme
Arabic (RTL) layout overrides
*/

/* ========================================
   BASE DIRECTION FLIP
   ======================================== */

/* Redefining the family token here re-points every typography rule in the
   theme at the Arabic face in one go, rather than per component.
   (--font-display and --font-body both resolve to --font-primary in style.css,
   so they follow automatically. The Customizer's late override in
   functions.php stays Arabic-aware on its own — see
   lumoria_typography_font_stack().) */
:root {
  --font-primary: 'IBM Plex Sans Arabic', 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;

  /* Arabic sits on a larger x-height than Latin and carries diacritics above
     and descenders below the baseline, so the Latin leading crowds it. Every
     step of the scale is lifted rather than only body text, otherwise headings
     clip their own diacritics. Body lands at 1.78, inside the 1.7-1.8 the
     localisation pack asks for. */
  --lh-tight:    1.25;   /* was 1.1  */
  --lh-heading:  1.35;   /* was 1.25 */
  --lh-snug:     1.4;    /* was 1.3  */
  --lh-body:     1.78;   /* was 1.65 */
  --lh-prose:    1.8;    /* was 1.7  */
  --lh-relaxed:  1.85;   /* was 1.75 */
}

/* Arabic has no letter case, so text-transform: uppercase does nothing to the
   glyphs while still breaking the rhythm of the eyebrow labels it was meant to
   style. letter-spacing is worse than cosmetic: Arabic is a joined script, and
   tracking pulls apart the connections between letters, which is a legibility
   bug rather than a style choice.

   Both appear ~180 times across 17 stylesheets, so they are neutralised
   centrally here instead of being edited at every site. !important is required,
   not stylistic: a bare universal selector loses to any class rule no matter
   the source order, and nearly all of these sit on classes.

   Trade-off: this also drops tracking from Latin proper names that appear on
   Arabic pages (building names such as SAJ 2). That is preferred to leaving
   Arabic tracked. */
[dir="rtl"] *,
[dir="rtl"] *::before,
[dir="rtl"] *::after {
  letter-spacing: normal !important;
  text-transform: none !important;
}

body {
  direction: rtl;
}

/* Flip primary nav slide-in from right to left */
@media (max-width: 992px) {
  .primary-nav {
    inset: 0 auto 0 0;
    transform: translateX(-100%);
    box-shadow: 12px 0 40px rgba(0,0,0,.12);
  }
  .primary-nav.is-open {
    transform: translateX(0);
  }
}

/* ========================================
   HEADER
   ======================================== */

.header-inner {
  flex-direction: row-reverse;
}

.header-actions {
  flex-direction: row-reverse;
}

/* Phone pill icon on the right in RTL */
.phone-pill .icon-circle {
  order: -1;
}

/* ========================================
   HERO SECTION
   ======================================== */
/* The fold sits on the correct corner on its own (the base rule uses
   inset-inline-end); only the triangle itself has to be mirrored. */
.hero-fold {
  clip-path: polygon(0 0, 100% 100%, 0 100%);
}

/* Hero content alignment — the box itself must sit on the right edge of the
   banner (it doesn't reflow automatically since .hero-slide is a plain block,
   not a flex container), otherwise right-aligned text ends up stuck in a
   left-hugging box instead of hugging the banner's right edge. */
.hero-content {
  align-items: self-start;
  text-align: right;
  margin-left: auto;
  margin-right: 0;
}

.hero-badges {
  align-self: flex-start;
}

/* ========================================
   ABOUT SECTION
   ======================================== */

/* ========================================
   SERVICES SECTION
   ======================================== */

.service-link i {
  transform: rotate(180deg);
}

.service-link:hover i {
  transform: translateX(-5px) rotate(180deg);
}

/* ========================================
   CAROUSEL / SLIDER NAV ARROWS
   ======================================== */

/* Property-categories carousel (opg-prev/opg-next): both buttons already sit
   on the correct side under the native RTL mirror (prev→right, next→left),
   but their chevrons are physical SVG paths that don't flip with direction,
   so "prev" (right side) still points left and "next" (left side) still
   points right — backwards for RTL "forward = left". Rotate both. */
.opg-nav-btn svg {
  transform: rotate(180deg);
}

/* Process section step nav (lumProcPrev/lumProcNext): same issue — rotate
   both chevrons so prev (right side) points right and next (left side)
   points left. */
#lumProcSec .lum-proc-nav button svg {
  transform: rotate(180deg);
}

/* ========================================
   BUTTONS
   ======================================== */

.btn-primary .icon-circle {
  order: -1;
}

/* The hero buttons use logical padding, so the leading icon already lands on
   the right side here — only the arrow itself needs turning around. */
.hero-actions .icon-circle {
  transform: rotate(180deg);
}

.hero-actions > a:hover .icon-circle {
  transform: rotate(225deg);
}

.btn-look-reverse .icon-circle i {
  transform: rotate(180deg);
}

.opg-cta-btn .opg-cta-circle svg {
  transform: rotate(180deg);
}

/* ========================================
   FOOTER
   ======================================== */

/* Note: footer contact info (.contact-item / .contact-link in footer.php) needs
   no override — icon-then-text already mirrors correctly under direction:rtl
   with the default row order. */

/* ========================================
   LISTS & CONTENT
   ======================================== */
/* Chat button — the icon moves to the right under the native RTL flex mirror and
   the padding follows direction via padding-inline in the base rule, so only the
   arrow itself needs rotating. */
.chat-btn .arrow-circle svg {
  transform: rotate(180deg);
}

/* ========================================
   REVEAL ANIMATIONS (same but mirrored)
   ======================================== */

.reveal {
  transform: translateY(22px);
}

/* ========================================
   SCROLLBAR
   ======================================== */

html {
  scrollbar-width: auto;
}

/* ========================================
   ENSURE FLEXBOX ROWS REVERSE APPROPRIATELY
   ======================================== */

/* Service card link row */
.service-link {
  flex-direction: row-reverse;
}

/* Checklist items */
.checklist li {
  text-align: right;
}

/* ========================================
   LANGUAGE SWITCHER
   ======================================== */

/* Scoped to desktop width — unscoped it beat style.css's mobile
   @media(max-width:992px){.lang-switcher{display:none}} rule via
   source order and made the desktop pill reappear over the mobile menu. */
@media (min-width: 993px) {
  .lang-switcher {
    display: flex;
    gap: 8px;
    align-items: center;
  }
}

/* ========================================
   ABOUT US PAGE
   ======================================== */

/* About hero content alignment in RTL */
.about-hero-content {
  text-align: center;
}

/* Tabs in Redefining section — base has no flex-direction (defaults to row),
   so the browser natively reverses visual order in RTL. Do NOT add
   flex-direction: row-reverse here — it cancels the native mirroring. */
.about-redefining .tabs {
  justify-content: flex-start;
}

/* Checklist items — same principle: native RTL handles the row reversal.
   text-align: right is harmless (matches RTL reading direction). */
.about-redefining .checklist li {
  text-align: right;
}

/* Chat button in Redefining section shares the generic .chat-btn fix above
   (icon already mirrors correctly natively) — no extra override needed here. */

/* Sub media wrap in Redefining section on mobile — base is flex-direction: column.
   RTL does not change column direction, and row-reverse would switch the main
   axis from vertical to horizontal, completely breaking the layout. No override needed. */

/* ========================================
   VISIONARY ARCHITECTURE SOLUTIONS
   ======================================== */
/* The card's side flips on its own now (the base rule uses margin-inline-*).
   Only the asymmetric corner rounding has to be mirrored by hand. */
.lum-vis-card {
  border-radius: 0 var(--lum-radius) var(--lum-radius) 0;
}

/* Arrow icon in Visionary button must point left in RTL */
.lum-vis-btn-icon svg {
  transform: scaleX(-1);
}

/* ========================================
   PAGE HEADER BANNER
   ======================================== */

/* Breadcrumbs separator direction */
.lum-hdr-crumbs {
  flex-direction: row-reverse;
}

/* ========================================
   CRAFTING INNOVATIVE SPACES
   ======================================== */

/* Arrow icon in Craft button must point left in RTL */
.lum-craft-btn-icon svg {
  transform: scaleX(-1);
}

/* ========================================
   TESTIMONIALS (What Clients Are Saying)
   ======================================== */
.lum-cts-quote { direction: rtl; text-align: right; }

/* Testimonial nav arrow chevrons must flip direction in RTL */
.lum-cts-nav svg {
  transform: scaleX(-1);
}

/* ========================================
   CONTACT US PAGE
   ======================================== */
/* The submit button keeps its own RTL edge alignment. Its padding is no longer
   mirrored here — the base rule uses padding-inline, so the icon side follows
   direction on its own. Only the arrow still needs turning around. */
.lum-ask-submit {
  margin-right: auto;
  margin-left: 0;
}
.lum-ask-submit-icon svg {
  transform: scaleX(-1);
}

.lum-contact-bar-item { flex-direction: row-reverse; text-align: right; }

/* ========================================
   FEATURE TICKER
   ======================================== */

/* The ticker is a block (overflow:hidden) containing a flex track wider
   than 100% of it. A block-level child wider than its container
   flush-aligns to the container's inline-start edge — the LEFT under
   direction:ltr, but the RIGHT under direction:rtl (overflowing on the left
   instead of the right). The track's seamless-loop keyframe
   (translateX(0) -> translateX(-50%), with the track holding two identical
   duplicated sets back-to-back) assumes the original left-flush LTR
   alignment; under the inherited RTL right-flush default that assumption
   breaks, so partway through the loop the visible window drifts into
   content that was never meant to be part of the cycle and the track
   appears to run out and show empty space. Forcing this wrapper back to
   direction:ltr restores the left-flush alignment the loop math needs. */
.bcms-feature-ticker {
  direction: ltr;
}

/* Per request: scroll left-to-right on the Arabic page instead of
   right-to-left. Reversing the animation keeps the loop seamless — both
   endpoints (0% and -50%) show identical duplicated content either way. */
.bcms-ft-track {
  animation-direction: reverse;
}

/* ========================================
   TENANT SERVICES
   ======================================== */

/* The "Open" arrow points the way the eye travels in RTL, and its hover
   nudge follows the arrow. */
[dir="rtl"] #lumTsSec .lum-ts-open svg {
  transform: scaleX(-1);
}
[dir="rtl"] #lumTsSec .lum-ts-card:hover .lum-ts-open svg {
  transform: scaleX(-1) translateX(2px);
}

/* ========================================
   HERO PROPERTY SEARCH
   ======================================== */

/* Arrows point the way the eye travels in RTL. */
.hs-viewall i,
.lum-proj-filter-clear i {
  transform: scaleX(-1);
}

/* ========================================
   DIRECTIONAL ICONS
   ========================================

   Policy for this theme. The localisation pack suggests a blanket
   [dir="rtl"] .icon { transform: scaleX(-1) } with the WhatsApp, phone, clock
   and map-pin icons excluded. That inverts badly here: the theme has no .icon
   convention (SVGs are unclassed and styled through their parent), and of the
   ~70 Font Awesome glyphs in use only a handful encode a reading direction.
   A blanket rule plus exclusions would silently mirror every icon added in
   future and quietly break brand and map marks.

   Arrows that sit inside a specific component are mirrored next to that
   component above (search this file for "scaleX" or "rotate(180deg)"), because
   several of them need a matching hover transform that only makes sense in
   context. Every directional icon currently rendered is already covered there.

   Mirroring is therefore OPT-IN, not automatic. A blanket rule on the glyph
   classes below was tried and reverted: several arrows sit inside a wrapper
   that is itself rotated (.hero-actions .icon-circle rotates the whole circle,
   and again on hover), so a second flip on the child <i> composes with the
   parent's and cancels it — the arrow silently ends up pointing the original
   way. Any rule here has to assume it may land inside an already-mirrored
   ancestor, which CSS cannot test for. Opt-in avoids the whole class of bug.

   These are the glyphs in this theme that DO encode a reading direction. When
   you add one to a template and no component rule covers it, give it
   .rtl-mirror:
     .fa-arrow-left  .fa-arrow-right  .fa-chevron-left  .fa-chevron-right
     .fa-arrow-right-from-bracket     .fa-arrow-right-to-bracket

   These must NEVER be mirrored:
     .fa-whatsapp .fa-phone .fa-clock .fa-location-dot  (the pack's four)
     .fa-diamond-turn-right   — a map/directions symbol, not an arrow
     .fa-star .fa-facebook-f .fa-instagram .fa-tiktok .fa-linkedin-in
     .fa-youtube .lum-greviews-g .lum-map-gicon — brand marks read the same
                                                  way round in every language */

/* Opt-in mirror. Add .rtl-mirror in markup to a directional glyph that no
   component rule above already handles — but never to one whose wrapper is
   itself flipped or rotated. */
.rtl-mirror {
  transform: scaleX(-1);
}