// Li psuedoclass to extend nav styles in mutiple places
.nav-underline {
  content: "";
  width: auto;
  height: 2px;
  background-color: $colour-ruby;
  position: absolute;
  bottom: -3px;
  left: 0;
  right: 0;
}

/* Main avigation styling */ 
.header__inner-wrapper {
  height: 100%;
  justify-content: space-between;

  &:after {
    content: none;
  }
  .block-system-branding-block {
    margin-right: 0;
  }

  .main-nav__wrapper {
    @include breakpoint($desktop-nav-breakpoint) {
      margin-right: 0;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      width: 75%;

    }
  }
}

.main-nav__wrapper {
  height: auto;
  margin-right: 0;

  li.menu-item {
    padding-top: 0;
    position: relative;
  }

  // UL menu
  .main-nav__items {
    top: $sm-nav-height;
    text-align: right;
    
    @include breakpoint($screen-md) {
      top: $md-nav-height;
    }

    @include breakpoint($desktop-nav-breakpoint) {
      background-color: transparent;
      top: 0;
    }

    li.item-open,
    li {
      a {
        font-size: 16px;
        line-height: 16px;

        // Transparent 'top of screen' state
        color: white;

        span {
          position: relative;
        }

        @include breakpoint($desktop-nav-breakpoint) {
          padding: 8px 7px 4px;

          span {
            color: inherit;
          }
        }
      }

      &:hover > ul {
        @include breakpoint($desktop-nav-breakpoint) {
          top: $lg-nav-height;
        }
      }
    }

    // Parent items of the menu
    &.menu--level-0 {
      @include breakpoint($desktop-nav-breakpoint) {
        width: 100%;
        text-align: center;
        height: 100%;
      }

      > li.item-open,
      > li {
         &:hover > a {
          
          color: $colour-dark-blue;

          @include breakpoint($desktop-nav-breakpoint) {
            color: white;
          }

          span {
            position: relative;
            color: inherit;

            &:after {
              @extend .nav-underline;
            }
          }
        }

        // Our JS-manipulated focus state
        &.focused >a {
          span.menu-item__text {
            border-bottom: none;

            &:after {
              @extend .nav-underline;
            }
          }
        }

        @include breakpoint($desktop-nav-breakpoint) {
          padding: 25px 0px;
          margin: 0 10px;
        }

        > a {
          font-family: $font-medium;
          font-weight: 500;
          font-size: 21px;
          line-height: 21px;
          padding: 12px 20px;
          height: 53px;
          
          &.is-active,
          &:focus {
            span.menu-item__text {
              // Override base theme, apply underline as an 'after' to allow us to style it further
              border-bottom: none;

              &:after {
                @extend .nav-underline;
              }
            }
          }

          &.is-active span.menu-item__text:after {
            @extend .nav-underline;
          }
        
          @include breakpoint($desktop-nav-breakpoint) {
            font-size: 16px;
            line-height: 16px;
            padding: 7px 5px;
            height: auto;

            // Transparent nav state
            color: white;

            header[role=banner] &,
            body.cc-banner--visible header[role=banner] & {
              color: $colour-dark-blue;
              background-image: none;
            }

            &.is-active span.menu-item__text {
              border-bottom: none;
            }
          }
        }
      }
    } 

    // First level of sub items (dropdwn)
    &.menu--level-1 {
      li.menu-item.menu-item--duplicate {
        > a {
          color: white;
          font-family: $font-medium;
          position: relative;
          font-size: 16px;
          line-height: 16px;
          padding: 16px 20px;
          height: 53px;
          @include breakpoint($desktop-nav-breakpoint) {
            &:focus {
              background-color: #3e1c43;
            }
          }

          &:after {
            width: 14px;
            border-bottom: 4px solid white;
            left: 12px;
            top: auto;
            bottom: 0;

            @include breakpoint($desktop-nav-breakpoint) {
              bottom: 10px;
            }
          }

          &:before {
            @include breakpoint($desktop-nav-breakpoint) {
              left: 34px;
              width: 10px;
              height: 10px;
              border: 11px solid transparent;
              border-bottom-color: $colour-dark-blue;
              top: -22px;
            }
          }

          &.is-active {

            // Add border to the span (to allow control over the width), rather than the :after psuedo
            span.menu-item__text {
              border-bottom: 4px solid white;
            }

            &:after {
              border-bottom: none;
            }
          }
        }

        @include breakpoint($desktop-nav-breakpoint) {
          height: 74px;
          width: 100%;
          padding: 0;

          a {
            padding: 26px 21px;
            height: 74px;

            &:focus {
              span.menu-item__text {
                border-bottom: none;
              }
            }
          }
        }
      }
      
      li.item-open a,
      li a,
      li a span {
        color: $colour-white;

        &.is-active span.menu-item__text {
          border-bottom: 2px solid $colour-white;
        }
      }

      @include breakpoint($desktop-nav-breakpoint) {
        padding-bottom: 20px !important;
      }
    }

    // First and second levels of sub items
    &.menu--level-1,
    &.menu--level-2 {
      top: 0;
      
      @include breakpoint($desktop-nav-breakpoint) {
        top: 75px;
        text-align: left;
      }
      
      li a,
      li.item-open a {
        font-family: $font-light;
        font-weight: 300;
        font-size: 16px;
        line-height: 16px;
        color: $colour-white;
        height: 44px;

        @include breakpoint($desktop-nav-breakpoint) {
          // The complex inherited styles need a little bullying to override here
          font-size: 20px !important;
          line-height: 20px !important;
        }

        &:hover {
          background-color: #3e1c43;

          &.is-active span.menu-item__text {
            border-bottom: 2px solid $colour-white;
          }
        }

        &.is-active span.menu-item__text {
          border-bottom: 2px solid $colour-white;
        }
      }

      li.menu-item,
      li.item-open.menu-item {
        @include breakpoint($desktop-nav-breakpoint) {
          padding: 0;
          height: 100%;
          width: 100%;

          a {
            padding: 12px 21px;
            height: auto;

            &:focus {
              background-color: #3e1c43;
  
              span {
                border-bottom: none;
              }
            } 
          }
        }
      }
    }

    li.item-open,
    li {

      // Reset base styles, so we're targetting the anchor and not the li
      > ul li:hover {
        background-color: transparent;
      }

      > ul li a:hover {
        background-color: #3e1c43;
      }

      &:hover >a span.menu-item__text {
        border-bottom: none;
      }
    }

    // Secondary nav items that have tertiary menu items
    &.menu--level-1 li.menu-item.menu-item--expanded {
      @include breakpoint($desktop-nav-breakpoint) {
        height: 100%;
      }
    }
    
    // Second levels of sub items
    &.menu--level-2 {
      li.menu-item {
        padding: 0;

        a {
          // Indent tertiary items
          padding-left: 40px;
          background-color: #3e1c43;

          &:hover {
            background-color: #3e1c43;
          }
        }
      } 

      @include breakpoint($desktop-nav-breakpoint) {
        display: block;
        position: relative;
        top: 0;
        height: 100%;
        max-height: 100%;
      }
    }
  } 
}

header[role=banner] {
  border-bottom: none;
  height: $sm-nav-height;

  @include breakpoint($screen-md) {
    height: $md-nav-height;
  }

   @include breakpoint($desktop-nav-breakpoint) {
    height: $lg-nav-height;
  }

  .block-cr-meta-icons,
  .meta-icons,
  .meta-icons__login,
  .meta-icons__magnify,
  .meta-icons__esu-toggle,
  .main-nav__icons.main-nav__burger,
  .c-hamburger {
    height: $sm-nav-height;

    .icon {
      fill: $colour-black;
      margin: 12px 10px;
    }

    @include breakpoint($screen-md) {
      height: $md-nav-height;

      .icon {
        margin: 17px 6px;
      }
    }

    @include breakpoint($desktop-nav-breakpoint) {
      background-color: transparent;
      height: $lg-nav-height;
    }
  }

  // Menu icon
  .c-hamburger {
    span {
      top: 23px;
      background-color: $colour-black;
      &:after,
      &:before {
        background-color: inherit;
      }
      @include breakpoint($screen-md) {
        top: 32px;
      }
    }

    &:hover,
    &:focus {
      background-color: rgba(0, 0, 0, 0.2);
    }

    &.is-active {
      background-color: white;
      span {
        background-color: transparent;

        &:before,
        &:after {
          background-color: $colour-dark-blue;
        }
      }
    } 
  }

  // States for ESU, Search and FROST button
  .meta-icons > a {
    display: block;
    float: left;
    width: 46px;
    -webkit-transition: 0.2s background-color;
    transition: 0.2s background-color;
    &:hover,
    &:focus {
      background-color: $colour-dark-blue;
      .icon {
        fill: $colour-white;
      }
    }
    &.active {
      height: $sm-nav-height;
      background-color: $colour-dark-blue;
      .path-search & {
        &.meta-icons__magnify {
          background-color: transparent;
        }
      }
      @include breakpoint($screen-md) {
       height: $md-nav-height;
      }
      @include breakpoint($desktop-nav-breakpoint) {
        height: $lg-nav-height;
      }
      .icon {
        fill: $colour-white;
      }
    }
  }

  @include breakpoint($desktop-nav-breakpoint) {
    .meta-icons > a {
      .icon {
        margin: 30px 12px;
      }
    }
  }

  .block-cr-meta-icons {
    @include breakpoint($desktop-nav-breakpoint) {
      margin-right: 5px;
      position: absolute;
      right: 0;
    }
  }

    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
    background: transparent;
    background-image: linear-gradient(0deg, rgba(0,0,0,0), rgba(0,0,0,0.5));
    -webkit-transition: background-color 350ms linear;
    transition: background-color 350ms linear;
    height: $sm-nav-height;

    // Quick-and-dirty unsticky
    position: relative;
    background: white;
    top: auto;
    left: auto;

    @include breakpoint($screen-md) {
      height: $md-nav-height;
    }

    @include breakpoint($desktop-nav-breakpoint) {
      height: $lg-nav-height;
    }

    body.cc-banner--visible & {
      position: relative;
      background-image: none;
    }

    // Tweak the styles when the nav is scrolling so has a solid background
    &.scrolling {
      background: white;
      box-shadow: 0px 5px 20px 0px rgba(0,0,0,0.2);
      height: $sm-nav-height;

      @include breakpoint($screen-md) {
        height: $md-nav-height;
      }

      @include breakpoint($desktop-nav-breakpoint) {
        height: $lg-nav-height;

        .site-logo {
          margin-top: 6px;
          width: 61px;
          height: 61px;
        }
      }

      .meta-icons a {
        .icon {
          fill: $colour-dark-blue;
        }
        &.active,
        &:hover,
        &:focus {
          background-color: $colour-dark-blue;
          .icon {
            fill: $colour-white;
          }
        }
        &.active {
          .path-search.cc-banner--visible & {
            background-color: transparent;
            .icon {
              fill: $colour-dark-blue;
            }  
          }
        }
      }

      .c-hamburger {
        span,
        span:after,
        span:before {
          background-color: $colour-dark-blue;
        }

        &.is-active {
          span {
            background-color: transparent;

            &:after,
            &:before {
              background-color: $colour-dark-blue;
            }
          }
        }
      }
    }

    .site-logo {
      margin-top: 5px;
      min-width: 0px;
      width: 40px;
      height: 40px;
      background: none;

      img {
        display: block;
        height: 100%;
        width: 100%;
      }

      @include breakpoint($screen-md) {
        width: 50px;
        height: 50px;
      }
      
      @include breakpoint($desktop-nav-breakpoint) {
        margin-top: 6px;
        width: 61px;
        height: 61px;
      }
    }

}
/* Very specific selector for search icon color on search result page
   when not scrolling and cookie banner is visible
*/
body.path-search.cc-banner--visible header[role=banner] {
  .meta-icons > a.active.meta-icons__magnify .icon {
    fill: $colour-dark-blue;
  }
}

// Ensure wrapper height matches the content, so we can display nav fully underneath
.cc_banner-wrapper {
  height: auto;
}

 header[role=banner] {
  // Cookie banner-related tweaks to make sure our icons are visible over the temporarily white header 
  body.cc-banner--visible & {
    .meta-icons > a {
      .icon {
        fill: $colour-dark-blue;
      }
      &.active,
      &:hover,
      &:focus {
        .icon {
          fill: $colour-white;
        }
      }
    }

    // Use our 'scrolling' styles here too
    .site-logo {
      @include breakpoint($desktop-nav-breakpoint) {
        margin-top: 6px;
        width: 61px;
        height: 61px;
      }
    }
  
    .c-hamburger {
      span, span:after, span:before {
        background-color: $colour-dark-blue;
      }

      &.is-active {
        span {
          background-color: transparent;
        }

        span:after, span:before {
          background-color: $colour-dark-blue;
        }
      }
    }
  }
}

header[role=banner] {
  padding: 0;

  @include breakpoint($screen-md) {
    height: 70px;
  }

  @include breakpoint($desktop-nav-breakpoint) {
    height: 80px
  }
  

  .site-logo {
    margin-top: 5px;

    @include breakpoint($desktop-nav-breakpoint) {
      margin-top: 8px;
    }

    @include breakpoint($desktop-nav-breakpoint) {
      margin-top: 9px;
    }
  }
} 

#main-menu {
  @include breakpoint($desktop-nav-breakpoint) {
    text-align: right;
  }
}