/* ============================================================
   ITEC — Arabic / RTL overrides (Almarai)
   Loaded only when the site is in Arabic mode.
   ============================================================ */

/* Swap the design fonts to Almarai everywhere (vars cascade). */
html[dir="rtl"] {
  --font-head: 'Almarai', system-ui, sans-serif;
  --font-main: 'Almarai', system-ui, sans-serif;
}

html[dir="rtl"] body { direction: rtl; text-align: right; }

/* Arabic headings: no Latin-style negative tracking */
html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3,
html[dir="rtl"] h4,
html[dir="rtl"] .hero-title,
html[dir="rtl"] .heading,
html[dir="rtl"] .logo-name,
html[dir="rtl"] .page-hero h1 { letter-spacing: 0 !important; line-height: 1.35; }

html[dir="rtl"] .hero-title { line-height: 1.3; }

/* Labels / eyebrows: Arabic doesn't uppercase or wide-track */
html[dir="rtl"] .label,
html[dir="rtl"] .eyebrow,
html[dir="rtl"] .lux-proj-tag,
html[dir="rtl"] .lux-method strong,
html[dir="rtl"] .fg label,
html[dir="rtl"] .footer-col-title,
html[dir="rtl"] .trust-label,
html[dir="rtl"] .lux-cta .eyebrow,
html[dir="rtl"] .hero-tag { letter-spacing: 0; text-transform: none; }

/* ---- Header ---- */
html[dir="rtl"] .nav-btn { margin-left: 0; margin-right: 0.75rem; }

/* ---- Hero ---- */
html[dir="rtl"] .hero-accent-line { left: auto; right: 0; border-radius: 4px 0 0 4px; }
html[dir="rtl"] .hero-desc,
html[dir="rtl"] .subhead { text-align: right; }
html[dir="rtl"] .hero-right { align-items: flex-start; }

/* ---- Page hero ---- */
html[dir="rtl"] .page-hero-accent { left: auto; right: 0; border-radius: 4px 0 0 4px; }
html[dir="rtl"] .page-hero .eyebrow::before { margin-left: 0; }
html[dir="rtl"] .page-hero-overlay {
  background:
    linear-gradient(240deg, rgba(15,13,12,0.94) 0%, rgba(15,13,12,0.62) 48%, rgba(15,13,12,0.34) 100%),
    linear-gradient(to top, rgba(15,13,12,0.86) 0%, transparent 58%);
}

/* ---- Section labels with leading line ---- */
html[dir="rtl"] .label::before { /* keep small line, side handled by flex */ }

/* ---- About ---- */
html[dir="rtl"] .lux-intro-sticky .kicker {
  padding-left: 0; padding-right: 1.25rem;
  border-left: 0; border-right: 3px solid var(--gold);
}
html[dir="rtl"] .lux-prose p:first-child::first-letter {
  float: right; padding: 0.35rem 0 0 0.8rem;
}

/* ---- Premium stat band ---- */
html[dir="rtl"] .lux-stat { padding-left: 0; padding-right: 1.5rem; }
html[dir="rtl"] .lux-stat::before { left: auto; right: 0; }
html[dir="rtl"] .lux-stats::before {
  background: radial-gradient(800px 400px at 20% -20%, rgba(200,16,46,0.25), transparent 60%);
}

/* ---- Cards / services ---- */
html[dir="rtl"] .lux-card .idx { right: auto; left: 1.75rem; }
html[dir="rtl"] .lux-card::after { left: auto; right: 0; }
html[dir="rtl"] .lux-svc::before { right: auto; left: -40px; }
html[dir="rtl"] .lux-svc::before,
html[dir="rtl"] .lux-proj::before { /* gradient bar full width, no change */ }

/* ---- Steps timeline ---- */
html[dir="rtl"] .lux-step { padding-top: 2.5rem; }
html[dir="rtl"] .lux-step::before { left: auto; right: 0; }
html[dir="rtl"] .lux-step::after { left: auto; right: 2.6rem; left: -0.6rem; }

/* ---- Projects ---- */
html[dir="rtl"] .lux-proj::before { left: auto; right: 0; }
html[dir="rtl"] .lux-proj-meta strong { min-width: 92px; }

/* ---- Contact ---- */
html[dir="rtl"] .lux-method:hover { transform: translateX(-4px); }
html[dir="rtl"] .lux-contact-info::before {
  background: radial-gradient(600px 300px at -10% 0%, rgba(200,16,46,0.3), transparent 60%);
}
html[dir="rtl"] .fg input,
html[dir="rtl"] .fg select,
html[dir="rtl"] .fg textarea { text-align: right; direction: rtl; }

/* ---- Map ---- */
html[dir="rtl"] .lux-map-link { right: auto; left: 1rem; }

/* ---- Legal / privacy ---- */
html[dir="rtl"] .lux-legal-toc nav { border-left: 0; border-right: 1px solid var(--gray-100); }
html[dir="rtl"] .lux-legal-toc a {
  padding-left: 0; padding-right: 1.1rem;
  margin-left: 0; margin-right: -1px;
  border-left: 0; border-right: 2px solid transparent;
}
html[dir="rtl"] .lux-legal-toc a:hover { border-right-color: var(--red); }
html[dir="rtl"] .lux-legal-body li { padding-left: 0; padding-right: 1.5rem; }
html[dir="rtl"] .lux-legal-body li::before { left: auto; right: 0; }
html[dir="rtl"] .lux-legal-card { border-left: 0; border-right: 3px solid var(--red); }
html[dir="rtl"] .lux-legal-body h2 .n { margin-left: 0.5rem; }

/* ---- Footer ---- */
html[dir="rtl"] .footer-desc,
html[dir="rtl"] .footer-links a { text-align: right; }

/* ---- Language switch ---- */
.itec-lang {
  display: inline-flex; align-items: center; gap: 0.35rem;
  margin-inline-start: 0.5rem;
  font-size: 0.8125rem; font-weight: 700;
}
.itec-lang a {
  color: rgba(255,255,255,0.55); padding: 0.25rem 0.5rem; border-radius: var(--r);
  transition: color var(--t), background var(--t);
}
.itec-lang a.active { color: var(--white); background: rgba(255,255,255,0.1); }
.itec-lang a:hover { color: var(--white); }

/* Buttons keep their icon direction sensible */
html[dir="rtl"] .btn svg { transform: scaleX(-1); }

/* Auto-direct each contact value: numbers render LTR, Arabic address RTL.
   unicode-bidi: plaintext detects direction per element from its content. */
html[dir="rtl"] .lux-method span,
html[dir="rtl"] .contact-row-body span,
html[dir="rtl"] .lux-hours span,
html[dir="rtl"] .footer-links a,
html[dir="rtl"] .lux-legal-card p { unicode-bidi: plaintext; }

/* tel / mailto / whatsapp links are always LTR */
html[dir="rtl"] a[href^="tel:"],
html[dir="rtl"] a[href^="mailto:"],
html[dir="rtl"] a[href^="https://wa.me"] { direction: ltr; unicode-bidi: isolate; }