body {
  --vp-header-default__height-main: 3rem;
  --vp-header-default__height-main--sticky: 2rem;

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

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

  --vp-header-default__spacing-logo: 0.6rem;
  --vp-header-default__spacing-logo--sticky: 0.4rem;

  --vp-header-default__spacing-main: 1rem;
  --vp-header-default__spacing-main--sticky: var(--vp-header-default__spacing-main);

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

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

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

  transition: var(--v-transition__default);
}

.p-header-default::after {
  content: "";
  display: table;
  clear: both;
}

.p-header-default__main {
  position: relative;

  background-color: var(--v-color__light--transparent--alt1);
  box-shadow: var(--v-shadow__default);
}

.p-header-default__main-inner-wrapper {
  display: flex;
  align-items: stretch;
  transition: var(--v-transition__default);
  height: var(--vp-header-default__height-main);
  gap: var(--vp-header-default__spacing-main);
  position: relative;
  justify-content: flex-end;
}

body.is-scrolled .p-header-default__main-inner-wrapper {
  height: var(--vp-header-default__height-main--sticky);
  gap: var(--vp-header-default__spacing-main--sticky);
}

@media (min-width: 500px) {
  body {
    --vp-header-default__spacing-logo: 0.8rem;
    --vp-header-default__spacing-logo--sticky: 0.6rem;
  }
}

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

  body {
    --vp-header-default__spacing-logo: 1rem;
    --vp-header-default__spacing-logo--sticky: 0.8rem;
  }
}

@media (min-width: 1000px) {
  body {
    --vp-header-default__spacing-logo: 1.3rem;
    --vp-header-default__spacing-logo--sticky: 1.1rem;
  }
}

@media (min-width: 1300px) {
  body {
    --vp-header-default__height-main: 4rem;
    --vp-header-default__height-main--sticky: 3rem;

    --vp-header-default__spacing-logo: 1.5rem;
    --vp-header-default__spacing-logo--sticky: 1.3rem;
  }
}

@media (min-width: 1700px) {
  body {
    --vp-header-default__height-main: 6rem;
    --vp-header-default__height-main--sticky: 3rem;

    --vp-header-default__spacing-logo: 2.5rem;
    --vp-header-default__spacing-logo--sticky: 2rem;
  }
}