@use "./mixins" as *;
@use "./typography" as *;
@use "./variables" as *;

html {
  scroll-behavior: smooth;
}

.page__frame {
  background-color: $black;
  padding: 0.5rem;

  @include tablet {
    padding: 1.5rem;
  }

  @include desktop {
    padding: 1.5rem;
  }
}

.nav {
  background-color: $white;
  border-radius: 0.625rem 0.625rem 0 0;
  border-bottom: 1px solid $lightgray;

  @include tablet {
    display: block;
    border-bottom: 0px;
  }

  &__toggle {
    position: absolute;
    cursor: pointer;
    margin: 0rem 1rem;
    right: 0;

    svg {
      width: 1.5rem;
      height: 1.5rem;
      margin: 1rem 0.5rem 0 0;
    }

    .close {
      display: none;
      width: 1.25rem;
      height: 1.25rem;
    }

    .menu {
      width: 2rem;
      height: 2rem;
    }

    @include tablet {
      display: none;
    }
  }

  &__checkbox {
    display: none;
  }

  &__menu {
    list-style: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 2rem 0 2rem 0;
    margin: 0;
    width: 100%;

    li {
      display: none;

      @include tablet {
        display: block;
      }
    }

    @include tablet {
      flex-direction: row;
      justify-content: center;
      list-style: none;
      padding: 4rem 0 2rem 0;
      gap: 6rem;
    }

    @include desktop {
      padding: 4rem 0 2rem 0;
    }
  }

  &__link {
    text-decoration: none;
    @include subheading;
    color: $metal;
    padding: 0.5rem 1rem;

    transition: transform 250ms;

    &:active,
    &:focus {
      background-color: $lightgray;
      color: $midnight;
      border-radius: 1.875rem;
    }

    &:hover {
      color: $midnight;
      transform: translateY(-10px);
    }

    @include tablet {
      background-color: $white;
    }
  }
}

#nav__checkbox:checked ~ ul.nav__menu li {
  display: block;
}

#nav__checkbox:checked ~ ul.nav__menu li:first-child {
  margin-top: 1rem;
}

#nav__checkbox:checked ~ label.nav__toggle .close {
  display: block;
}

#nav__checkbox:checked ~ label.nav__toggle .menu {
  display: none;
}

.footer {
  width: 100%;
  margin: 0 auto;
  background-color: $midnight;
  padding: 4rem 1rem;
  text-align: center;
  border-radius: 0.625rem;

  @include tablet {
    padding: 4rem 0;
  }

  &__signage {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 2rem;
  }

  &__stamp {
    width: 78px;
    height: 78px;
  }

  &__logo {
    width: 50%;

    @include tablet {
      width: 20%;
    }

    @include desktop {
      width: 15%;
    }
  }

  &__slogan {
    margin-bottom: 4rem;
  }

  &__heading {
    color: $white;
  }

  &__paragraph {
    color: $white;
  }

  &__links {
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    width: 100%;

    @include tablet {
      width: 55%;
    }

    @include desktop {
      width: 35%;
    }
  }

  &__link {
    color: $white;
    text-align: left;
    border-bottom: 0.125rem solid $white;
    padding-bottom: 0.5rem;
    margin-bottom: 1rem;

    transition: transform 250ms;

    &:hover {
      color: $steel;
      transform: translateY(-10px);
    }

    @include footer-link;
  }

  a:link {
    text-decoration: none;
  }
}