// Navigation
//
// Chrome navigation with logo, navigation, and search. Use `.-floating` modifier to float above
// page content (such as appearing over a __Header__ region).
//
// .-white     - Use white navigation text and search field (with subtle drop shadow).
//
// Markup:
//   <nav class="navigation {{modifier_class}}">
//     <a class="navigation__logo" href="http://www.dosomething.org"><span>DoSomething.org</span></a>
//     <a class="navigation__toggle js-navigation-toggle" href="#"><span>Show Menu</span></a>
//     <div class="navigation__menu">
//       <ul class="navigation__primary">
//         <li>
//           <a href="#">
//             <strong class="navigation__title">Explore Campaigns</strong>
//             <span class="navigation__subtitle">Any cause, any time, anywhere.</span>
//           </a>
//         </li>
//       </ul>
//       <ul class="navigation__secondary">
//         <li>
//           <form action="#" method="post">
//             <input class="text-field -search" type="search">
//           </form>
//         </li>
//         <li>
//           <a href="#">Log In</a>
//         </li>
//       </ul>
//     </div>
//   </nav>
//
// Styleguide Navigation
.navigation {
  width: 100%;

  @include media($tablet) {
    padding: $base-spacing 0;
  }

  // Use white navigation text and search field (with subtle drop shadow).
  &.-white {
    @include media($tablet) {
      a {
        color: #fff;
        text-shadow: $text-shadow;
      }

      .text-field {
        color: #fff;
        text-shadow: $text-shadow;
        border: 1px solid #fff;
        box-shadow: 0 1px 3px rgba(#000, 0.2),
        inset 0 1px 3px rgba(#000, 0.2);
      }

      .text-field.-search {
        background-image: data-url($data-search-white-svg);

        .modernizr-no-svg & {
          background-image: neue-asset-url("images/fallbacks/search_white.png");
        }
      }
    }

    .navigation__toggle {
      color: #fff;
      text-shadow: $text-shadow;
    }
  }

  // Navigation should float above following elements on the page.
  &.-floating {
    position: absolute;
    top: 0;
    margin-bottom: 0;
    z-index: 100;
  }

  // Mobile navigation view
  &.is-visible {
    @include media($mobile) {
      .navigation__logo {
        position: fixed;
      }

      .navigation__toggle {
        position: fixed;
        color: #fff;
      }

      .navigation__menu {
        display: block;
        animation: zoomIn 0.5s;
      }
    }
  }

  a {
    color: $off-black;
    text-decoration: none;
    text-shadow: $text-emboss;
  }
}

// DoSomething.org logo container
.navigation__logo {
  float: left;
  padding: gutter();

  &:after {
    content: "";
    display: block;
    background: neue-asset-url("images/logo.svg");
    width: 72px;
    height: 60px;
  }

  .modernizr-no-svg &:after {
    background: neue-asset-url("images/logo.png");
  }

  @include media($mobile) {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9998;
  }

  @include media($tablet) {
    @include span(2);
    min-width: 96px;
    padding: 0 gutter();
  }

  @include media($desktop) {
    &:after {
      margin-left: gutter();
    }
  }

  span {
    @include visually-hidden;
  }
}

// Mobile "hamburger" menu toggle
.navigation__toggle {
  position: absolute;
  top: gutter();
  right: gutter();
  padding: gutter();
  z-index: 9998;

  &:after {
    @include icomoon-icon;
    content: "\e608";
    font-size: 32px;
    text-decoration: none;
  }

  @include media($tablet) {
    display: none;
  }

  span {
    @include visually-hidden;
  }
}

// Contents of menu, toggled on-and-off on mobile.
.navigation__menu {
  display: none;
  z-index: 100;

  @include media($mobile) {
    background: $off-black;
    position: fixed;
    width: 100%;
    height: 100%;
    overflow: auto;

    a {
      color: #fff;
      text-align: center;
    }

    .navigation__primary li {
      min-height: 78px;
      margin: 10vh 0;
    }
  }

  @include media($tablet) {
    @include clearfix;
    display: block;
  }
}

// Primary navigation elements (such as "Explore Campaigns").
.navigation__primary {
  list-style-type: none;
  padding: 0;

  > li {
    line-height: 1.2;
    padding: 18px gutter();
    transition: padding 0.5s;

    @include media($tablet) {
      float: left;
      display: block;
      min-width: span(2);
      margin: 0 gutter() 0 0;
      text-align: left;
    }

    @include media($desktop) {
      padding: gutter();
    }
  }

  a {
    display: block;
  }

  .navigation__title {
    display: block;
    font-weight: $weight-bold;
  }

  .navigation__subtitle {
    font-size: $font-smaller;
    opacity: 0.8;

    @include media($tablet) {
      display: none;
    }

    @include media($desktop) {
      display: block;
    }
  }
}

// Secondary navigation elements (such as search or "Log In").
.navigation__secondary {
  display: block;
  list-style-type: none;
  margin: 0 gutter();
  padding: 0;

  @include media($tablet) {
    float: right;
  }

  > li {
    font-size: 18px;
    line-height: 1.4;
    text-align: center;
    padding: gutter();
    margin: 0;

    @include media($tablet) {
      float: left;
      display: block;
      text-align: left;
      padding: gutter() 0;
      border-bottom: 0;

      // Add spacing between adjacent menu items
      + li {
        margin-left: $base-spacing;
      }
    }
  }

  .text-field {
    background-color: transparent;
    color: #fff;
    padding-top: 5px;
    padding-bottom: 5px;
    border: 1px solid #fff;
    box-shadow: 0 1px 0 rgba(#000, 0.2),
    inset 0 1px 0 rgba(#000, 0.2);
    transition: width 0.5s;

    @include media($tablet) {
      width: 100px;
      color: $off-black;
      border: 1px solid $off-black;
      box-shadow: 0 1px 0 rgba(#fff, 0.2),
      inset 0 1px 0 rgba(#fff, 0.2);
    }

    @include media($large) {
      width: 200px;
    }
  }

  .text-field.-search {
    background-image: data-url($data-search-white-svg);

    @include media($tablet) {
      background-image: data-url($data-search-black-svg);

      .modernizr-no-svg & {
        background-image: neue-asset-url("images/fallbacks/search_black.png");
      }
    }

    .modernizr-no-svg & {
      background-image: neue-asset-url("images/fallbacks/search_white.png");
    }
  }

  a {
    display: block;
    font-weight: $weight-bold;
    padding: 6px 9px;
  }
}

.navigation__dropdown {
  padding-top: 0;

  @include media($tablet) {
    padding-top: 12px;
  }

  ul {
    display: block;
    margin-top: 0;
    list-style-type: none;

    @include media($tablet) {
      // Hide, but preserve horizontal spacing for dropdown items.
      visibility: hidden;
      overflow: hidden;
      height: 0;
    }

    li {
      padding: 0 ($base-spacing / 4);
      text-align: right;

      @include media($tablet) {
        display: block;
        clear: both;
        float: none;
      }
    }

  }

  a, ul {
    font-weight: normal;
    text-shadow: none;
  }

  .navigation__dropdown-toggle {
    display: none;
    position: relative;
    cursor: pointer;
    font-weight: $weight-bold;
    padding: 6px 9px;

    @include media($tablet) {
      display: block;
      text-align: right;
      padding-right: 32px;

      &:after {
        @include icomoon-icon;
        content: "\e607";
        display: inline-block;
        position: absolute;
        right: 0;
        top: 1px;
        font-size: 32px;
        transform: rotate(90deg);
      }
    }
  }

  &.is-visible {
    color: $off-black;
    padding: 0;
    border-radius: $lg-border-radius;
    margin-top: ($base-spacing / 2);

    @include media($tablet) {
      background-color: #fff;
      padding-bottom: ($base-spacing / 2);

      .navigation__dropdown-toggle {
        color: $purple;
        text-shadow: none;
      }
    }

    ul {
      visibility: visible;
      overflow: visible;
      height: auto;

      a {
        color: $off-black;
        text-shadow: none;
        padding: 2px 9px;

        &:hover {
          text-decoration: underline;
        }
      }
    }
  }
}

// When menu is open, prevent scrolling on mobile breakpoint.
// See also: _chrome.scss
.chrome.has-mobile-menu {
  @include media($mobile) {
    position: fixed;
  }
}