/* ==========================================================================
   Main header
   ========================================================================== */

header
  position: relative
  background-color: $blue

  .primary
    .grid-row
      position: relative
      height: 100px
      +flex(space-between, center)

    .logo
      margin-left: column(3, 24)
      margin-right: 20px
      display: block
      width: 18.5%
      max-width: 245px


      img
        width: 100%

    nav
      font-size: 0.9rem
      line-height: 1.2
      margin-right: 160px

      ul
        list-style: none
        margin: 0
        padding: 0
        +flex(flex-end, center)

        li
          +flex(center ,center)

          &:before
            content: '•'
            font-size: 1.2rem
            color: white

          &:first-of-type
            &:before
              display: none

          a
            display: block
            padding: 40px 18px
            position: relative
            z-index: 2
            color: white
            text-decoration: none

            &:after
              content: ''
              position: absolute
              z-index: -1
              bottom: 28px
              left: 18px
              width: calc(100% - 36px)
              height: 2px
              background-color: transparent
              transition: background 0.3s, height 0.3s, left 0.2s, width 0.2s

          &:hover
            a
              &:after
                width: calc(100% - 18px)
                height: 40px
                left: 9px
                background-color: $darkBlue

          &.active
            a
              +dubaiBold

              &:after
                background-color: $yellow !important
                left: 18px
                width: calc(100% - 36px)
                height: 2px

    .login, .logout
      position: absolute
      right: 0
      top: 0
      +flex(center, center)
      height: 100px
      width: 100px
      background-color: $lightBlue
      text-decoration: none
      transition: background 0.3s

      .placeholder
        opacity: 0.6
        text-align: center
        transition: opacity 0.3s

      span
        display: inline-block
        +sprite(-1px -1px, 28px, 13px)

      p
        color: white
        font-size: 0.9rem
        line-height: 1
        margin: 10px 0 0

      &:hover
        background-color: lighten($lightBlue, 5%)
        .placeholder
          opacity: 1

    .logout
      span
        +sprite(-35px -88px, 20px, 21px)

    +respond-to-width(1180)
      .grid-row
        height: 100px

      .logo
        margin-left: calc(#{column(1, 12)} + 20px)
        margin-right: 5px

      nav
        margin-right: 130px

      .login, .logout
        height: 100px
        width: 100px

  &.white
    background-color: white

    .login, .logout
      background-color: $lightGrey
      &:hover
        background-color: darken($lightGrey, 5%)

      span
        +sprite(-1px -15px, 28px, 13px)

      p
        color: $blue

    .logout
      span
        +sprite(-35px -65px, 20px, 21px)

    nav
      ul
        li
          a
            color: $blue

          &:hover
            a
              &:after
                background-color: $lightGrey

  .secondary
    background-color: $darkBlue
    .grid-row
      +flex(flex-end, center)

    nav
      font-size: 0.7rem
      line-height: 1.2
      margin-right: 153px

      +respond-to-width(1180)
        margin-right: 123px

      ul
        list-style: none
        margin: 0
        padding: 0
        +flex(flex-end, center)

        li
          a
            position: relative
            z-index: 2
            display: block
            padding: 22px 25px
            color: white
            letter-spacing: 1.4px
            text-transform: uppercase
            text-decoration: none

            &:after
              content: ''
              position: absolute
              z-index: -1
              bottom: 15px
              left: 25px
              width: calc(100% - 50px)
              height: 2px
              background-color: transparent
              transition: background 0.3s, height 0.3s, left 0.2s, width 0.2s

          &:hover
            a
              &:after
                width: calc(100% - 25px)
                height: 30px
                left: 12px
                background-color: $lightBlue

          &.active
            a
              &:after
                left: 25px
                width: calc(100% - 50px)
                height: 2px
                background-color: $yellow

  +respond-to-width(1000)
    .primary
      .grid-row
        height: 85px

      .logo
        margin-left: 0

      nav
        font-size: 0.8rem
        margin-right: 100px

        ul
          li
            a
              padding-left: 15px
              padding-right: 15px

      .login, .logout
        height: 85px
        width: 85px

        p
          font-size: 0.8rem

    .secondary
      nav
        font-size: 0.6rem
        margin-right: 89px

        +respond-to-width(900)
          margin-right: -25px

  +respond-to-width(760)
    display: none