// Flexnav.
// https://css-tricks.com/snippets/css/a-guide-to-flexbox/

//************************************************************************//
// Nav -- Basic styling (e.g. in footer)
//************************************************************************//
nav {
  display: flex;
  flex-wrap: wrap;

  .item {
    flex-grow: 1;
  }

  .dropdown {
    position: relative;
  }

  #dropdown-topics {
    @include media($small-screen){
      background: darken($nav-bg, 4%);
      left: 5%;
      margin-left: 0;
      margin-top: 0;
      padding-top: 0;

      > ol {
        position: relative;
        background: $nav-bg;
      }

      li.dropdown-submenu {
        position: static;

        .dropdown-menu {
          margin-top: 0;
          height: 100%;
          width: 100%;
        }
      }
    }
  }
}

// For holding a left-justified item (like a logo) and a right-justified item
// (like a nav bar).
.nav-wrapper {
  display: flex;
  justify-content: space-between;
  padding-left: 25px;
  padding-right: 25px;

  .nav-item, a {
    padding-top: 25px;
    padding-bottom: 25px;
  }

  @include media($small-screen) {
    display: block;
    justify-content: inherit;
  }

  @include media($tablet) {
    .nav-item, a {
      padding-top: 10px;
      padding-bottom: 10px;
    }
  }
}

// Force right-justification of items in a nav bar by wrapping them in a
// .flex-end div.
.flex-end {
  display: flex;
  align-items: center;

  nav {
    display: flex;
    justify-content: flex-end;
    text-align: left;

    @include media($small-screen) {
      display: block;
      justify-content: inherit;
    }
  }

  .nav-item, a {
    padding: 25px 0px 25px 25px;
  }

  @include media($small-screen) {
    display: block;
    justify-content: inherit;
  }

  @include media($tablet) {
    .nav-item, a {
      padding: 10px 0px 10px 25px;
    }
  }
}

//************************************************************************//
// Nav -- white-on-blue style (as on home page)
//************************************************************************//

.blue-nav nav {
  background: $nav-bg;
  padding: 0 3em;

  .nav-item {
    padding: 0;
    flex-grow: 1;
  }

  a {
    @extend %nav-anchor;
    color: $nav-color;
    font-size: $base-font-size-small-1;
    font-weight: bold;
    padding: 8px 10px;
    text-align: center;

    @include media($mobile){
      font-size: $base-font-size-small-2 - 1;
      line-height: 1.4em;
    }

    &:focus {
      outline: none;
    }

    &:hover {
      color: #fff;
    }
  }

  .search {
    display: none;
  }
}
