body {
  --vp-header__height-main: 4rem;
  --vp-header__height-main--sticky: 3rem;

  --vp-header__height-total: calc(
    var(--v-adminbar__height) +
    var(--vp-header__height-main)
  );

  --vp-header__height-total--sticky: calc(
    var(--v-adminbar__height) +
    var(--vp-header__height-main--sticky)
  );

  --vp-header__spacing-logo: 1rem;
  --vp-header__spacing-logo--sticky: 0.5rem;

  --vp-header__spacing-main: 1rem;
  --vp-header__spacing-main--sticky: var(--vp-header__spacing-main);

  padding-top: var(--v-adminbar__height);
}

:target {
  scroll-margin-top: calc( var(--vp-header__height-total--sticky) + 1rem );
}

.p-header {
  position: fixed;
  z-index: 500;
  inset: var(--v-adminbar__height) 0 auto 0;

  transition: var(--v-transition__default);

  background-color: transparent;
  box-shadow: none;
}

body.is-scrolled .p-header {
  background-color: var(--v-color__2--transparent--alt2);
  box-shadow: var(--v-shadow__default);
}

.p-header__main {
  position: relative;
}

.p-header__main-inner {
  display: flex;
  align-items: stretch;
  transition: var(--v-transition__default);
  height: var(--vp-header__height-main);
  gap: var(--vp-header__spacing-main);
  position: relative;
  justify-content: space-between;
}

body.is-scrolled .p-header__main-inner {
  height: var(--vp-header__height-main--sticky);
  gap: var(--vp-header__spacing-main--sticky);
}

@media (min-width: 500px) {
  .p-header {
    --vp-header__spacing-main: 2.3rem;
    --vp-header__spacing-main--sticky: var(--vp-header__spacing-main);
  }
}

@media (max-width: 699px) {
  body.is-menu-open .p-header {
    background-color: var(--v-color__2--transparent--alt2);
    box-shadow: var(--v-shadow__default);
  }
}

@media (min-width: 700px) {
  .p-header__main-inner {
    justify-content: flex-start;
  }
}

@media (min-width: 1000px) {
  body {
    --vp-header__height-main: 4.5rem;
    --vp-header__height-main--sticky: 3.5rem;
  }
}

@media (min-width: 1700px) {
  body {
    --vp-header__height-main: 7rem;
    --vp-header__height-main--sticky: 5rem;

    --vp-header__spacing-logo: 2rem;
    --vp-header__spacing-logo--sticky: 1rem;
  }
}