// primary nav (Y Logo)
.menu-item-home  {
  margin-left: 20px;
  display: none;
  max-width: 150px;

  @include media-breakpoint-up(lg) {
    display: block;

    a {
      min-width: 100px;
    }
  }
}

.desktop-menu {
  .page-head__top-menu {
    .col-md > div {
      align-items: center;
      display: flex;
      justify-content: flex-end;
    }
  }
}

// primary nav > first level
.page-head__main-menu .navbar > li {
  > a,
  > button {
    color: $white;
    padding: 35px 0;
    text-align: center;

    &:hover {
      @include underline;
    }
  }
}

// global nav link styles
.page-head__main-menu a {
  font-size: 18px;
  font-style: normal;
  font-stretch: normal;
  line-height: 0.85;
}

.dropdown-menu > li > a {
  white-space: normal;
}

/*
** Main "Mega Menu" dropdown
*/
.nav-home {
  float: left;

  li.dropdown {
    position: static;
    visibility: inherit;
    float: none;
    display: table-cell;
    box-sizing: border-box;
  }

  .dropdown-menu {
    background-color: $white;
    border: 1px solid $white;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
    width: 100%;
    position: absolute;
    top: 100%;
    overflow: auto;
    display: none;
    height: 0;

    &.show {
      display: flex;
      flex-wrap: wrap;
      height: auto;
    }
  }
}

.viewport {
  .page-head__main-menu {
    .nav-level-2 {
      @include cachet();

      > a:hover,
      > a:focus {
        @include underline;
      }
    }

    .dropdown-menu > li > a:focus,
    .dropdown-menu > li > a:hover {
      @include underline;
      background: none;
    }

    .nav-level-3 {
      font-family: $font-family-base;
      padding-top: 25px;

      > a {
        @include cachet(400);
        line-height: 24px;
        min-height: 34px;
        display: inline-block;
        padding: 0;
        position: relative;
        color: $white;
        text-transform: uppercase;

        @include media-breakpoint-up(lg) {
          min-height: 30px;
          color: $primary-darker;
        }
      }
    }

    .row-level-2 {
      padding: 2px 25px 37px 41px;
    }
  }

  .nav-level-2 {
    > a {
      &:hover,
      &:focus {
        background: none;
      }
    }

    &.show {
      background-color: $white;
      box-shadow: 0 4px 0 0 $white;

      > a,
      > a:hover,
      > a:focus {
        @include underline;
        position: relative;
        z-index: 1001;
        background: $white;
        box-shadow: 0 5px 0 0 $white;
        color: $primary-darker;
      }
    }
  }

  .row-level-3,
  .nav-level-4 {
    list-style: none;
    padding-left: 0;
  }

  .nav-level-4 {
    padding: 4px 0;

    a {
      @include cachet();
      font-size: 14px;
      line-height: 20px;
      text-transform: none;

      &:hover {
        @include underline;
      }
    }
  }
}

// show/hide arrows (desktop)
.page-head__main-menu .nav-level-2 {
  .fa-caret-up,
  .fa-angle-up {
    display: none;
  }

  &.show {
    .fa-caret-up,
    .fa-angle-up {
      display: inline;
    }

    .fa-caret-down,
    .fa-angle-down {
      display: none;
    }
  }
}

@include media-breakpoint-down(sm) {
  body.toolbar-vertical.with-banner {
    padding-top: 117px !important;
  }
  body.toolbar-vertical {
    .top-navs {
      margin-top: 39px;
      z-index: 500;
      &.affix {
        margin-top: 0;
      }
    }
  }

}

// pages without a banner (ex. user account page)
.without-banner {

  .banner--grey {
    .banner-cta {
      padding-top: 0;
    }
  }

  .top-navs:not(.affix),
  .top-navs, {
    background-color: $gray-700;

    div.page-head__main-menu {
      ul.navbar {
        .nav-level-2.show a {
          color: #0060af;
        }
        & > li > a,
        & > li > button {
          color: white;
        }
      }
    }
  }

  // @todo must be fixed with regions positions. This is a quick fix.
  &.user-logged-in {
    .layout-container {
      padding-top: 140px;
    }
  }

  &.user-logged-in .layout-container {
    padding-top: 0;
  }
  .error-page {
    margin-top: 30px;
  }

  main, .viewport {
    @include media-breakpoint-up(lg) {
      margin-top: 135px;
    }
  }

  .viewport {
    @include media-breakpoint-down(md) {
      margin-top: 75px;
    }
  }

  &.page-node-type-landing-page-lb,
  &.page-node-type-branch--use-lb{
    main {
      margin-top: 0;
    }
  }

  // change navbar background colours when scrolling
  .top-navs {
    background-color: rgba($primary, .8);
    transition: background-color 0.5s ease;

    @include media-breakpoint-up(lg) {
      background-color: transparent;

      // adjust main nav link colours
      &:not(.affix) .page-head__main-menu .navbar > li {
        & > a:hover,
        &.show > a,
        &.show > a:focus {
          @include underline;
        }
      }
    }

    &.affix {
      background-color: $gray-700;
    }

    &.affix.menu-in,
    &.menu-in {
      background-color: $primary;
    }
  }
}

.menu-icon .section-icon {
  background-position: 33% 50%;
  background-size: contain;
  background-repeat: no-repeat;
  height: 50px;
  margin-bottom: 15px;
  filter: invert(0.8);

  img {
    display: none;
  }

  // Section icons are set via UI and simple_menu_icons module.
}
