//
// Magento Enterprise Edition
//
// NOTICE OF LICENSE
//
// This source file is subject to the Magento Enterprise Edition End User License Agreement
// that is bundled with this package in the file LICENSE_EE.txt.
// It is also available through the world-wide-web at this URL:
// http://www.magento.com/license/enterprise-edition
// If you did not receive a copy of the license and are unable to
// obtain it through the world-wide-web, please send an email
// to license@magento.com so we can send you a copy immediately.
//
// DISCLAIMER
//
// Do not edit or add to this file if you wish to upgrade Magento to newer
// versions in the future. If you wish to customize Magento for your
// needs please refer to http://www.magento.com for more information.
//
// @category    design
// @package     rwd_default
// @copyright Copyright (c) 2006-2017 X.commerce, Inc. and affiliates (http://www.magento.com)
// @license http://www.magento.com/license/enterprise-edition
//

/* ============================================ *
 * Nav - Skip Link
 * ============================================ */

.skip-nav {
    width: 40%;

    &:not(.skip-active):hover {
        text-decoration: none;

        .icon {
            background-position: -50px+4px ($toolbar-icon-padding-offset/2);
        }
    }
}

/*
.skip-nav .label {
    display: inline;
}
*/

.skip-nav .icon {
    @extend .icon-sprite;
    background-position: 0+4px ($toolbar-icon-padding-offset/2);
}

.skip-nav.skip-active .icon {
    @extend .icon-sprite;
    background-position-y: -687px;
}


// ---------------------------------------------

@include bp(min-width, 500px) {

    .skip-nav {
        width: 25%;
    }

}

// ---------------------------------------------

@include bp(min-width, $bp-medium + 1) {

    .skip-nav {
        display: none;
    }

}

/* ============================================ *
 * Nav - Skip Content
 * ============================================ */

@include bp(max-width, $bp-medium) {

    #header-nav {
        padding: 5px 0;
        
        nav {
	        margin-top: 53px;
        }
        
    }
    .skip-nav {
	    margin-left: 28px;
	    left: 0;
	}

}

// ---------------------------------------------

@include bp(min-width, $bp-medium + 1) {

    #header-nav {
        display: block; /* Force visibility */
        padding: 25px  0 0 0;
        //border-bottom: 1px solid $c-module-border-light;
    }

}

/* ============================================ *
 * Nav Primary
 * ============================================ */

@include bp(min-width, $bp-medium + 1) {
    .nav-primary {
        display: block;
        //margin-top: 15px;
    }

}

/* ============================================ *
 * General Navigation Styles
 * ============================================ */

$nav-primary-height: 30px;

.nav-primary {
    a {
        text-decoration: none;
        position: relative;
        display: block;
        color: $c-text;
        line-height: $nav-primary-height;
        font-family: $f-stack-gt-condensed-medium;
        letter-spacing: 1.4px;
    }

    li {
        position: relative;
    }

    li.level1 a {
        //border-bottom: 1px solid $c-module-border;
        text-transform: uppercase;
    }
    
    .menu_column a {
	    letter-spacing: .8px;
    }
    
}

// Show sub-menus when JS adds the appropriate classes
.nav-primary .menu-active > ul.level0,
.nav-primary li.level0 li.sub-menu-active > ul {
    display: block;
}

.nav-primary li.level0 > a {
    text-transform: uppercase;
}

.nav-primary li.level0.account-link,
.nav-primary li.level0.search-link {
	display: none;
}

@include bp(max-width, $bp-medium) {

.nav-primary li.level0.account-link,
.nav-primary li.level0.search-link {
	display: block;
}


	#home_nav {
		display: block;
		position: relative;
        li.level0 {
	        position: static;
	        
	        > a {
		        line-height: 44px;
	        }
	        
	        div.level0 {
				width: 100%;
			    margin-left: -30px;
			    padding: 0 30px;
			    box-sizing: content-box;
			    transition: all 300ms ease;
				
				.sub-container {
				    display: flex;
					vertical-align: top;
					flex-direction: row;
					flex-wrap: nowrap;
					justify-content: left;
					padding: 0 0 0 35px;
					transition: all 800ms ease;
				}
				
				
				.menu_column {
					//display: inline-block;
					min-width: 150px;
					padding: 0 25px;
					text-align: left;
					z-index: 2;
					h2 {
						font-family: $f-stack-serif;
						font-size: $f-size;
						text-transform: uppercase;
					}
					ul {
						display: block;
					    background: transparent;
					    border: 0 none;
					    padding: 0;
					    position: static;
					    //padding-top: 5px;
					    width: auto;
					    
					    li {
						    a {
								font-size:  $f-size-xxs;
								font-family: $f-stack-gt-extended-medium;
								text-transform: uppercase;
							    line-height: $f-size-xxs*3;
							    //padding-bottom: 10px;
						    }
						}
				
					}
					img {
						//margin-bottom: 10px;
					}
					p {
						font-size:  $f-size-xs;
						font-family: $f-stack-gt-standard-medium;
					    line-height: $f-size-xs*2;
					    &.medium {
						    font-family: $f-stack-gt-extended-medium;
					    }
					}
					
					&.column2 {
						position: absolute;
					    top: 0;
					    width: 100%;
					    padding: 7px $trim 0 238px;
					    left: 0;
					    z-index: 1;
						
						> div {
							float:none;
						}

						.col1 {
							float:left;
							width: 49%;
						}
						
						.col2 {
							float:right;
							width: 49%;
						}

						img {
							width: 100%;
							max-width: 100%;
						}
					}
					
					
				}
				@include after-shadow;
				&:after {
					display: block;
					transition: all 800ms ease;
					opacity:0;
				}

	    	}
	    	&:hover {
		    	> a {
			    	color: $c-text-gray !important;
		    	}
		    	div.level0 {
			    	max-height: 1000px;
			    	//display: flex;
			    	overflow:visible;
					.sub-container {
						max-height: 1000px;
					}
					&:after {
						opacity:1;
					}
			    }
	    	}
  
        }
		
	}
}


/* ============================================ *
 * Small Viewports - Accordion Style Menu
 * ============================================ */

@include bp(max-width, $bp-small) {

    .nav-primary {

        // Increase clickable area of anchors for small viewports
        a.level0,
        a {
            line-height: $nav-primary-height + 5px;
        }

        // Hide all sub-menus
        li.level0 ul {
            display: none;
        }

        li.level0.nav-1 ul {
            display: block;
        }


        // Indent sub-menus
        li.level0 li {
            padding: 0 0 0 25px;
            &.view-all {
	            display: none;
            }
        }

        li.level1 a {
            padding: 0 15px 0 25px;
        }

/*
        li.parent > a:after {
            @include triangle(right, 5px, #ccc);
            top: 50%;
            left: 10px;
            right: auto;
            margin-top: -5px;
        }
*/

        // Menu active states
/*
        li.parent.sub-menu-active > a:after,
        li.parent.menu-active > a:after {
            @include triangle(down, 5px, #ccc);
            top: 50%;
            left: 10px;
            right: auto;
            margin-top: -5px;
        }
*/

        li.menu-active > a,
        li.sub-menu-active > a {
            color: $c-action;
        }
    }
}

/* ============================================ *
 * Large Viewports - Dropdown Menu
 * ============================================ */

@include bp(min-width, $bp-medium + 1) {

    .nav-primary {

        a.level0 {
            padding: 0 25px;
        }

        li.level0,
        a.level0 {
            display: inline-block;
        }

        li:last-child > a {
            border-bottom: none;
        }

        a:hover,
        li:hover > a {
            color: $c-action;
        }

        .menu-active {
            z-index: 200;
        }

        /* Default styles for 1+ drop-down menus */
        li.level0 ul {
            @include menu;
            position: absolute;
            left: 0;
            top: $nav-primary-height; /* Height of ".nav-primary a.level0" */
            z-index: 10;
            width: 250px;
            padding-left: $box-spacing;
            padding-right: $box-spacing;
            display: none; /* Hide until displayed. */
        }

        /* Level 2+ */
        li.level1 ul {
            left: 60px;
            top: 15px;
        }

        /* Class for js to add briefly to evaluate element positioning. */
        li.level0 ul.level0.position-test {
            display: block;
        }

        /* Correct menus that will hang off the page (class added by js) */
        li.level0 ul.level0.spill {
            right: 0;
            left: auto;

            // Sub-menu drop down to the left
            li.level1 ul {
                left: auto;
                right: 50px;
                top: 20px;
            }
        }

        /* Level 1+ */
        li.level0 li.parent > a {
            position: relative;

            &:after {
                @include triangle(right, 4px, #ccc);
                right: 5px;
                top: 50%;
                margin-top: -3px;
            }
        }
    }

	#home_nav {
		display: block;
		position: relative;
        li.level0 {
	        position: static;
	        div.level0 {
		        text-align: center;
				//@include menu;
	            position: absolute;
/*
	            border-top: 1px solid #000;
	            border-bottom: 1px solid #000;
*/
				z-index: 10;
				left:0;
				width: 100%;
				background: #fff;
/*
			    display: flex;
				vertical-align: top;
				flex-direction: row;
				flex-wrap: nowrap;
				justify-content: center;
*/
				display: none;
				margin-left: -$trim;
				padding: 0 $trim;
				box-sizing: content-box;
				//max-height: 0;
				overflow: hidden;
				transition: $transition;
				
				.sub-container {
				    display: none;
					vertical-align: top;
					flex-direction: row;
					flex-wrap: nowrap;
					justify-content: center;
					overflow: hidden;
					//max-height: 0;
					padding: 0 0 0 100px;
					transition: all 800ms ease;
				}
				
				
				.menu_column {
					//display: inline-block;
					min-width: 150px;
					padding: $trim 25px;
					text-align: left;
					h2 {
						font-family: $f-stack-serif;
						font-size: $f-size;
						text-transform: uppercase;
					}
					ul {
						display: block;
					    background: transparent;
					    border: 0 none;
					    padding: 0;
					    position: static;
					    //padding-top: 5px;
					    width: auto;
					    
					    li {
						    a {
								font-size:  $f-size-xs;
								font-family: $f-stack-gt-extended-medium;
								text-transform: uppercase;
							    line-height: 34px;
							    //padding-bottom: 10px;
						    }
						}
				
					}
					img {
						//margin-bottom: 10px;
					}
					p {
						font-size:  $f-size-xs;
						font-family: $f-stack-gt-standard-medium;
					    line-height: $f-size-xs*2;
					    &.medium {
						    font-family: $f-stack-gt-extended-medium;
						    letter-spacing: .8px;
					    }
					}
					
					&.column2 {
						> div {
							float:left;
						}

						.col1 {
							float:left;
							margin-right: 15px;
						}
						
						.col2 {
							float:left;
						}
						
					}

					
				}
/*
				@include after-shadow;
				&:after {
					display: block;
					transition: all 800ms ease;
					opacity:0;
				}
*/

	    	}
	    	&:hover {
		    	> a {
			    	color: $c-text-gray !important;
		    	}
		    	div.level0 {
			    	//max-height: 1000px;
			    	display: flex;
			    	overflow:visible;
					.sub-container {
			    		display: flex;
						//max-height: 1000px;
					}
/*
					&:after {
						opacity:1;
					}
*/
			    }
	    	}
  
        }
		
	}



}

.nav-primary li.menu-active {
    > ul {
        display: block;
    }
}