/* Add this line if WooCommerce is used on this site */
/* @import "woo-style.css"; */
@import "imt-css/new-style.css";

/* Child theme fonts */
:root {
    --font-family--default: 'Outfit';
    --font-family--h--1: 'Outfit';
    --font-family--h--2: var(--font-family--h--1);
    --font-family--h--3: var(--font-family--h--1);
    --font-family--h--4: var(--font-family--h--1);
    --font-family--h--5: var(--font-family--h--1);
    --font-family--h--6: var(--font-family--h--1);
    --font-family--h--2--footer: var(--font-family--h--1);
    --font-family--h--3--footer: var(--font-family--h--1);
    --font-family--h--4--footer: var(--font-family--h--1);
    --font-family--main-navigation: var(--font-family--default);
    --font-family--dropdown: var(--font-family--default);
    --font-family--megamenu--heading: var(--font-family--h--1);
    --font-family--gallery--caption: var(--font-family--default);
    --font-family--collapsible: var(--font-family--default);
    --font-family--tab: var(--font-family--default);
    --font-family--button: var(--font-family--default);
    --font-family--h--sub-heading--0: var(--font-family--h--1);
    --font-family--h--lead-text--0: var(--font-family--default);
}

/* ---------------------------- CUSTOMIZABLE IMPROVEMENTS ---------------------------- */
/* ------- MAIN NAVIGATION ------- */
@media only screen and (min-width: 1281px) {

    /* position btn 2 styles for desktop */
    .imt-btn-2 {
        margin-left: calc(var(--wp--custom--imt--spacer) * 1) !important;
        margin-right: calc(var(--wp--custom--imt--spacer) * 1) !important;
    }

    /* force megamenu heading to take assigned font weight */
    li.menu-item.megamenu-heading {
        text-transform: var(--wp--custom--imt--main-navigation--megamenu--heading--font--transform);
    }

    /* remove megamenu heading left padding */
    li.menu-item.megamenu-heading>a {
        padding-left: 0 !important;
    }

    /* ------- Megamenu Styling - WITH ICONS - Gagnon ------- */
    /* position and split columns */
    nav.imt-main-nav.full-mega>div>ul>li.megamenu>.submenu .imt-megamenu-wrapper>li.menu-item:first-of-type {
        flex-basis: calc((100% / 3) * 2) !important;
    }

    nav.imt-main-nav.full-mega>div>ul>li.megamenu>.submenu .imt-megamenu-wrapper>li.menu-item:not(:first-of-type) {
        flex-basis: calc((100% / 3) - var(--wp--custom--imt--main-navigation--megamenu--wrapper--column-gap)) !important;
    }

    nav.imt-main-nav.full-mega>div>ul>li.megamenu>.submenu .imt-megamenu-wrapper>li.menu-item:first-of-type>ul {
        column-count: 2;
        column-gap: calc(var(--wp--custom--imt--spacer) * 2);
    }

    nav.imt-main-nav.full-mega>div>ul>li.megamenu>.submenu .imt-megamenu-wrapper>li.menu-item:first-of-type>ul>li {
        break-inside: avoid-column;
    }

    /* position and display icons, add .imt-mm-icon and your assigned unique icon to each main navigation link in the site backend */
    .imt-mm-icon a {
        position: relative;
        padding-left: 64px !important;
    }

    /* COMMERCIAL */
    /* commercial - construction */
    .imt-mm-com-cons a::before {
        background: url('/wp-content/uploads/2024/07/com-cons.png');
    }
    
    /* commercial - maintenance */
    .imt-mm-com-main a::before {
        background: url('/wp-content/uploads/2024/07/com-main.png');
    }
    
    /* commercial - snow */
    .imt-mm-com-snow a::before {
        background: url('/wp-content/uploads/2024/07/com-snow.png');
    }
    
    /* RESIDENTIAL */
    /* residential - design */
    .imt-mm-res-desi a::before {
        background: url('/wp-content/uploads/2024/07/res-desi.png');
    }

    /* residential - construction */
    .imt-mm-res-cons a::before {
        background: url('/wp-content/uploads/2024/07/res-cons.png');
    }

    /* residential - pool */
    .imt-mm-res-pool a::before {
        background: url('/wp-content/uploads/2024/07/res-pool.png');
    }

    /* residential - maintenance */
    .imt-mm-res-main a::before {
        background: url('/wp-content/uploads/2024/07/res-main.png');
    }

    /* residential - enhancement */
    .imt-mm-res-enha a::before {
        background: url('/wp-content/uploads/2024/07/res-enha.png');
    }

    /* residential - site work */
    .imt-mm-res-site a::before {
        background: url('/wp-content/uploads/2024/07/res-site.png');
    }

    /* residential - water features */
    .imt-mm-res-wate a::before {
        background: url('/wp-content/uploads/2024/07/res-wate.png');
    }

    /* residential - drainage */
    .imt-mm-res-drai a::before {
        background: url('/wp-content/uploads/2024/07/res-drai.png');
    }

    /* residential - water features */
    .imt-mm-res-wate a::before {
        background: url('/wp-content/uploads/2024/07/res-wate.png');
    }

    .imt-mm-icon a::before {
        content: '';
        position: absolute;
        top: 0px;
        left: 0px;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 48px 48px;
        width: 54px;
        height: 54px;
    }

    /* add after element to default state for animation's sake */
    .imt-link-level-2 .imt-menu-link:not(.imt-current-menu-item) span::after,
    .imt-link-level-3 .imt-menu-link:not(.imt-current-menu-item) span::after {
        content: '';
        position: absolute;
        left: 0;
        bottom: -5px;
        width: 100%;
        transform: scaleX(0) !important;
        transform-origin: left !important;
        transition: transform 0.3s ease !important;
    }

    /* scale the animation to the right based on left origin */
    .imt-link-level-2 .imt-menu-link:hover span::after,
    .imt-link-level-3 .imt-menu-link:hover span::after {
        transform: scaleX(1) !important;
    }

    /* set the underline color to white to match hover state even if active */
    .imt-link-level-2 .imt-menu-link.imt-current-menu-item:hover span::after,
    .imt-link-level-3 .imt-menu-link.imt-current-menu-item:hover span::after {
        background-color: var(--wp--custom--imt--color--palette--background--white) !important;
    }

    /* on desktop, for text ctas, add the icon on hover */
    .imt-card-group .imt-card .imt-buttons .imt-btn-text .imt-link-text::after {
        font-family: "Font Awesome 6 Pro";
        font-weight: 900;
        content: "\f054";
        /* chevron-right */
        display: inline-block;
        width: 0;
        opacity: 0;
        margin-left: 0;
        transform: translateX(-10px);
        transition: var(--wp--custom--imt--hover-transition);
        flex-shrink: 0;
    }

    .imt-card-group .imt-card .imt-buttons .imt-btn-text:hover .imt-link-text::after {
        width: 18px;
        opacity: 1;
        margin-left: calc(var(--wp--custom--imt--spacer) * 0.625);
        transform: translateX(0);
    }
}

/* align text btns flex-start and remove left, top, and bottom padding, NOT in the footer */
.imt-card-group.imt-card-color-accent-2 .imt-card .imt-buttons .imt-btn-wrapper:has(.imt-btn-text) {
    justify-content: flex-start !important;
}

.imt-card-group.imt-card-color-accent-2 .imt-card .imt-buttons .imt-btn-text {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-left: 0 !important;
}

/* add margin to callout, bypass adding a class */
.imt-section:has(.imt-callout-default) {
    margin: var(--wp--custom--imt--global--media-row--style--default--section--default--margin);
}

/* ------- TEXT FORMATTING ------- */
.imt-paragraphs {
    text-wrap: pretty;
}

.imt-content-item.imt-lead-text--0,
h1.imt-heading {
    text-wrap: balance;
}

/* reduce padding and font size for 4-wide cards because of font wrapping, only secondary or accent 2 color cards */
@media only screen and (max-width: 1280px) {

    .imt-section .imt-card-group.imt-card-style-default.imt-card-color-accent-2>.acf-innerblocks-container .imt-card,
    .imt-section .imt-card-group.imt-card-style-default.imt-card-color-primary>.acf-innerblocks-container .imt-card,
    .imt-section .imt-card-group.imt-card-style-default.imt-card-color-secondary>.acf-innerblocks-container .imt-card {
        padding: var(--wp--custom--imt--card--global--sm--padding-top-bottom-mobile) var(--wp--custom--imt--card--global--sm--padding-left-right-mobile) !important;
    }

    .imt-section .imt-card-group.imt-card-style-default.imt-card-color-accent-2>.acf-innerblocks-container .imt-card h3.imt-heading,
    .imt-section .imt-card-group.imt-card-style-default.imt-card-color-primary>.acf-innerblocks-container .imt-card h3.imt-heading,
    .imt-section .imt-card-group.imt-card-style-default.imt-card-color-secondary>.acf-innerblocks-container .imt-card h3.imt-heading {
        font-size: 18px !important;
    }
    .imt-section .imt-card-group.imt-card-style-default.imt-card-color-primary>.acf-innerblocks-container .imt-card .imt-content-item.imt-lead-text--0,
    .imt-section .imt-card-group.imt-card-style-default.imt-card-color-primary>.acf-innerblocks-container .imt-card .imt-content-item.imt-lead-text--0 p,
    .imt-section .imt-card-group.imt-card-style-default.imt-card-color-primary>.acf-innerblocks-container .imt-card .imt-content-item.imt-lead-text--0 p b {
        font-size: 16px !important;
    }
}

@media only screen and (max-width: 800px) {

    /* center align on tablet and down with class */
    .imt-center-align-mobile,
    .imt-center-align-mobile a,
    .imt-center-align-mobile p {
        text-align: center !important;
    }

    /* media row bg color updates for tablet and down */
    .imt-section .imt-media-row.imt-media-row-style-default.imt-media-col-right .imt-content-col__background {
        background: linear-gradient(0deg, rgba(62, 62, 64, 1) 0%, rgba(43, 43, 45, 1) 93%, rgba(32, 32, 33, 1) 100%) !important;
    }

    .imt-section .imt-media-row.imt-media-row-style-default.imt-media-col-left .imt-content-col__background {
        background: linear-gradient(180deg,rgba(173, 176, 179, 1) 0%, rgba(238, 242, 243, 1) 93%, rgba(249, 251, 251, 1) 100%) !important;
    }
}

/* bug fix showing the correct image ratio on mobile, fix first /4 to /2 */
@media only screen and (max-width: 600px) {

    .imt-gallery-image-crop-1-1 figure,
    .imt-gallery-image-crop-circle figure {
        padding-top: calc((100% / 2) - (24px - (24px / 2))) !important;
    }
}

/* ------- FORM FORMATTING ------- */
/* add focus state bg color for form fields */
form[role=search] .wp-block-search__input:focus,
.gform_fields .chosen-choices .search-choice:focus,
.gform_fields .chosen-choices:focus,
.gform_fields .chosen-single:focus,
.gform_fields input:focus,
.gform_fields select:focus,
.gform_fields textarea:focus {
    background: var(--wp--custom--imt--color--palette--background--accent--3--900) !important;
}

/* updates for wp base search fields */
input[type="search"]::-webkit-search-cancel-button {
    filter: contrast(0) brightness(2);
}

.wp-block-search__input::placeholder {
    color: #fff;
    opacity: 0.85;
}

.gform_wrapper.gravity-theme .gfield_radio label {
    line-height: calc(var(--wp--custom--imt--line-height) * 0.8) !important;
}