/* Layout fixes for things the old theme's scripts used to do (loaded after overrides.css). */

/* Phone menu glyph: the icon is the anchor's ::before, so the colour has to be set there (it was #dadada on white, 1.4:1). */
.fusion-mobile-menu-icons a.fusion-icon::before { color: #333 !important; }

/* Old-style (non-flex) Avada columns stack on phones. The theme CSS/script that did this is gone, so the
   "Call Us Now!" button sat on top of the paragraph beside it. */
@media (max-width: 640px) {
	.fusion-body .fusion-layout-column:not(.fusion-flex-column) { float: none !important; width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; clear: both; }
	.fusion-body .fusion-layout-column:not(.fusion-flex-column) .fusion-button { max-width: 100%; }
}

/* Quote form on service pages: nothing may sit on top of it, and the rows below start after it ends. */
@media (max-width: 1024px) {
	.contact-remodeling { position: relative; z-index: 3; height: auto !important; min-height: 0 !important; }
	.contact-remodeling > .fusion-column-wrapper { height: auto !important; min-height: 0 !important; overflow: visible !important; }
	.contact-remodeling form, .contact-remodeling .remodeling_form { position: relative; z-index: 3; margin-top: 0 !important; }
	.fusion-fullwidth.fusion-builder-row-1 { height: auto !important; min-height: 0 !important; overflow: visible !important; }
	.professional-interior { position: relative !important; top: auto !important; transform: none !important; z-index: 1; margin-top: 0 !important; clear: both; }
	.professional-interior > .fusion-row, .professional-interior .fusion-column-wrapper { top: auto !important; transform: none !important; }
}

/* "Contact us today to get started with a free quote!" band (text column .commnet, button column beside it).
   On phones the two columns must stack in normal flow: nothing positioned, floated or offset, so the line and
   the "Call Us Now!" button can never sit on top of each other. */
@media (max-width: 640px) {
	.commnet, .commnet + .fusion-layout-column { float: none !important; display: block !important; position: static !important; width: 100% !important; left: auto !important; right: auto !important; top: auto !important; bottom: auto !important; transform: none !important; margin-left: 0 !important; margin-right: 0 !important; clear: both; }
	.commnet .fusion-column-wrapper, .commnet .fusion-text, .commnet p { position: static !important; transform: none !important; margin-left: 0 !important; padding-left: 0 !important; text-indent: 0 !important; width: auto !important; }
	.commnet + .fusion-layout-column .fusion-column-wrapper { padding-top: 0 !important; }
	.commnet + .fusion-layout-column .fusion-alignleft { float: none !important; display: block; }
	.cal-botom { position: static !important; float: none !important; display: inline-block !important; margin: 0 !important; transform: none !important; }
	/* The text column was measured 75px high while its content was 166px, so the next column landed on the paragraph:
	   a fixed height from the old theme CSS. Height follows the content, and the column wrapper cannot be floated out of it. */
	.fusion-body .fusion-layout-column.commnet { height: auto !important; min-height: 0 !important; max-height: none !important; overflow: visible !important; }
	.fusion-body .fusion-layout-column.commnet > .fusion-column-wrapper { height: auto !important; min-height: 0 !important; max-height: none !important; overflow: visible !important; float: none !important; display: block !important; position: static !important; }
	.fusion-body .fusion-layout-column.commnet::after { content: ""; display: table; clear: both; }
	.fusion-body .fusion-layout-column.commnet + .fusion-layout-column { height: auto !important; min-height: 0 !important; overflow: visible !important; }
}