/* ============================================
   CUSTOM FONTS — Bi Innovate
   Inter (LTR/Numbers) | Tajawal + Cairo (Arabic RTL)
   ============================================ */

/* CSS Variables for easy reuse */
:root {
  --bi-font-latin: 'Inter', sans-serif;
  --bi-font-arabic-heading: 'Inter', 'Tajawal', sans-serif;
  --bi-font-arabic-body: 'Inter', 'Cairo', sans-serif;
}

/* === LTR Base === */
body {
  font-family: var(--bi-font-latin);
}

/* === RTL Arabic — CSS Variables Override === */
html[dir="rtl"] {
  --ygency-primary-font: var(--bi-font-arabic-heading) !important;
  --ygency-secondary-font: var(--bi-font-arabic-heading) !important;
}

/* === RTL Body & General Elements === */
html[dir="rtl"],
html[dir="rtl"] body {
  font-family: var(--bi-font-arabic-body) !important;
  letter-spacing: 0;
  line-height: 1.8;
}

/* === RTL Headings & Navigation === */
html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3,
html[dir="rtl"] h4,
html[dir="rtl"] h5,
html[dir="rtl"] h6,
html[dir="rtl"] .section-title h2,
html[dir="rtl"] .hero-title,
html[dir="rtl"] .sub-title,
html[dir="rtl"] .main-menu .navigation > li > a,
html[dir="rtl"] p,
html[dir="rtl"] a:not(.lang-pill),
html[dir="rtl"] span,
html[dir="rtl"] div {
  font-family: var(--bi-font-arabic-heading) !important;
}

/* === Icon fonts must survive the broad Arabic override above ===
   That rule matches html[dir="rtl"] span/div with !important, so an icon
   rendered as a <span> (the mobile menu's +/− toggle, for one) loses its
   glyph font and draws tofu. <i> escapes it only because it isn't listed.
   Restate the icon families for anything carrying an icon class. */
html[dir="rtl"] span[class*="fa-"],
html[dir="rtl"] div[class*="fa-"] {
  font-family: 'Font Awesome 6 Pro', 'Font Awesome 5 Pro',
               'Font Awesome 6 Free', 'Font Awesome 5 Free',
               'Font Awesome 6 Brands', 'Font Awesome 5 Brands' !important;
}

html[dir="rtl"] span[class*="flaticon-"],
html[dir="rtl"] div[class*="flaticon-"] {
  font-family: 'flaticon_ygency' !important;
}

/* === RTL Hero social link text — always Latin, rendered vertically === */
.hero-social a span {
  font-family: var(--bi-font-latin) !important;
}

html[dir="rtl"] .hero-social a span {
  font-family: 'Tajawal', sans-serif !important;
  letter-spacing: 0 !important;
  font-size: 13px !important;
}

/* === Phone numbers — always LTR numerals regardless of page direction === */
html[dir="rtl"] .zoho-crm-form-container input[type="tel"] {
  font-family: Arial, Helvetica, sans-serif !important;
}