@use "../abstracts/" as *;

.site-header {
  display: flex;
  justify-content: center;
  position: fixed;
  z-index: 9999;
  width: 100%;
  transition: box-shadow 300ms;

  &.box-shadow {
    box-shadow: 0 2px 12.5px $color-neutral-1000;
  }
}

.site-header .wrap {
  padding: 0 1rem;
  width: 100%;
  height: 3.5rem;
  margin-inline: auto;
  display: flex;
  justify-content: space-between;

  @media (max-width: 45em) {
    .logo {
      display: block;
      align-self: center;
      img {
        height: 1rem;
      }
    }

    .menu-toggle {
      cursor: pointer;
      top: 1rem;
      right: 1rem;
      border: none;
      display: inline-block;
      width: 1.7rem;
      aspect-ratio: 1;
      background-image: url("../../img/icons/close.svg");
      background-color: transparent;
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
      z-index: 9999;
    }

    .menu-toggle.hidden {
      width: 1.5rem;
      background-image: url("../../img/icons/ham.svg");
    }

    .nav {
      display: block;
      position: fixed;
      align-items: flex-end;
      flex-direction: column;
      height: 100%;
      width: 70%;
      top: 0;
      right: 0;
      margin-right: auto;
      padding: 3.5rem 0;
      z-index: 1000;
      transition: right 300ms;
      box-shadow: -2px 0 12.5px $color-neutral-1000;
      height: 100vh;

      &.hidden {
        right: -100%;
      }

      ul > * {
        text-align: right;
        text-transform: uppercase;
        font-size: 1rem;

        a {
          display: block;
          padding: 0.5rem 1rem;
        }

        &:not(:last-child) {
          margin-bottom: 2.2rem;
        }

        &.active {
          color: $color-accent-000;
        }
        &:hover {
          background-color: $color-neutral-1000;
        }
      }
    }
  }

  @include mq(medium) {
    padding-block: 1.5rem;
    height: unset;
    .menu-toggle {
      display: none;
    }

    .logo {
      width: 6rem;
    }

    .nav {
      ul {
        display: flex;
        gap: 3.5rem;
      }
      li {
        font-size: 0.875rem;
        transition: color 300ms;

        &.active {
          color: $color-accent-000;
        }
        &:not(.active):hover {
          color: $color-primary-300;
        }
      }
    }
  }

  @include mq(large) {
    padding-inline: 0;
  }
}

// home nav animation
.site-header.hero-intro {
  transform: translateY(-100%);
  animation: showSiteHeader 1s 6s linear forwards;
}

@keyframes showSiteHeader {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(0);
  }
}
