/**
 * @file
 * Section navigation
 *
 * Contains styles for the Section navigation component
 */


.section-nav {
  z-index: 1;

  @media (min-width: $break-large) {
    margin-top: 1.5rem;
    margin-bottom: 4rem;
    max-height: calc(100vh - 5rem);
    top: 5rem;
    overflow-y: auto;
    padding: 30px 20px 30px 49px;
    background-color: rgba($color-white, 0.8);
    border-radius: 0 8px 8px 0;
  }

  @media (min-width: $break-x-large) {
    padding: 30px 20px 30px 80px;
  }

  @media (min-width: $content-max + 1) {
    border-radius: 8px;
  }


  .current-page {
    font-family: $font-acumen-cond;
    font-weight: 800;
    width: 100%;
    display: inline-block;
    position: relative;
    text-transform: uppercase;
    font-size: 1.4rem;

    @media (min-width: $break-large) {
      margin: 0;
      color: $color-blue-dark;
      @include fontsize(24px);
      line-height: 1.1;
      padding-bottom: 1.3rem;
    }
  }

  &--mobile {
    & + .hero {
      &:after {
        top: -126px;
        height: calc(100% + 65px + 61px);
      }
    }

    @media (min-width: $break-large) {
      display: none;
    }
  }

  &--desktop {
    display: none;

    @media (min-width: $break-large) {
      display: block;
    }
  }

  &__toggle {
    position: relative;
    width: 100%;
    padding: 1.125rem 1rem;
    background: $color-green-dark;
    border: none;
    border-top: 1px solid $color-white;
    border-bottom: 1px solid $color-white;
    text-align: left;
    @include fontsize(16px);
    line-height: 1.3;
    font-weight: 800;
    color: $color-white;
    font-family: $font-acumen-cond;
    z-index: 2;

    &.section-nav__toggle {
      outline-offset: -6px;

      &.opened {
        border-bottom: none;
      }
    }

    @media (min-width: $break-medium) {
      padding: 1.625rem 0 1.625rem 3.125rem;
      @include fontsize(20px);
    }

    @media (min-width: $break-large) {
      display: none;
    }

    .icon {
      position: relative;
      text-transform: uppercase;

      &:before,
      &:after {
        content: "";
        position: absolute;
        top: 50%;
        right: -25px;
        margin-left: auto;
        margin-right: auto;
        display: block;
        width: 12px;
        border-bottom: 2px solid;
        height: 0px;
        -webkit-transition: 0.3s ease-in-out;
        -o-transition: 0.3s ease-in-out;
        transition: 0.3s ease-in-out;
      }

      &:after {
        transform: rotate(90deg);
      }
    }

    &.opened {
      .icon:after {
        transform: rotate(130deg);
      }
      .icon:before {
        transform: rotate(45deg);
      }
    }
  }

  &__list {
    display: none;
    margin: 0;
    padding: 0.563rem 1rem 1rem;
    background-color: $color-green-dark;
    width: 100%;
    z-index: 2;
    border-bottom: 1px solid $color-white;
    position: relative;

    @media (min-width: $break-medium) {
      padding: .5rem 3.125rem 1rem;
    }

    @media (min-width: $break-large) {
      display: block !important;
      padding: 0;
      border-bottom: 0;
      border-left:  1px solid;
      background-color:transparent;
    }

    li {
      margin: 0;
      padding: 0;
      list-style: none;
      font-weight: 600;
      &:before {
        display: none;
      }
      a:before {
        display: none;
      }

      @media (min-width: $break-large) {
        padding: 0 0 0.75rem 1.875rem;
        @include fontsize(16px);
        line-height: 1.3;
        &:last-of-type {
          padding-bottom: 0;
        }
      }
    }

    a {
      display: inline-block;
      width: 100%;
      font-weight: 400;
      color: $color-white;
      @include focus-light();

      @media (min-width: $break-large) {
        margin: 0;
        color: $color-black;
        line-height: 1.1;

        &:focus {
          @include focus-dark();
          outline-offset: 1px;
        }
        
      }

      &:hover {
        color: $color-green-light;
        background-image: none;

        @media (min-width: $break-large) {
          color: $color-green;
          text-decoration: underline;
        }
      }
    }
  }

  &__sub-list {
    margin: 0;
    padding: 0;

    @media (min-width: $break-medium) {
      @include fontsize(15px);
      line-height: 1.3;
      padding-left: 1.875rem;
      border-left: 1px solid $color-white;
    }

    li {
      margin: 0 0 .75rem;
    }
  }
}