// main: alux.scss
/* Header */
.nav-header{float:left;margin:0;}
.logo{float:left;padding:15px 15px 0 $gutter / 2 ;font-weight: bold; font-size: 25px}

.spotlight{padding:12px 15px 0 $gutter / 2 ;font-weight: bold; font-size: 25px; position: relative;z-index: 9999}


/* Menu */
.no-pad-menu { padding: 0; margin-bottom: 0; background: transparent!important;}
.nav-fixed{position: fixed;z-index: 9999; top:0;}

.nav-wrap { display: inline-block; width: 100%;  background: $menu-color; float:left; }
.nav-wrap a { text-decoration: none; color: $menu-text-color; display: block; }
.nav-wrap ul { list-style: none; position: relative; text-align: left; margin: 0; }
.nav-wrap li { float: left; margin: 0; position: relative; }

/* Light Menu */
.nav-light{background: $menu-color-light;}
.nav-light a{color: $menu-text-color-light;}

/* clear'n floats */
.nav-wrap ul:after { clear: both; }
.nav-wrap ul:before,
.nav-wrap ul:after { content: ' '; display: table; }
.nav-wrap nav { position: relative; text-align: center; float: right; }

/* Animate Dropdown Mobile  */
.nav-container, ul.dropdown-menu {
  -webkit-transition: max-height 0.3s;
     -moz-transition: max-height 0.3s;
          transition: max-height 0.3s;
}
ul.primary li a { display: block; padding: 22px 14px;}
ul.primary li a:hover { color: $menu-text-color-hover; }

/* Light Menu */
.nav-light ul.primary li a:hover { color: $menu-text-color-light-hover; }

/* subs */
ul.primary li.dropdown a{padding-right: 25px;}
ul.dropdown-menu {
  position: absolute; z-index: 200; min-width: 200px; display: none;
  box-shadow: 0 7px 12px rgba(0,0,0,.175);
}
ul.dropdown-menu li { float: none; margin: 0; }

/* arrow animation menu */

.alux-arrow {
  width: 16px;
  height: 16px;
  display: inline-block;
  top: 27px;
  right: 18px;
  position: absolute;
  background: url(img/arrow-white.svg) center center;
  background-size: 22px 22px;
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
}

/* Light Menu */
.nav-light .alux-arrow{background: url(img/arrow.svg) center center; background-size: 22px 22px;}

.select .alux-arrow {
  -webkit-transform: rotate(90deg); /* Chrome, Safari, Opera */
          transform: rotate(90deg);
}

/* dropdown link color */
ul.primary ul.dropdown-menu li a {
  border-left: 1px solid #ddd;
  border-right: 1px solid #ddd;
  border-bottom: 1px solid #eee;
  color: $dropdown-text-color;
  padding: 13px 20px;
}
ul.primary ul.dropdown-menu li a:hover { color: $dropdown-text-color-hover; background: $dropdown-bg-color-hover; }

/* dropdown display */
ul.primary li:hover ul { display: block; }

/* keeps the tab background white */
ul.primary li:hover a { background: $dropdown-bg-color; color: #666; }
ul.primary li:hover > a { color: #000; }


/* Nav Double */
.nav-double .nav-container{flex: 1;}
.nav-double ul.primary--left{float:left;}
.nav-double ul.primary--right{float:right;}

/* Desktop */
@media (min-width: $media-desktop) {

	.alux-arrow {
		top: 28px;
		right: 6px;
    background-size: 18px 18px;
	}

  .fixed-nav-spacer{padding-top: 69px;}

}

/* Smartphone */
@media (max-width: $media-smartphone) {

  .logo{padding-left: $gutter-mobile;}

  /* Header  */
  .nav-header,
  .nav-wrap nav{ width: 100%;}

  /* Menu */
  .nav-wrap {
    width: 100%;
    margin-top: 0;
  }

  .nav-wrap li {
    float: none;
  }
  .nav-wrap .nav-container{
    /* Initially we don't want any height, and we want the contents to be hidden */
    max-height: 0;
    overflow: hidden;
  }
  .nav-wrap .dropdown-menu {
    /* Initially we don't want any height, and we want the contents to be hidden */
    max-height: 0;
    overflow: hidden;
  }

/* Hanburger with animations */
.tog {
    background: transparent;
    width: 69px;
    height: 69px;
    position: relative;
    float:right;
  }
  .tog span {
    display: block;
    width: 36px;
    height: 3px;
    border-radius: 2px;
    position: absolute;
    top: 32px;
    right: 16px;
    background: #fff;
  }
  /* Light Menu */
  .nav-light .tog span {
    background: #000;
  }
  .tog span:first-child {
    -webkit-transform: translateY(-11px);
            transform: translateY(-11px);
  }
  .tog  span.span-middle {
    -webkit-transform: translateY(11px);
            transform: translateY(11px);
  }
  .tog.x span:first-child {
    -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
  }
  .tog.x span.span-middle {
    opacity: 0;
  }
  .tog.x span:last-child, .tog.x span.span-middle {
    -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
  }

  /* menu mobile height */
  .nav-wrap .nav-container.open,
  .nav-wrap .dropdown-menu.open {
    max-height: 500px;
    overflow: scroll;
    -webkit-overflow-scrolling: touch;
  }

  .nav-wrap .dropdown-menu.open{
    max-height: 999px;
  }

  ul.primary li a {padding: 20px;}

  .nav-wrap ul.primary li:hover a {
    background: none;
    color: $menu-mobile-text-color-hover;
  }
  .nav-wrap ul.primary li a.select {
    background: darken($menu-color, 5%);
    color: $menu-mobile-text-color-select;
  }

  .nav-wrap ul.primary li:hover ul {
    display: block;
    color: $menu-mobile-text-color-select;
  }
  /* Light Menu */
  .nav-light.nav-wrap ul.primary li a.select {
    background: darken($menu-color-light, 5%);
    color:#000;
  }
  .nav-light.nav-wrap ul.primary li:hover a {
    color: $menu-text-color-light-hover;
  }

  .nav-wrap ul.dropdown-menu {
    display: block;
    position: static;
    box-shadow: none;
    width: 100%;
    border-bottom: none;
  }

  .nav-wrap ul.primary ul.dropdown-menu li a {
    background: darken($menu-color, 10%);
    border: none;
    color: $menu-mobile-text-color-hover;
  }

  .nav-wrap ul.primary ul.dropdown-menu li a:hover {
    color: lighten($menu-mobile-text-color-hover,15%);
  }

  /* Light Menu */
  .nav-light.nav-wrap ul.primary ul.dropdown-menu li a {
    background: darken($menu-color-light, 10%);
    color: $menu-text-color-light-hover;
  }

  .dropdown .select .alux-arrow {
    -webkit-transform: rotate(-90deg);
            transform: rotate(-90deg);
  }

  .no-pad-menu { padding: 0;}

  /* Nav double */
  .nav-double .nav-container{flex: auto;}
  .nav-double ul.primary--left,
  .nav-double ul.primary--right{float:left;width: 100%;}


  /* Footer menu mobile */
  .mobile-footer-menu,
  .mobile-footer-menu .grid{height: 0px;position: relative;z-index: 9999}
  .mobile-footer-menu .nav-container{height: 100vh;max-height: 100vh; position: fixed;top:0;background: $menu-color;padding-top: 70px;right:-100%}

  /* Light Menu */
  .nav-light.mobile-footer-menu .nav-container{background: $menu-color-light;}
  .mobile-footer-menu .nav-container.open{right: 0;height: 100vh;max-height: 100vh;}

  .mobile-footer-menu .nav-header{position: fixed; top:0; left: 0;z-index: 9999}
  .mobile-footer-menu .tog{bottom:0;position: fixed;right:0;z-index: 9999}
  .mobile-footer-menu .spotlight{bottom:16px;position: fixed;left:0;}

  .mobile-footer-menu .grid:after{content: ''; background: darken($menu-color, 10%);position: fixed;height: 70px;width: 100%; bottom:0; left:0;display: block;}
  .mobile-footer-menu .nav-container:after{content: '';width: 100%; height: 77px;display: block;float:left;}

  /* Light Menu */
  .nav-light.mobile-footer-menu .grid:after{background: darken($menu-color-light, 10%);}

}
