/* Things Avada's JavaScript used to do, done in CSS instead. */

/* Entrance animations: content started hidden until a script revealed it. */
.fusion-animated, [data-animationtype] { visibility: visible !important; opacity: 1 !important; animation: none !important; }

/* Mobile menu (Avada cloned the desktop menu into this holder with JS). */
.fusion-mobile-nav-holder > ul { display: none; }
.fusion-mobile-nav-holder.fusion-mobile-menu-expanded { display: block !important; }
.fusion-mobile-nav-holder.fusion-mobile-menu-expanded > ul { display: block; }
.fusion-mobile-nav-holder .mobile-nav-heading > span { display: block; padding: 0 20px; font-family: Montserrat, Arial, Helvetica, sans-serif; color: #333; }

/* Static first slide in place of Revolution Slider. */
.static-hero { background-size: cover; background-position: center center; min-height: 380px; display: flex; align-items: center; width: 100%; max-width: 100%; box-sizing: border-box; }
/* width is explicit so aspect-ratio + min-height can't widen the hero past the screen on phones */
.static-hero-inner { min-width: 0; box-sizing: border-box; max-width: 1170px; margin: 0 auto; padding: 0 30px; width: 100%; }
.static-hero-inner p { max-width: 560px; color: #fff; font-family: Montserrat, Arial, Helvetica, sans-serif; font-size: 20px; line-height: 30px; background: rgba(3, 83, 160, .85); padding: 20px 25px; margin: 0; }

/* Lead form honeypot: off-screen, never seen by people. */
.lead-hp { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }
.wpcf7-response-output[hidden] { display: none; }
form.sent .wpcf7-response-output { border: 2px solid #46b450; }
form.failed .wpcf7-response-output, form.invalid .wpcf7-response-output { border: 2px solid #dc3232; }

/* Mobile menu items (Avada 7 styles these when its JS builds the menu). */
.fusion-mobile-nav-holder .fusion-mobile-menu { margin: 0; padding: 0; list-style: none; border-top: 1px solid #e5e5e5; }
.fusion-mobile-nav-holder .fusion-mobile-nav-item a { display: block; padding: 0 20px; line-height: 42px; border-bottom: 1px solid #e5e5e5; color: #333; font-family: Montserrat, Arial, Helvetica, sans-serif; font-size: 14px; }
.fusion-mobile-nav-holder .fusion-mobile-sub-item a { padding-left: 36px; }
.fusion-mobile-nav-holder .fusion-mobile-current-nav-item > a, .fusion-mobile-nav-holder .fusion-mobile-current-nav-item > a .menu-text { color: #fff; }

/* Lazy-load placeholders are gone; never hide images waiting for a script. */
img.lazyload, img.lazyloading, .lazyload { opacity: 1 !important; visibility: visible !important; }

/* Font Awesome 4.7 icon font, self-hosted (the old sites loaded it from use.fontawesome.com). */
@font-face { font-family: 'FontAwesome'; src: url('/fonts/fa4/fontawesome-webfont.woff2') format('woff2'), url('/fonts/fa4/fontawesome-webfont.woff') format('woff'); font-weight: normal; font-style: normal; font-display: block; }
@font-face { font-family: 'fontawesome'; src: url('/fonts/fa4/fontawesome-webfont.woff2') format('woff2'), url('/fonts/fa4/fontawesome-webfont.woff') format('woff'); font-weight: normal; font-style: normal; font-display: block; }

/* Avada "100% height" containers: its JS set them to the window height minus the header, growing with the content.
   Without that JS they fall back to a fixed height and taller content spills under the header. */
.fullwidth-box.hundred-percent-height { height: auto !important; min-height: calc(100vh - 160px); }
.fullwidth-box.hundred-percent-height > .fusion-fullwidth-center-content { height: auto !important; min-height: inherit; }

/* WordPress theme page preloaders: their hide-on-load script is not carried over, so they would cover the page forever. */
#ct-loadding,.ct-loader,#preloader,.preloader,#page-preloader,.page-loader,#loader-wrapper,.site-loader{display:none!important}

/* Homepage hero (QA round 1): the slider's text over a darkened photo, as one heading, a paragraph and two real
   buttons. Height grows with the content at every width, so nothing slides under the header or over the badges. */
.static-hero.hero-v2 { position: relative; min-height: clamp(440px, 45.8vw, 640px); padding: 56px 0; height: auto; overflow: hidden; }
.static-hero.hero-v2::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(2, 30, 62, .88) 0%, rgba(2, 30, 62, .66) 55%, rgba(2, 30, 62, .35) 100%); }
.hero-v2 .static-hero-inner { position: relative; }
.hero-v2 .static-hero-inner p { background: none; padding: 0; max-width: 640px; }
.hero-v2 .static-hero-inner .hero-title { font-family: 'PrometoW04', Montserrat, Arial, Helvetica, sans-serif; font-weight: 700; font-size: clamp(30px, 3.9vw, 50px); line-height: 1.12; text-transform: uppercase; letter-spacing: .01em; margin: 0 0 18px; text-shadow: 0 1px 2px rgba(0, 0, 0, .35); }
.hero-v2 .hero-title span { display: block; color: #5ACC5A; }
.hero-v2 .static-hero-inner .hero-text { font-size: 17px; line-height: 1.65; margin: 0 0 28px; }
.hero-v2 .static-hero-inner .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-v2 .hero-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 26px; border-radius: 4px; border: 2px solid transparent; font-family: Montserrat, Arial, Helvetica, sans-serif; font-size: 15px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; text-decoration: none; box-sizing: border-box; }
.hero-v2 .hero-btn-call { background: #5ACC5A; border-color: #5ACC5A; color: #0b2a14; }
.hero-v2 .hero-btn-call:hover, .hero-v2 .hero-btn-call:focus-visible { background: #4bb84b; border-color: #4bb84b; color: #0b2a14; }
.hero-v2 .hero-btn-ghost { border-color: #fff; color: #fff; }
.hero-v2 .hero-btn-ghost:hover, .hero-v2 .hero-btn-ghost:focus-visible { background: #fff; color: #03284f; }
@media (max-width: 800px) {
  .static-hero.hero-v2 { min-height: 0; padding: 36px 0 40px; }
  .static-hero.hero-v2::before { background: rgba(2, 30, 62, .78); }
  .hero-v2 .static-hero-inner { padding: 0 20px; }
  .hero-v2 .static-hero-inner .hero-text { font-size: 16px; line-height: 1.6; margin-bottom: 22px; }
  .hero-v2 .hero-btn { flex: 1 1 200px; }
}

/* Mobile menu button (QA round 1): a 44px tap target in the darker brand green (5.2:1 on white). */
.fusion-mobile-menu-icons a { display: inline-flex !important; align-items: center; justify-content: center; width: 44px; height: 44px; font-size: 26px !important; color: #2F7A55 !important; }
.fusion-mobile-menu-icons a:hover, .fusion-mobile-menu-icons a:focus-visible { color: #1f5a3d !important; }

/* Form buttons: dark text on the brand green (7.5:1; white on it was 2.05:1). */
.wpcf7-form input[type="submit"], .wpcf7-form .wpcf7-submit { color: #0b2a14 !important; }

/* Phones: 16px fields so iOS doesn't zoom in when one is tapped. */
@media (max-width: 800px) {
  .wpcf7-form input, .wpcf7-form textarea, .wpcf7-form select { font-size: 16px !important; }
}

/* Photo-band section headings on service and location pages (QA round 1). The theme shrinks the photo to fit the
   width ("contain"), so on phones it is a ~95px strip and the white heading spills onto white. Below 800px the photo
   moves to the heading block itself, cropped to fill it and darkened, and the band keeps no strip of its own. */
@media (max-width: 800px) {
  .fusion-fullwidth.brcks-pavers { background-size: 0 0 !important; padding-top: 0 !important; padding-bottom: 20px !important; }
  .fusion-fullwidth.brcks-pavers > .fusion-builder-row { background-image: inherit; background-size: 0 0; }
  .fusion-fullwidth.brcks-pavers > .fusion-builder-row > .fusion-layout-column:first-child { background-image: inherit; background-size: cover; background-position: center; box-shadow: inset 0 0 0 2000px rgba(0, 30, 20, .55); margin: 0 0 24px !important; padding: 30px 18px 24px; width: auto !important; float: none; }
}
