/* ============================================================
   CemNex Innovations — Arabic (RTL) refinements
   Loaded AFTER style.css. Only contains adjustments that ARE
   direction-specific or that need Arabic-aware typography.
   ============================================================ */

html[lang="ar"] {
  /* Arabic type stack — Tajawal for body, Noto Kufi for display */
  --font-body: "Tajawal", "Noto Sans Arabic", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Noto Kufi Arabic", "Tajawal", "Noto Sans Arabic", system-ui, sans-serif;
}

/* ---------- Arabic typography tuning ---------- */

/* Generous leading makes Arabic easier to read because of
   how joined letterforms stack at default line-height. */
html[lang="ar"] body {
  line-height: 1.72;
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Display headings need slightly looser tracking and a
   touch more weight — Arabic weights feel lighter than Latin. */
html[lang="ar"] .section__title,
html[lang="ar"] .hero__title {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: 0; /* Arabic does not benefit from negative tracking */
}
html[lang="ar"] .hero__title {
  font-size: clamp(2.2rem, 4.6vw, 3.6rem);
}

/* Bold (700) in Tajawal renders like Medium in Latin — bump
   every "font-weight: 600/700" one notch so Arabic feels equal. */
html[lang="ar"] .btn,
html[lang="ar"] .nav__links a,
html[lang="ar"] .link-arrow,
html[lang="ar"] .eyebrow,
html[lang="ar"] .company__facts dt,
html[lang="ar"] .pill,
html[lang="ar"] .hero__card-eyebrow,
html[lang="ar"] .nav__lang {
  font-weight: 700;
}
html[lang="ar"] strong,
html[lang="ar"] .company__facts dd {
  font-weight: 800;
}

/* Eyebrows — disable Latin micro-typography in Arabic. */
html[lang="ar"] .eyebrow,
html[lang="ar"] .hero__card-eyebrow,
html[lang="ar"] .company__facts dt,
html[lang="ar"] .pill {
  letter-spacing: 0;
  text-transform: none; /* Arabic uppercase is unnecessary noise */
}
html[lang="ar"] .field label,
html[lang="ar"] .band__stat span { letter-spacing: 0; }

/* ---------- Landscape hero (RTL — text pane right, cards left) ---------- */

/* Arabic gradient text: there's a known edge case where background-clip:text
   with Arabic joined-letterform fonts renders as a solid colored rectangle
   (the gradient paints the bounding box, not the glyphs). Use a SOLID emerald
   text fill for Arabic so headlines never display as colored blocks.
   Latin pages still get the gradient via .grad in style.css. */
html[lang="ar"] .grad,
html[lang="ar"] .hero__card--lead strong,
html[lang="ar"] .band__stat strong {
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  -webkit-text-fill-color: #34d399;
  color: #34d399;
}

/* Subtle emerald→mint linear for the lead stat "0%" — Arabic numerals look
   crisp on solid backgrounds; we keep it simple to avoid the same glyph-mask
   problem. */
html[lang="ar"] .hero__card--lead strong {
  font-family: var(--font-display);
  font-weight: 800;
  background: none;
}

/* Buttons in Arabic still get the emerald→mint gradient — those aren't
   background-clip:text, they're regular solid gradients, so they're safe.
   Mirror the angle so the bright side faces inline-start. */
html[lang="ar"] .btn--solid {
  background: linear-gradient(300deg, var(--leaf) 0%, #6ee7b7 100%);
}

/* ---------- Hero cards — symmetric counter-balance ---------- */

/* Aura floats sit on opposite corners — keep that mirrored.
   (Logical properties handle this, but the radial center can
   still drift if the source point stays inline-start only.
   No change needed; included as a comment for future-proofing.) */

/* The hero veil tilts dim→bright from inline-start already via
   the [dir="rtl"] override in style.css. Re-affirm cleanly here. */
html[lang="ar"] .hero__veil { opacity: 1; }

/* Bigger arabesque numbers in stat cards — Arabic readers parse
   the strong numerals more easily when they sit on a visual
   baseline that matches the rest of the type. */
html[lang="ar"] .hero__card--lead strong {
  font-size: 2.6rem;
  font-family: var(--font-display);
}

/* ---------- Ticker — RTL marquee timing ---------- */

/* Reading the marquee visually right-to-left under RTL is more
   natural than running the same LTR animation reversed; both
   work but reversed feels more "native". style.css already
   handles this with [dir="rtl"] .ticker__track direction. */
html[lang="ar"] .ticker__track > span { font-weight: 700; }

/* ---------- Navigation language switcher in RTL — show "العربية" first ---------- */

html[lang="ar"] .nav__lang {
  /* Visually keep current locale first in both languages. */
  flex-direction: row;
  gap: 0.25rem;
}

/* ---------- Buttons / CTAs — keep arrow direction legible ---------- */

html[lang="ar"] .hero__cta,
html[lang="ar"] .ask__cta,
html[lang="ar"] .solution__steps,
html[lang="ar"] .form__hint {
  text-align: start;
}

/* "سهم" inside CTAs should keep pointing forward of copy. */
html[lang="ar"] .btn i {
  /* In RTL "forward" = toward the start (right). LTR icons like
     fa-arrow-right point right; in RTL that visually points back.
     The shared style.css rule already does scaleX(-1). Reaffirm. */
  transform: scaleX(-1);
}
html[lang="ar"] .btn:hover i { transform: scaleX(-1) translateX(2px); }

/* ---------- Step list — number badge sits where the eye lands first ---------- */

html[lang="ar"] .step { gap: 1rem; }
html[lang="ar"] .step__num { font-family: var(--font-display); }

/* ---------- Hero scroll affordance — RTL scrolls toward the right edge, in
   style.css the indicator is anchored to inline-end which flips correctly.
   Just tune placement so it never crowds the chips under any width. */
html[lang="ar"][dir="rtl"] .hero__scroll {
  inset-inline-end: 1.4rem;
  bottom: 1.2rem;
}

/* ---------- POC — large numerals ---------- */

/* Latin display faces feel big; Arabic display numerals are wider,
   so we relax the percent suffix size to keep ratios clean. */
html[lang="ar"] .poc__number { font-size: 3.6rem; }
html[lang="ar"] .poc__number .pct { font-size: 1.9rem; font-weight: 700; }

/* ---------- Band — keep goal prominent ---------- */

html[lang="ar"] .band__lead { gap: 1rem; }
html[lang="ar"] .band__lead > i {
  font-family: var(--font-display);
}

/* ---------- Solution tagline — gradient bar already on inline-start,
   but the quote icon should sit on the inline-start edge. ---------- */

html[lang="ar"] .solution__tagline > i { font-size: 1.1rem; }
html[lang="ar"] .solution__tagline p { font-weight: 700; }

/* ---------- Contact form — labels above inputs ---------- */

html[lang="ar"] .field label { font-weight: 700; }
html[lang="ar"] .field input,
html[lang="ar"] .field textarea { font-family: var(--font-body); }

/* ---------- Footer — symmetric column order ---------- */

/* No DOM reordering needed; logical grid + start-align does it. */
html[lang="ar"] .footer__tag { font-weight: 700; }

/* ---------- Mobile ========================================================== */

@media (max-width: 1024px) {
  html[lang="ar"] .nav__lang { margin-inline-start: auto; }
}

@media (max-width: 560px) {
  html[lang="ar"] .hero__title { font-size: clamp(1.95rem, 7vw, 2.5rem); }
  html[lang="ar"] .section__title { font-size: clamp(1.85rem, 6vw, 2.3rem); }
  html[lang="ar"] .poc__number { font-size: 3rem; }
  html[lang="ar"] .nav__logo { height: 40px; }
  html[lang="ar"] .company__name { font-size: 1.25rem; }
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  html[lang="ar"] .hero__media img { animation: none; transform: none; }
  html[lang="ar"] .hero__aura--b { animation: none; }
}