// RND Theme
//
// General overrides - we need to split those rules to specific files

// Burger menu
.c-hamburger {
  width: 60px;
  height: 67px;
  @media screen and (min-width: 740px) {
    text-indent: 0;
    width: 125px;
  }
  @media screen and (min-width: 1150px) {
    height: 72px;
  }
  span {
    top: 31px;
    right: 15px;
    height: 4px;
    width: 30px;
    &:before,
    &:after {
      height: 4px;
    }
    &:before {
      top: -4px -6px;
    }
    &:after {
      bottom: -4px -6px;
    }
    @media (min-width: 1150px) {
      right: 20px;
      top: 35px;
    }
  }
}
// Remove fonts from campaign
.c-hamburger__text {
  font-family: "GT-Walsheim-Regular",helvetica,arial,sans-serif;
  top: 25px;
}

// Meta nav
.feature-nav__items {
  margin-top: 0;
  margin-left: 10px;
  li {
    padding: 26px 0;
    margin: 0 5px;
    &:nth-child(n+4) {
      display:none;
    }
    .menu--level-1 {
      display: none;
    }
  }
}
.feature-nav__icons {
  @media screen and (min-width: 1150px) {
    height: 72px;
  }
}
.meta-icons {
  @media screen and (min-width: 1150px) {
    height: 72px;
    .icon {
      width: 35px;
      height: 100%;
    }
  }
  .meta-icons__esu-toggle {
    font-family: "GT-Walsheim-Regular",helvetica,arial,sans-serif;
  }
  .meta-icons__login,
  .meta-icons__magnify,
  .meta-icons__esu-toggle {
    width: 32px;
    height: 67px;
    @media screen and (min-width: 740px) {
      width: 52px;
    }
    @media screen and (min-width: 1150px) {
      height: 72px;
      width: 32px;
    }
    &.active {
      background-color: #f9f9f9;
    }
    &:focus {
      outline: none; // Accessibility !
    }
    span {
      display: none;
    }
    .icon {
      margin: 20px 4px;
      fill: $colour-gainsboro-grey;
      transition-property: fill;
      transition-duration:150ms;
      @media screen and (min-width: 740px) {
        margin: 14px 4px;
        width: 35px;
        height: 35px;
      }
      @media screen and (min-width: 1150px) {
        width: 20px;
        height: 21px;
        margin: 26px 5px;
      }
    }
    &:hover,
    &:focus,
    &:active {
      .icon {
        fill: $colour-black;
      }
    }
  }
}

// Social icons
.footer__social-links {
  li {
    margin: 5px 4px 0;
    @media (min-width: 740px) {
      margin: 5px 8px 0;
    }
    a {
      -webkit-transition: 0.5s opacity;
      transition: 0.5s opacity;
      border-radius: 50%;
      background: black;
      &:hover {
        opacity: 0.6;
      }
    }
  }
  .icon {
    fill: none;
  }
}

// Theme-specific overrides for our nav tooltips to suit our RND nav
.ui-tooltip.ui-tooltip--nav {

  // Override the JS so we can keep the position within CSS
  top: 76px !important;

  //Reposition this to take our admin menu into account
  .user-logged-in & {
    top: 156px !important;
  }
}


.main-nav__wrapper.main-nav--feature__wrapper .main-nav--feature__featured-items li {
  @media screen and (min-width: 1150px) {
    padding: 26px 0;
    margin: 0 5px;
  }
}

.main-nav__wrapper.main-nav--feature__wrapper {
   @media screen and (min-width: 1150px) {
      width: 100%;
    }
  
  .feature-nav.main-nav--feature__inner-wrapper {
    @media screen and (min-width: 1150px) {
      height: 100%;
    }
  }

  .main-nav--feature__featured-items {
    @media screen and (min-width: 1150px) {
      margin-top: 0;
      height: 73px;
    }
  }
  .c-hamburger.main-nav-toggle .c-hamburger__text {
    @media screen and (min-width: 740px) {
      top: 22px;
    }
    @media screen and (min-width: 1150px) {
      top: 25px;
    }
  }
}

.main-nav__icons.main-nav__burger.feature-nav__icons.feature-nav__burger {
  height: 66px;

  @media screen and (min-width: 1150px) {
    height: 72px;
  }
}

#block-rnd17-branding {
  position: absolute;
  top: 0;
  left: 0;
}

.header__inner-wrapper .block-cr-meta-icons {
  width: 105px;
  height: 66px;

  @media screen and (min-width: 740px) {
    width: 165px;
  }
  @media (min-width: 1150px) {
    width: 120px;
  }
}

#block-rnd17-main-menu {
  #main-menu {
    display: none !important;
  }

  &.show {
    #main-menu {
      display: block !important;
      top: 70px;
      @media (min-width: 1150px) {
        top: 76px;
      }
    }
  }
}

.main-nav__wrapper.main-nav--feature__wrapper .main-nav__items.main-nav--feature__items.menu-open {
  @media (min-width: 1150px) {
    top: 76px;
  }
}

.header__inner-wrapper {
  display: block;
}

.block--cr-email-signup--head.show .block--cr-email-signup__inner-wrapper {
  @media (min-width: 1150px) {
    top: 76px;  
  }
}