/**
 * Header overrides - fixed header + mega menu on static export.
 * Complements Element Pro widget-mega-menu.min.css
 */

/* Document uses normal viewport scrolling; clip horizontal overflow without
 * nesting scroll containers. --site-header-offset is set in header-menu.js. */
html {
  overflow-x: clip;
  height: auto;
}

body {
  overflow-x: clip;
  height: auto !important;
  padding-top: var(--site-header-offset, 72px);
}

@media (max-width: 767px) {
  body {
    padding-top: var(--site-header-offset, 120px);
  }
}

main#content,
.site-main,
.page-content {
  overflow: visible !important;
  height: auto !important;
  max-height: none !important;
}

main#content {
  scroll-margin-top: var(--site-header-offset, 72px);
}

@media (max-width: 767px) {
  main#content {
    scroll-margin-top: var(--site-header-offset, 120px);
  }
}

/* ---------------------------------------------------------------------------
   Fixed site header — logo + mega menu pinned to viewport while scrolling
   --------------------------------------------------------------------------- */
header.element-105 {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  /* Keep entire header subtree (mega menu fixed children) above page hero overlays. */
  z-index: 200000 !important;
  width: 100%;
  overflow: visible;
  transform: none !important;
}

.element-105 .element-element.element-element-4a4a28d1,
.element-105 .element-element.element-element-4a4a28d1.element-sticky,
.element-105 .element-element.element-element-4a4a28d1.element-sticky--active,
.element-105 .element-element.element-element-4a4a28d1.element-sticky--effects,
.element-105 .element-element.element-element-4a4a28d1.element-fixed {
  width: 100% !important;
  background-color: rgba(255, 255, 255, 0.2) !important;
  -webkit-backdrop-filter: blur(5px) !important;
  backdrop-filter: blur(5px) !important;
}

.element-105 .element-sticky__spacer {
  display: none !important;
}

/* ---------------------------------------------------------------------------
   Gray overlay – in document flow, not viewport-fixed
   --------------------------------------------------------------------------- */
.element-105 #services-menu-bg,
.element-105 #industries-menu-bg,
.element-105 .element-element.element-element-93a1505,
.element-105 .element-element.element-element-d31d3f6 {
  --position: static !important;
  position: absolute !important;
  top: var(--header-menu-top, 72px) !important;
  left: 0 !important;
  right: 0 !important;
  bottom: auto !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  min-height: 0 !important;
  height: calc(100vh - var(--header-menu-top, 72px)) !important;
  max-height: none !important;
  margin: 0 !important;
  z-index: 1 !important;
  transform: none !important;
}

#services-menu-bg.hidden,
#industries-menu-bg.hidden {
  display: none !important;
}

/* ---------------------------------------------------------------------------
   Mega menu section titles (Pre-Construction, Construction, Post-Construction)
   --------------------------------------------------------------------------- */
.element-105 .element-element.element-element-8c933bd:has(a.header-nav-active),
.element-105 .element-element.element-element-4b3cceb:has(a.header-nav-active),
.element-105 .element-element.element-element-77ca58e:has(a.header-nav-active),
.element-105 .element-heading-title a.header-nav-active {
  text-decoration: underline !important;
  text-decoration-color: black !important;
}

/* Nav-menu widgets ship a mobile dropdown clone; hide it inside the mega menu panel */
.element-widget-n-menu .element-nav-menu--dropdown {
  display: none !important;
}

/* Closed mega-menu panels (Element Pro normally toggles .e-active via JS) */
.element-widget-n-menu .e-n-menu-content > .e-con:not(.e-active) {
  display: none !important;
}

/* Horizontal mega menu leaves empty `.e-n-menu-content` shells in the header; without
 * this they still intercept clicks across the navbar. Use .e-active on the wrapper
 * (set in header-menu.js) so we do not rely on :has() support. */
.element-105 .e-n-menu-heading > .e-n-menu-item {
  position: relative;
}

.element-105 .e-n-menu-heading > .e-n-menu-item > .e-n-menu-title {
  position: relative;
  z-index: 3;
}

.element-105 .e-n-menu-content:not(.e-active) {
  display: none !important;
  pointer-events: none !important;
  max-height: 0 !important;
  overflow: hidden !important;
  visibility: hidden !important;
}

body.menu-open .element-105 .e-n-menu-content.e-active {
  display: block !important;
  max-height: none !important;
  overflow: visible !important;
  pointer-events: auto !important;
  visibility: visible !important;
}

/* Position anchor — keep low so nav column doesn’t hoist an extra stacking context. */
.element-105 .element-element-f998700 > .element-widget-container {
  position: relative;
  z-index: auto;
}

/* ---------------------------------------------------------------------------
   Stacking when mega menu is open
   --------------------------------------------------------------------------- */
body.menu-open .element-105 .element-element-4a4a28d1,
body.menu-open .element-105 .element-element-4a4a28d1.element-sticky--active {
  z-index: 3 !important;
}

/* Raised panel above dim backdrop (#services/industries bg) inside the header subtree. */
body.menu-open .element-105 .e-n-menu-content {
  z-index: 200050 !important;
}

/*
 * Margin-based full-bleed used 50% of the NAV SLOT width — wrong reference → offset + gutters.
 * Fix: viewport-fixed panel under the toolbar, edge-to-edge; --header-menu-top from header-menu.js.
 */
body.menu-open .element-105 .e-n-menu-content.e-active {
  position: fixed !important;
  top: var(--header-menu-top, 72px) !important;
  left: 0 !important;
  right: 0 !important;
  bottom: auto !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding-inline: 0 !important;
  /* Element Pro default: padding-block-start: var(--n-menu-title-distance-from-content) (~15px) */
  padding-block-start: 0 !important;
  padding-block-end: 0 !important;
  transform: none !important;
  box-sizing: border-box !important;
}

body.menu-open .element-105 .e-n-menu-content.e-active > .e-con.e-active {
  margin-block-start: 0 !important;
}

/* Sit dim layer beneath mega links but above page content (#content siblings). */
body.menu-open .element-105 #services-menu-bg:not(.hidden),
body.menu-open .element-105 #industries-menu-bg:not(.hidden) {
  position: fixed !important;
  top: var(--header-menu-top, 72px) !important;
  left: 0 !important;
  right: 0 !important;
  bottom: auto !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: calc(100vh - var(--header-menu-top, 72px)) !important;
  margin: 0 !important;
  z-index: 199900 !important;
  transform: none !important;
}


body.menu-open .element-105 .element-element-4a4a28d1,
body.menu-open .element-105 .element-element-4a4a28d1 > .e-con-inner,
body.menu-open .element-105 .element-widget-n-menu,
body.menu-open .element-105 .e-n-menu,
body.menu-open .element-105 .e-n-menu-wrapper {
  overflow: visible !important;
}

.element-105 .element-element-73e190b > .e-con-inner,
.element-105 .element-element-e1a7a61 > .e-con-inner {
  width: 100% !important;
  max-width: var(--content-width, 1400px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

@media (max-width: 767px) {
  /*
   * own flex line — that can clip the logo on first mobile paint. Allow height to
   * follow content; header-menu.js keeps --site-header-offset in sync.
   */
  .element-105 .element-element.element-element-4a4a28d1 {
    max-height: none !important;
    height: auto !important;
    min-height: 120px !important;
  }

  .element-105 .element-element.element-element-59eaf40a {
    flex: 0 0 auto !important;
    position: relative !important;
    z-index: 2 !important;
  }

  .element-105 .element-element-73e190b > .e-con-inner,
  .element-105 .element-element-e1a7a61 > .e-con-inner {
    max-width: 100% !important;
  }

  .element-105 #services-menu-bg,
  .element-105 #industries-menu-bg,
  .element-105 .element-element-93a1505,
  .element-105 .element-element-d31d3f6 {
    height: calc(100vh - var(--header-menu-top, 120px)) !important;
  }

  body.menu-open .element-105 #services-menu-bg:not(.hidden),
  body.menu-open .element-105 #industries-menu-bg:not(.hidden) {
    height: calc(100vh - var(--header-menu-top, 120px)) !important;
  }
}

/* ---------------------------------------------------------------------------
   Mobile menu wrapper - full width when open
   --------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .element-widget-n-menu .e-n-menu-wrapper {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100vw !important;
  }
}

/* ---------------------------------------------------------------------------
   Prevent horizontal scroll when dropdown is open
   --------------------------------------------------------------------------- */
body.menu-open {
  overflow-x: clip;
}

/* ---------------------------------------------------------------------------
   Home hero (post-109) — mobile rules use 100vw on the video block, which overflows
   the page and gets clipped by html { overflow-x: clip }, hiding Services/Industries
   in the fixed header on the right. Target .element-109 (SSR) — not body.home, which
   is only applied client-side after hydration.
   --------------------------------------------------------------------------- */
.element.element-109 .element-element.element-element-c7df7d3 {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

.element.element-109 .element-element.element-element-c7df7d3 iframe,
.element.element-109 .element-element.element-element-c7df7d3 video {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

@media (max-width: 767px) {
  .element.element-109 .element-element.element-element-c7df7d3 {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .element.element-109 .element-element.element-element-c7df7d3 iframe,
  .element.element-109 .element-element.element-element-c7df7d3 video {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
}