/*==========================================================================
  Navigation / Header
  ========================================================================== */

header
  position: relative
  z-index: 4
  border-bottom: solid 1px rgba($ctaBackground, 0.8)
  background-color: white

  .large-row
    padding: 8px 0
    +flex(flex-start, center)


    &.guest
      padding-right: column(0.5,9)

      .logo
        margin-right: auto

      nav
        ul
          height: 100%
          li
            pointer-events: all
            &.active
              pointer-events: none
            &:first-of-type
              border-right: solid 2px rgba($placeholderGray, 0.5)
              padding: 10px 45px 10px 0

            a
              text-transform: lowercase


    // Main logo
    .logo
      margin-right: column(0.9, 12)

      +respond-to-width(1024)
        margin-right: 0
      img
        position: relative
        left: -10px
        height: 60px

    form
      margin-left: auto

      .logout-button
        color: $blue
        border: 1px solid $blue
        border-radius: 6px
        background-color: transparent
        font-size: 0.8rem
        line-height: 1.1
        padding: 8px 18px
        cursor: pointer
        transition: color 0.3s, background-color 0.3s

        &:hover
          background-color: $blue
          color: white


    /* Navigation
     ========================================================================== */

    nav
      position: relative

      ul
        +flex(flex-start, center)
        padding: 0 0 0 10px

        li
          margin-right: 45px
          height: 100%

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

          a
            display: inline-block
            font-size: 0.8rem
            line-height: 1.1
            color: $semiBlack
            transition: color 0.3s
            text-decoration: none

          &:last-of-type
            margin-right: 0

          &:hover
            a
              color: $redTheme2

          &.active
            a
              pointer-events: none
              opacity: 1
              border-bottom: solid 1px
              padding-bottom: 2px

            &:hover
              a
                color: $semiBlack

  .shadow
    position: absolute
    left: 0
    bottom: -40px
    width: 100%
    height: 40px
    opacity: 0.4
    background-image: url("/img/vertical-gradient.png")
    background-size: contain

  /* Mobile Navigation
     ========================================================================== */
  +respond-to-width(850)
    height: 60px
    .small-row,
    .large-row,
    .large-row.guest
      display: none