/// ----------------------------------------------------------------------------------------
/// Footer Styles
/// ----------------------------------------------------------------------------------------
/// @author - Modop
/// @description - The styling for the global footer
////

/////
/// ----------------------------------------------------------------------------------------
/// @imports - Global imports
/// ----------------------------------------------------------------------------------------
////
@import '../sass/_variables';
@import '../sass/_mixins';
@import '../sass/_functions';

/////
/// ----------------------------------------------------------------------------------------
/// @description - All viewport widths up to infinity
/// ----------------------------------------------------------------------------------------
////
@media (min-width: $mobile) {
    .hpp-footer {
        text-transform: uppercase;
        font-family: $styleguide-regular-font-family;
        font-size: rem-calc(16);
        padding-bottom: rem-calc(18);
        padding-top: rem-calc(18);
        margin: 0;
        background-color: $darkblue;
        text-align: left; 
        
        .valign-bottom{
            align-self: flex-end;
        }

        .footer-icons{ 
            a{
                display: inline-block;
                margin-right: 5%;
            }

            .fb-icon{
                display: block;
                width: rem-calc(35);
                height: rem-calc(35);
                background: url("../assets/images/facebook.svg"); 
                background-size: cover;
            }

            .ln-icon{
                display: block;
                width: rem-calc(35);
                height: rem-calc(35);
                background: url("../assets/images/linkedin.svg"); 
                background-size: cover;
            }
            .in-icon{
                display: block;
                width: rem-calc(35);
                height: rem-calc(35);
                background: url("../assets/images/instagram.svg"); 
                background-size: cover;
            }
        }

        .columns {
            margin-top: 0;
            margin-bottom: 0;

            &:last-child {
                margin-bottom: 0;
            }
        }

        .bold-copy {
            font-family: $styleguide-bold-font-family;
            font-size: rem-calc(16);
        }

        .footer-address {
            li {
                &.sub-address {
                    font-size: rem-calc(12);
                    margin-top: rem-calc(10);
                }

                &.naiop-badge {
                    margin-top: rem-calc(15);
                    background-image: url('../assets/images/NAIOP-logo.png');
                    background-repeat: no-repeat;
                    background-size: rem-calc(90);
                    height: rem-calc(90);
                }

                .no-wrap {
                    white-space: nowrap;
                }
            }
        }

        .footer-submenu-group {
            display: none;
            border-top: rem-calc(1) solid $white;
            padding: 0;
        }

        .footer-submenu-header {
            padding-bottom: rem-calc(12);
            position: relative;
            user-select: none;
            outline: none;

            &.active {
                background: $lightblue;

                .icon {
                    transform: translateY(-50%) rotateZ(90deg);
                }
            }

            .icon {
                position: absolute;
                right: rem-calc(40);
                top: 50%;
                transform: translateY(-50%) rotateZ(0deg);
                transition: all ease-out .15s;
            }
        }

        .footer-submenu-item {
            font-family: $styleguide-regular-font-family;
            padding: rem-calc(4 0);
            display: block;
            color: $white;
        }

        .footer-submenu-wrapper {
            display: none;
            font-size: rem-calc(12);

            &.active {
                display: block;
                background: $lightblue;
            }
        }
    }

    .copyright-wrapper {
        background-color: $darkergrey;
        text-align: center;
        display: block;
        padding-bottom: rem-calc(30);
        padding-top: rem-calc(30);
        justify-content: center;
        flex-direction: column;
        min-height: rem-calc(50);

        .copyright {
            font-size: rem-calc(12);
            font-family: $styleguide-regular-font-family;
            text-align: left;

            .copy-item {
                color: $darkblue;
                display: inline-block;
                margin: rem-calc(8 0);
                text-align: left;
                text-transform: capitalize;
            }

            .mini-logo {
                font-family: $styleguide-bold-font-family;
                font-size: rem-calc(16);
                display: inline-block;
                color: $darkblue;
            }

            .terms-privacy-container {
                display: block;

                a {
                    border-bottom: rem-calc(1) solid $darkblue;
                    color: $darkblue;
                }
            }

            .divider {
                height: rem-calc(20);
                border-left: rem-calc(2) solid $gray;
                display: inline-block;
                vertical-align: middle;
                display: none;
            }
        }
    }
}

/// End of Mobile Up

/////
/// ----------------------------------------------------------------------------------------
/// @description - Tablet (768px) viewport widths up to infinity
/// ----------------------------------------------------------------------------------------
////
@media (min-width: $tablet) {
    .footer-address span {
        display: block; 
    }

    .copyright-wrapper .copyright {
        text-align: center;

        .copy-item {
            display: inline-block;
        }

        .terms-privacy-container {
            display: inline-block;

            a {
                border-bottom: initial;
            }
        }

        .divider {
            display: inline-block;
        }
    }
}

/// End of Tablet Up

/////
/// ----------------------------------------------------------------------------------------
/// @description - Desktop (1024px) viewport widths up to infinity
/// ----------------------------------------------------------------------------------------
////
@media (min-width: $desktop) {
    .hpp-footer {
        .footer-submenu-header {
            &.active {
                background: none;
            }

            .icon {
                display: none;
            }
        }

        .footer-submenu-group {
            display: block;
            border: none;
            padding: rem-calc(12);
        }

        .footer-submenu-wrapper {
            display: inline-block;

            &.active {
                display: block;
                background: none;
            }
        }

        .footer-submenu-item {
            display: block;
            color: $white;
            margin-bottom: rem-calc(5);

            &:last-child {
                margin-bottom: 0;
                padding-bottom: 0;
            }
        }
    }

    .copyright-wrapper {
        background: $white;
        text-align: center;
        display: block;
        justify-content: center;
        flex-direction: column;
        min-height: rem-calc(50);
    } 
}

/// End of Desktop Up

/// UserWay override for mobile and tablets
@media (max-width: $desktop) { 
    .uwy.userway_p5 .uai {
        transform: scale(0.75) !important;
        left: 5px;
        bottom: 5px;
    } 
}