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

/* ---------------------------------------------------------------------------------------------
   Site header. Replaces Avada's layout-builder header, which needed Avada's scripts to show its
   menu at all. Same layout as the old site: a top bar with email and phone, then the logo on the
   left and the menu on the right (about 133px tall on desktop). Phone menu at 1024px and below.
   --------------------------------------------------------------------------------------------- */
.nv-header { position: relative; z-index: 1000; background: #fff; font-family: Raleway, Arial, Helvetica, sans-serif; box-shadow: 0 1px 0 #ececec; }
.nv-header *, .nv-header *::before, .nv-header *::after { box-sizing: border-box; }
.nv-header .nv-wrap { display: flex; align-items: center; max-width: 1260px; margin: 0 auto; padding: 0 30px; }
.nv-header a { text-decoration: none; }
.nv-header ul { list-style: none; margin: 0; padding: 0; }
.nv-header li { margin: 0; padding: 0; list-style: none; float: none; }
.nv-header li::before { content: none; }
.nv-header button { -webkit-appearance: none; appearance: none; background: none; border: 0; margin: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; box-shadow: none; text-shadow: none; border-radius: 0; width: auto; height: auto; }

.nv-topbar { font-family: Montserrat, Arial, Helvetica, sans-serif; font-size: 13px; line-height: 20px; }
.nv-topbar .nv-wrap { justify-content: flex-end; gap: 40px; padding-top: 8px; padding-bottom: 6px; }
.nv-topbar a { display: inline-flex; align-items: center; gap: 8px; color: #333; }
.nv-topbar a.nv-top-phone { color: #007a10; font-weight: 600; }
.nv-topbar svg { color: #ef0001; flex: none; }
.nv-topbar a:hover span, .nv-topbar a:focus span { text-decoration: underline; }

.nv-bar .nv-wrap { min-height: 92px; padding-top: 12px; padding-bottom: 12px; }
.nv-logo { display: block; flex: none; line-height: 0; }
.nv-logo img { display: block; width: 266px; max-width: 100%; height: auto; }

.nv-nav { margin-left: auto; }
.nv-menu { display: flex; align-items: center; }
.nv-item { position: relative; }
.nv-header .nv-link { display: flex; align-items: center; gap: 6px; padding: 10px 16px; font-family: Raleway, Arial, Helvetica, sans-serif; font-size: 14px; font-weight: 700; line-height: 22px; letter-spacing: .3px; text-transform: uppercase; color: #333; white-space: nowrap; box-shadow: inset 0 -2px 0 transparent; }
.nv-header .nv-link:hover, .nv-header .nv-link:focus-visible, .nv-header .nv-link[aria-current="page"], .nv-header .nv-active > .nv-link, .nv-header .nv-has-sub:hover > .nv-link { color: #d00001; box-shadow: inset 0 -2px 0 #ef0001; }
.nv-caret { width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor; }

.nv-sub { display: none; position: absolute; top: 100%; left: 0; min-width: 250px; background: #fff; border-top: 3px solid #ef0001; box-shadow: 0 8px 20px rgba(0, 0, 0, .15); z-index: 10; }
.nv-has-sub:hover > .nv-sub, .nv-has-sub:focus-within > .nv-sub, .nv-has-sub.nv-sub-open > .nv-sub { display: block; }
.nv-sub a { display: block; padding: 11px 20px; font-family: Raleway, Arial, Helvetica, sans-serif; font-size: 14px; font-weight: 500; line-height: 20px; color: #333; border-bottom: 1px solid #eee; white-space: nowrap; }
.nv-sub a:hover, .nv-sub a:focus-visible, .nv-sub a[aria-current="page"] { color: #d00001; background: #f7f7f7; }

.nv-toggle { display: none; }

@media (max-width: 1240px) {
  .nv-header .nv-link { padding: 10px 11px; font-size: 13px; }
  .nv-logo img { width: 230px; }
}

@media (max-width: 1024px) {
  .nv-bar .nv-wrap { min-height: 0; padding-top: 10px; padding-bottom: 10px; }
  .nv-logo img { width: 220px; }
  .nv-header .nv-toggle { display: flex; align-items: center; justify-content: center; margin-left: auto; width: 46px; height: 46px; border-radius: 4px; background: #ef0001; color: #fff; }
  .nv-toggle:focus-visible { outline: 3px solid #333; outline-offset: 2px; }
  .nv-bars { display: flex; flex-direction: column; justify-content: space-between; width: 22px; height: 16px; }
  .nv-bars span { display: block; height: 2px; background: currentColor; border-radius: 1px; transition: transform .2s, opacity .2s; }
  .nv-open .nv-bars span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nv-open .nv-bars span:nth-child(2) { opacity: 0; }
  .nv-open .nv-bars span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .nv-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; margin: 0; background: #fff; border-top: 3px solid #ef0001; box-shadow: 0 10px 24px rgba(0, 0, 0, .2); max-height: calc(100vh - 110px); overflow-y: auto; }
  .nv-open .nv-nav { display: block; }
  /* bottom room so the last links can scroll clear of the phone "CALL NOW" bar */
  .nv-menu { display: block; padding-bottom: 64px; }
  .nv-header .nv-link { display: block; width: 100%; text-align: left; padding: 13px 24px; font-size: 15px; line-height: 20px; border-bottom: 1px solid #eee; box-shadow: none; }
  .nv-header .nv-link[aria-current="page"], .nv-header .nv-active > .nv-link { box-shadow: inset 4px 0 0 #ef0001; }
  .nv-header .nv-sub-btn { cursor: default; color: #333; }
  .nv-header .nv-has-sub:hover > .nv-link { box-shadow: none; color: #333; }
  .nv-caret { display: none; }
  /* Every sub-link stays visible in the phone menu. */
  .nv-sub, .nv-has-sub:hover > .nv-sub { display: block; position: static; min-width: 0; border-top: 0; box-shadow: none; }
  .nv-sub a { padding: 12px 24px 12px 40px; font-size: 15px; white-space: normal; }
}

@media (max-width: 640px) {
  .nv-topbar .nv-wrap { justify-content: center; padding: 6px 16px; }
  .nv-topbar .nv-top-email { display: none; }
  .nv-header .nv-wrap { padding-left: 16px; padding-right: 16px; }
  .nv-logo img { width: 190px; }
}

/* Page title bar: its photo was loaded from another company's site and never showed (flat grey, red title at 1.5:1).
   A dark concrete colour instead, close to the old photo; the red title reads at 3.3:1 or better. */
.fusion-page-title-bar { background-color: #1e1e1e !important; background-image: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 60%, #222 100%) !important; }
.fusion-page-title-bar h1, .fusion-page-title-bar .entry-title { color: #f50001 !important; }
.fusion-page-title-bar h3, .fusion-page-title-bar .fusion-page-title-captions h3 { color: #fff !important; }
.fusion-page-title-bar .fusion-breadcrumbs, .fusion-page-title-bar .fusion-breadcrumbs a, .fusion-page-title-bar .fusion-breadcrumbs a span, .fusion-page-title-bar .fusion-breadcrumb-sep { color: #fff !important; }
.fusion-page-title-bar .fusion-breadcrumbs .breadcrumb-leaf, .fusion-page-title-bar .fusion-breadcrumbs a span.breadcrumb-leaf { color: #ff8a8a !important; }

/* Form buttons: an old mobile rule set their text to 6px (the rule itself is also removed at build time, see
   src/lib/clean-css.ts). The selectors here out-rank it either way. Inputs at 16px so phones don't zoom in. */
@media (max-width: 1024px) {
  .wpcf7-form input.wpcf7-submit, .wpcf7-form button.wpcf7-submit, .wpcf7 input.wpcf7-submit,
  .fusion-button_size-large .wpcf7-form input[type="submit"].wpcf7-submit, .wpcf7 .wpcf7-form input[type="submit"][type="submit"] { font-size: 16px !important; line-height: 1.25 !important; height: auto !important; min-height: 48px !important; padding: 12px 16px !important; white-space: normal !important; }
}
@media (max-width: 768px) {
  .wpcf7 .wpcf7-form input:not([type="submit"]):not([type="hidden"]):not([type="checkbox"]):not([type="radio"]), .wpcf7 .wpcf7-form select, .wpcf7 .wpcf7-form textarea { font-size: 16px !important; }
}

/* Dark "Get in touch with us" band above the footer: the child theme fixed the text box at 60px tall with a 7px
   line height, so on phones the sentence ran under the CALL US NOW / GET A QUOTE button. Let it grow and stack. */
@media (max-width: 1024px) {
  .fusion-fullwidth .commnet { height: auto !important; min-height: 60px; line-height: 1.5 !important; }
  .fusion-fullwidth .commnet .fusion-column-wrapper p { font-size: 15px !important; line-height: 1.5 !important; margin-bottom: 0 !important; }
}
@media (max-width: 640px) {
  .fusion-fullwidth .commnet + .fusion-layout-column { margin-top: 4px !important; }
}

/* Discount banner (home, montgomery): the photo used to come from another company's site. This site's copy is
   cropped to the photo part, so it sits on the left at full banner height on a matching light grey. */
.fusion-fullwidth[style*="discount-offer.jpg"] { background-color: #c9cbc6 !important; background-size: auto 100% !important; background-position: left center !important; background-repeat: no-repeat !important; }
@media (max-width: 800px) {
  .fusion-fullwidth[style*="discount-offer.jpg"] { background-image: none !important; }
}