/* 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}

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

/* --- home slider ------------------------------------------------------------
   The three slide images are 1920x700 with the headline baked into the artwork,
   but the theme sets background-size:auto on them. In a box narrower than
   1920px the browser therefore shows the image at 1:1 and centred - i.e. a
   small crop out of the middle - so on a phone the slide was a 344x97 sliver
   and the headline was sliced off at both ends (desktop lost the ends too).
   Show the whole artwork and let the box follow the image's own 1920:700
   ratio, so nothing is cropped at any width. */
.et_pb_slider .et_pb_slide {
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    aspect-ratio: 1920 / 700;
    min-height: 0 !important;
    height: auto !important;
}
.et_pb_slider { min-height: 0 !important; height: auto !important; }

/* --- header logo ------------------------------------------------------------
   The menu logo computed to 19x9px on a phone - effectively invisible. */
@media only screen and (max-width: 980px) {
    .et_pb_menu__logo img { max-width: 130px !important; width: auto !important; height: auto !important; }
    .et_pb_menu__logo, .et_pb_menu__logo-wrap { width: auto !important; max-width: 150px !important; }
}
