/* In-page fixed navigation */

@media (max-width: 991px) {
  .page-nav {
    display: none;
  }
}

@media (min-width: 992px) {
  .page-nav {
    margin: $spacing-04 0;
    padding-left: $spacing-03;
    width: 264px; // fixed page element: needs absolute width to avoid overflowing from cols
    border-left: 1px solid $grapefruit;
    @include typescale-06;
  }

  .page-nav__heading {
    margin: 0 0 $spacing-03 0;
    font-size: 1em;
    text-transform: uppercase;
    @include font-sans;
  }

  .page-nav__list {
    margin: 0 0 $spacing-03 0;
    padding-left: 0;
    list-style: none;
  }

  .page-nav__sublist {
    display: none;
    margin: 0;
    padding-left: $spacing-03;
    list-style: none;
  }

  .page-nav__item a {
    display: block;
    margin: $spacing-02;
    text-decoration: none;
  }

  // Bootstrap scrollspy adds .active to nav item
  .active {
    background-color: $light-grey;

    .page-nav__sublist {
      display: block;

      .active {
        border: 0;
      }
    }

    > a {
      font-weight: 600;
    }
  }
}

@media (min-width: 1200px) {
  .page-nav {
    width: 330px;
  }
}
