/****************************************************************************** 
* Header
******************************************************************************/

  .header {

    ul {
      margin-left: 0;
      padding-left: 0;

      li {
        list-style-type: none;
      }
    }
  }

/****************************************************************************** 
* Header Widgets
******************************************************************************/

  .header-widgets {
    background-color: $grey-100;
    border-bottom: 1px solid rgba($black, 0.12);
    color: $color-900;
    max-height: 60px;

    .container {
      align-items: center;
      display: flex;
      justify-content: space-between;
    }

    .menu {
      align-items: center;
      display: flex;
      float: right;
      justify-content: space-between;
      min-width: 12rem;

      li {
        line-height: 1.3;
        // min-width: 2.725em;
        padding-left: 1.5rem;
      }
    }

    a {
      color: $color-900;
      font-size: 0;
      opacity: 0.8;
      position: relative;
      text-decoration: none;

      &::before {
        color: $color-900;
        font-size: 24px;
      }

      &:hover,
      &:focus,
      &:active {
        color: inherit;

        &::before {
          color: $color-600;
        }
      }
    }

    p {
      line-height: 1.3;
      margin: 0;
    }
  } 

/****************************************************************************** 
* Header Menu
******************************************************************************/

  ul.mobile-menu {
    background-color: $color-700;
    display: none;
    height: 100vh;
    margin-top: 0;
    opacity: 1;
    position: fixed;
    right: 0;
    top: 0;
    width: 20rem;
    z-index: 40;

    li {
      border-right: 1px solid rgba($black, 0.12);
      border-top: 1px solid rgba($black, 0.12);
      flex: 1 1;
      position: relative;
      white-space: nowrap;

      &.site-brand {
        font-size: 20px;
        font-weight: 700;
        text-align: center;

        a {
          align-items: center;
          background-color: $color-800;
          border: 0.25rem solid $color-900;
          color: $color-200;
          display: flex;
          justify-content: center;
          padding: 0;
        }
      }

      .fa-icon {
        padding-left: 1.5rem;
      }

      a {
        align-items: flex-start;
        background-color: rgba($black, 0.12);
        color: $color-200;
        display: flex;
        height: 60px;
        justify-content: flex-start;
        min-width: 4rem;
        padding: 1rem;
        text-decoration: none;

        &:hover,
        &:focus,
        &:active {
          background-color: rgba($black, 0.06);
        }
      }

      ul.sub-menu,
      ul.children {
        background-color: $color-700;
        border-left: 0;
        border-left: 1px solid rgba($black, 0.24);
        display: none;
        left: 100%;
        margin-bottom: 0;
        position: static;
        top: -1px;
        /* Vertical Version */
        /*bottom: 100%;*/
        /*left: 0;*/
      }

      .header-search-bar {
        bottom: 0;
        left: 60px;
        right: 0;
        top: auto;
        width: calc(100% - 60px);
      }

      &.menu-item-type-search {
        position: relative;
      }

      &.menu-item-has-children,
      &.page_item_has_children {

        a {
          padding-right: 2rem;
        }

        > a:after {
          align-items: center;
          color: $color-400;
          content: '\f105';
          display: flex;
          font-family: 'FontAwesome';
          height: 60px;
          position: absolute;
          right: 1rem;
          top: 0;
        }

        a.current-menu-item {
          background-color: rgba($black, 0.24);
          color: $color-100;

          &::after {
            content: '\f107';
          }
        }
      }

      &.menu-item-type-expanded {

        > a, 
        > a.current-menu-item {
          padding-right: 1rem;

          &::after {
            content: '';
          }
        }
      }
    }
  }

  .header-menu {
    background-color: $color-700;
    box-shadow: 0 1.5rem 0.5rem -0.5rem rgba($black, 0.06);
    left: 0;
    max-height: 120px;
    min-height: 60px;
    // outline: 0.125rem solid rgba($black, 0.12);
    position: sticky;
    top: 0;
    -webkit-transition: all ease-in-out 600ms;
    -moz-transition: all ease-in-out 600ms;
    -ms-transition: all ease-in-out 600ms;
    -o-transition: all ease-in-out 600ms;
    transition: all ease-in-out 600ms;
    width: 100%;
    z-index: 20;

    &.header-menu-fixed {
      position: fixed;
      top: 0 !important;
    }

    a {
      align-items: center;
      color: $color-200;
      display: flex;
      height: 60px;
      justify-content: center;
      padding: 1rem;
      text-decoration: none;

      &:hover,
      /*&:focus,*/
      &:active {
        background-color: rgba($black, 0.24);
        color: $color-200;
      }
    }

    ul.primary-menu {
      align-items: center;
      background-color: transparent;
      display: flex;
      flex-wrap: wrap;
      // height: 60px;
      justify-content: flex-end;
      margin: 0;
      // border-left: 1px solid rgba($black, 0.12);
      padding: 0 0 0 120px;

      li {
        border-right: 1px solid rgba($black, 0.12);
        // border-top: 1px solid rgba($black, 0.12);
        min-width: 4rem;
        position: relative;

        &.menu-item-type-search {
          position: static;
        }

        &.menu-item-has-children,
        &.page_item_has_children {

          a {
            padding-right: 2rem;
          }

          > a:after {
            align-items: center;
            color: $color-400;
            content: '\f105';
            display: flex;
            font-family: 'FontAwesome';
            height: 60px;
            position: absolute;
            right: 1rem;
            top: 0;
          }

          a.current-menu-item {
            background-color: rgba($black, 0.24);
            color: $color-100;

            &::after {
              content: '\f107';
            }
          }
        }

        &.menu-item-type-expanded {

          > a, 
          > a.current-menu-item {
            padding-right: 1rem;

            &::after {
              content: '';
            }
          }
        }
      }
    }

    ul.sub-menu,
    ul.expanded-menu,
    ul.children {
      align-items: flex-start;
      background-color: $color-700;
      display: none;
      flex-direction: column;
      justify-content: flex-start;
      margin: 0;
      min-width: 15rem;
      padding: 0;
      position: absolute;
      // border-top: 1px solid rgba($black, 0.12);
      top: 60px;
      z-index: 30;

      li {
        border-top: 1px solid rgba($black, 0.24);
        flex: 1 1;
        white-space: nowrap;
      }

      a {
        background-color: rgba($black, 0.12);
        color: $color-300;
        justify-content: flex-start;

        &:hover,
        &:focus,
        &:active {
          background-color: rgba($black, 0.06);
        }
      }

      ul.sub-menu,
      ul.children {
        background-color: $color-700;
        border-left: 0;
        border-left: 1px solid rgba($black, 0.24);
        left: 100%;
        top: -1px;
        /* Vertical Version */
        /*bottom: 100%;*/
        /*left: 0;*/
      }
    }
  }

  .header-search-bar {
    align-items: stretch;
    display: none;
    height: 100%;
    position: absolute;
    right: 96px; 
    top: 0;
    -webkit-transition: all ease-in-out 300ms;
    -moz-transition: all ease-in-out 300ms;
    -ms-transition: all ease-in-out 300ms;
    -o-transition: all ease-in-out 300ms;
    transition: all ease-in-out 300ms;
    width: calc(100% - 248px);
    z-index: 40;

    &:hover,
    &:focus,
    &:active {
      // box-shadow: 0 0 200rem 200rem rgba($color-900, 0.92);
    }

    form {
      align-items: center;
      background-color: $color-800;
      display: flex;
      flex: 1 1;
      justify-content: center;
    }

    .search-bar-input {
      background-color: $color-800;
      border: 0;
      border-right: 1px solid rgba($black, 0.24);
      color: $white;
      height: 60px;
      padding: 0 1rem;
      width: 100%;

      &:hover,
      &:focus,
      &:active {
        box-shadow: none;
      }
    }
  }

  .header-menu-toggle {

    a {

      &.primary-menu-toggle {
        display: none;
        left: 0;
        position: absolute;
      }

      &.mobile-menu-toggle {
        background-color: $color-700;
        border-left: 1px solid rgba($black, 0.12);
        border-right: 1px solid rgba($black, 0.12);
        display: block;
        min-width: 4rem;
        position: absolute;
        right: calc(-2rem + 1px);
        text-align: center;
        width: auto;
        z-index: 20;
      }

      small {
        margin-left: 0.5rem;
        text-transform: uppercase;
      }
    }
  }

/****************************************************************************** 
* Header Brand
******************************************************************************/

  .header-brand {
    left: 2rem;
    position: absolute;
    top: 0;
    z-index: 20;

    .site-brand {
      font-size: 4.8rem;
      font-weight: 700;
      line-height: 0;
      overflow: hidden;

      a {
        align-items: center;
        background-color: $color-800;
        border: 0.25rem solid $color-900;
        color: $color-200;
        display: flex;
        height: 120px;
        justify-content: center;
        padding: 0;
        text-decoration: none;
        text-shadow: 2px 2px rgba($black, 0.24);
        -webkit-transition: none;
        -moz-transition: none;
        -ms-transition: none;
        -o-transition: none;
        transition: none;
        width: 120px;
      }
    }

    .brand-name {
      display: none;
    }
  }

  .header-brand-small {

    .site-brand {
      font-size: 20px;

      a {
        height: 61px;
        padding: 1rem;
        width: auto;
      }
    }

    .brand-name {
      display: block;
    }

    .brand-name-first-letter {
      display: none;
    }
  }

  .header-brand-full {
    left: 0;
    position: relative;

    .site-brand {
      font-size: 20px;

      a {
        height: 60px;
        width: 100%;
      }
    }

    .brand-name {
      display: block;
    }

    .brand-name-first-letter {
      display: none;
    }
  }

/****************************************************************************** 
* Header Cover
******************************************************************************/

  .header-cover {
    background-color: darken($color-600, 15);
    max-height: 100vh;
    position: relative;

    .cover-feature-image {
      min-height: 60px;

      img { 
        min-width: 100vw;
        position: relative;
        z-index: 1;
      }
    }

    .cover-overlay {
      background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAQUlEQVQoU2NkYGAwZmBgOMuAHxgzQuXxKQbLwRSC1GNTDBdDVoiuGEUjukKYYhCN4m6yFSJbh9NqojxDVPAQFeAA+14QcYoNEtMAAAAASUVORK5CYII=') repeat, rgba($black, 0.24);
      // background-attachment: fixed;
      background-color: rgba($black, 0.24);
      // background-size: cover;
      height: 100%;
      left: 0;
      position: absolute;
      top: 0;
      width: 100%;
      z-index: 2;
    }

    .cover-content {
      align-items: stretch;
      display: flex;
      // height: 100%;
      justify-content: flex-start;
      left: 50%;
      position: absolute;
      text-align: center;
      top: calc(50% + 30px);
      transform: translate(-50%, -50%);
      width: 50%;
      z-index: 3;

      .container {
        flex: 1 1;
      }

      .cover-content-inner {
        background-color: rgba($black, 0.24);
        border-radius: 0.25rem;
        color: $white;
        // max-width: 62.5%;
        padding: 2rem 2rem 1rem 2rem;
      }

      h6 {
        align-items: center;
        background-color: $color-700;
        color: $color-200;
        display: inline-flex;
        justify-content: center;
        margin: 4rem 0;
        outline: 100rem solid rgba($black, 0.24);
        padding: 1rem 2rem;
      }

      .fa {
        margin-right: 0.5rem;
      }
    }

    .cover {
      max-height: 540px;
      overflow: hidden;

      &.cover-sm {
        max-height: 180px;
        overflow: hidden;

        .cover-overlay {
          background: $color-700;
        }

        .cover-content {
          position: relative;
          top: 90px;
        }
      }

      &.cover-md {
        max-height: 720px;

        .cover-overlay {
          background: transparent;
        }
      }
    }
  }

/****************************************************************************** 
* Header Mobile
******************************************************************************/

  @media (max-width: $breakpoint-tablet) {

    .header-widgets {

      .container {
        flex-direction: column;
        min-height: 60px;
        text-align: center;
      }

      .widgets,
      .textwidget {
        align-items: center;
        display: flex;
        min-height: 60px;
      }

      .menu {
        position: absolute;
        right: 2rem;
        top: 68px;
        z-index: 30;
      }

      a:after {
        color: $white;
      }
    }

    .mobile-menu {

      li {

        a {
          height: auto;
        }

        &.site-brand {
          font-size: 30px;

          a {
            height: 80px;
          }
        }
      }
    }

    .header-menu {
      height: 80px;
      position: relative;

      .header-menu-inner {
        background-color: $color-700;
        left: 0;
        padding: 0;
        position: absolute;
        top: 80px;
        width: 100%;
        z-index: 0;
      }

      ul.primary-menu {
        display: none;
        flex-direction: column;
        height: auto;
        padding: 0;

        li {
          background-color: $color-700;
          border-bottom: 1px solid rgba($black, 0.12);
          width: 100%;

          a {
            display: flex;
            justify-content: flex-start;
            padding: 2rem;
          }

          &.menu-item-type-search {
            position: relative;
          }

          &.menu-item-has-children,
          &.page_item_has_children {

            > a:after {
              right: 2rem;
              top: 0.5rem;
            }
          }
        }
      }

      ul.sub-menu,
      ul.expanded-menu,
      ul.children {
        border: 0;
        padding: 0;
        position: static;

        li {
          border: 0;
          border-bottom: 1px solid rgba($black, 0.24);

          &:last-of-type {
            border-bottom: 0;
          }
        }

        a {
          display: block;
        }

        ul.sub-menu,
        ul.children {

          a {
            background-color: rgba($black, 0.06);
          }
        }
      }

      .header-search-bar {
        bottom: 0;
        height: 100%;
        left: 90px;
        right: 0;
        top: 0;
        width: calc(100% - 90px);

        .search-bar-input {
          border: 0.125rem solid rgba($black, 0.12);
          height: 80px;
        }
      }
    }

    .header-brand-full {

      .site-brand {

        a {
          border-left: 0;
          border-right: 0;
          font-size: 1.625rem;
          height: auto;
          padding: 1.875rem;
        }
      }
    }

    .header-menu-toggle {

      a {
        height: 80px;

        &.primary-menu-toggle {
          display: flex;
          justify-content: flex-start;
          padding: 0 2rem;
          width: 100%;
        }

        &.mobile-menu-toggle {
          left: 0;
          right: auto;
        }
      }
    }

    .header-cover {       

      .cover-feature-image {
        height: 100%;
        min-height: 80px;
        overflow: hidden;
        position: absolute;
        top: 0;
        width: 100%;

        img {
          height: 100%;
          max-width: unset;
          min-width: unset;
          width: unset;
        }
      }

      .cover-overlay {
        background: transparent;  
      }

      .cover-content {
        background: transparent;     
        height: 100%;
        left: -2rem;
        position: relative;
        transform: translate(0, 0);
        width: calc(100vw + 4rem);

        .cover-content-inner {
          height: 100%;
          max-width: 100%;
          padding-top: 120px;
        }
      }

      .cover {

        &.cover-sm {
          min-height: 265px;
          padding-top: 3rem;
          
          .cover-overlay {
            background: $color-700;
          }

          .cover-content {
            position: relative;
            top: 0;
          }
        }
      }
    }
  }