/* -------------------------------------------------------------------------------------------------------------------
                                                  Header elements
------------------------------------------------------------------------------------------------------------------- */
.site-header {
  position: relative;
  z-index: 2;
  @include break($mobile) {
    padding-bottom: 20px;
  }
  p {
    padding: 0;
  }

  .row-top {
    background: #fff;
    border-bottom: 1px solid #b3b3b3;
    color: #000;
    font-family: $montserrat;
    padding: 5px 0;
    min-height: 35px;
    @include break($mobile) {
      margin-top: 60px;
      background: none;
      border: none;
    }
  }

  .row-logo {
    visibility: visible;
  }

  .row-menu {
    @include break($mobile) {
      position: fixed;
      top: 0;
      left: 0;
      z-index: 100;
      width: 100%;
      background: #fff;
      height: 50px;
      box-shadow: 0 2px 2px 2px rgba(0, 0, 0, 0.4);
      border-bottom: 3px solid $red;
    }
  }

  .custom-top {
    float: left;
    @include break($mobile) {
      float: none;
      text-align: center;
      padding-bottom: 10px;
    }
  }

  .social-icons {
    float: right;
    @include break($mobile) {
      float: none;
      text-align: center;
    }
    a {
      font-size: 0;
      line-height: 0;
      display: inline-block;
      padding: 0 10px;
      @include break($mobile) {
        color: #fff;
      }
      i {
        transition: .3s;
        font-size: 20px;
      }
      &:hover {
        i {
          color: $red;
        }
      }

    }
  }

  .site-logo {
    float: left;
    padding-bottom: 5px;
    @include break($mobile) {
      text-align: center;
      float: none;
    }
    a {
      font-family: $montserrat;
      font-size: 90px;
      color: #000;
      font-weight: 700;
      line-height: 1;
      text-transform: uppercase;
      display: block;
      @include break($medium) {
        font-size: 80px;
      }
      @include break($neutral) {
        font-size: 70px;
      }
      @include break($mobile) {
        color: #fff;
        display: inline-block;
      }
    }
  }

  .header-blocks {
    float: right;
    padding: 15px 0 0 0;
    @include break($mobile) {
      float: none;
    }

  }
  .search-form-wrapper {
    position: relative;
    overflow: hidden;
    width: 64px;
    float: left;
    transition: .3s;
    @include break($medium) {
      width: 50px;
    }
    @include break($mobile) {
      width: 300px;
      float: none;
      margin-left: auto;
      margin-right: auto;
    }
    .search-form {
      visibility: visible;
      .search-field {
        height: 64px;
        border: none;
        color: #808080;
        @include break($medium) {
          height: 50px;
        }
        @include break($mobile) {
          background: #333;
        }
      }
      input[type='submit'] {
        width: 64px;
        @include break($medium) {
          width: 50px;
        }
      }
    }
    // Toggle button.
    i {
      position: absolute;
      top: 0;
      right: 0;
      background: $red;
      width: 64px;
      height: 64px;
      line-height: 64px;
      display: inline-block;
      cursor: pointer;
      text-align: center;
      color: #fff;
      font-size: 20px;
      @include break($medium) {
        width: 50px;
        height: 50px;
        line-height: 50px;
      }
      @include break($mobile) {
        display: none;
      }
      &:hover {
        color: #000;
      }
    }
    // Active state.
    &.act {
      width: 356px;
      @include break($neutral) {
        width: 300px;
      }
      i {
        display: none;
      }
    }
  }

  .listen-live {
    padding: 0 0 0 5px;
    float: left;
    @include break($mobile) {
      width: 300px;
      margin: 20px auto 0;
      padding: 0;
      float: none;
    }
    a {
      color: #fff;
      display: block;
      font-size: 20px;
      line-height: 64px;
      height: 64px;
      width: 180px;
      position: relative;
      background: $red;
      text-align: center;
      @include break($medium) {
        line-height: 50px;
        height: 50px;
        width: 140px;
        font-size: 18px;
      }
      @include break($mobile) {
        width:100%;
      }
      &::before {
        content: "\f04b";
        font-family: $font_awesome;
        margin-right: 10px;
      }
      &:hover {
        color: #000;
      }
    }
    @include break($mobile) {
      float: none;
    }

  }

}

/* Primary menu
------------------------------------------------------------ */
.header-menu {
  position: relative;
  z-index: 10;
  background: #000;
  border-bottom: 5px solid $red;
  @include break($neutral) {
    float: none;
  }

  // Common styles.
  .main-menu {
    position: relative;
    display: table;
    width: 100%;
    li {
      position: relative;
      display: block;
      z-index: 2;
      a {
        display: block;
        position: relative;
        text-decoration: none;
        font-family: $montserrat;
      }
    }
    // 1st level menus.
    > li {
      //float: left;
      //min-width: 100px;
      display: table-cell;

      // Decor line for the active item.
      &::before {
        content: "";
        position: absolute;
        background: $red;
        left: 0;
        top: -3px;
        width: 100%;
        height: 3px;
        display: none;
      }

      > a {
        color: #fff;
        font-size: 14px;
        font-weight: 700;
        text-transform: uppercase;
        line-height: 49px;
        text-align: center;
        @include break($medium) {
          font-size: 13px;
        }
        @include break($neutral) {
          font-size: 12px;
        }

      }

      // Root item hover.
      &:hover,
      &.sfHover {
        background: $red;
        > a {
          color: #fff;
        }
      }

      // Current root item.
      &.current_page_item,
      &.current-menu-item,
      &.current_page_ancestor {
        background: $red;
        //box-shadow: 0 -4px 0 2px rgba(255, 255, 255, 0.1);
        &::before {
          display: block;
        }
        > a {
          color: #fff;
        }
      }

    }
  }
  // 2nd Level.
  ul.sub-menu {
    background: #000;
    border: 1px solid #2e2e2e;
    position: absolute;
    top: 54px;
    left: 0;
    width: 220px;
    z-index: 2;
    display: none;
    // display: block !important;
    li {
      border-top: 1px solid #1a1a1a;
      &:first-child {
        border-top: none;
      }
      a {
        color: #fff;
        line-height: 1;
        padding: 10px 10px 10px 12px;
        @include break($neutral) {
          font-size: 11px;
        }
      }
      // Current sub item.
      &.current-menu-item > a,
      &.current-menu-parent > a {
        background: $red;
      }
    }
    li.sfHover > a,
    a:hover {
      background: $red;
    }

    // 3rd level.
    ul {
      left: 219px;
      top: -1px;
    }
  }
}

/* Appears on the floating row.
------------------------------------------------------------ */
.mobile-top {
  color: #000;
  text-align: right;
  font-size: 18px;
  padding: 12px 15px 0 0;
}

/* Mobile menu toggle icon.
------------------------------------------------------------ */
.mobile-menu-icon {
  display: none;
  height: 100%;
  width: 60px;
  z-index: 10;
  color: #000;
  text-align: center;
  font-size: 48px;
  text-decoration: none;
  position: absolute;
  left: 0;
  top: 0;
  background: $color_link;
  &:hover,
  &:focus,
  &:active {
    background: $color_hover;
    color: #fff;
  }
  @include break($mobile) {
    display: block;
  }
  i {
    margin: 0;
  }
  .fa-bars {
    display: block;
  }
  .fa-times {
    display: none;
  }
  .mm-opened & {
    .fa-bars {
      display: none;
    }
    .fa-times {
      display: block;
    }
  }
}

/* Mobile menu theme overrides.
------------------------------------------------------------ */
.mm-menu {
  color: $color_link;

  .mm-listview {

    // Next arrow
    .mm-next {
      background: $color_hover;
    }

    // Menu item.
    li a,
    li span {
      color: $color_link;
      padding: 8px 10px 8px 20px;
      -webkit-tap-highlight-color: $red;
    }
    // Next arrow color.
    > li > a.mm-prev::before,
    > li > a.mm-next::after {
      border-color: #fff;
    }
  }
  // Active item.
  li.current-menu-ancestor > a,
  li.current_page_item > a,
  li.current-menu-item > a {
    color: $color_hover;
    font-weight: bold;
  }

  // Header menu item.
  .mm-header {
    > a {
      color: $color_hover;
      font-size: 16px;
    }
    // Slide back arrow.
    .mm-btn {
      background: $color_hover;
      &::before,
      &::after {
        border-color: #fff;
      }
    }
  }

}