body {
  --vp-header__height-main: 3.5rem;
  --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)
  );

  /* Max logo width, which will be the space between the menus */
  --vp-header__width-logo: 8rem;

  --vp-header__spacing-logo: 0;
  --vp-header__spacing-logo--sticky: 0;

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

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

  /*padding-top: var(--vp-header__height-total);*/
}

:target {
  scroll-margin-top: calc( var(--vp-header__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);
}

body.is-scrolled .p-header-default {
  box-shadow: var(--v-shadow__default);
}

.p-header-default__main {
  position: relative;
}

body.is-scrolled .p-header-default__main {
  background-color: var(--v-color__dark--alt1);
}

.p-header-default__main-inner {
  display: flex;
  align-items: stretch;
  transition: var(--v-transition__default);
  position: relative;
  height: var(--vp-header__height-main);
  gap: var(--vp-header__spacing-main);
}

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

.p-header-default__logo,
.p-header-default__group {
  display: flex;
  align-items: center;
  position: relative;
}

@media (min-width: 1000px) {
  body {
    --vp-header__spacing-main: 1.5rem;
    --vp-header__spacing-menu: 2.5rem;

    --vp-header__height-main: 4.5rem;

    --vp-header__width-logo: 21rem;
  }

  body.is-scrolled {
    --vp-header__width-logo: 14rem;
  }
}

@media (min-width: 1300px) {
  body {
    --vp-header__spacing-main: 2rem;
  }

  .p-header-default__main-inner {
    justify-content: center;
  }
}

@media (min-width: 1700px) {
  body {
    --vp-header__spacing-menu: 3rem;

    --vp-header__height-main: 5rem;

    --vp-header__width-logo: 25rem;
  }

  body.is-scrolled {
    --vp-header__width-logo: 14rem;
  }
}