// HEADER

.header
  height: 80vh
  position: relative

  .hero
    position: absolute
    top: 0
    bottom: 0
    left: 0
    right: 0
    z-index: -1
    object-fit: cover
    width: 100%
    height: 100%

  .nav
    position: absolute
    top: 50px
    bottom: 0
    left: 0
    right: 0
    background-color: $vert
    height: 70px

    @media screen and (max-width: $size-md)
      top: 30px
      height: 50px

  .container
    display: flex
    align-items: center
    justify-content: center

    @media screen and (max-width: $size-md)
      justify-content: space-between

  .logo
    $size-border-logo: 20px
    position: relative
    padding-left: $size-border-logo
    z-index: 20
    margin-right: 40px

    &::after
      position: absolute
      content: ""
      top: -$size-border-logo
      bottom: -$size-border-logo
      left: 0
      right: -$size-border-logo
      background-color: white
      z-index: 10

    a
      display: block

    img
      position: relative
      height: 70px
      z-index: 30

      @media screen and (max-width: $size-md)
        height: 50px

  #menu
    list-style-type: none
    display: flex
    align-items: center
    padding: 0
    margin: 0

    @media screen and (max-width: $size-xl)
      font-size: .95rem

    @media screen and (max-width: $size-md)
      display: none
      position: fixed
      top: 0
      bottom: 0
      left: 0
      right: 0
      z-index: 100
      background: $vert
      flex-direction: column
      justify-content: center

      &:hover
        display: inherit

      &:hover + .close-button
        display: inherit

      img
        display: inherit

    li
      display: flex
      align-items: center

      &:last-child::after
        content: none

      &::after
        content: ""
        border-right: 2px white solid
        height: 20px

        @media screen and (max-width: $size-md)
          content: none

    a
      color: white
      display: flex
      align-items: center
      padding: 10px
      text-decoration: none
      border-top: 1px dashed transparent
      border-bottom: 1px dashed transparent

      &:hover
        border-top-color: white
        border-bottom-color: white

    img
      padding: 0 10px

      @media screen and (max-width: $size-lg) and (min-width: $size-md)
        display: none

    span
      white-space: nowrap

  .open-button
    display: none
    white-space: nowrap

    &:focus + #menu
      display: inherit

    &:focus + #menu + .close-button
      display: inherit

    @media screen and (max-width: $size-md)
      display: inherit

  .close-button
    white-space: nowrap
    display: none
    z-index: 200