// Font-awsome arrow icons

$nav-down: '\f107';
$nav-right: '\f105';

$dropdown-bg: $accent1;
$dropdown-bg-hover: darken($accent2, 5%);

$menu-block-bg: $accent1;

// Styles
div#primary-navigation {
    
    /* =Desktop Navigation Styles
    -------------------------------------------------------------- */
     
    
    /* =Initial Desktop Styles, Dropdowns are controled lower
    /* =All paddings & borders applied to the a tag will descend
    /* =to lower a tags.
    -------------------------------------------------------------- */
    > ul {
        
        width: 100%;
        text-align: center;
        
        > li {
            //border-right: 1px solid #CCCCCC;
            display: table-cell;
            a {
                padding: 10px 20px;
                color: $accent1;
                font-family: $font1;
                text-decoration: none;
                font-size: 16px;
            }
            &.current-menu-item > a, &.current-menu-parent > a, &.current-menu-ancestor > a, > a:hover, &:hover > a {
                color: $menu-block-bg;
            }
            &:last-child {
                border-right: none;
            }
        }
        .sub-menu {
            text-align: left;
            display: block;
            opacity: 0;
            visibility: hidden;
            box-shadow: 0px 12px 46px -3px rgba(#000000, 0.5);
            @include center(x);
            @include transition;
            .sub-menu {
                top: 0;
                left: 100%;
                @include transform(none);
            }
        }
    }
    
    /* =Mobile Navigation Styles
    -------------------------------------------------------------- */
    @include bp($nav-breakpoint) {
        ul {
            text-align: left;
            position: relative;
            border-top: 1px solid darken($dropdown-bg-hover, 10%);
            background: $dropdown-bg;
            
            li {
                border-right: none;
                border-bottom: 1px solid darken($dropdown-bg-hover, 10%);
                padding: 0;
                display: block;
                a {
                    padding: 5px 15px;
                    color: contrasted($dropdown-bg);
                }
                &.current-menu-item > a, &.current-menu-parent > a, &.current-menu-ancestor > a, > a:hover, &:hover > a {
                    color: contrasted($dropdown-bg);
                }
                &:last-child {
                    border-bottom: none;
                }
            }
            /* =Reset desktop drop down centering
            -------------------------------------------------------------- */
            .sub-menu {
                display: none;
                opacity: 1;
                visibility: visible;
                box-shadow: none;
                @include transform(none);
            }
        }
    }
    
    // Hamburger Icon
    a#primary-navigation-toggle {
        color: $dropdown-bg;
        padding: 6px 20px;
		font-size: 25px;
        // "Menu" block
        span {
            background: $menu-block-bg;
            color: contrasted($menu-block-bg);
            vertical-align: text-top;
        }
    }
    
    
    // Desktop Level 1
    // Mobile Level 2
    ul ul {
        text-align: left;
        background: darken($dropdown-bg, 5%);
        a {
            color: contrasted(darken($dropdown-bg, 5%));
            padding: 10px 20px;
            &:hover {
                background: darken($dropdown-bg-hover, 10%);
                color: contrasted(darken($dropdown-bg-hover, 10%));
            }
        }
        li.current-menu-item, li.current-menu-parent, li.current-menu-ancestor {
           a {
                color: contrasted(darken($dropdown-bg, 10%));
                background: darken($dropdown-bg, 10%);
                &:hover {
                    color: contrasted(darken($dropdown-bg-hover, 15%));
                    background: darken($dropdown-bg-hover, 15%);
                }
            } 
        }
    }
    
    
    // Desktop Level 2
    // Mobile Level 3
    ul ul ul {
        background: darken($dropdown-bg, 15%);
        a {
            color: contrasted(darken($dropdown-bg, 15%));
            &:hover {
                background: darken($dropdown-bg-hover, 20%);
                color: contrasted(darken($dropdown-bg-hover, 20%));
            }
        }
        li.current-menu-item, li.current-menu-parent, li.current-menu-ancestor {
           a {
                color: contrasted(darken($dropdown-bg, 20%));
                background: darken($dropdown-bg, 20%);
                &:hover {
                    color: contrasted(darken($dropdown-bg-hover, 25%));
                    background: darken($dropdown-bg-hover, 25%);
                }
            } 
        }
    }
    
    
    // Desktop Level 3
    // Mobile Level 4
    ul ul ul ul {
        background: darken($dropdown-bg, 25%);
        a {
            color: contrasted(darken($dropdown-bg, 25%));
            &:hover {
                background: darken($dropdown-bg-hover, 30%);
                color: contrasted(darken($dropdown-bg-hover, 30%));
            }
        }
        li.current-menu-item, li.current-menu-parent, li.current-menu-ancestor {
           a {
                color: contrasted(darken($dropdown-bg, 30%));
                background: darken($dropdown-bg, 30%);
                &:hover {
                    color: contrasted(darken($dropdown-bg-hover, 35%));
                    background: darken($dropdown-bg-hover, 35%);
                }
            } 
        }
    }
}

/* =Navigation Icons ** Do Not Modify **
-------------------------------------------------------------- */
div#primary-navigation li.menu-item-has-children > a:after {
    content: $nav-down;
}

div#primary-navigation li li.menu-item-has-children > a:after {
    content: $nav-right;
}

@include bp($nav-breakpoint) {
    div#primary-navigation li li.menu-item-has-children > a:after {
        content: $nav-down;
    }
}

/* =Overwrite block with table for full width
-------------------------------------------------------------- */
@media (min-width: ($nav-breakpoint + 1px)) {
    div#primary-navigation > ul {
        display: table !important;
    }
}