/* ============================================================ RTL OVERRIDES — loaded only on Arabic pages. dir="rtl" on handles text direction and most flexbox automatically. What it does NOT flip: explicit grid column assignments, directional positioning (left/right), transforms, and gradient directions. Those are corrected here. ============================================================ */ body { font-family: 'Cairo', 'Plus Jakarta Sans', sans-serif; } /* Arabic sets shorter than Latin at the same px size, so bump it slightly and open up the line height — Arabic needs more leading for the descenders and diacritics to breathe. */ :root { --ar-scale: 1.06; } .dish-name, .dish-desc, .section-title-wrap p, .menu-section-head p { font-size: calc(1em * var(--ar-scale)); line-height: 1.85; } /* ---------- Header ---------- grid-template-columns is NOT auto-flipped by dir=rtl, so the explicit column assignments have to be reversed by hand. */ .brand-logo-area { grid-column: 3; justify-self: end; } .nav-cta { grid-column: 1; justify-self: start; } .nav-links { grid-column: 2; } @media (max-width: 990px) { .brand-logo-area { grid-column: 1; justify-self: start; } .header-actions { grid-column: 2; justify-self: end; } } /* Latin brand name inside an RTL page must stay LTR */ .brand-name-en, .brand-subtitle-riyadh { direction: ltr; unicode-bidi: isolate; } [lang="ar"] .brand-name-en { direction: rtl; } /* ---------- Mobile drawer ---------- Slides in from the left instead of the right. */ .mobile-drawer { right: auto; left: -320px; border-left: none; border-right: 3px solid var(--peacock-gold); box-shadow: 5px 0 30px rgba(0,0,0,0.1); transition: left 0.45s var(--ease-soft); } .mobile-drawer.open { left: 0; right: auto; } .mobile-drawer a:hover { padding-left: 0; padding-right: 10px; } /* ---------- Floating buttons ---------- */ .wa-float, .to-top { right: auto; left: 26px; } /* ---------- Menu ---------- */ .dish-meta { justify-content: flex-start; } /* Thumbnail moves to the right of the text */ .dish.has-img { grid-template-columns: 1fr 88px; } .dish-thumb { grid-column: 2; grid-row: 1; } .dish-text { grid-column: 1; grid-row: 1; } @media (max-width: 560px) { .dish.has-img { grid-template-columns: 1fr 64px; } } /* Price stays LTR — "33 ر.س" reads wrong reversed, and digits should never be mirrored. */ .dish-price { direction: ltr; unicode-bidi: isolate; } /* Category rule and portfolio bar wipe from the other edge */ .portfolio-card::before, .value-card::before { left: auto; right: 0; } /* ---------- Footer ---------- */ .footer-col-item a:hover { transform: translateX(-8px); } .allergen-note { border-left: none; border-right: 3px solid var(--peacock-gold); border-radius: 8px 0 0 8px; } .pull-quote { border-left: none; border-right: 3px solid var(--peacock-gold); border-radius: 8px 0 0 8px; } /* ---------- Decorative gradients ---------- Positioned glows sit on the wrong side once the layout flips. */ .stats-band::after, .cta-band::after, .booking-info-side::after { right: auto; left: -200px; } .dishes-wrapper::before { left: auto; right: 0; background: linear-gradient(to left, #fff, transparent); } .dishes-wrapper::after { right: auto; left: 0; background: linear-gradient(to right, #fff, transparent); } /* The marquee should travel the other way in RTL */ @keyframes marquee-rtl { 0% { transform: translateX(0); } 100% { transform: translateX(calc(50% + 12.5px)); } } .dishes-carousel { animation-name: marquee-rtl; } /* ---------- About page timeline ---------- The alternating left/right layout has to mirror wholesale. */ .tl-item { padding: 0 0 60px 55px; } .tl-item:nth-child(even) { margin-left: 0; margin-right: 50%; padding: 0 55px 60px 0; } .tl-item:nth-child(odd) { text-align: left; } .tl-item:nth-child(even) { text-align: right; } .tl-item .tl-dot { right: auto; left: -9px; } .tl-item:nth-child(even) .tl-dot { left: auto; right: -9px; } @media (max-width: 990px) { .timeline::before { left: auto; right: 9px; } .tl-item, .tl-item:nth-child(even) { width: 100%; margin-right: 0; padding: 0 42px 44px 0; text-align: right; } .tl-item .tl-dot, .tl-item:nth-child(even) .tl-dot { right: 1px; left: auto; } } /* ---------- Reservation form ---------- */ .field select { background-position: left 14px center; padding-right: 16px; padding-left: 44px; } .summary-card dl { direction: rtl; } .confirm-actions, .cta-actions, .hero-actions-row { flex-direction: row-reverse; } /* Phone numbers and times must not be mirrored */ .nav-phone, [dir="ltr"] { direction: ltr; unicode-bidi: isolate; } /* Carousel arrows swap sides, and the chevrons point the other way */ .car-btn.prev { left: auto; right: 18px; } .car-btn.next { right: auto; left: 18px; } .car-btn svg { transform: scaleX(-1); } @media (max-width: 990px) { .car-btn.prev { right: 8px; left: auto; } .car-btn.next { left: 8px; right: auto; } }