/* ═══════════════════════════════════════════════════════ style-ar.css — RTL Arabic overrides Loaded AFTER style.css; overrides LTR-specific rules. KEY RULE: with dir="rtl" on , CSS flex-direction:row already flows right → left automatically. We must NOT add flex-direction:row-reverse (that would double-reverse back to LTR). Only override properties that explicitly encode physical sides (left/right, margin-left, padding-left…). ═══════════════════════════════════════════════════════ */ /* ── Arabic fonts ────────────────────────────────────── */ :root { --font-serif : 'Cairo', sans-serif; --font-sans : 'Tajawal', sans-serif; --font-dm : 'Tajawal', sans-serif; } /* ── Global letter-spacing reset ────────────────────── */ * { letter-spacing: 0 !important; } /* ── Navbar ──────────────────────────────────────────── */ /* dir="rtl" makes flex row flow R→L automatically. Logo lands on the RIGHT (RTL start), links on the LEFT. Only fix physical-side properties. */ /* btn-nav-cta: margin-left → margin-right */ .btn-nav-cta { margin-left: 0; margin-right: 16px; } /* Mobile hamburger: position it on the left visual edge */ @media (max-width: 768px) { .nav-toggle { order: 3; /* pushes it to the visual left end in RTL flex */ } /* Mobile open menu: stack items normally */ .nav-links { /* flex-direction column works the same in RTL */ text-align: right; } } /* ── Hero text alignment ─────────────────────────────── */ .hero-text-col { text-align: right; } .hero-actions { justify-content: flex-end; } /* Arrow inside btn-primary / btn-ghost: flip direction */ .btn-primary svg, .btn-ghost svg { transform: scaleX(-1); } /* ── Scroll indicator ───────────────────────────────── */ .hero-scroll-indicator { left: 40px; right: auto; } @media (max-width: 768px) { .hero-scroll-indicator { left: 20px; right: auto; } } /* ── Section headers (non-centered) ─────────────────── */ .section-header:not(.centered) { text-align: right; } /* ── Chef section ──────────────────────────────────── */ .chef-layout { direction: rtl; } .chef-quote { border-left: none; border-right: 2px solid var(--black); padding-left: 0; padding-right: 20px; } .chef-badge { right: auto; left: -16px; } /* ── FAQ toggle row ─────────────────────────────────── */ /* Icon ends up on the visual left (RTL end) naturally; no flex-direction override needed. */ /* ── Footer ─────────────────────────────────────────── */ .footer-inner { direction: rtl; } /* ── Step cards ──────────────────────────────────────── */ .step-card { text-align: right; } .step-icon { justify-content: flex-end; } /* ── Metric cards ────────────────────────────────────── */ .metric-card { align-items: flex-end; text-align: right; } /* ── Recipe info ─────────────────────────────────────── */ .recipe-info { text-align: right; } /* ── Heading weight: Cairo reads better Bold ────────── */ .hero-title, .section-title { font-weight: 700; font-style: normal; } .hero-title em, .section-title em { font-style: normal; font-weight: 900; } /* ── In-navbar language switcher ────────────────────── */ .nav-lang-switch { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; padding: 7px 14px; border-radius: 100px; border: 1px solid currentColor; text-decoration: none; transition: opacity 0.2s, transform 0.2s; white-space: nowrap; } /* On hero (not scrolled): white pill */ .navbar:not(.scrolled) .nav-lang-switch { color: rgba(255,255,255,0.85); border-color: rgba(255,255,255,0.4); } .navbar:not(.scrolled) .nav-lang-switch:hover { color: var(--white); border-color: var(--white); } /* Scrolled: dark pill */ .navbar.scrolled .nav-lang-switch { color: var(--text-muted); border-color: var(--border-strong); } .navbar.scrolled .nav-lang-switch:hover { color: var(--text-primary); border-color: var(--text-primary); } .nav-lang-switch:hover { transform: translateY(-1px); } .nav-lang-switch svg { flex-shrink: 0; } /* ── Remove floating pill (replaced by navbar switcher) ─ */ .lang-switch { display: none !important; }