/* ================================================================
   BENAA CONTRACTING W.L.L.  —  RTL Override (Arabic)

   Load AFTER style.css:
     <link rel="stylesheet" href="../assets/css/style.css">
     <link rel="stylesheet" href="../assets/css/style-rtl.css">

   Arabic Typography:
     All text: Cairo (clean, modern Arabic sans-serif)
     Weight hierarchy: 800 hero → 700 titles → 600 subtitles → 400 body → 300 light
================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;500;600;700;800;900&display=swap');

/* ── Direction & Font Override ────────────────────────────── */
html[dir="rtl"] {
  direction: rtl;
}

html[dir="rtl"] body {
  font-family: 'Cairo', 'GE SS', 'Segoe UI', Tahoma, sans-serif;
  font-weight: 400;
}

/* ── TIER 1: Hero Headlines — Extra Bold 800 ─────────────── */
html[dir="rtl"] .hero-headline,
html[dir="rtl"] .svc-hero h1 {
  font-family: 'Cairo', 'GE SS', 'Segoe UI', Tahoma, sans-serif;
  font-weight: 800;
  line-height: 1.15;
}

/* ── TIER 2: Section Titles — Bold 700 ───────────────────── */
html[dir="rtl"] .about-headline,
html[dir="rtl"] .section-title,
html[dir="rtl"] .cta-headline,
html[dir="rtl"] .q-hero-title,
html[dir="rtl"] .form-title,
html[dir="rtl"] .svc-detail-content h2 {
  font-family: 'Cairo', 'GE SS', 'Segoe UI', Tahoma, sans-serif;
  font-weight: 700;
  line-height: 1.25;
}

/* ── TIER 3: Card Titles & Stats — Semibold 600 ─────────── */
html[dir="rtl"] .svc-title,
html[dir="rtl"] .svc-feature-title,
html[dir="rtl"] .pcard-name,
html[dir="rtl"] .why-t,
html[dir="rtl"] .svc-sidebar-title,
html[dir="rtl"] .q-side-title,
html[dir="rtl"] .q-point-t,
html[dir="rtl"] .stat-n,
html[dir="rtl"] .hero-stat-n,
html[dir="rtl"] .about-badge-n,
html[dir="rtl"] .foot-col-h,
html[dir="rtl"] .about-prop-t {
  font-family: 'Cairo', 'GE SS', 'Segoe UI', Tahoma, sans-serif;
  font-weight: 600;
}

/* ── TIER 4: UI Elements — Medium 500 ────────────────────── */
html[dir="rtl"] .eyebrow,
html[dir="rtl"] .eyebrow--light,
html[dir="rtl"] .about-eyebrow,
html[dir="rtl"] .nav-link,
html[dir="rtl"] .nav-cta,
html[dir="rtl"] .nav-action-btn,
html[dir="rtl"] .nav-dropdown-link,
html[dir="rtl"] .btn,
html[dir="rtl"] .svc-num-label,
html[dir="rtl"] .svc-arrow,
html[dir="rtl"] .svc-feature-num,
html[dir="rtl"] .breadcrumb,
html[dir="rtl"] .svc-sidebar-link,
html[dir="rtl"] .nav-drawer .nav-link,
html[dir="rtl"] .nav-link-sub,
html[dir="rtl"] .stats-band-label,
html[dir="rtl"] .ci-lbl,
html[dir="rtl"] .clients-label,
html[dir="rtl"] .fg label,
html[dir="rtl"] .nav-logo-fb,
html[dir="rtl"] .foot-logo-fb {
  font-family: 'Cairo', 'GE SS', 'Segoe UI', Tahoma, sans-serif;
  font-weight: 500;
}

/* ── TIER 5: Body Text — Regular 400 ─────────────────────── */
html[dir="rtl"] .hero-sub,
html[dir="rtl"] .hero-tag,
html[dir="rtl"] .about-body,
html[dir="rtl"] .about-prop-p,
html[dir="rtl"] .section-sub,
html[dir="rtl"] .svc-body,
html[dir="rtl"] .svc-hero-desc,
html[dir="rtl"] .svc-detail-content p,
html[dir="rtl"] .svc-feature-desc,
html[dir="rtl"] .why-p,
html[dir="rtl"] .pcard-cat,
html[dir="rtl"] .pcard-loc,
html[dir="rtl"] .ci-val,
html[dir="rtl"] .form-subtitle,
html[dir="rtl"] .cta-sub,
html[dir="rtl"] .contact-info-sub,
html[dir="rtl"] .q-point-p,
html[dir="rtl"] .q-back,
html[dir="rtl"] .fg input,
html[dir="rtl"] .fg textarea,
html[dir="rtl"] .fg select,
html[dir="rtl"] .ticker-item,
html[dir="rtl"] .proj-note,
html[dir="rtl"] .foot-link,
html[dir="rtl"] .foot-desc,
html[dir="rtl"] .foot-areas,
html[dir="rtl"] .foot-ci {
  font-family: 'Cairo', 'GE SS', 'Segoe UI', Tahoma, sans-serif;
  font-weight: 400;
}

/* ── TIER 6: Fine Print — Light 300 ──────────────────────── */
html[dir="rtl"] .foot-copy,
html[dir="rtl"] .foot-cr,
html[dir="rtl"] .stat-l,
html[dir="rtl"] .hero-stat-l,
html[dir="rtl"] .about-badge-l {
  font-family: 'Cairo', 'GE SS', 'Segoe UI', Tahoma, sans-serif;
  font-weight: 300;
}

/* ── Arabic Size Adjustments ─────────────────────────────── */
/* Arabic glyphs are taller; slightly reduce hero to prevent overflow */
html[dir="rtl"] .hero-headline { font-size: clamp(2.4rem, 5.5vw, 4rem); }
html[dir="rtl"] .svc-hero h1 { font-size: clamp(2rem, 4.5vw, 3.2rem); }

/* Section titles — slightly smaller for Arabic readability */
html[dir="rtl"] .section-title { font-size: clamp(1.6rem, 3vw, 2.4rem); }
html[dir="rtl"] .about-headline { font-size: clamp(1.6rem, 3vw, 2.4rem); }
html[dir="rtl"] .cta-headline { font-size: clamp(1.4rem, 2.5vw, 2rem); }

/* Service detail headings */
html[dir="rtl"] .svc-detail-content h2 { font-size: clamp(1.25rem, 2vw, 1.6rem); }

/* Card titles */
html[dir="rtl"] .svc-title { font-size: clamp(1rem, 1.5vw, 1.2rem); }
html[dir="rtl"] .svc-feature-title { font-size: clamp(1rem, 1.4vw, 1.15rem); }

/* Body text — bump slightly for Arabic legibility */
html[dir="rtl"] .svc-detail-content p { font-size: 1rem; line-height: 1.85; }
html[dir="rtl"] .about-body { line-height: 1.85; }
html[dir="rtl"] .svc-hero-desc { line-height: 1.7; }

/* Stats numbers — keep bold and prominent */
html[dir="rtl"] .stat-n,
html[dir="rtl"] .hero-stat-n,
html[dir="rtl"] .about-badge-n { font-size: clamp(2rem, 4vw, 3rem); }

/* Feature card number — accent size */
html[dir="rtl"] .svc-feature-num { font-size: 2.5rem; font-weight: 800; opacity: 0.15; }


/* ── Navigation RTL ───────────────────────────────────────── */
html[dir="rtl"] .nav-brand { margin-right: 0; margin-left: 32px; }
html[dir="rtl"] .nav-divider { margin-right: 0; margin-left: 28px; }
html[dir="rtl"] .nav-right { margin-left: 0; margin-right: auto; }
html[dir="rtl"] .nav-toggle { margin-left: 0; margin-right: auto; }

/* ── Eyebrow line — flip to right side ────────────────────── */
html[dir="rtl"] .eyebrow::before,
html[dir="rtl"] .about-eyebrow::before {
  order: 1;
}

/* ── About Section ────────────────────────────────────────── */
html[dir="rtl"] .about-prop { flex-direction: row-reverse; text-align: right; }
html[dir="rtl"] .about-badge { right: auto; left: -20px; }
html[dir="rtl"] .about-cta { justify-content: flex-start; }

/* ── Contact Info ─────────────────────────────────────────── */
html[dir="rtl"] .ci-row { flex-direction: row-reverse; text-align: right; }

/* ── Service Cards ────────────────────────────────────────── */
html[dir="rtl"] .svc-arrow { flex-direction: row-reverse; }
html[dir="rtl"] .svc-card:hover .svc-arrow svg { transform: translateX(-4px); }
html[dir="rtl"] .svc-card::after { transform-origin: right; }

/* ── Why Cards ────────────────────────────────────────────── */
html[dir="rtl"] .why-card::before { transform-origin: right; }

/* ── Service Page Sidebar ─────────────────────────────────── */
html[dir="rtl"] .svc-sidebar-link:hover { transform: translateX(-4px); }
html[dir="rtl"] .svc-sidebar-link { flex-direction: row-reverse; }

/* ── Breadcrumb ───────────────────────────────────────────── */
html[dir="rtl"] .breadcrumb { direction: rtl; }

/* ── Dropdown ─────────────────────────────────────────────── */
html[dir="rtl"] .nav-dropdown-link:hover { padding-left: 14px; padding-right: 18px; }

/* ── Footer ───────────────────────────────────────────────── */
html[dir="rtl"] .foot-link:hover { padding-left: 0; padding-right: 4px; }
html[dir="rtl"] .foot-ci { flex-direction: row-reverse; text-align: right; }
html[dir="rtl"] .foot-bottom { direction: rtl; }

/* ── Form Select Arrow ────────────────────────────────────── */
html[dir="rtl"] .fg select {
  background-position: left 16px center;
  padding-left: 36px;
  padding-right: 18px;
}

/* ── Quote Page Points ────────────────────────────────────── */
html[dir="rtl"] .q-point { flex-direction: row-reverse; text-align: right; }
html[dir="rtl"] .q-back { flex-direction: row-reverse; }
html[dir="rtl"] .q-back svg { transform: scaleX(-1); }

/* ── CTA Band ─────────────────────────────────────────────── */
html[dir="rtl"] .cta-inner { direction: rtl; }

/* ── Project Cards Overlay ────────────────────────────────── */
html[dir="rtl"] .pcard-loc { flex-direction: row-reverse; }

/* ── WhatsApp Float ───────────────────────────────────────── */
html[dir="rtl"] .wa-float { right: auto; left: 28px; }
html[dir="rtl"] .wa-tip { right: auto; left: calc(100% + 12px); }

/* ── Vision / Mission / Values RTL ───────────────────────── */
html[dir="rtl"] .vmv-title {
  font-family: 'Cairo', 'GE SS', 'Segoe UI', Tahoma, sans-serif;
  font-weight: 700;
}
html[dir="rtl"] .vmv-desc {
  font-family: 'Cairo', 'GE SS', 'Segoe UI', Tahoma, sans-serif;
  font-weight: 400;
  line-height: 1.9;
}

/* ── Our Process RTL ─────────────────────────────────────── */
html[dir="rtl"] .process-icon { right: auto; left: -4px; }
html[dir="rtl"] .process-label {
  font-family: 'Cairo', 'GE SS', 'Segoe UI', Tahoma, sans-serif;
  font-weight: 700;
}
html[dir="rtl"] .process-desc {
  font-family: 'Cairo', 'GE SS', 'Segoe UI', Tahoma, sans-serif;
  font-weight: 400;
  line-height: 1.9;
}
html[dir="rtl"] .process-num-text {
  font-family: 'Cairo', 'GE SS', 'Segoe UI', Tahoma, sans-serif;
  font-weight: 800;
}

/* ── Google Reviews RTL ──────────────────────────────────── */
html[dir="rtl"] .review-g-icon { margin-left: 0; margin-right: auto; }
html[dir="rtl"] .review-text { text-align: right; }

/* ── Scroll Reveal RTL ────────────────────────────────────── */
html[dir="rtl"] .reveal.from-left  { transform: translateX(40px) translateY(0); }
html[dir="rtl"] .reveal.from-right { transform: translateX(-40px) translateY(0); }

/* ── Language Switcher ────────────────────────────────────── */
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: var(--r-pill);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: all var(--tr-f);
  white-space: nowrap;
  border: 1.5px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.70);
  background: rgba(255,255,255,0.05);
  cursor: pointer;
}
.lang-switch:hover {
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.25);
  color: var(--white);
}
.nav.scrolled .lang-switch {
  color: var(--text-mid);
  border-color: var(--border);
  background: transparent;
}
.nav.scrolled .lang-switch:hover {
  color: var(--plum);
  border-color: var(--plum);
  background: var(--plum-light);
}

/* ── Visual-First Service Page Components (v4) ──────────────
   Arabic/RTL overrides for new svc-* sections shared by all
   6 service pages (construction, interior-design, fit-out,
   maintenance, client-representative, real-estate).
   ───────────────────────────────────────────────────────── */

/* Hero eyebrow & headline — RTL typographic sizing */
html[dir="rtl"] .svc-hero-eyebrow {
  font-family: var(--font-ar);
  font-size: 13px;
  letter-spacing: 0.06em;
}

/* Stats strip — numbers stay LTR-readable but labels mirror */
html[dir="rtl"] .svc-stats-grid { direction: rtl; }
html[dir="rtl"] .svc-stat-n {
  font-family: var(--font-ar);
  letter-spacing: 0;
}
html[dir="rtl"] .svc-stat-l {
  font-family: var(--font-ar);
  letter-spacing: 0.04em;
  line-height: 1.6;
}

/* Intro split — visual order mirrors (text on right, photo on left) */
html[dir="rtl"] .svc-intro-grid { direction: rtl; }
html[dir="rtl"] .svc-intro-text h2 {
  font-family: var(--font-ar);
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  line-height: 1.35;
}
html[dir="rtl"] .svc-intro-text p {
  font-family: var(--font-ar);
  font-size: 1rem;
  line-height: 1.9;
}
html[dir="rtl"] .svc-intro-cta { flex-direction: row-reverse; }
html[dir="rtl"] .svc-intro-badge {
  left: auto;
  right: 28px;
}
html[dir="rtl"] .svc-intro-badge-l,
html[dir="rtl"] .svc-intro-badge-v {
  font-family: var(--font-ar);
  text-align: right;
}

/* Capability grid — cards, headings, body */
html[dir="rtl"] .svc-cap-grid { direction: rtl; }
html[dir="rtl"] .svc-cap-card h3 {
  font-family: var(--font-ar);
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
  line-height: 1.5;
}
html[dir="rtl"] .svc-cap-card p {
  font-family: var(--font-ar);
  font-size: 0.95rem;
  line-height: 1.85;
}
html[dir="rtl"] .svc-cap-card::before {
  left: auto;
  right: 0;
}

/* Showcase band — glass card flips, list bullets on the right */
html[dir="rtl"] .svc-showcase-card {
  text-align: right;
}
html[dir="rtl"] .svc-showcase-card h2 {
  font-family: var(--font-ar);
  font-size: clamp(1.5rem, 2.8vw, 2.2rem);
  line-height: 1.4;
}
html[dir="rtl"] .svc-showcase-list {
  direction: rtl;
  padding-right: 0;
}
html[dir="rtl"] .svc-showcase-list li {
  flex-direction: row-reverse;
  font-family: var(--font-ar);
  font-size: 1rem;
  text-align: right;
}
html[dir="rtl"] .svc-showcase-list li svg {
  margin-left: 0;
  margin-right: 0;
}

/* Timeline — horizontal connector line and numbers */
html[dir="rtl"] .svc-timeline-grid { direction: rtl; }
html[dir="rtl"] .svc-timeline-grid::before {
  background: linear-gradient(to left, transparent 0%, rgba(244,182,81,0.4) 15%, rgba(244,182,81,0.4) 85%, transparent 100%);
}
html[dir="rtl"] .svc-timeline-step h4 {
  font-family: var(--font-ar);
  font-size: 1.05rem;
  line-height: 1.5;
}
html[dir="rtl"] .svc-timeline-step p {
  font-family: var(--font-ar);
  font-size: 0.9rem;
  line-height: 1.8;
}

/* Gallery — figure captions align right */
html[dir="rtl"] .svc-gallery-grid { direction: rtl; }
html[dir="rtl"] .svc-gallery-item figcaption {
  right: 16px;
  left: auto;
  text-align: right;
}
html[dir="rtl"] .svc-gallery-item figcaption span,
html[dir="rtl"] .svc-gallery-item figcaption em {
  font-family: var(--font-ar);
}

/* Areas strip — pills flow right-to-left */
html[dir="rtl"] .svc-areas-inner {
  flex-direction: row-reverse;
}
html[dir="rtl"] .svc-areas-title,
html[dir="rtl"] .svc-area-pill {
  font-family: var(--font-ar);
}
html[dir="rtl"] .svc-areas-pills { direction: rtl; }

/* Quote band — centered layout, flip quote mark */
html[dir="rtl"] .svc-quote-inner {
  text-align: center;
}
html[dir="rtl"] .svc-quote-mark {
  transform: scaleX(-1);
}
html[dir="rtl"] .svc-quote-text {
  font-family: var(--font-ar);
  font-size: clamp(1.15rem, 2.2vw, 1.6rem);
  line-height: 1.7;
}
html[dir="rtl"] .svc-quote-attr {
  font-family: var(--font-ar);
}

/* Eyebrow text inside the new components */
html[dir="rtl"] .svc-intro .eyebrow,
html[dir="rtl"] .svc-cap .eyebrow,
html[dir="rtl"] .svc-showcase .eyebrow,
html[dir="rtl"] .svc-timeline .eyebrow,
html[dir="rtl"] .svc-gallery .eyebrow {
  font-family: var(--font-ar);
  letter-spacing: 0.08em;
}

/* Section titles inside new components */
html[dir="rtl"] .svc-cap .section-title,
html[dir="rtl"] .svc-timeline .section-title,
html[dir="rtl"] .svc-gallery .section-title {
  font-family: var(--font-ar);
  font-size: clamp(1.6rem, 3vw, 2.4rem);
}

/* Mobile: intro reverses so photo sits above text (visual parity with EN) */
@media (max-width: 900px) {
  html[dir="rtl"] .svc-intro-grid {
    grid-template-columns: 1fr;
  }
  html[dir="rtl"] .svc-intro-cta {
    flex-direction: column;
    align-items: stretch;
  }
}


/* ============================================================
   ABOUT / PROJECTS / CONTACT — RTL fixes for new pages (v=9)
============================================================ */

/* Arabic typography on new page elements */
html[dir="rtl"] .team-name,
html[dir="rtl"] .team-role,
html[dir="rtl"] .team-bio,
html[dir="rtl"] .proj-filter-btn,
html[dir="rtl"] .contact-quick-lbl,
html[dir="rtl"] .contact-quick-val,
html[dir="rtl"] .contact-quick-sub,
html[dir="rtl"] .faq-item summary span,
html[dir="rtl"] .faq-item p {
  font-family: var(--font-ar);
}

/* Team card — keep center alignment, mirror the top accent bar */
html[dir="rtl"] .team-card::before {
  transform-origin: right;
}

/* Solo spotlight card — right-align text in RTL.  Photo flows naturally
   to the right side because grid columns honour document direction. */
html[dir="rtl"] .team-card--solo {
  text-align: right;
}
html[dir="rtl"] .team-card--solo .team-name,
html[dir="rtl"] .team-card--solo .team-role,
html[dir="rtl"] .team-card--solo .team-bio {
  font-family: var(--font-ar);
}
@media (max-width: 720px) {
  html[dir="rtl"] .team-card--solo { text-align: center; }
}

/* Contact quick card — mirror the bottom accent bar direction */
html[dir="rtl"] .contact-quick-card::before {
  transform-origin: left;
}

/* FAQ summary — swap arrow side (summary is flex, dir handles order) */
html[dir="rtl"] .faq-item summary {
  text-align: right;
}

/* Breadcrumb — flip separator orientation in RTL */
html[dir="rtl"] .breadcrumb-sep {
  display: inline-block;
  transform: scaleX(-1);
}

/* Contact info list rows — icon sits at the right in RTL */
html[dir="rtl"] .ci-row {
  text-align: right;
}

/* Address block — RTL alignment */
html[dir="rtl"] .ci-val,
html[dir="rtl"] .ci-lbl {
  text-align: right;
}

/* Force phone / email inline LTR where dir="ltr" is used on <a> */
html[dir="rtl"] a[dir="ltr"] {
  unicode-bidi: embed;
}

/* Projects filter — centered on mobile with RTL wrap */
html[dir="rtl"] .proj-filter {
  flex-direction: row-reverse;
}

/* Contact quick grid — keep grid direction, but icons stay centered */
html[dir="rtl"] .contact-quick-card {
  text-align: center;
}