/* Hover / focus / group-transition rules — attribute-scoped, no class names.
   Loaded via <link> in each page helmet. These never affect initial layout/paint,
   so async-loading them does not delay the streaming first paint. */

/* keyboard focus */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
  outline: 2px solid #2E6FB8;
  outline-offset: 3px;
}

/* nav link gold underline grow */
[data-navlink] { position: relative; }
[data-navlink] u {
  display: block; height: 1px; margin-top: 5px; background: #2E6FB8;
  transform: scaleX(0); transform-origin: left center;
  transition: transform .45s cubic-bezier(.22,1,.36,1);
}
[data-navlink]:hover u, [data-navlink][data-active] u { transform: scaleX(1); }
[data-navlink][data-active] u { transform-origin: left center; }
[data-navlink]:hover, [data-navlink][data-active] { color: #7FA6D6 !important; }

/* inline text-link underline grow */
[data-ul] {
  background-image: linear-gradient(#2E6FB8, #2E6FB8);
  background-size: 0% 1px; background-repeat: no-repeat;
  background-position: left 100%; transition: background-size .45s cubic-bezier(.22,1,.36,1);
  padding-bottom: 2px;
}
[data-ul]:hover { background-size: 100% 1px; }

/* image zoom on hover */
[data-zoom] { overflow: hidden; }
[data-zoom] img, [data-zoom] [data-zoomtarget] {
  transition: transform 1.2s cubic-bezier(.22,1,.36,1);
  will-change: transform;
}
[data-zoom]:hover img, [data-zoom]:hover [data-zoomtarget] { transform: scale(1.07); }

/* partner / outline button fill */
[data-partner] { transition: background .4s ease, color .4s ease, border-color .4s ease; }
[data-partner]:hover { background: #2E6FB8; color: #081A31; border-color: #2E6FB8; }

/* solid gold button */
[data-goldbtn] { transition: background .35s ease, transform .35s ease, box-shadow .35s ease; }
[data-goldbtn]:hover { background: #7FA6D6; transform: translateY(-2px); box-shadow: 0 14px 34px rgba(46,111,184,.28); }

/* Premium enterprise card interactions: lift + deep shadow + accent-border glow, an
   animated CTA (the "Explore →" tracks out + brightens), and a mobile tap response. */
[data-lift] { transition: transform .5s cubic-bezier(.22,1,.36,1), box-shadow .5s ease, border-color .5s ease; cursor: pointer; }
[data-lift]:hover { transform: translateY(-8px); box-shadow: 0 34px 70px -28px rgba(0,0,0,.55); border-color: rgba(46,111,184,.55) !important; }
[data-lift]:active { transform: translateY(-3px) scale(.995); }
[data-lift] [data-ul] { transition: color .3s ease, letter-spacing .3s ease; }
[data-lift]:hover [data-ul] { color: #7FA6D6; letter-spacing: .18em; }
@media (hover: none) { [data-lift]:active { box-shadow: 0 20px 44px -22px rgba(0,0,0,.5); border-color: rgba(46,111,184,.5) !important; } }

/* mobile overlay link */
[data-mlink] { transition: color .3s ease; }
[data-mlink]:hover { color: #2E6FB8; }

/* ============================================================
   RESPONSIVE LAYER — applies to every page (loaded globally)
   ============================================================ */

/* Overflow hardening: never allow a horizontal scrollbar.
   ONLY `html` may carry overflow-x:hidden. Do NOT add it to `body`.
   Why: overflow on the root propagates to the viewport, so html stays the scroller and
   window.scrollY works. But once html's overflow is non-visible, body no longer propagates
   and keeps its OWN overflow — so `body{overflow-x:hidden}` turns body into a separate
   scroll container. Then window.scrollY is stuck at 0 (body.scrollTop moves instead) and
   every window-scroll consumer silently dies: the sticky nav never gets its solid
   background (unreadable over white cards), plus parallax and back-to-top.
   Some pages also set overflow-x:hidden on body in their own <style>; the !important
   below neutralises those. */
html { max-width: 100%; overflow-x: hidden; }
body { max-width: 100%; overflow-x: visible !important; }
img, video, svg, canvas { max-width: 100%; height: auto; }
video, canvas { height: auto; }

/* Comfortable, premium tap feedback on touch devices */
@media (hover: none) and (pointer: coarse) {
  a, button, input, select, textarea { -webkit-tap-highlight-color: rgba(46,111,184,.16); }
}

/* Burger: expand the tap area to ~52px without shifting the bars */
@media (max-width: 1023px) {
  [data-burger] { position: relative; }
  [data-burger]::before { content: ""; position: absolute; inset: -14px; }
}

/* Tablet & below: guarantee ≥48px touch height on every CTA */
@media (max-width: 980px) {
  [data-goldbtn], [data-partner] {
    min-height: 48px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
  }
  [data-desktop-cta] { min-height: 48px; }
}

/* Nav responsive visibility — CSS is authoritative here (do NOT rely on SiteNav's JS
   timing, which could leave the CTA + lang toggle overlapping the logo on phones).
   Breakpoint 1024 matches applyResponsive(). */
@media (max-width: 1023px) {
  [data-aai-nav] [data-desktop-nav],
  [data-aai-nav] [data-desktop-cta] { display: none !important; }
  /* Burger MUST sit above the full-screen menu overlay (z-index 7900) so it works as the
     close (X) control once the menu is open. Without this the overlay eats the tap. */
  [data-aai-nav] [data-burger] { display: inline-block !important; position: relative; z-index: 8100 !important; }
  /* keep logo left; group the compact lang toggle next to the burger on the right */
  [data-aai-nav] [data-lang-toggle] {
    margin-inline-start: auto !important;
    margin-inline-end: 14px !important;
    font-size: 12px !important;
    padding: 8px 13px !important;
    position: relative; z-index: 8100 !important;
  }
}
@media (min-width: 1024px) {
  [data-aai-nav] [data-burger] { display: none !important; }
}

/* Phones: stack hero/closing CTAs full-width for easy thumbs */
@media (max-width: 560px) {
  [data-goldbtn], [data-partner] {
    width: 100% !important;
    box-sizing: border-box;
    text-align: center;
    padding-top: 16px !important;
    padding-bottom: 16px !important;
  }
  /* form controls: 16px keeps iOS from zooming; comfy height */
  input, select, textarea { font-size: 16px !important; }
  /* tighten the giant mobile-menu links so 7 fit cleanly on short screens */
  [data-mlink] { font-size: clamp(28px, 8vw, 44px) !important; line-height: 1.24 !important; }
}

/* Very small phones (≤360px): trim side pressure on the menu */
@media (max-width: 360px) {
  [data-mlink] { font-size: 26px !important; }
}

/* Projects galleries → swipeable snap carousel on mobile */
@media (max-width: 760px) {
  [data-gallery] {
    display: flex !important;
    grid-template-columns: none !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 12px !important;
    margin: 0 -20px;
    padding: 0 20px 6px;
    scrollbar-width: none;
  }
  [data-gallery]::-webkit-scrollbar { display: none; }
  [data-gallery-item] {
    flex: 0 0 86% !important;
    scroll-snap-align: center;
  }
  /* Stronger hero scrim so the white headline is always legible */
  [data-hero]::after {
    content: "";
    position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(180deg, rgba(8,26,49,.55) 0%, rgba(8,26,49,.35) 40%, rgba(8,26,49,.9) 100%);
  }
}

/* Social icons — subtle, accent-blue on hover */
[data-social]:hover { color: #2E6FB8 !important; border-color: #2E6FB8 !important; }
[data-social-dark] { color: #F5F3EE; border-color: rgba(245,243,238,.18); transition: color .3s ease, border-color .3s ease, background .3s ease; }
[data-social-dark]:hover { color: #2E6FB8; border-color: #2E6FB8; background: rgba(46,111,184,.08); }

/* ============================================================
   MOBILE PASS (≤760px) — layout only, desktop untouched
   ============================================================ */
@media (max-width: 760px) {
  /* Hero: shorter so content below is reachable; keep it readable */
  [data-hero] { min-height: 82vh !important; padding-top: 104px !important; padding-bottom: 64px !important; }
  /* Don't play the 13MB hero video on phones — the poster image (hero-globe.webp, ~80KB)
     is the mobile hero. Combined with preload="none" + JS gating play() to desktop, phones
     never fetch the large file. Biggest single mobile speed win. */
  [data-hero-video] { display: none !important; }
  /* Stats / logo strips: neat 2-up instead of one giant column.
     Keep this selector TIGHT — only the small 190px logo/stat strips may go 2-up on
     mobile. Content cards must stack to 1 column.
     History: a `[data-hero] + section > div[style*="grid-template-columns"]` rule used to
     live here and matched ANY grid in the section after the hero, forcing the Companies /
     About / Contact / Manufacturing / RealEstate content cards into two ~175px columns on
     phones (text wrapped every 2 words). Removed.
     Two gotchas this selector must survive:
     1. support.js re-serialises inline styles, so the attribute reads
        "minmax(min(100%, 190px)" WITH a space — match both spellings.
     2. The grid's parent is a DIV, not a SECTION — so don't scope it to `section >`. */
  div[style*="minmax(min(100%, 190px)"],
  div[style*="minmax(min(100%,190px)"] {
    grid-template-columns: 1fr 1fr !important;
  }
}

/* Safety net: nothing may exceed the viewport on phones */
@media (max-width: 560px) {
  section, footer, [data-hero] { width: 100%; }
  img, video, canvas, svg { max-width: 100%; }
}


/* ============================================================
   STATEMENT PATTERN — reusable for Mission / Vision / large
   two-column statement blocks. Calm, readable, premium.
   Applied via [data-statement] so every page stays consistent.
   ============================================================ */
[data-statement] {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  font-size: clamp(23px, 2.2vw, 32px);
  line-height: 1.28;
  letter-spacing: -0.01em;
  max-width: 34ch;            /* ~540–560px: keeps lines comfortable */
  margin: 22px 0 0;
  text-wrap: pretty;          /* avoids awkward orphan line breaks */
}
[data-statement] em { font-style: normal; }   /* accent integrates at the same size */

@media (max-width: 834px) {
  [data-statement] { font-size: clamp(24px, 3.6vw, 30px); line-height: 1.26; max-width: 46ch; }
}
@media (max-width: 480px) {
  [data-statement] { font-size: clamp(23px, 6vw, 28px); line-height: 1.24; }
}

/* ============================================================
   BILINGUAL / RTL LAYER — active only when i18n.js sets
   <html dir="rtl" class="lang-ar"> (Arabic). English is untouched.
   ============================================================ */
/* Language-toggle label: show "عربي" in English, "EN" in Arabic. Driven purely off the
   lang-ar class (stamped pre-paint), so it's instant and never races the JS/nav render. */
[data-lang-toggle] [data-lbl-ar] { display: none; }
html.lang-ar [data-lang-toggle] [data-lbl-en] { display: none; }
html.lang-ar [data-lang-toggle] [data-lbl-ar] { display: inline; }

/* Arabic-capable type. Cairo is loaded by i18n.js when needed. */
html[dir="rtl"] body,
html.lang-ar body { font-family: "Alexandria", "Inter", sans-serif; }
html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3, html[dir="rtl"] .head,
html.lang-ar h1, html.lang-ar h2, html.lang-ar h3, html.lang-ar .head {
  font-family: "Alexandria", "Plus Jakarta Sans", sans-serif;
}
/* Arabic is cursive — letter-spacing breaks glyph joining, so kill it everywhere in RTL. */
html[dir="rtl"] * { letter-spacing: normal !important; }
/* A touch more leading reads better in Arabic. */
html[dir="rtl"] p, html[dir="rtl"] li { line-height: 1.9; }
/* Arabic glyphs (ع ص ج ق…) drop below the Latin baseline, so the very tight hero/heading
   line-heights (1.02–1.12) clip them — especially inside the reveal-line wrappers that use
   overflow:hidden. Give Arabic headings more vertical room so nothing gets "eaten". */
html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3,
html[dir="rtl"] [data-reveal-lines] { line-height: 1.35 !important; }
html[dir="rtl"] [data-reveal-lines] span[style*="overflow:hidden"] { padding-bottom: 0.2em !important; }
html[dir="rtl"] [data-line] { line-height: 1.4 !important; }
/* Flip content that was explicitly left-aligned inline (default/centered text flips on its own). */
html[dir="rtl"] [style*="text-align:left"],
html[dir="rtl"] [style*="text-align: left"] { text-align: right !important; }
/* Keep phone numbers + latin registration codes in LTR so RTL bidi doesn't shuffle the groups. */
html[dir="rtl"] a[href^="tel:"],
html[dir="rtl"] [data-ltr] { direction: ltr; unicode-bidi: embed; display: inline-block; }