/*=========================
    04. NAVIGATION MENU
===========================*/

nav {
    float: right;
    position: relative;
    z-index: 2;
}

nav a {
    font-size: 1.6rem;
    font-weight: 700;
}

.main-nav {
    &:before,
    &:after {
        display: table;
        content: " ";
    }

    &:after {
        clear: both;
    }

    ul {
        border-radius: 3px;
        @extend .pre-shadow;
    }

    li {
        list-style-type: none;
    }

    >li {
        float: left;

        >a {
            color: $dark-color;
            display: block;
            padding: 2.4rem 1.6rem;
        }
        a:hover {
            color: $primary-color;
        }
    }

    .menu-item-has-children {

        .to-left {
            left: unset !important; // Override by Js right positioning of rightmost menu item submenus
            right: 25%;
        }

        ul {
            background-color: $white-color;
            position: absolute;
            padding: 1.6rem 2.4rem;
            width: 220px;

            opacity: 0;
            visibility: hidden;

            -webkit-transition: all .3s;
            -moz-transition: all .3s;
            -o-transition: all .3s;
            transition: all .3s;
        }

        &:hover,
        &:focus {
            >ul {
                opacity: 1;
                visibility: visible;
                @include transform( translateY(-10px) );
            }
        }

        li>a {
            &::after {
                margin-top: 7px;
            }
        }

        >a {
            &::after {
                content: "\f107";
                padding-left: $smaller-padding;
                font: normal normal normal 18px/1 FontAwesome;
            }
        }

        .menu-item-has-children {
            .sub-menu {
                @include transform( translate( 0, 10px ) );
            }

            &:hover {
                > .sub-menu {
                    @include transform( translate( -10px, 10px ) );
                }
            }

            >a {
                &::after {
                    content: "\f105";
                }
            }
        }

       // >ul>.menu-item-has-children {
       //      >ul {
       //          left: 85%;
       //          opacity: 0;
       //          visibility: hidden;
       //      }

       //      &:hover,
       //      &:focus {
       //          >ul {
       //              opacity: 1;
       //              visibility: visible;
       //              @include transform( translate( -10px, -2.4rem ) );
       //          }
       //      }

       //      >a {
       //          &::after {
       //              content: "\f105";
       //              display: inline-block;

       //              font: normal normal normal 1.8rem/1 FontAwesome;

       //              right: 0;
       //              padding-top: 2px;
       //              position: absolute;
       //          }
       //      }
       //  }
    }
    .menu-item-has-children > ul.is-focused {
        opacity: 1;
        visibility: visible;
    }
    // .menu-item-has-children {
    //     position: relative;

    //     li {
    //         line-height: 2.2;
    //     }

    //     &:hover,
    //     &:focus {
    //         >a {
    //             &::after {
    //                 color: $primary-color;
    //             }
    //         }
    //     }

    //     >ul {
    //         position: absolute;
    //         top: 125%;
    //         left: 50%;

    //         background-color: $white-color;
    //         margin-left: -1.1rem;
    //         padding: 1.6rem 2.4rem;
    //         width: 220px;

    //         @include transform( translateY(-2.4rem) );
    //         @include transition( all .2s );
    //     }

    //     .to-left {
    //         left: unset !important; // Override by Js right positioning of rightmost menu item submenus
    //         right: 25%;
    //     }

    //     &:hover,
    //     &:focus {
    //         >ul {
    //             left: 50%;
    //             @include transform( translate( -10px, -2.4rem ) );
    //         }

    //         >a {
    //             &::after {
    //                 color: $primary-color;
    //             }
    //         }
    //     }
    // }

    // li ul li a {
    //     color: $dark-color;
    // }
    // .menu-item-has-children {
    //     .sub-menu {
    //         li {
    //             a:hover,
    //             a:focus {
    //                     color: $primary-color;
    //                 }

    //             a {
    //                 color:$secondary-color;
    //             }
    //         }
    //     }
    // }
}

/* Mobile Navigation Menu */

.nav-menu {
    position: relative;
}

.mobile-menu-container {
    position: absolute;
    top: 0;
    right: 3.2rem;

    ul > li {
        > a {
            color: $secondary-color;

            &:hover {
              color: $primary-color;
            }
        }
    }
}

.js-ct-menubar-right {

    &:focus {
        outline: 5px auto -webkit-focus-ring-color;
    }
}

.menubar-right,
.menubar-close {
    cursor: pointer;
    position: absolute;
    font-size: 2.7rem;

    right: 0;
    top: 2.4rem;
    z-index: 2;
}

.menubar-close {
    right: 3.2rem;
}

.menubar-right {
    padding-right: 15px;
    top: 50%;
    @include transform( translateY( -50% ) );
}

.dropdown-toggle {
    cursor: pointer;
    font-size: 2.2rem;

    margin-top: .2rem;
    position: absolute;
    top: 1rem;
    right: 0;
    padding: 0 !important; // Override for parent padding
    line-height: 1;

    -webkit-transition: -webkit-transform .2s ease-out;
    -moz-transition: -moz-transform .2s ease-out;
    -o-transition: -o-transform .2s ease-out;
    transition: transform .2s ease-out;
}

.mobile-menu-overlay {
    background-color: rgba(0,0,0,.5);

    position: fixed;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;

    z-index: 9901;

    -webkit-transition: all .2s;
    -moz-transition: all .2s;
    -o-transition: all .2s;
    transition: all .2s;
}

.mobile-menu-active {
    opacity: 1;
    visibility: visible;
}

.nav-parent {
    background-color: #fff;
    border-left: 1px solid #e3e3e3;

    padding: 4rem;
    position: fixed;
    overflow-y: scroll;

    top: 0;
    right: 0;
    bottom: 0;

    max-width: 30rem;
    width: 100%;
    visibility: hidden;

    z-index: 9902;

    -webkit-transition: all .2s;
    -moz-transition: all .2s;
    -o-transition: all .2s;
    transition: all .2s ease;

    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
}

.mobile-menu-open {
    -webkit-transform: translate3d(0, 0, 0) !important;
    transform: translate3d(0, 0, 0) !important;
    visibility: visible;
}

.mobile-nav li {
    position: relative;
    list-style-type: none;
}

.mobile-nav>li {
    border-bottom: 1px solid #e3e3e3;
}

.mobile-nav>li:last-child {
    border-bottom: none;
}

.mobile-nav li a {
    padding: 1rem;
    display: block;
}

.mobile-nav li ul li ul a,
.mobile-nav li ul a {
    display: block;
}

.mobile-nav>li>ul {
    display: none;
    padding-left: 1.6rem;
}

.mobile-nav>li>ul>li>ul {
    display: none;
    padding-left: 1.6rem;
}

.toggled {
    -o-transform: rotate(-180deg);
    -ms-transform: rotate(-180deg);
    -webkit-transform: rotate(-180deg);
    transform: rotate(-180deg);
}

/**
 *
 * #.# Media Queries
 *
 */

/* Larger than tablet */
@media (min-width: 768px) {
    .mobile-navigation,
    .menubar-right {
        display: none !important;
    }
}

/* Medium devices (tablets, less than 992px) */
@media (max-width: 767.98px) {
    .main-nav,
    .nav-button,
    .header-navigation {
        display: none;
    }
}

.sticky-header {
    position:fixed;
    top: 0;
    left: 0;
    max-width: 100%;
    z-index: 9;
    background: $white-color;

    @extend .pre-shadow;
}

.nav-button {
    margin: 0 1.6rem;
}
// .main-nav > .menu-item-has-children > .is-focused,
// .main-nav > .menu-item-has-children > .is-focused > .menu-item-has-children > .is-focused {
//     opacity: 1;
//     visibility: visible;
// }