/* ==========================================================================
   Promec 2026 — static-replica overrides.
   Loaded AFTER the theme CSS. Only two jobs:
     1. style the static hero that replaces Slider Revolution
     2. restore anything the theme left to JavaScript
   ========================================================================== */

/* ---------- hero (replaces the revslider module) — looping muted video ---------- */
.tm-static-hero{position:relative;overflow:hidden;background:#182333;
  height:min(78vh,700px);min-height:460px}
.tm-hero-media{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center 45%;display:block;
  background:#182333 url(../video/hero-poster.jpg) center/cover}
.tm-static-hero-layer{position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(24,35,51,.88) 0%,rgba(24,35,51,.62) 45%,rgba(24,35,51,.25) 100%)}
.tm-static-hero-in{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);z-index:2}
.tm-static-hero-in h4{font-family:"Poppins",Arial,Helvetica,sans-serif;font-weight:500;font-size:14px;
  line-height:24px;letter-spacing:1px;text-transform:uppercase;color:#fff;opacity:.85;margin:0 0 18px}
.tm-static-hero-in h2{font-family:"Poppins",Arial,Helvetica,sans-serif;font-weight:600;
  font-size:48px;line-height:58px;color:#fff;margin:0 0 18px;max-width:16em}
.tm-static-hero-in p{font-family:"Poppins",Tahoma,Geneva,sans-serif;font-weight:400;font-size:17px;
  line-height:27px;color:rgba(255,255,255,.85);margin:0 0 30px;max-width:34em}
.tm-static-hero-in .tm-vc_btn3{margin-right:12px}
@media(max-width:1024px){
  .tm-static-hero-in h2{font-size:34px;line-height:42px}
  .tm-static-hero img{min-height:380px}
}
@media(max-width:767px){
  /* content must keep its own stacking context, or it falls under the scrim */
  .tm-static-hero-in{position:relative;z-index:2;top:auto;transform:none;padding:48px 20px 54px}
  .tm-static-hero{height:auto;min-height:0;
    background:#182333 url(../video/hero-poster.jpg) center/cover}
  /* don't pull a multi-megabyte video down a mobile connection */
  .tm-hero-media{display:none}
  /* the horizontal gradient leaves the right-hand text unreadable on a narrow screen */
  .tm-static-hero-layer{background:linear-gradient(180deg,rgba(24,35,51,.88),rgba(24,35,51,.74))}
  .tm-static-hero-in h2{font-size:27px;line-height:35px;max-width:100%}
  .tm-static-hero-in p{font-size:15px;line-height:25px;max-width:100%}
  .tm-static-hero-in .tm-vc_btn3{margin-bottom:10px}
}

/* ---------- Max Mega Menu without its JavaScript ---------- */
/* The theme ships the menu collapsed and lets MMM's script open it. With no script we
   drive the whole thing from CSS + a tiny toggle class. */
#mega-menu-wrap-tm-main-menu .mega-menu-toggle{display:none}

@media(min-width:993px){
  #mega-menu-wrap-tm-main-menu ul.mega-menu > li.mega-menu-item > ul.mega-sub-menu{
    display:block;opacity:0;visibility:hidden;pointer-events:none;
    transition:opacity .22s ease,visibility .22s ease}
  #mega-menu-wrap-tm-main-menu ul.mega-menu > li.mega-menu-item:hover > ul.mega-sub-menu{
    opacity:1;visibility:visible;pointer-events:auto}
}

@media(max-width:992px){
  #mega-menu-wrap-tm-main-menu .mega-menu-toggle{display:block}
  #mega-menu-wrap-tm-main-menu ul.mega-menu{display:none}
  body.tm-nav-open #mega-menu-wrap-tm-main-menu ul.mega-menu{display:block}
  #mega-menu-wrap-tm-main-menu ul.mega-menu > li.mega-menu-item > ul.mega-sub-menu{display:none}
  body.tm-nav-open #mega-menu-wrap-tm-main-menu ul.mega-menu > li.mega-menu-item.tm-open > ul.mega-sub-menu{display:block}
}

/* ---------- portfolio filter (isotope replacement) ---------- */
.tm-box-col-wrapper.tm-filtered-out{display:none}
.themetechmount-boxes-sortable-list a.tm-active,
ul.themetechmount-boxes-sortable-list li a.active{color:#0060af}

/* ---------- misc: things the theme animates in with JS ---------- */
.themetechmount-box,.wpb_column,.tm-row,.vc_row{opacity:1!important;visibility:visible!important}
.tm-static-hero-in .tm-vc_btn3-color-white{border-color:#fff;color:#fff}
.tm-static-hero-in .tm-vc_btn3-color-white:hover{background:#fff;color:#182333}

/* back-to-top only once scrolled */
#totop{opacity:0;visibility:hidden;transition:opacity .25s ease,visibility .25s ease}
#totop.tm-show{opacity:1;visibility:visible}

/* ==========================================================================
   Carousels without their JavaScript.
   WPBakery and slick both render a collapsed, absolutely-positioned track that
   only their scripts lay out. We show every slide as a static centred row instead
   — same content, same look, no dependency.
   ========================================================================== */
.wpb_images_carousel,
.wpb_images_carousel .vc_slide,
.wpb_images_carousel .vc_carousel-inner{height:auto!important;width:100%!important;overflow:visible!important}
.wpb_images_carousel .vc_carousel-slideline{
  position:static!important;width:100%!important;height:auto!important;
  transform:none!important;left:auto!important;overflow:visible!important;
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:14px 26px}
.wpb_images_carousel .vc_carousel-slideline-inner{
  position:static!important;width:auto!important;height:auto!important;display:contents}
.wpb_images_carousel .vc_item{
  position:static!important;width:auto!important;height:auto!important;
  float:none!important;flex:0 0 auto;padding:0}
.wpb_images_carousel .vc_inner{width:auto!important;height:auto!important}
.wpb_images_carousel .vc_item img{max-width:130px;height:auto;display:block}
.wpb_images_carousel .vc_carousel-control,
.wpb_images_carousel .vc_carousel-indicators{display:none!important}

.themetechmount-boxes-view-slickview .themetechmount-boxes-row-wrapper:not(.slick-slider){
  display:flex;flex-wrap:wrap;gap:24px}
.themetechmount-boxes-view-slickview .themetechmount-boxes-row-wrapper:not(.slick-slider) > .tm-box-col-wrapper{
  flex:1 1 300px;max-width:100%}

/* WPBakery hides every slide until its carousel script marks one active */
.wpb_images_carousel .vc_carousel-slideline,
.wpb_images_carousel .vc_carousel-slideline-inner,
.wpb_images_carousel .vc_item,
.wpb_images_carousel .vc_inner,
.wpb_images_carousel .vc_item img{visibility:visible!important;opacity:1!important}


/* Respect a reduced-motion preference: freeze the hero on its poster frame. */
@media(prefers-reduced-motion:reduce){
  .tm-hero-media{display:none}
  .tm-static-hero{background:#182333 url(../video/hero-poster.jpg) center/cover}
}