/* =========================================================
   BUILDX — main stylesheet entry
   ========================================================= */
@import url("./tokens.css");
@import url("./components.css");
@import url("./rtl.css");

/* Fonts (Manrope + Tajawal) */
@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Tajawal:wght@300;400;500;700;800&family=JetBrains+Mono:wght@400;500&display=swap");

/* Concept imagery — used in lieu of licensed photography.  These are SVG-based
   illustrations rendered as data URIs via background-image. Each section sets
   its own --img variable so the same component can take different visuals. */
:root {
  --img-hero-1: url("../img/hero-1.webp");
  --img-hero-2: url("../img/hero-2.webp");
  --img-editorial-1: url("../img/editorial-1.webp");
  --img-spotlight-roads: url("../img/spotlight-roads.webp");
  --img-cta-1: url("../img/cta-1.webp");
  --img-group-1: url("../img/group-1.webp");
  --img-quality-1: url("../img/quality-1.webp");
  --img-infrastructure-1: url("../img/infrastructure-1.webp");
  --img-bridges-1: url("../img/bridges-1.webp");
  --img-civil-1: url("../img/civil-1.webp");
  --img-construction-1: url("../img/construction-1.webp");
  --img-procurement-1: url("../img/procurement-1.webp");
  --img-pm-1: url("../img/pm-1.webp");
  --img-tradehub-1: url("../img/tradehub-1.webp");
  --img-news-1: url("../img/news-1.webp");
  --img-news-2: url("../img/news-2.webp");
  --img-news-3: url("../img/news-3.webp");
  --img-careers-1: url("../img/careers-1.webp");
  --img-contact-1: url("../img/contact-1.webp");
  --img-rfp-1: url("../img/rfp-1.webp");
  --img-project-1: url("../img/project-1.webp");
  --img-project-2: url("../img/project-2.webp");
  --img-project-3: url("../img/project-3.webp");
  --img-project-4: url("../img/project-4.webp");
  --img-project-5: url("../img/project-5.webp");
  --img-project-6: url("../img/project-6.webp");
}

/* Apply imagery to components that reference the variables */
.bx-hero__media { background-image: var(--img-hero-1); }
.bx-subhero__media { background-image: var(--img-hero-1); }
.bx-editorial__media { background-image: var(--img-editorial-1); }
.bx-spotlight__bg   { background-image: var(--img-spotlight-roads); }
.bx-cta__bg         { background-image: var(--img-cta-1); }
.bx-group__visual   { background-image: var(--img-group-1); }

/* service tile backgrounds (set per tile) */
.bx-service[data-bg="roads"]::before          { background-image: var(--img-spotlight-roads); }
.bx-service[data-bg="construction"]::before   { background-image: var(--img-construction-1); }
.bx-service[data-bg="infrastructure"]::before { background-image: var(--img-infrastructure-1); }
.bx-service[data-bg="bridges"]::before        { background-image: var(--img-bridges-1); }
.bx-service[data-bg="civil"]::before          { background-image: var(--img-civil-1); }
.bx-service[data-bg="pm"]::before             { background-image: var(--img-pm-1); }
.bx-service[data-bg="procurement"]::before    { background-image: var(--img-procurement-1); }
.bx-service[data-bg="tradehub"]::before       { background-image: var(--img-tradehub-1); }

/* project card backgrounds */
.bx-project[data-bg="p1"] .bx-project__media { background-image: var(--img-project-1); }
.bx-project[data-bg="p2"] .bx-project__media { background-image: var(--img-project-2); }
.bx-project[data-bg="p3"] .bx-project__media { background-image: var(--img-project-3); }
.bx-project[data-bg="p4"] .bx-project__media { background-image: var(--img-project-4); }
.bx-project[data-bg="p5"] .bx-project__media { background-image: var(--img-project-5); }
.bx-project[data-bg="p6"] .bx-project__media { background-image: var(--img-project-6); }

/* insight card covers */
.bx-insight[data-bg="n1"] .bx-insight__cover { background-image: var(--img-news-1); background-size: cover; background-position: center; }
.bx-insight[data-bg="n2"] .bx-insight__cover { background-image: var(--img-news-2); background-size: cover; background-position: center; }
.bx-insight[data-bg="n3"] .bx-insight__cover { background-image: var(--img-news-3); background-size: cover; background-position: center; }

/* Page-specific hero overrides */
.bx-page-roads .bx-subhero__media { background-image: var(--img-spotlight-roads); }
.bx-page-construction .bx-subhero__media { background-image: var(--img-construction-1); }
.bx-page-infrastructure .bx-subhero__media { background-image: var(--img-infrastructure-1); }
.bx-page-bridges .bx-subhero__media { background-image: var(--img-bridges-1); }
.bx-page-civil .bx-subhero__media { background-image: var(--img-civil-1); }
.bx-page-pm .bx-subhero__media { background-image: var(--img-pm-1); }
.bx-page-procurement .bx-subhero__media { background-image: var(--img-procurement-1); }
.bx-page-tradehub .bx-subhero__media { background-image: var(--img-tradehub-1); }
.bx-page-about .bx-subhero__media { background-image: var(--img-editorial-1); }
.bx-page-projects .bx-subhero__media { background-image: var(--img-construction-1); }
.bx-page-careers .bx-subhero__media { background-image: var(--img-careers-1); }
.bx-page-contact .bx-subhero__media { background-image: var(--img-contact-1); }
.bx-page-rfp .bx-subhero__media { background-image: var(--img-rfp-1); }
.bx-page-insights .bx-subhero__media { background-image: var(--img-news-1); }
.bx-page-group .bx-subhero__media { background-image: var(--img-group-1); }
.bx-page-quality .bx-subhero__media { background-image: var(--img-quality-1); }

/* RTL fix: keep SVG logo text in LTR coordinate flow so marks do not overlap Arabic wordmarks */
[dir="rtl"] svg, [dir="rtl"] svg text { direction: ltr; unicode-bidi: normal; }
@media (max-width: 760px) { .bx-service--xl { flex-direction: column; align-items: flex-start; justify-content: flex-end; padding: 1.75rem; min-height: 420px; } .bx-service--xl .bx-service__title { font-size: 2rem; } }