/* Energco Iraq — shared styles (loaded alongside Tailwind CDN) */

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

:root {
  color-scheme: light;
}

html, body {
  background: #FBFBF9;
}

body {
  font-family: 'Cairo', 'Inter', Arial, sans-serif;
}

/* Smooth scrolling for anchor nav */
html {
  scroll-behavior: smooth;
}

/* Hide content until i18n has applied strings, to avoid a flash of the wrong language key */
[data-i18n], [data-i18n-placeholder] {
  visibility: visible;
}
html:not(.i18n-ready) [data-i18n]:empty {
  visibility: hidden;
}

/* Language toggle elements: show/hide based on <html lang> */
[data-lang-only] { display: none; }
html[lang="ar"] [data-lang-only="ar"] { display: revert; }
html[lang="en"] [data-lang-only="en"] { display: revert; }

/* Animated number counters */
.counter-number {
  font-variant-numeric: tabular-nums;
}

/* Section reveal-on-scroll */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .6s ease, transform .6s ease;
}
.reveal.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* Icons inside buttons/links must never be the click target themselves —
   on some mobile browsers a tap on an inner <svg>/<line> doesn't reliably
   bubble a click up to the parent control, making the button appear dead. */
button svg, a svg, summary svg {
  pointer-events: none;
}

/* Mobile nav toggle: guarantee a full 44x44 touch target (Apple/Google's
   minimum) and remove any tap-delay/double-tap-zoom ambiguity on mobile. */
#mobileNavToggle {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  touch-action: manipulation;
}

/* Mobile nav drawer */
#mobileNav {
  transition: transform .3s ease;
}
html[dir="rtl"] #mobileNav { right: 0; left: auto; transform: translateX(100%); }
html[dir="ltr"] #mobileNav { left: 0; right: auto; transform: translateX(-100%); }
/* These two rules must each out-specificity their own dir-scoped rule above
   (same ID + one extra class, under the same "html[dir=...]" ancestor) —
   a plain "#mobileNav.open" was LOSING to the rules above and never applied,
   which is why the drawer looked like it did nothing when toggled. */
html[dir="rtl"] #mobileNav.open { transform: translateX(0); }
html[dir="ltr"] #mobileNav.open { transform: translateX(0); }

/* Diagonal hero clip accent */
.hero-clip::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(1200px 500px at 85% 0%, rgba(76,175,80,0.14), transparent 60%),
              radial-gradient(900px 500px at 100% 100%, rgba(28,117,188,0.12), transparent 60%);
  pointer-events: none;
}

/* Card hover lift */
.card-lift {
  transition: transform .25s ease, box-shadow .25s ease;
}
.card-lift:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px -6px rgba(43,43,43,0.15);
}

/* Sun-ray divider */
.divider-sun {
  background: linear-gradient(90deg, transparent, #F7941D, transparent);
  height: 3px;
  width: 96px;
}

/* Project filter buttons */
.filter-btn[aria-pressed="true"] {
  background-color: #2E7D32;
  color: #fff;
}

/* WhatsApp floating button */
#waFloat {
  position: fixed;
  bottom: 1.5rem;
  z-index: 40;
}
html[dir="rtl"] #waFloat { left: 1.5rem; }
html[dir="ltr"] #waFloat { right: 1.5rem; }

/* AI chat widget: opposite side from the WhatsApp button so they never overlap */
html[dir="rtl"] #chatFloat, html[dir="rtl"] #chatPanel { right: 1.5rem; }
html[dir="ltr"] #chatFloat, html[dir="ltr"] #chatPanel { left: 1.5rem; }

/* Print-safe focus states for accessibility */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 3px solid #29ABE2;
  outline-offset: 2px;
}

/* Line-clamp helper (in case Tailwind line-clamp plugin isn't present in CDN build) */
.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}