/* ------------------------------------------------------------------
   elev8-shim.css — loaded straight after site.css.

   site.css was written for hand-built HTML. Three things about it need
   containing before it can drive an Elementor build. Nothing here changes
   the design; it only stops site.css from breaking things it was never
   aimed at.
   ------------------------------------------------------------------ */

/* 1. site.css opens with  *{margin:0;padding:0}  which is what the design
      assumes. It also strips the WP admin bar and Elementor's editor UI.
      Put those back. */
#wpadminbar, #wpadminbar *,
#elementor-editor-wrapper, #elementor-editor-wrapper * {
  margin: revert;
  padding: revert;
  box-sizing: revert;
}

/* 2. .sec-inner is the source's centred 1200px column. In Elementor a boxed
      container renders that inner column itself, as .e-con-inner, so the
      class can't be put on it directly — map it here instead. */
.section > .e-con-inner {
  max-width: 1200px;
  margin-inline: auto;
  position: relative;
  z-index: 2;
}

/* 3. .section{padding:110px 48px} would win over Elementor's own padding
      control and freeze it, because site.css loads later. Hand padding back
      to the control (which is set to the source values) so the panel keeps
      working. Same for the card and split classes. */
.e-con.section,
.e-con.phero,
.e-con.showcase,
.e-con.bcard,
.e-con.ctaband,
.e-con.stats,
.e-con.lstep,
.e-con.vert,
.e-con.split {
  padding: var(--padding-top, 0px) var(--padding-right, 0px)
           var(--padding-bottom, 0px) var(--padding-left, 0px);
}

/*    A boxed container renders an inner column and Elementor puts the padding
      on THAT, so leaving it there as well applies every section's padding
      twice — which added ~180px to most sections. The control now drives the
      outer only. */
.e-con.section > .e-con-inner,
.e-con.phero > .e-con-inner,
.e-con.showcase > .e-con-inner,
.e-con.ctaband > .e-con-inner,
.e-con.stats > .e-con-inner,
.e-con.split > .e-con-inner {
  padding: 0;
}

/* Elementor needs this or images distort once max-width applies. */
.elementor img { height: auto; }

/* .rv hides an element until an IntersectionObserver adds .in. That observer
   is part of the HTML build and is not running here, so any stray .rv would
   leave content permanently invisible. Force it visible. Delete this block if
   the reveal animation is ever ported over. */
.elementor .rv { opacity: 1 !important; transform: none !important; }


/* 4. site.css's grid classes (.split, .verts, .loop, .stats, .bento) were
      written for plain <div> children. Elementor containers are flex boxes
      that shrink to their content inside a grid track instead of filling it,
      so they need to be told to stretch. */
.split, .verts, .loop, .stats, .bento { justify-items: stretch; }
.split > .e-con,
.verts > .e-con,
.loop  > .e-con,
.stats > .e-con,
.bento > .e-con {
  width: 100%;
  max-width: 100%;
}

/* 5. Same for the source's own grid track lists, which must beat Elementor's
      --e-con-grid-template-columns custom property. */
.split { grid-template-columns: 1.05fr .95fr; }
.verts { grid-template-columns: repeat(4, 1fr); }
.loop  { grid-template-columns: repeat(4, 1fr); }
.stats { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1024px) {
  .split, .verts, .loop, .stats { grid-template-columns: 1fr; }
}


/* 6. Popup menu items vanishing on mobile.
      Elementor puts --flex-wrap-mobile:wrap on every container so that ROW
      containers stack on small screens. On a COLUMN container with a bounded
      height it means something else entirely: children that overflow wrap into
      a SECOND COLUMN, sideways, where the popup's overflow:hidden clips them.
      The full-screen menu is a column, the popup is viewport height, and on a
      390px screen the nav is taller than the screen - so COMPANY and VERTICALS
      were laid out at x=387 and clipped out of existence. They were in the DOM
      the whole time, at full size, just off-screen.
      Inside a popup, overflow should scroll, never wrap. */
.elementor-popup-modal .e-con {
  --flex-wrap-mobile: nowrap;
  flex-wrap: nowrap;
}
/*    The popup's own top-level container is height-locked to the viewport with
      overflow:hidden, so anything past the fold was simply unreachable. That
      container is the element that overflows - .dialog-message above it does
      not - so the scroll has to go here or it does nothing at all. */
.elementor-popup-modal .elementor-location-popup > .e-con.e-parent {
  overflow-y: auto;
  overscroll-behavior: contain;      /* don't scroll the page behind it */
  -webkit-overflow-scrolling: touch; /* momentum scrolling on iOS */
}