.p-header__menu {
  background-color: var(--v-color__2--transparent--alt2);
  position: absolute;
  top: var(--vp-header__height-total);
  right: 0;
  width: 100%;
  padding: var(--v-layout__container-padding);
  font-size: 1rem;

  visibility: hidden;
  opacity: 0;
  transform: translateY(1rem);
  transition: var(--v-transition__default);
  box-shadow: var(--v-shadow__menu);
}

body.is-scrolled .p-header__menu {
  top: var(--vp-header__height-total--sticky);
}

body.is-menu-open .p-header__menu {
  visibility: visible;
  opacity: 1;
  transform: translateY(0px);
}

.p-header__menu a {
  text-decoration: none;
}

.p-header__menu a:hover {
  text-decoration: underline;
}

.p-header__menu-primary {
  margin-bottom: 1rem;
}

.p-header__menu-secondary ul {
  margin-bottom: 1rem;
}

.p-header__menu-secondary > :last-child {
  margin-bottom: 0;
}

.p-header__menu-secondary-title {
  font-weight: var(--v-font-weight__default--bold);
}

.p-header__menu-close {
  position: absolute;
  z-index: 10;
  right: var(--v-spacing__sm);
  bottom: var(--v-spacing__sm);
  font-size: 3rem;
  color: var(--v-color__2);
  line-height: 1;
  cursor: pointer;
  display: none;
}

body.is-scrolled .p-header__menu-close {
  color: var(--v-color__1);
}

@media (min-width: 700px) {
  .p-header__menu {
    background-color: var(--v-color__2--transparent--alt1);
    padding: var(--v-spacing__sm);
    top: 0;
    right: var(--v-layout__container-padding);
    width: calc( 50% - ( var(--v-spacing__xs) / 2 ) - var(--v-layout__container-padding) );
    box-shadow: none;
  }

  body.is-scrolled .p-header__menu {
    top: 0;
    background-color: var(--v-color__2--transparent--alt2);
    box-shadow: var(--v-shadow__menu);
  }

  .p-header__menu-close {
    display: block;
  }
}

@media (min-width: 1500px) {
  .p-header__menu {
    font-size: 1.1rem;
  }

  .p-header__menu-primary {
    margin-bottom: 2rem;
  }
}

@media (min-width: 1700px) {
  .p-header__menu {
    font-size: 1.3rem;
  }

  .p-header__menu-primary {
    margin-bottom: 3rem;
  }

  .p-header__menu-secondary ul {
    margin-bottom: 2rem;
  }

  .p-header__menu-close {
    font-size: 4rem;
  }
}