/* ============================================================
   DRSAF GROUP — Arabic / RTL overrides
   Loads AFTER styles.css on the Arabic pages.
   Fonts: El Messiri (display) · IBM Plex Sans Arabic (body/UI)
   ============================================================ */

/* ---------- Arabic type ---------- */
[dir="rtl"] {
  --serif: 'IBM Plex Sans Arabic', system-ui, sans-serif;
  --sans: 'IBM Plex Sans Arabic', system-ui, sans-serif;
  --display: 'IBM Plex Sans Arabic', system-ui, sans-serif;
}

[dir="rtl"] body {
  font-family: 'IBM Plex Sans Arabic', system-ui, sans-serif;
}

/* Arabic is cursive — kill Latin tracking everywhere or ligatures break */
[dir="rtl"] .eyebrow,
[dir="rtl"] .hero-eyebrow,
[dir="rtl"] .stat-label,
[dir="rtl"] .nav-links a,
[dir="rtl"] .nav-cta,
[dir="rtl"] .btn,
[dir="rtl"] .sec-tab-num,
[dir="rtl"] .sec-tab-meta,
[dir="rtl"] .sec-panel-eyebrow,
[dir="rtl"] .cg-sector,
[dir="rtl"] .cg-cta-eyebrow,
[dir="rtl"] .nr-cat,
[dir="rtl"] .nr-feature-tag,
[dir="rtl"] .nr-date,
[dir="rtl"] .nr-read,
[dir="rtl"] .footer-col h5,
[dir="rtl"] .company-tag,
[dir="rtl"] .company-meta-item h6,
[dir="rtl"] .sector-detail-meta,
[dir="rtl"] .sector-companies-head,
[dir="rtl"] .sector-visual-num,
[dir="rtl"] .page-hero-lead,
[dir="rtl"] .crumb,
[dir="rtl"] .label,
[dir="rtl"] .value-label,
[dir="rtl"] .job-meta,
[dir="rtl"] .contact-item h5,
[dir="rtl"] .art-meta-row,
[dir="rtl"] .art-side,
[dir="rtl"] .art-tag,
[dir="rtl"] .lightbox-counter,
[dir="rtl"] [class*="eyebrow"],
[dir="rtl"] [class*="-label"],
[dir="rtl"] [class*="-meta"] {
  letter-spacing: normal !important;
}

/* Arabic has no italics — emphasis carries through colour only.
   The base sets font-style:italic directly on many display bits; faux-italic
   Arabic slants and renders incorrectly, so neutralise it everywhere. */
[dir="rtl"] em,
[dir="rtl"] i,
[dir="rtl"] .h-display em,
[dir="rtl"] h1 em, [dir="rtl"] h2 em, [dir="rtl"] h3 em,
[dir="rtl"] .hero-meta .value,
[dir="rtl"] .sec-tab-num,
[dir="rtl"] .sec-panel-eyebrow,
[dir="rtl"] .cg-cta-title,
[dir="rtl"] .feature-img-label,
[dir="rtl"] .inv-slide-num,
[dir="rtl"] .nr-mini-num,
[dir="rtl"] .value-num,
[dir="rtl"] .news-img-label,
[dir="rtl"] blockquote,
[dir="rtl"] .article-content .lede,
[dir="rtl"] .art-side strong {
  font-style: normal !important;
}

/* El Messiri tops out lighter than Manrope/Angsana — push display weight up */
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3,
[dir="rtl"] .h-display,
[dir="rtl"] .cg-cta-title,
[dir="rtl"] .stat-num {
  font-weight: 700;
}

/* ---------- Line-height: Latin display type is set 0.55–0.9, which CLIPS
   Arabic diacritics and overlaps lines. Restore breathable leading. ---------- */
[dir="rtl"] .h-display,
[dir="rtl"] .hero .h-display { line-height: 1.18 !important; }
[dir="rtl"] h1,
[dir="rtl"] .page-hero h1 { line-height: 1.2 !important; }
[dir="rtl"] h2 { line-height: 1.22 !important; }
[dir="rtl"] h3 { line-height: 1.3 !important; }
[dir="rtl"] h4 { line-height: 1.35 !important; }
[dir="rtl"] .cg-cta-title { line-height: 1.2 !important; }
[dir="rtl"] .cg-name,
[dir="rtl"] .nr-mini-title,
[dir="rtl"] .nr-feature-body h3,
[dir="rtl"] .sec-panel-body h3,
[dir="rtl"] .sec-tab-name,
[dir="rtl"] .company-name,
[dir="rtl"] .job-title,
[dir="rtl"] .modal-job-title { line-height: 1.3 !important; }

/* Negative Latin tracking cramps Arabic joining — neutralise on headings */
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4,
[dir="rtl"] .h-display, [dir="rtl"] .hero .h-display,
[dir="rtl"] .page-hero h1,
[dir="rtl"] .cg-cta-title, [dir="rtl"] .cg-name,
[dir="rtl"] .nr-mini-title, [dir="rtl"] .sec-tab-name,
[dir="rtl"] .stat-num { letter-spacing: 0 !important; }

/* ---------- Font sizes: Arabic glyphs fill more of the em box than the
   Latin display faces, so the same px size reads much larger. Scale the
   big headings down so they sit in balance with the layout. ---------- */
[dir="rtl"] .h-display,
[dir="rtl"] .hero .h-display { font-size: clamp(46px, 7.2vw, 104px) !important; }
[dir="rtl"] .page-hero h1 { font-size: clamp(40px, 5.4vw, 82px) !important; }
[dir="rtl"] h1 { font-size: clamp(38px, 5.4vw, 76px) !important; }
[dir="rtl"] h2 { font-size: clamp(30px, 3.8vw, 54px) !important; }
[dir="rtl"] h3 { font-size: clamp(22px, 2vw, 30px) !important; }
[dir="rtl"] .cg-cta-title { font-size: clamp(22px, 2.1vw, 30px) !important; }
[dir="rtl"] .cg-name { font-size: 19px !important; }
[dir="rtl"] .sec-tab-name { font-size: clamp(16px, 1.5vw, 21px) !important; }

/* Counter numerals read oversized next to the smaller Arabic headings */
[dir="rtl"] .stat-num { font-size: clamp(48px, 5.2vw, 82px) !important; }

/* ---------- Header position is symmetric (top/left/right:0) — fine ---------- */

/* ---------- Eyebrow rule flips to the right ---------- */
[dir="rtl"] .eyebrow::before { left: auto; right: 0; }

/* ---------- Buttons / link arrows point left ---------- */
[dir="rtl"] .btn::after,
[dir="rtl"] .btn-ghost::after,
[dir="rtl"] .sec-panel-link::after,
[dir="rtl"] .company-link::after,
[dir="rtl"] .sector-arrow::after { content: "←"; }

[dir="rtl"] .btn:hover::after,
[dir="rtl"] .btn-ghost:hover::after,
[dir="rtl"] .sector:hover .sector-arrow::after { transform: translateX(-6px); }

/* Inline → glyphs in markup (cg-arrow, nr-arrow, cg-cta-arrow) */
[dir="rtl"] .cg-cta-arrow,
[dir="rtl"] .sector-arrow { transform: scaleX(-1); display: inline-block; }

/* Circular arrow badges: swap to a real ← glyph so it stays perfectly centred
   (flipping → with scaleX leaves it off-centre due to glyph side-bearing). */
[dir="rtl"] .cg-arrow,
[dir="rtl"] .nr-arrow,
[dir="rtl"] .inv-slide-link .nr-arrow { font-size: 0; line-height: 1; transform: none; }
[dir="rtl"] .cg-arrow::before,
[dir="rtl"] .nr-arrow::before,
[dir="rtl"] .inv-slide-link .nr-arrow::before { content: "\2190"; font-size: 13px; line-height: 1; }

/* Hover states set their own translateX which REPLACES the flip — re-apply
   scaleX(-1) so the arrow stays pointing left, and the nudge runs leftward. */
[dir="rtl"] .cg-card:hover .cg-arrow { transform: translateX(-4px); }
[dir="rtl"] .cg-cta:hover .cg-cta-arrow { transform: scaleX(-1) translateX(10px); }
[dir="rtl"] .nr-feature:hover .nr-arrow,
[dir="rtl"] .nr-side-card:hover .nr-arrow,
[dir="rtl"] .nr-mini:hover .nr-arrow { transform: translateX(-4px); }

/* ---------- Hero ---------- */
[dir="rtl"] .hero-dots { right: auto; left: var(--gutter); }
[dir="rtl"] .hero-meta {
  border-left: 0;
  border-right: 1px solid rgba(246, 241, 233, 0.25);
  padding: 8px 28px 8px 0;
}

/* Mobile hero: the base forces text-align:left — flip to right for Arabic */
@media (max-width: 880px) {
  [dir="rtl"] .hero { text-align: right; }
  [dir="rtl"] .hero-meta { padding: 4px 20px 4px 0; }
  /* dots are centered on mobile — override the desktop RTL gutter pin */
  [dir="rtl"] .hero-dots { left: 50%; right: auto; }
}

/* ---------- Stats dividers flip ---------- */
[dir="rtl"] .stat { border-right: 0; border-left: 1px solid var(--line); }
[dir="rtl"] .stat:last-child { border-left: 0; }
[dir="rtl"] .stat-num sup,
[dir="rtl"] .stat-num .stat-plus { margin-left: 0; margin-right: 4px; }

@media (max-width: 720px) {
  [dir="rtl"] .stat:nth-child(2) { border-left: 0; }
  [dir="rtl"] .stat:nth-child(odd) { border-left: 1px solid var(--line); }
}

/* ---------- Sector showcase tabs ---------- */
/* The outer border lives on the .sec-tabs container, not each tab. In RTL the
   tab column sits on the right, so drop the container's LEFT border (toward the
   panel) and restore the right edge. */
[dir="rtl"] .sec-tabs { border-right: 1px solid var(--line); border-left: 0; }
[dir="rtl"] .sec-tab { text-align: right; padding: 22px 28px 22px 24px; }
[dir="rtl"] .sec-tab::before { left: auto; right: -1px; }
[dir="rtl"] .sec-tab::after { transform-origin: right center; }
[dir="rtl"] .sec-tab:hover { padding-right: 36px; }
[dir="rtl"] .sec-tab.active { padding-right: 40px; }
[dir="rtl"] .sec-companies,
[dir="rtl"] .sec-panel-body { text-align: right; }

/* ---------- Sector grid (sectors page) ---------- */
[dir="rtl"] .sector { border-right: 0; border-left: 1px solid var(--line); }
[dir="rtl"] .sector:nth-child(3n) { border-left: 0; }
@media (max-width: 880px) {
  [dir="rtl"] .sector { border-left: 0; }
}

/* ---------- Sector detail visual numbers ---------- */
[dir="rtl"] .sec-panel-num,
[dir="rtl"] .inv-slide-num,
[dir="rtl"] .sector-visual-num { left: auto; right: 24px; }
[dir="rtl"] .nr-feature-tag { left: auto; right: 20px; }

/* ---------- Companies ---------- */
[dir="rtl"] .company-row:hover { padding-left: 0; padding-right: 16px; }
[dir="rtl"] .company-card.bg-navy::before,
[dir="rtl"] .sec-tab.active::before { left: auto; right: -1px; }
[dir="rtl"] .sector-companies-list a { text-align: right; }

/* ---------- Newsroom ---------- */
[dir="rtl"] .nr-mini:hover { padding-left: 0; padding-right: 8px; }
[dir="rtl"] .nr-mini .nr-arrow { margin-left: 0; margin-right: auto; }
/* News side-card titles read oversized in Arabic — unify smaller */
[dir="rtl"] .nr-side-body h4 { font-size: 20px !important; line-height: 1.45 !important; }

/* ---------- Article hero ---------- */
[dir="rtl"] .art-hero h1 { font-size: clamp(26px, 3.4vw, 44px) !important; line-height: 1.35 !important; }

/* ---------- Article side meta ---------- */
[dir="rtl"] .article-content blockquote {
  border-left: 0;
  border-right: 3px solid var(--copper);
  padding: 8px 28px 8px 0;
}

/* ---------- Mobile menu (RTL) ---------- */
[dir="rtl"] .nav.open .nav-links a { font-size: 22px !important; }
[dir="rtl"] .nav.open .nav-links a::after { content: "\2190"; }
[dir="rtl"] .nav.open .nav-mobile-foot .nav-foot-lang {
  font-size: 12px !important;
  padding: 11px 18px;
  letter-spacing: 0.06em;
}
[dir="rtl"] .nav.open .nav-mobile-foot .nav-foot-lang::after { display: none; }
[dir="rtl"] .nav.open .nav-links a:hover::after { transform: translateX(-6px); }
[dir="rtl"] .nav.open .nav-links::after {
  content: "درصاف القابضة · حيّ دمشق، طرابلس · info@drsafgroup.com";
  text-align: right;
}

/* ---------- Lightbox close flips ---------- */
[dir="rtl"] .lightbox-close { right: auto; left: clamp(16px, 3vw, 32px); }

/* ---------- Value cards (about) ---------- */
[dir="rtl"] .footer-col h5 { font-size: 15px !important; }
[dir="rtl"] .value { border-right: 0; border-left: 1px solid var(--line); }
[dir="rtl"] .value:last-child { border-left: 0; }
@media (max-width: 880px) {
  [dir="rtl"] .value:nth-child(2n) { border-left: 0; }
}