// Navigation styling for breakpoint 1024

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

  .pwp-group-link, .clinician-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

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

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

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

  // 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

  .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
          text-decoration: underline

  .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