/* =========================================================
   Badil Tech — Typography
   English  : Poppins (display) + Inter (body) — Google Fonts CDN
   Arabic   : Almarai (headings + body) — self-hosted, see fonts/arabic/
   ========================================================= */

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

/* ---------- Arabic: Almarai (headings + body) ---------- */
@font-face{
  font-family: 'Almarai';
  src: url('arabic/Almarai-Light.ttf') format('truetype');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face{
  font-family: 'Almarai';
  src: url('arabic/Almarai-Regular.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face{
  font-family: 'Almarai';
  src: url('arabic/Almarai-Bold.ttf') format('truetype');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face{
  font-family: 'Almarai';
  src: url('arabic/Almarai-ExtraBold.ttf') format('truetype');
  font-weight: 800; font-style: normal; font-display: swap;
}

:root{
  --font-en-display: 'Poppins', 'Inter', sans-serif;
  --font-en-body: 'Inter', 'Poppins', sans-serif;
  --font-ar-display: 'Almarai', 'Cairo', sans-serif;
  --font-ar-body: 'Almarai', 'Cairo', sans-serif;
}

/* English & French (Latin script — same font stack) */
html[lang="en"] body, html[lang="fr"] body{ font-family: var(--font-en-body); }
html[lang="en"] h1, html[lang="en"] h2, html[lang="en"] h3, html[lang="en"] h4, html[lang="en"] .display-font,
html[lang="fr"] h1, html[lang="fr"] h2, html[lang="fr"] h3, html[lang="fr"] h4, html[lang="fr"] .display-font{ font-family: var(--font-en-display); }

/* Arabic */
html[lang="ar"] body{ font-family: var(--font-ar-body); }
html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3,
html[lang="ar"] h4, html[lang="ar"] .display-font{ font-family: var(--font-ar-display); }

/* Reinforce site-wide: every text component explicitly uses Cairo/Almarai in Arabic,
   regardless of Bootstrap defaults or component-level overrides. Latin badge glyphs
   (letter tiles, numbered tags, decorative quote mark) are intentionally excluded. */
html[lang="ar"] .navbar-nav .nav-link,
html[lang="ar"] .btn-brand,
html[lang="ar"] .btn-outline-brand,
html[lang="ar"] .btn-navy,
html[lang="ar"] .lang-switch,
html[lang="ar"] .eyebrow,
html[lang="ar"] .badge-soft,
html[lang="ar"] .hero-eyebrow,
html[lang="ar"] .hero p,
html[lang="ar"] .svc-nav button,
html[lang="ar"] .svc-intro p,
html[lang="ar"] .cap-list li,
html[lang="ar"] .sec-card,
html[lang="ar"] .sector-tag,
html[lang="ar"] .client-card,
html[lang="ar"] .client-filters button,
html[lang="ar"] .stack-card,
html[lang="ar"] .stack-pills span,
html[lang="ar"] .feature-card,
html[lang="ar"] .vmg-card,
html[lang="ar"] .goal-list li,
html[lang="ar"] .value-card p,
html[lang="ar"] .eco-card,
html[lang="ar"] .contact-card,
html[lang="ar"] .form-control-badil,
html[lang="ar"] .form-label-badil,
html[lang="ar"] .letter-row,
html[lang="ar"] .quote-block,
html[lang="ar"] .ticker-track span,
html[lang="ar"] .hero-photo-tag,
html[lang="ar"] .footer,
html[lang="ar"] .dga-badge,
html[lang="ar"] .skip-link{
  font-family: var(--font-ar-body);
}