/* Digitizly RTL Override Sheet
 * Load AFTER site.css on all [lang="ar"] pages.
 * Swaps fonts → Arabic stack, sets direction, mirrors LTR-only properties.
 * Path: /css/rtl.css  — referenced as ../../css/rtl.css from all ar/** sub-pages
 */

/* ── Arabic font stack ── */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;500;600;700;800&family=Noto+Kufi+Arabic:wght@300;400;500;600;700;800&display=swap');

/* ── Override font tokens ── */
:root {
  --font-display: 'Cairo', 'Noto Kufi Arabic', sans-serif;
  --font-body:    'Cairo', 'Noto Kufi Arabic', sans-serif;
}

/* ── Base direction ── */
html { direction: rtl; }
body {
  font-family: var(--font-body);
  direction: rtl;
  text-align: right;
}
h1,h2,h3,h4,h5,h6 { font-family: var(--font-display); }

/* ── Article body — flip list padding & border ── */
.article-body ul,
.article-body ol {
  padding-left:  0;
  padding-right: 1.5rem;
}

.article-body blockquote {
  border-left:  none;
  border-right: 3px solid var(--electric);
  border-radius: var(--radius-md) 0 0 var(--radius-md);
}

/* ── Checklist & warn-list — move ::before to right side ── */
.checklist li,
.warn-list li {
  padding-left:  0;
  padding-right: 1.8rem;
}
.checklist li::before {
  left:  auto;
  right: 0;
}
.warn-list li::before {
  left:  auto;
  right: 0;
}

/* ── stat-box border side ── */
.stat-box {
  border-left:  none;
  border-right: 3px solid var(--electric);
}

/* ── btn-secondary margin ── */
.btn-secondary {
  margin-left:  0;
  margin-right: 0.75rem;
}

/* ── Language dropdown — open from left edge in RTL header ── */
.nav-lang-menu { left: 0 !important; right: auto !important; }

/* ── Breadcrumb — keep separator readable in RTL ── */
.breadcrumb span { margin: 0 0.4rem; }

/* ── Article layout — sidebar on left in RTL (visually right-of-reading) ── */
.article-wrap { direction: rtl; }

/* ── Featured image caption — align left in RTL (right side of screen) ── */
.img-caption { text-align: left; }

/* ── Footer — RTL layout ── */
.site-footer  { direction: rtl; text-align: right; }
.footer-grid  { direction: rtl; }
.footer-brand p { text-align: right; }
.footer-social { justify-content: flex-start; }
.footer-col ul  { text-align: right; }
/* Reverse column order so brand col appears on right (reading-start in AR) */
.footer-grid .footer-brand  { order: 4; }
.footer-grid .footer-col:nth-of-type(1) { order: 3; }
.footer-grid .footer-col:nth-of-type(2) { order: 2; }
.footer-grid .footer-col:nth-of-type(3) { order: 1; }
.footer-bottom        { flex-direction: row-reverse; direction: rtl; }
.footer-bottom-links  { flex-direction: row-reverse; }

/* ── read-more arrow — flip in RTL ── */
.read-more { flex-direction: row-reverse; }

/* ── Nav RTL layout ──
   row-reverse on site-nav: logo → right (reading-start), wa+lang+burger → left
   row-reverse on nav-links: Services (first DOM) → rightmost, Community → leftmost
*/
.site-nav { flex-direction: row-reverse; }
.site-nav .nav-links { flex-direction: row !important; direction: ltr !important; }
.site-nav .nav-dropdown-menu { left: auto !important; right: 0 !important; text-align: right; direction: rtl; }

/* ── Page meta items ── */
.page-meta { flex-direction: row-reverse; justify-content: flex-end; }

/* ── Service intro max-width alignment ── */
.service-intro { max-width: 780px; text-align: right; }

/* ── Listing card body ── */
.listing-card-body { text-align: right; }

/* ── Mobile nav ── */
@media (max-width: 768px) {
  .nav-links { flex-direction: column; }
}
/* ============================================================
 * AR HOME PAGE OVERRIDES — Hero Slider, Tech Icons, Problem Form
 * ============================================================ */

/* Hero slider — RTL slide animation */
@keyframes slideIn { from { opacity: 0; transform: translateX(-30px); } to { opacity: 1; transform: translateX(0); } }

/* Hero slider dot — use brand-violet for AR */
.hero-dot { background: rgba(91,79,245,0.3); }
.hero-dot.active { background: var(--brand-violet, #5B4FF5); }

/* Hero slider btn — AR color */
.hero-slider-btn { background: rgba(91,79,245,0.15); border-color: rgba(91,79,245,0.3); }
.hero-slider-btn:hover { background: rgba(91,79,245,0.35); border-color: rgba(91,79,245,0.7); }

/* Problem form — RTL text alignment */
.hero-problem-form { text-align: right; }
.hero-problem-form .word-count { text-align: left; }
.hero-problem-form textarea { text-align: right; }

/* Show more btn — AR color */
.show-more-btn { border-color: rgba(91,79,245,0.5); }
.show-more-btn:hover { background: rgba(91,79,245,0.12); }

/* FAQ CTA — AR color */
.faq-cta a { border-color: rgba(91,79,245,0.4); color: var(--brand-violet, #5B4FF5); }
.faq-cta a:hover { background: rgba(91,79,245,0.1); border-color: rgba(91,79,245,0.7); }


/* ── Hero slider controls — RTL reverses button order ── */
.hero-slider-controls { flex-direction: row-reverse; margin-top: 1.5rem; margin-bottom: 1.5rem; }

/* ── Hero tech icon — AR float animation ── */
@keyframes floatIconAr {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50%       { transform: translateY(-20px) rotate(5deg); }
}
.hero-tech-icon { animation-name: floatIconAr; animation-timing-function: linear; }

/* ── Hero problem form — AR-specific layout classes ── */
.hero-problem-form-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 0.75rem; gap: 0.75rem; }
.hero-word-count { font-size: 0.72rem; color: var(--text-muted); }
.hero-submit-btn { background: linear-gradient(135deg, var(--brand-violet), #2D3FE0); color: #fff; border: none; border-radius: var(--radius-md); padding: 0.65rem 1.5rem; font-family: var(--font); font-size: 0.85rem; font-weight: 700; cursor: pointer; transition: var(--transition); white-space: nowrap; }
.hero-submit-btn:hover { transform: translateY(-1px); box-shadow: 0 0 30px rgba(91,79,245,0.4); }

/* ── Problem form border colours — AR palette ── */
.hero-problem-form { border-color: rgba(91,79,245,0.25); }
.hero-problem-form textarea { border-color: rgba(91,79,245,0.3); }
.hero-problem-form textarea:focus { border-color: rgba(91,79,245,0.6); }

/* ── Testimonial cards — AR colour overrides ── */
.tcard:hover { border-color: rgba(91,79,245,0.45); box-shadow: 0 16px 40px rgba(91,79,245,0.18); }
.tcard-quote { color: var(--brand-violet, #7B6FFF); }
.tcard-read-more { color: var(--brand-violet, #7B6FFF); }
.tcard-name a:hover { color: var(--brand-violet, #7B6FFF); }
.tcard-tooltip { text-align: right; }

/* ── Stat pills — AR colour overrides ── */
.stat-pill.sp1 { background: rgba(91,79,245,0.12); border-color: rgba(91,79,245,0.28); color: var(--brand-violet, #7B6FFF); }
.stat-pill.sp1 strong { color: var(--brand-violet, #5B4FF5); }
.stat-pill.sp2 { background: rgba(0,212,200,0.1); border-color: rgba(0,212,200,0.22); color: var(--brand-teal, #00D4C8); }
.stat-pill.sp3 { background: rgba(91,79,245,0.08); border-color: rgba(91,79,245,0.15); color: #A89FFF; }
.stat-pill.sp4 { background: rgba(0,212,200,0.05); border-color: rgba(0,212,200,0.1); color: var(--text-muted); }