// Navigation

// Mobile menu toggles

.rocksite-c-menu-button {
  display: none;
  padding: 0 10px;
  transform: translateY(-75px);
  height: 60px;
  width: auto;


  svg {
    fill: var(--global--color-text-base);
  }


  &[aria-expanded*="true"] {

    transform: translate(-40px, -30px);


  }


  @include media(mobile-only) {
    display: flex;
    justify-content: space-between;
    z-index: 500;
  }

  &__open {
    display: block;

    [aria-expanded*="true"] & {
      display: none;
    }

  }

  &__close {
    display: none;

    [aria-expanded*="true"] & {
      display: block;
    }
  }


}


.rocksite-s-main-header__navigation {

  position: absolute;
  top: var(--global--admin-bar--height);
  right: 0;
  color: var(--primary-nav--color-text);
  font-size: var(--primary-nav--font-size);
  line-height: 1.15;
  margin-top: 0;
  margin-bottom: 0;

  // Mobile menu closed
  .rocksite-s-main-header__navigation__menu__container {

    position: fixed;
    visibility: hidden;
    opacity: 0;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;


    // Height of the menu-button-container using font size, line height, and total padding, plus 5px so the focus of the first item is visible.
    padding-top: calc(var(--button--line-height) * var(--primary-nav--font-size-button) + 42px + 5px);
    padding-left: var(--global--spacing-unit);
    padding-right: var(--global--spacing-unit);
    padding-bottom: var(--global--spacing-horizontal);
    background-color: var(--global--color-background);
    transition: all .15s ease-in-out;
    transform: translateY(var(--global--spacing-vertical));

    &__mobile-search {

      @include media(mobile-only) {
        width: 100%;

      }

    }

    &__mobile-menu {

      @include media(mobile-only) {

        padding: 20px 0 40px 0;

        li {

          a {

            padding-left: 0;

          }

        }

      }

    }

    &__toggle-menu {

      ul {
        list-style: none;
        padding: 0;

        .menu-item {

          &.-icon-item {

            svg {
              margin-top: 7px;
              fill: var(--global--color-text-base);
              min-width: 28px;
            }

            &:hover {

              svg {
                fill: var(--global--color-secondary-base);
              }

            }

          }

        }
      }


    }


    @include media(mobile-only) {
      height: calc(100vh - 60px);
      z-index: 499;
      overflow-x: hidden;
      overflow-y: auto;
      border: 2px solid transparent;
      top: 60px;
      padding-top: 40px;
      padding-bottom: 80px;

      .has-logo.has-title-and-tagline & {
        position: fixed;
        transform: translateY(0) translateX(100%);
      }

      .admin-bar .has-logo.has-title-and-tagline & {
        top: var(--global--admin-bar--height);
      }

      .admin-bar & {
        height: calc(100vh - var(--global--admin-bar--height));
      }

      &:focus {
        border: 2px solid var(--global--color-primary-base);
      }
    }
  }

  // Mobile menu open
  .primary-navigation-open & {

    @include media(mobile-only) {
      width: 100%;
      position: fixed;
      z-index: 2; // To be greater than the cover block and embeds.
    }

    > .primary-menu-container {
      position: absolute;
      visibility: visible;
      opacity: 1;
      transform: translateY(20px);
    }
  }

  .primary-navigation-open .has-logo.has-title-and-tagline & {
    @include media(mobile-only) {

      > .primary-menu-container {
        transform: translateX(0) translateY(0);
      }
    }
  }

  @include media(mobile) {
    position: relative;
    margin-left: auto;
    margin-right: auto;


    // Hide Mobile menu on desktop
    .rocksite-s-main-header__navigation__menu__container {
      visibility: visible;
      opacity: 1;
      position: relative;
      padding: 0;
      background-color: transparent;
      overflow: initial;
      transform: none;
      display: flex;
    }

    // Hide mobile menu toggle
    #toggle-menu {
      display: none;
    }

    // Hide sub-sub-menus
    > .primary-menu-container ul > li .sub-menu-toggle[aria-expanded="false"] ~ ul {
      display: none;
    }

    // Don't adjust position when logged-in
    .admin-bar & {
      top: initial;

      > .primary-menu-container {
        top: initial;
      }
    }
  }

  // Menu list wrapper
  > div > .rocksite-s-main-header__navigation__menu__wrapper {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    max-width: none;
    padding-left: 0;
    position: relative;


    li {
      display: block;
      position: relative;
      width: 100%;
      margin-bottom: 10px;
      line-height: 40px;

      @include media(mobile) {
        margin: 0;
        width: inherit;

        &:last-child {
          margin-right: 0;
        }
      }
    }

    // Sub-menu buttons
    .sub-menu-toggle {
      display: flex;
      height: 100%;
      width: 20px;
      padding: 0;
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      justify-content: center;
      align-items: center;
      background: transparent;
      color: currentColor;
      border: none;

      &:focus-visible {
        outline: var(--primary-nav--focus-outline);
      }

      @include media(mobile-only) {
        display: none;
      }

      .icon-up,
      .icon-down {
        height: 100%;
        display: flex;
        align-items: center;
        width: 100%;

        svg {
          position: relative;
          right: -7px;

        }
      }

      .icon-up {
        display: none;
      }

      // When the sub-menu is open, display the minus icon
      &[aria-expanded="true"] {

        &:focus {
          outline: none;
        }

        .icon-up {
          display: flex;
        }

        .icon-down {
          display: none;
        }
      }
    }

    // Sub-menus Flyout
    > li > .sub-menu {

      position: relative;

      @include media(mobile) {
        left: 20px;
        margin: 0;
        min-width: max-content;
        position: absolute;
        top: 90%;
        transition: all 0.5s ease;
        z-index: 88888;


        &.submenu-reposition-left {

          /* rtl:ignore */
          left: 0;

          /* rtl:ignore */
          right: auto;

          &:before,
          &:after {

            /* rtl:ignore */
            left: var(--global--spacing-horizontal);

            /* rtl:ignore */
            right: auto;
          }
        }

        &.submenu-reposition-right {

          /* rtl:ignore */
          right: 0;

          /* rtl:ignore */
          left: auto;

          &:before,
          &:after {

            /* rtl:ignore */
            left: auto;

            /* rtl:ignore */
            right: var(--global--spacing-horizontal);
          }
        }
      }
    }
  }

  // Top-level Item Link Colors
  .primary-menu > .menu-item:hover > a {
    color: var(--primary-nav--color-link-hover);
  }

  .primary-menu-container {


    @include media(mobile) {
      // Better align with the site title when the menu wraps.
      margin-right: calc(0px - var(--primary-nav--padding));
      margin-left: calc(0px - var(--primary-nav--padding));

      // Top-level Menu Item
      > ul > .menu-item {
        display: flex;
        margin-top: 5px;

        > a {

          padding: var(--primary-nav--padding);

          + .sub-menu-toggle {
            margin-left: calc(5px - var(--primary-nav--padding));
          }
        }
      }
    }
  }

  // Menu Item Link
  li a {
    display: block;
    font-family: var(--primary-nav--font-family-mobile);
    font-size: var(--primary-nav--font-size-mobile);
    font-weight: var(--primary-nav--font-weight);
    padding: var(--primary-nav--padding-mobile);
    transition: all 0.1s ease-in;
    color: var(--primary-nav--color-text);
    text-decoration: none;

    @include media(mobile) {
      display: block;
      padding: var(--primary-nav--padding);
      font-family: var(--primary-nav--font-family);
      font-size: var(--primary-nav--font-size);
      font-weight: var(--primary-nav--font-weight);
    }

    + svg {
      fill: var(--primary-nav--color-text);
    }

    &:hover,
    &:link,
    &:visited {
      color: var(--primary-nav--color-text);
    }

    &:hover {
      @include hover-navigation();
    }


  }

  .current-menu-item > a:first-child,
  .current_page_item > a:first-child {
    text-decoration: underline;
    text-decoration-style: solid;
    text-decoration-color: var(--primary-nav--border-color);
    text-decoration-thickness: 2px;
    text-underline-offset: 2px;

    &:hover {
      @include hover-navigation()

    }
  }

  // Sub-menu depth indicators + text styles
  .sub-menu {
    margin: 0;
    padding-left: 40px;
    list-style: none;


    .sub-menu {
      border: none;
    }

    // Sub-menu items om wide screens.
    @include media(mobile) {

      margin-left: var(--primary-nav--padding);
      background: var(--global--color-gray-lighten);
      box-shadow: var(--global--elevation);
      padding: 16px 20px;

      // For nested sub-menus, don't duplicate the padding
      > .menu-item > .sub-menu {
        padding: 0;
      }
    }

    .menu-item {

      @include media(mobile-only) {

        &:last-child {
          margin-bottom: 0;
        }

      }

      > a {
        padding: 5px 0;
        display: block;
        font-size: var(--primary-nav--font-size-sub-menu-mobile);
        line-height: var(--global--line-height-md);
        font-style: var(--primary-nav--font-style-sub-menu-mobile);
        font-family: var(--primary-nav--font-family-sub-menu);

        @include media(mobile) {
          font-size: var(--primary-nav--font-size-sub-menu);
          font-style: var(--primary-nav--font-style);
        }
      }
    }
  }

  // Show top-level sub-menu indicators above mobile-breakpoint-only
  .menu-item-has-children {

    > .svg-icon {
      display: none;
    }

    @include media(mobile) {

      > .svg-icon {
        display: inline-block;
        height: 100%;
      }

      .sub-menu .svg-icon {
        display: none;
      }
    }

  }

  .menu-item-description {
    display: block;
    clear: both;
    font-size: var(--global--font-size-xs);
    text-transform: none;
    line-height: 1.7;

    > span {
      display: inline-block;
    }
  }


}

.rocksite-o-search-navbar {

  .search-form {
    max-width: 400px;
  }

  &__close-button {
    position: absolute;
    right: 50px;
    top: 20px;
  }

}

.rocksite-c-social-menu {

  display: flex;

  > a:not(:first-child) {
    margin-left: 10px;
  }

}

// Keep the menu pinned to the top when the menu is open.
@include media(mobile-only) {

  .lock-scrolling .site {
    position: fixed;
    max-width: 100%;
    width: 100%;
  }
}

// Close button animation for when a custom logo is present.
@keyframes canvi-close-button-transition {

  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}