/* --- Header navigation recovery ------------------------------------------------
   The header nav-menu widget (elementor-element-7c7ddb6) ships with
   elementor-hidden-desktop / -tablet / -mobile, so on the live site the header
   shows only the logo and there is no navigation anywhere. Force the whole
   nav subtree visible at every width. The menu is short (Who We Are, Companies,
   Contact Us) so the horizontal list fits; the mobile hamburger — whose dropdown
   JS is not running on this static port — is left off.
   --------------------------------------------------------------------------- */
.elementor-location-header .elementor-element-7c7ddb6,
.elementor-location-header .elementor-element-7c7ddb6 .elementor-widget-container,
.elementor-location-header .elementor-element-7c7ddb6 nav.elementor-nav-menu--main {
  display: block !important;
}
.elementor-location-header .elementor-element-7c7ddb6 .elementor-nav-menu {
  display: flex !important;
  flex-wrap: wrap;
  gap: 6px 26px;
  align-items: center;
  justify-content: flex-end;
}
.elementor-location-header .elementor-element-7c7ddb6 .elementor-nav-menu > li {
  display: block !important;
}
.elementor-location-header .elementor-element-7c7ddb6 .elementor-menu-toggle,
.elementor-location-header .elementor-element-7c7ddb6 .elementor-nav-menu--dropdown {
  display: none !important;
}

/* --- Mobile/tablet header (<=1024px): hamburger + dropdown ------------------
   Below tablet width the inline nav stacked vertically beside the logo.
   Show the theme's own toggle instead and drive its dropdown with
   vgg-header.js (the original Elementor script does not run on this port). */
@media (max-width: 1024px) {
  .elementor-location-header .elementor-element-7c7ddb6 nav.elementor-nav-menu--main {
    display: none !important;
  }
  .elementor-location-header .elementor-element-7c7ddb6 .elementor-menu-toggle {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-left: auto;
    cursor: pointer;
    font-size: 26px;
    color: #0b1b26;
    background: transparent;
  }
  .elementor-location-header .elementor-menu-toggle .elementor-menu-toggle__icon--close { display: none; }
  .vgg-nav-open .elementor-menu-toggle .elementor-menu-toggle__icon--open { display: none; }
  .vgg-nav-open .elementor-menu-toggle .elementor-menu-toggle__icon--close { display: inline-block; }
  .elementor-location-header .e-con-inner { position: relative; align-items: center; }
  .elementor-location-header .elementor-element-7c7ddb6 { width: auto !important; }
  .vgg-nav-open .elementor-element-7c7ddb6 .elementor-nav-menu--dropdown {
    display: block !important;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 9999;
    background: #fff;
    border-top: 1px solid rgba(0,0,0,.08);
    box-shadow: 0 12px 24px rgba(0,0,0,.08);
    padding: 8px 20px 16px;
    max-height: none !important;
    transform: none !important;
  }
  .vgg-nav-open .elementor-nav-menu--dropdown .elementor-nav-menu { display: block !important; }
  .vgg-nav-open .elementor-nav-menu--dropdown li { display: block !important; }
  .vgg-nav-open .elementor-nav-menu--dropdown a {
    display: block !important;
    padding: 14px 4px !important;
    font-size: 17px;
    color: #0b1b26 !important;
    background: transparent !important;
    border-bottom: 1px solid rgba(0,0,0,.06);
  }
}

@media (max-width: 1024px) {
  /* keep the header (and its open menu) above the page content */
  .elementor-location-header { position: relative; z-index: 1000; }
  /* anchor the dropdown to the full-width header row, not the narrow nav column */
  .elementor-location-header .elementor-element-7c7ddb6,
  .elementor-location-header .elementor-element-7c7ddb6 .elementor-widget-container,
  .elementor-location-header .elementor-element-1fb869a { position: static !important; }
  .elementor-location-header .e-con-inner { padding-left: 16px !important; padding-right: 16px !important; }
  .vgg-nav-open .elementor-element-7c7ddb6 .elementor-nav-menu--dropdown { overflow: visible !important; }
}

/* --- Stop sideways scrolling on phones -------------------------------------
   The "Our Footprint" map hotspot tooltips are wider than a phone screen,
   which let the whole page shift sideways. */
@media (max-width: 767px) {
  html, body { overflow-x: clip !important; }
  .e-hotspot__tooltip {
    width: auto !important;
    max-width: min(260px, calc(100vw - 48px)) !important;
    white-space: normal !important;
  }
}