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

/* Divi scroll animations: elements started invisible until Divi's script revealed them (icons, logos). */
.et-waypoint:not(.et_pb_counters), .et_animated, [class*="et_pb_animation_"] { opacity: 1 !important; animation: none !important; }

/* Phone menu button: at least 44x44 to tap, and a darker blue that reads on white (was 32x32, #00b7eb at 2.3:1). */
@media (max-width: 980px) {
  body .et_pb_menu .mobile_nav .mobile_menu_bar { padding: 6px; margin: -6px; box-sizing: content-box; min-width: 32px; min-height: 32px; }
  body .et_pb_menu .mobile_nav .mobile_menu_bar::before { color: #0a6f8f !important; }
}

/* "10% OFF" promo: the terrazzo photo behind it is light, so its text was unreadable. Darken it (65%). */
body .et_pb_section:has(#mymonth) {
  background-image: linear-gradient(rgba(0, 0, 0, .65), rgba(0, 0, 0, .65)), url('/wp-content/uploads/2021/02/discount-bg-img.jpg') !important;
  background-blend-mode: normal !important;
}

/* Dark texture sections: on phones the texture covers the whole section, so their grey text sat on near-black. */
@media (max-width: 980px) {
  body div.et_pb_section.tex-sec .et_pb_text,
  body div.et_pb_section.tex-sec .et_pb_text :is(p, div, span, li, strong, b, em, h3, h4, h5, h6) { color: #e6e6e6 !important; }
  body div.et_pb_section.tex-sec .et_pb_text a { color: #6fd3f2 !important; }
}

/* Cyan headings and links on white were 2.34:1 (theme default h1-h6/a colour). Headings, labels and links: a deeper
   cyan (5.7:1 on white). Big headings in sections with a background photo or texture strip: a mid cyan that reads on
   white (4.1:1) and on the dark strips (4.2:1). Hero H1s keep their own colour; the footer and the dark sections set
   theirs with more specific rules. */
body :is(h2, h3, h4, h5, h6), body a { color: #0a6f8f; }
body .et_pb_with_background h2, body .et_pb_section:not(.et_pb_with_background) h1 { color: #0088b0; }
/* The "10% OFF" promo sits on a darkened photo: its heading keeps the bright cyan (4.7:1 there). */
body .et_pb_section:has(#mymonth) h2 { color: #00b7eb; }
/* FAQ page: its H1 sits on a near-white photo (marked "light-hero" at build time). */
body .et_pb_section.light-hero h1 { color: #0a6f8f; }

/* Blog post headers: the dark photo is 320px tall and doesn't stretch, so on phones a long title ran past it and its
   last line, the date and the category were white on white. Stretch the photo to the whole header there. */
@media (max-width: 980px) {
  body .et_pb_section.et_pb_with_background:has(.et_pb_post_title) { background-size: cover !important; }
}

/* Dark texture strips on desktop: the strip is the photo's own height, and on some pages the next paragraph started
   inside it, so its first line was dark grey half on black. Give the paragraphs after the strip's white intro
   (marked "below-strip" at build time) a white backing so they always read; the strip itself is unchanged. */
@media (min-width: 981px) {
  body div.et_pb_section.tex-sec .et_pb_text.below-strip { background-color: #fff; }
}

/* Service-page heroes: keep the H1 clear of the FREE QUOTE panel that overlaps the hero's right third on desktop. */
@media (min-width: 981px) {
  body .et_pb_section.quote-hero .et_pb_text_0 { max-width: 66%; }
}

/* FAQ "Where can you install epoxy flooring?": its two-column list sits in Divi's icon-beside-text table layout, and
   Firefox sized that table to the list's widest row, so on phones the answer ran off the right edge. Phones get one
   column, and the text cell may shrink to the screen. */
@media (max-width: 767px) {
  body .et_pb_blurb_description ol[style*="columns"] { columns: auto !important; }
  body .et_pb_blurb_position_left .et_pb_blurb_content { max-width: 100%; }
  body .et_pb_blurb_position_left .et_pb_blurb_container { min-width: 0; overflow-wrap: anywhere; }
}