/**
 * Header/Footer Builder
 * Front End
 */

.bhfb-desktop,
.bhfb-mobile {
    position: relative;
}

.bhfb-desktop {
    display: none;
    z-index: 999;
}

.bhfb-footer {
    display: block;
    z-index: 997;
}

@media(min-width: 1025px) {
    .bhfb-desktop {
        display: block;
    }
    .bhfb-mobile {
        display: none;
    }
}

.bhfb-above_header_row,
.bhfb-main_header_row,
.bhfb-below_header_row {
    display: flex;
    transition: ease background-color 300ms, ease border-bottom-color 300ms, ease height 300ms;
}

.bhfb-main_header_row {
    min-height: 100px;
}

.bhfb-below_footer_row {
    background-color: #F5F5F5;
    min-height: 100px;
}

.bhfb-row {
    display: grid;
    grid-auto-flow: column;
    gap: 0;
    overflow-wrap: anywhere;
    height: 100%;

    &.bhfb-cols-1 {
        grid-template-columns: 1fr;

        .bhfb-column-1 {
            justify-content: flex-end;
        }
    }

    &.bhfb-cols-2 {
        grid-template-columns: repeat(2, 1fr);
    }

    &.bhfb-cols-3 {
        grid-template-columns: repeat(3, 1fr);

        .bhfb-column-2 {
            justify-content: center;
        }

        .bhfb-column-3 {
            justify-content: flex-end;
        }
    }

    &.bhfb-cols-4 {
        grid-template-columns: repeat(4, 1fr);
    }

    &.bhfb-cols-5 {
        grid-template-columns: repeat(5, 1fr);
    }

    &.bhfb-cols-6 {
        grid-template-columns: repeat(6, 1fr);
    }

    &.bhfb-cols-valign-top {
        align-items: flex-start;
    }

    &.bhfb-cols-valign-middle {
        align-items: center;
    }

    &.bhfb-cols-valign-bottom {
        align-items: flex-end;
    }

    // Columns Layout.
    &.bhfb-cols-layout-bigleft {
        &.bhfb-cols-2 {
            grid-template-columns: 3fr 1fr;
        }

        &.bhfb-cols-3 {
            grid-template-columns: 3fr 1fr 1fr;
        }

        &.bhfb-cols-4 {
            grid-template-columns: 2fr 1fr 1fr 1fr;
        }
    }

    &.bhfb-cols-layout-bigright {
        &.bhfb-cols-2 {
            grid-template-columns: 1fr 3fr;
        }

        &.bhfb-cols-3 {
            grid-template-columns: 1fr 1fr 3fr;
        }

        &.bhfb-cols-4 {
            grid-template-columns: 1fr 1fr 1fr 2fr;
        }
    }
}

// Responsive columns layout.
// Desktop
@media(min-width: 1025px) {
    .bhfb-row {
        
        &.bhfb-cols-layout-equal-desktop {
            &.bhfb-cols-1 {
                grid-template-columns: 1fr;
            }
        
            &.bhfb-cols-2 {
                grid-template-columns: repeat(2, 1fr);
            }
        
            &.bhfb-cols-3 {
                grid-template-columns: repeat(3, 1fr);
            }
        
            &.bhfb-cols-4 {
                grid-template-columns: repeat(4, 1fr);
            }
        
            &.bhfb-cols-5 {
                grid-template-columns: repeat(5, 1fr);
            }
        
            &.bhfb-cols-6 {
                grid-template-columns: repeat(6, 1fr);
            }
        }

        &.bhfb-cols-layout-fluid-desktop {
            &.bhfb-cols-3 {
                grid-template-columns: repeat(3, auto);
            }        
        }

        &.bhfb-cols-layout-bigleft-desktop {
            &.bhfb-cols-2 {
                grid-template-columns: 3fr 1fr;
            }
    
            &.bhfb-cols-3 {
                grid-template-columns: 3fr 1fr 1fr;
            }
    
            &.bhfb-cols-4 {
                grid-template-columns: 2fr 1fr 1fr 1fr;
            }
        }
    
        &.bhfb-cols-layout-bigright-desktop {
            &.bhfb-cols-2 {
                grid-template-columns: 1fr 3fr;
            }
    
            &.bhfb-cols-3 {
                grid-template-columns: 1fr 1fr 3fr;
            }
    
            &.bhfb-cols-4 {
                grid-template-columns: 1fr 1fr 1fr 2fr;
            }
        }

    }
}

// Responsive columns layout.
// Tablet and Mobile
@media (max-width: 1024px) {
    .bhfb-row {
        
        &.bhfb-cols-layout-equal-tablet {
            &.bhfb-cols-1 {
                grid-template-columns: 1fr;
            }
        
            &.bhfb-cols-2 {
                grid-template-columns: repeat(2, 1fr);
            }
        
            &.bhfb-cols-3 {
                grid-template-columns: repeat(3, 1fr);
            }
        
            &.bhfb-cols-4 {
                grid-template-columns: repeat(4, 1fr);
            }
        
            &.bhfb-cols-5 {
                grid-template-columns: repeat(5, 1fr);
            }
        
            &.bhfb-cols-6 {
                grid-template-columns: repeat(6, 1fr);
            }
        }

        &.bhfb-cols-layout-fluid-tablet {
            &.bhfb-cols-3 {
                grid-template-columns: repeat(3, auto);
            }        
        }

        &.bhfb-cols-layout-bigleft-tablet {
            &.bhfb-cols-2 {
                grid-template-columns: 3fr 1fr;
            }
    
            &.bhfb-cols-3 {
                grid-template-columns: 3fr 1fr 1fr;
            }
    
            &.bhfb-cols-4 {
                grid-template-columns: 2fr 1fr 1fr 1fr;
            }
        }
    
        &.bhfb-cols-layout-bigright-tablet {
            &.bhfb-cols-2 {
                grid-template-columns: 1fr 3fr;
            }
    
            &.bhfb-cols-3 {
                grid-template-columns: 1fr 1fr 3fr;
            }
    
            &.bhfb-cols-4 {
                grid-template-columns: 1fr 1fr 1fr 2fr;
            }
        }

    }
}

.bhfb-footer {
    .bhfb-row-wrapper {
        display: flex;
        align-items: center;
    }

    .bhfb-row {
        gap: 30px;

        @media(min-width: 768px) and (max-width: 991px) {
            &.bhfb-cols-2,
            &.bhfb-cols-3,
            &.bhfb-cols-4,
            &.bhfb-cols-5,
            &.bhfb-cols-6 {
                gap: 30px;
                grid-template-columns: repeat(2, 1fr);
                grid-auto-flow: row;
            }
        }

        @media(max-width: 767px) {
            &.bhfb-cols-2,
            &.bhfb-cols-3,
            &.bhfb-cols-4,
            &.bhfb-cols-5,
            &.bhfb-cols-6 {
                gap: 30px;
                grid-template-columns: 1fr;
                grid-auto-flow: row;
            }
        }

    }

    // Menu.
    .bhfb-component-footer_menu {
        .menu {
            flex-wrap: wrap;
        }
    }
}

.bhfb-column {
    display: flex;
    flex-wrap: nowrap;
}

@media(min-width: 576px) {
    .bhfb-column {
        min-width: 110px;
    }
}

.bhfb.bhfb-header,
.bhfb-mobile_offcanvas {
    .social-profile {
        a {
            margin-right: 0;
            & + a {
                margin-left: 20px;
            }
        }
    }

    .bhfb-builder-item {
        display: flex;
        align-items: center;

        // Icons
        &.bhfb-component-search,
        &.bhfb-component-woo_icons {
            .ws-svg-icon {
                width: auto;
                height: auto;
            }
        }
    }

    .custom-logo-link {
        img {
            max-width: 100%;
        }
    }

    .botiga-image {
        &.is-svg {
            > img {
                width: 25px;
                height: 25px;
            }
        }
    }

    .bhfb-component-logo {
        text-align: center;
    }

    .bhfb-component-menu {
        line-height: 1;
    }

    .bhfb-component-search {
        .header-search {
            img {
                max-width: 27px;
                max-height: 27px;
            }
        }
    }

    .bhfb-component-search,
    .bhfb-component-woo_icons,
    .bhfb-component-social {
        svg {
            transition: ease fill 300ms;
        }
    }

    .bhfb-component-contact_info {
        .header-contact {
            &.header-contact-inline {
                display: flex;

                a {
                    margin-bottom: 0;
                    & + a {
                        margin-left: 20px;
                    }
                }
            }
        }
    }

    .bhfb-component-pll_switcher {
        .botiga-pll-switcher {
            list-style: none;
            padding: 0;
            margin: 0;
            display: flex;
            li {
                padding-bottom: 0;
                a {
                    display: flex;
                    align-items: center;
                }
                & + li {
                    margin-left: 20px;
                }
            }
        }
    }

    .bhfb-component-login_register {
        .header-login-register {
            > a {
                padding: 0;
            }
        }
    }
}

.bhfb-mobile_offcanvas {
    .mobile-menu-close {
        width: 30px;
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        right: 23px;
        top: 26px;
        z-index: 10;
    }
    .container {
        padding: 0;
        max-width: none;
    }
    .mobile-header-item {
        margin-bottom: 0;
    }
    .bhfb-mobile-offcanvas-col {
        flex-direction: column;
    }
    .bhfb-builder-item {
        width: 100%;
        & + .bhfb-builder-item {
            margin-left: 0;
            .header-item {
                margin-top: 0 !important;
            }
        }
    }
    
    .bhfb-component-pll_switcher {
        .botiga-pll-switcher {
            flex-direction: column;
            li {
                & + li {
                    margin-left: 0px;
                }
            }
        }
    }
}

/* Components */
.bhfb-component-widget1,
.bhfb-component-widget2,
.bhfb-component-widget3,
.bhfb-component-widget4 {
    width: 100%;
}

/* Sticky Header Row */
@media(min-width: 1025px) {

    .bhfb {

        &.bhfb-header {
            &.has-sticky-header {
                
                // Sticky All Rows
                &.sticky-row-all {
                    position: fixed;
                    width: 100%;
                    top: 0;
                    max-width: inherit;
    
                    // Scrolltop effect
                    &.sticky-scrolltop {
                        position: absolute;
                    }
                }
    
            }
        }

    }

    body {

        // Normal Sticky Header State

        // Padded Layout
        &.botiga-site-layout-padded {
                
            .bhfb {
                &.bhfb-header {
                    &.has-sticky-header {
                 
                        // Sticky All
                        &.sticky-row-all {
                            top: var(--botiga_padded_spacing, 25px);
                            left: 0;

                            &.sticky-scrolltop {
                                top: 0;
                            }
                        }
                        
                    }
                }
            }

            &.admin-bar {

                .bhfb {
                    &.bhfb-header {
                        &.has-sticky-header {
                     
                            // Sticky All
                            &.sticky-row-all {
                                top: calc( var(--botiga_padded_spacing, 25px) + 32px );

                                &.sticky-scrolltop {
                                    top: 0;
                                }
                            }

                        }
                    }
                }

            }
        }

        // Sticky Header Active State
        &.sticky-header-active {
            
            .bhfb {
                &.bhfb-header {
                    &.has-sticky-header {
                 
                        // Sticky All Row
                        &.sticky-row-all {
                            &.sticky-scrolltop {
                                position: fixed;
                            }
                        }
    
                        // Sticky Main Row
                        &.sticky-row-main-header-row {
                            position: fixed;
                            width: 100%;
                            top: 0;
                        }
    
                        // Sticky Below Row
                        &.sticky-row-below-header-row {
                            position: fixed;
                            width: 100%;
                            top: 0;
                        }
    
                        // Scrolltop effect
                        &.sticky-scrolltop {
                            transition: ease transform 300ms 200ms;
                        }
    
                    }
                    
                    &.bhfb-no-transition {
                        transition: none !important;
                    }
                }
            }

            /* Scrolltop effect */
            &.botiga-scrolling-down {

                .bhfb {
                    &.bhfb-header {
                        &.sticky-scrolltop {
                            transform: translate3d(0, -100%, 0);
                        }                
                    }
                }

            }

            // Boxed Layout
            &.botiga-site-layout-boxed {

                &.single-post { 
                    .content-wrapper {
                        margin-top: 0;
                        padding-top: 120px;
                    }
                }
                &.page:not(.botiga-page-builder-mode),
                &.single-product { 
                    .content-wrapper {
                        margin-top: 0;
                        padding-top: 80px;
                    }
                }

                .bhfb {
                    &.bhfb-header {
                        &.has-sticky-header {
                     
                            // Sticky All Row
                            &.sticky-row-all,
                            &.sticky-row-main-header-row,
                            &.sticky-row-below-header-row {
                                max-width: inherit;
                            }
        
                            // Sticky Main Row
                            &.sticky-row-main-header-row {
                                left: 50%;
                                max-width: inherit;
                                transform: translate3d(-50%, 0, 0);
                            }
        
                        }
                        
                        &.bhfb-no-transition {
                            transition: none !important;
                        }
                    }
                }

                &.botiga-scrolling-down {
                    .bhfb {
                        &.bhfb-header {
                            &.has-sticky-header {

                                // Sticky Main Row
                                &.sticky-row-main-header-row {
                                    &.sticky-scrolltop {
                                        transform: translate3d(-50%, -100%, 0);
                                    }
                                }

                            }
                        }
                    }
                }

            }

            // Padded Layout
            &.botiga-site-layout-padded {

                &:not(.header-transparent) {
                    .site {
                        margin-top: 0 !important;
                    }

                    &.single-post { 
                        .content-wrapper {
                            margin-top: 0;
                            padding-top: 120px;
                        }
                    }
                    &.page:not(.botiga-page-builder-mode),
                    &.single-product { 
                        .content-wrapper {
                            margin-top: 0;
                            padding-top: 80px;
                        }
                    }
                }
                
                .bhfb {
                    &.bhfb-header {
                        &.has-sticky-header {
                            max-width: calc( 100% - var(--botiga_padded_spacing, 25px) * 2 );
                            left: var(--botiga_padded_spacing, 25px) !important;
                     
                            // Sticky All
                            &.sticky-row-all {
                                left: auto !important;

                                &.sticky-scrolltop {
                                    top: var(--botiga_padded_spacing, 25px);
                                }
                            }

                            // Sticky Main Row
                            &.sticky-row-main-header-row,
                            &.sticky-row-below-header-row {
                                // left: 0 !important;
                            }
                            
                        }
                    }
                }

                &.admin-bar {

                    .bhfb {
                        &.bhfb-header {
                            &.has-sticky-header {
                         
                                // Sticky All
                                &.sticky-row-all {
                                    left: auto;
    
                                    &.sticky-scrolltop {
                                        top: calc( var(--botiga_padded_spacing, 25px) + 32 );
                                    }
                                }
                                
                            }
                        }
                    }

                }
            }
        }
    }

    /* Admin Bar */
    .admin-bar {

        .bhfb {

            &.bhfb-header {
                &.has-sticky-header {
                    
                    // Sticky All Rows
                    &.sticky-row-all {
                        top: 32px;
                    }
        
                }
            }
    
        }

        &.sticky-header-active {
            
            .bhfb {
                &.bhfb-header {
                    &.has-sticky-header {
                 
                        // Sticky Main Row
                        &.sticky-row-main-header-row {
                            top: 32px;
                        }
    
                        // Sticky Below Row
                        &.sticky-row-below-header-row {
                            top: 32px;
                        }
                        
                    }
                }
            }

        }

    }

}