/* site overrides — put slider / contact-form / tweak CSS here (keep it out of the pages) */

/* Betheme equal-height valign-middle pulls columns up via translateY(-50%),
   overlapping the previous section/hero when the theme's equalize JS is absent.
   Neutralize the transform at all widths (matches Betheme's own responsive reset). */
.equal-height-wrap .mcb-wrap .mcb-wrap-inner{top:0!important;transform:none!important;-webkit-transform:none!important;-moz-transform:none!important;-ms-transform:none!important;-o-transform:none!important}

/* mfn-mobile-menu-fix — Betheme's mobile hamburger relies on its JS to open
   the menu; in a frozen build that JS is unreliable, so tapping does nothing.
   These rules + MOBILE_MENU_JS toggle a `mfn-mobile-open` class on #Header_wrapper
   with no dependency on Betheme JS. Only active when the class is set (added
   solely by tapping the hamburger, which is hidden on desktop), so the desktop
   horizontal menu is untouched. */
#Header_wrapper.mfn-mobile-open #Top_bar{position:relative}
#Header_wrapper.mfn-mobile-open #menu{display:block!important;position:absolute;left:0;right:0;top:100%;background:#fff;z-index:99999;box-shadow:0 10px 30px rgba(0,0,0,.18);max-height:80vh;overflow:auto}
#Header_wrapper.mfn-mobile-open #menu>ul.menu{display:block!important;width:100%}
#Header_wrapper.mfn-mobile-open #menu ul.menu>li{display:block!important;float:none!important;width:100%!important;margin:0!important;border-bottom:1px solid rgba(0,0,0,.08)}
#Header_wrapper.mfn-mobile-open #menu ul.menu li a{display:block!important;padding:14px 22px!important;color:#222!important;line-height:1.3!important}
#Header_wrapper.mfn-mobile-open #menu ul.sub-menu{position:static!important;display:none;left:auto;top:auto;box-shadow:none;min-width:0;background:rgba(0,0,0,.03)}
#Header_wrapper.mfn-mobile-open #menu li.mfn-sub-open>ul.sub-menu{display:block!important}
#Header_wrapper.mfn-mobile-open #menu ul.sub-menu li a{padding-left:42px!important}
.responsive-menu-toggle{cursor:pointer}

/* live session captcha, styled to match the form's existing fields */
.cf-cap-q{display:inline-block;font-size:17px;font-weight:700;letter-spacing:2px;
  background:rgba(0,0,0,.05);border:1px solid rgba(0,0,0,.15);border-radius:4px;
  padding:8px 14px;white-space:nowrap;user-select:none;margin:0 10px 6px 0;vertical-align:middle}
.cf-cap-a{max-width:160px;display:inline-block;vertical-align:middle}

.site-credit{display:inline-block;margin-top:6px;font-size:inherit;opacity:.9}
.site-credit a{color:inherit;text-decoration:underline}

/* --- Products mega-menu -----------------------------------------------------
   The theme forces the product names to ALL CAPS. The HTML already carries them
   correctly capitalised ("ACB Panel", "Changeover Panel"), so simply stop the
   transform and the labels read the way they were written. */
#Top_bar .menu .sub-menu a.mfn-megamenu-title,
#Top_bar .mfn-megamenu a.mfn-megamenu-title,
.mfn-megamenu-title { text-transform: none !important; }

/* Long names wrap to two lines while short ones stay on one, so the four
   columns end up ragged. A shared minimum height puts every row back on the
   same baseline without truncating anything. */
#Top_bar .mfn-megamenu > li { vertical-align: top; }
#Top_bar .mfn-megamenu a.mfn-megamenu-title,
.mfn-megamenu a.mfn-megamenu-title {
    display: block;
    line-height: 1.35;
    min-height: 2.7em;
}

/* --- mobile menu ------------------------------------------------------------
   Opening the menu adds .mfn-mobile-open to #Header_wrapper, and the wrapper's
   dark purple background then shows as a strip above the logo. Match it to the
   menu panel so the header stays clean while the menu is open. */
@media only screen and (max-width: 767px) {
    #Header_wrapper.mfn-mobile-open,
    #Header_wrapper.mfn-mobile-open #Top_bar { background-color: #fff !important; }
}