/* ============================================================================
   WC2026 — rtl.css  ·  Arabic (RTL) overrides ONLY
   main.css is built with logical properties, so layout flips automatically.
   This file only re-balances directional decorative details + transforms
   that don't follow `dir`.
   ============================================================================ */

/* Mirror the atmospheric light sources so the gold glow stays on the
   "leading" side in Arabic reading order. */
[dir="rtl"] .hero {
  background:
    radial-gradient(120% 90% at 15% -10%, rgba(200,169,81,.20), transparent 55%),
    radial-gradient(90% 80% at 100% 110%, rgba(0,118,58,.40), transparent 60%),
    linear-gradient(255deg, rgba(6,52,29,.95) 0%, rgba(5,42,25,.84) 55%, rgba(4,35,21,.74) 100%),
    var(--hero-photo) center / cover no-repeat;
  background-color: var(--green-950);
}
[dir="rtl"] .page-hero {
  background:
    radial-gradient(100% 120% at 0% 0%, rgba(200,169,81,.18), transparent 55%),
    linear-gradient(200deg, rgba(5,69,38,.93), rgba(4,35,21,.95)),
    var(--page-photo) center / cover no-repeat;
  background-color: var(--green-950);
}
[dir="rtl"] .cta-card::before { background: radial-gradient(80% 120% at 0% 0%, rgba(200,169,81,.3), transparent 50%); }
[dir="rtl"] .pkg-card__tag,
[dir="rtl"] .about__media .stat-badge,
[dir="rtl"] .menu-card__ribbon { /* inset-inline already flips, nothing to do — kept for clarity */ }

/* The pitch-line rake reads more natural angled the other way in RTL */
[dir="rtl"] .hero::before,
[dir="rtl"] .page-hero::after,
[dir="rtl"] .about__media::before {
  background-image: repeating-linear-gradient(65deg, transparent 0 78px, rgba(255,255,255,.025) 78px 80px);
}

/* Gold button shimmer should sweep with the reading direction */
[dir="rtl"] .btn--gold::after { transform: translateX(120%); }
[dir="rtl"] .btn--gold:hover::after { transform: translateX(-120%); }

/* Slightly looser line-height suits Tajawal at large display sizes */
[dir="rtl"] .section__title,
[dir="rtl"] .page-hero h1,
[dir="rtl"] .cta-card h2 { line-height: 1.18; }
[dir="rtl"] .brand__sub { letter-spacing: 0; }
[dir="rtl"] .eyebrow,
[dir="rtl"] .hero__eyebrow,
[dir="rtl"] .badge,
[dir="rtl"] .count__label { letter-spacing: .04em; }