// Navigation styling for breakpoint 1024

@media screen and ( min-width: 1024px )

.walk-group-link, .data-group-link
  display: flex

.navbar
  @include default-trans
  align-items: center
  background-color: $env-primary
  height: $navbar-height

.nav-scrolled
  @include default-trans
  top: -$navbar-height
  .nav-group-content
    @include default-trans
    height: 10vh
  .nav-brand
    @include default-trans
    height: 8vh
    //max-height: 100px
    // max-height breaks vertical centering

.nav-scrolled
  background-color: $env-primary
  // overwrite mobile

.nav-brand
  @include default-trans
  display: flex
  position: absolute
  //max-height: 100px
  // max-height breaks vertical centering
  height: 10vh
  top: 7.5vh
  margin-top: 0

  .site__logo
    position: absolute
    height: $brand-height

.nav-list
  display: flex
  justify-content: flex-end
  align-items: center
  height: inherit
  top: 0
  transform: none
  border-top: none
  height: 5vh
  padding: 0
  background-color: inherit
  box-shadow: none
  margin-block-start: 0
  padding: 0
  overflow: visible

.nav-group
  padding: 0 2rem

.nav-group-content
  //text-indent: 2rem
  &:last-child
    margin-right: 10rem
  .nav-link
    margin: 0

.nav-link
  align-items: center
  padding: 0
  height: auto
  opacity: 1
  margin: 0
  overflow: hidden
  position: relative

.sub-link,
.subsub-link
  color: $env-primary

  span
    padding: 1rem 0
    border-bottom: solid 1px rgba($pure-white, 0)

.nav-cta
  @include default-trans
  color: $pure-white
  background-color: $env-primary
  //padding: 2rem 2rem!important
  margin-right: 8rem!important
  border-radius: 6px

  span
    padding: 0

  &:before, &:after
    display: none!important

  &:hover
    background-color: darken($env-primary,10)
    border-bottom: none

// Surround current link with ticks
.current--url
  &:before, &:after
    content: ""
    display: inline-block
    height: 2px
    position: relative
    vertical-align: middle
    width: 6px

  &:before
    right: 3px

  &:after
    left: 3px

.current--env
  span
    border-bottom: solid 1px $pure-white

.nav-group-content
  @include default-trans
  @include navbar-color
  align-items: center
  justify-content: flex-end
  position: absolute
  top: 5vh
  left: 0
  width: 100vw
  padding: 0
  height: $secondary-navbar-height
  //max-height: 100px

  .current--url
    &:before, &:after
      background-color: $env-primary

.nav-group-content .nav-link
  margin: 0

.burger
  display: none

.nav-subsub-content
  background-color: $pure-white
  box-shadow: 1px 1px 1px rgba($pure-black, .1)
  visibility: hidden
  opacity: 0
  border-radius: 6px
  z-index: 1
  position: absolute
  padding: 1rem 0
  margin-left: 3rem
  transform: translateY(10px)
  .subsub-link
    &:hover
      background: $white

  &:before
    background: inherit
    content: ""
    display: block
    height: 16px
    width: 16px
    left: 5px
    position: absolute
    bottom: 100%
    border-radius: 2px
    transform: rotate(-45deg) translateY(14px)
    z-index: -1

.nav-group-container
  .nav-link
    font-weight: $heavy-font
    text-transform: uppercase
    padding: 1rem 3rem
    &:not(.current--url)
      &:hover
        span
          border-bottom: solid 1px $env-primary

.nav-group-container:hover > .nav-subsub-content
  visibility: visible
  opacity: 1
  transform: translateY(0px)
  transition: opacity .1s ease-in, transform .2s ease-in

.nav-subsub-content .sub-link
  transition: background-color .1s ease-in

.nav-subsub-content .sub-link:hover
  background-color: $white
  transition: background-color .1s ease-in