/* =========================================
   Barq Al Jawhara — rtl.css
   Most layout is handled by CSS logical properties in styles.css.
   This file contains only the overrides that logical properties
   can't express: transforms, background-position, animation
   directions, and a few visual nudges for Arabic typography.
   ========================================= */

/* Slight type adjustments — Cairo runs a bit larger than Inter at the same px */
html[lang="ar"] body{
  line-height:1.65;
  letter-spacing:0;
}
html[lang="ar"] .eyebrow{
  letter-spacing:0;
  font-weight:600;
}

/* Brand wordmark switches with language ("BARQ AL JAWHARA" ↔ "برق الجوهرة").
   In RTL we let the flex row flow naturally so the icon sits at the
   inline-start (right) of the wordmark — matching Saudi B2B conventions. */
html[dir="rtl"] .brand{
  gap:10px;
}

/* Mobile menu — slides in from the LEFT in RTL (mirrors LTR) */
html[dir="rtl"] .mobile-menu{
  inset-inline-end:0; /* logical, but reaffirm */
  transform:translateX(-100%);
}
html[dir="rtl"] .mobile-menu.is-open{
  transform:translateX(0);
}

/* Hamburger animation: rotation direction reads more natural reversed in RTL */
html[dir="rtl"] .hamburger[aria-expanded="true"] span:nth-child(1){
  transform:translateY(7px) rotate(-45deg);
}
html[dir="rtl"] .hamburger[aria-expanded="true"] span:nth-child(3){
  transform:translateY(-7px) rotate(45deg);
}

/* Close icon (×) — same symbol in both directions, no override needed */

/* Hero background pattern — flip horizontal gradient anchor */
html[dir="rtl"] .hero{
  background:
    radial-gradient(1200px 600px at 0% 0%,rgba(26,111,186,.06),transparent 60%),
    var(--color-bg);
}

/* Check list — flip the check-mark glyph horizontally so it reads
   naturally in an RTL context */
html[dir="rtl"] .check-list li::after{
  transform:rotate(45deg) scaleX(-1);
  inset-inline-start:5px;
}

/* How-it-works connecting line — gradient direction reversed visually */
html[dir="rtl"] .steps::before{
  background:linear-gradient(-90deg,var(--color-accent) 0%,var(--color-accent) 100%);
}

/* Phone, email and addresses inside cards stay LTR via dir="ltr" inline.
   In LTR context they already align left; in RTL we need them to stay
   visually anchored at the inline-start (right) edge. */
html[dir="rtl"] [dir="ltr"]{
  text-align:right;
}
/* Re-flip phone/email values inside footer/contact lists to keep
   them readable left-to-right while sitting within an RTL block. */
html[dir="rtl"] .ci-value[dir="ltr"],
html[dir="rtl"] .footer-list a[dir="ltr"]{
  text-align:right;
  unicode-bidi:isolate;
}

/* WhatsApp FAB — mirror to bottom-left in RTL */
html[dir="rtl"] .whatsapp-fab{
  inset-inline-end:auto;
  inset-inline-start:20px;
}

/* Social list — direction stays LTR (icons read same way) */

/* Footer columns — already flow correctly via grid + logical props.
   Keep the bottom row stacked the same way. */

/* Form submit button — appears at flex-start which is right side in RTL.
   That's correct for action buttons in RTL (action sits at the inline-end
   = left edge when content is LTR? — Actually in Arabic UI the primary
   action commonly sits at the start-side (right). align-self:flex-start
   already accomplishes this. No override needed. */

/* Section CTAs — keep order natural */
html[dir="rtl"] .hero-ctas,
html[dir="rtl"] .hero-meta{
  /* flex auto-mirrors with direction:rtl — no override needed */
}

/* Tabular numerals in stat counters — keep LTR digit order */
html[dir="rtl"] .stat-num{
  direction:ltr;
  unicode-bidi:isolate;
}

/* Lang-toggle label — Arabic word "English" should not be mirrored.
   It's just a word; no override needed. */

/* Ensure CTA chevrons (none used currently) would mirror — kept here
   for future-proofing if icons are added. */
html[dir="rtl"] .btn .icon-arrow{transform:scaleX(-1);}

/* Header transition between LTR and RTL — quick fade to avoid layout flash */
.site-header,
.nav-list,
.header-actions{
  transition:all .25s ease;
}