.wwc-page-header {
  --wwc-layout-header-bar-padding-block: var(--wwc-space-4);
  --wwc-layout-header-nav-padding-top: var(--wwc-space-3);
  --wwc-layout-header-nav-padding-bottom: var(--wwc-space-4);
  --wwc-layout-header-logo-max-width: min(14rem, 40vw);
  --wwc-layout-header-logo-max-height: 3rem;
  --wwc-layout-header-title-size: var(--wwc-text-xl);
  --wwc-layout-header-eyebrow-size: var(--wwc-text-xs);
}

.wwc-page-header__bar,
.wwc-page-header__navigation,
.wwc-page-header .wwc-page-brand__logo,
.wwc-page-header .wwc-page-brand__title,
.wwc-page-header .wwc-page-brand__eyebrow {
  transition:
    padding 180ms ease,
    max-width 180ms ease,
    max-height 180ms ease,
    font-size 180ms ease,
    gap 180ms ease;
}

.wwc-page-header__bar {
  padding-block: var(--wwc-layout-header-bar-padding-block);
}

.wwc-page-header__navigation {
  padding-block: var(--wwc-layout-header-nav-padding-top) var(--wwc-layout-header-nav-padding-bottom);
}

.wwc-page-header .wwc-page-brand__logo {
  max-width: var(--wwc-layout-header-logo-max-width);
  max-height: var(--wwc-layout-header-logo-max-height);
}

.wwc-page-header .wwc-page-brand__title {
  font-size: var(--wwc-layout-header-title-size);
}

.wwc-page-header .wwc-page-brand__eyebrow {
  font-size: var(--wwc-layout-header-eyebrow-size);
}

@media (max-width: 63.99rem) {
  .wwc-page-header {
    --wwc-layout-header-bar-padding-block: var(--wwc-space-3);
    --wwc-layout-header-nav-padding-top: var(--wwc-space-3);
    --wwc-layout-header-nav-padding-bottom: var(--wwc-space-4);
    --wwc-layout-header-logo-max-width: min(11rem, 50vw);
    --wwc-layout-header-logo-max-height: 2.5rem;
    --wwc-layout-header-title-size: var(--wwc-text-lg);
    --wwc-layout-header-eyebrow-size: var(--wwc-text-xs);
  }
}

@media (min-width: 64rem) {
  .wwc-page-header--height-compact {
    --wwc-layout-header-bar-padding-block: var(--wwc-space-3);
    --wwc-layout-header-nav-padding-top: var(--wwc-space-2);
    --wwc-layout-header-nav-padding-bottom: var(--wwc-space-3);
    --wwc-layout-header-logo-max-width: 12rem;
    --wwc-layout-header-logo-max-height: 2.5rem;
    --wwc-layout-header-title-size: var(--wwc-text-lg);
    --wwc-layout-header-eyebrow-size: var(--wwc-text-xs);
  }

  .wwc-page-header--height-default,
  .wwc-page-header--height-tall.is-scrolled {
    --wwc-layout-header-bar-padding-block: var(--wwc-space-4);
    --wwc-layout-header-nav-padding-top: var(--wwc-space-3);
    --wwc-layout-header-nav-padding-bottom: var(--wwc-space-4);
    --wwc-layout-header-logo-max-width: min(14rem, 40vw);
    --wwc-layout-header-logo-max-height: 3rem;
    --wwc-layout-header-title-size: var(--wwc-text-xl);
    --wwc-layout-header-eyebrow-size: var(--wwc-text-xs);
  }

  .wwc-page-header--height-tall {
    --wwc-layout-header-bar-padding-block: var(--wwc-space-5);
    --wwc-layout-header-nav-padding-top: var(--wwc-space-4);
    --wwc-layout-header-nav-padding-bottom: var(--wwc-space-5);
    --wwc-layout-header-logo-max-width: min(16rem, 44vw);
    --wwc-layout-header-logo-max-height: 4rem;
    --wwc-layout-header-title-size: var(--wwc-text-2xl);
    --wwc-layout-header-eyebrow-size: var(--wwc-text-sm);
  }

  .wwc-page-header--height-default.is-scrolled,
  .wwc-page-header--height-compact.is-scrolled {
    --wwc-layout-header-bar-padding-block: var(--wwc-space-3);
    --wwc-layout-header-nav-padding-top: var(--wwc-space-2);
    --wwc-layout-header-nav-padding-bottom: var(--wwc-space-3);
    --wwc-layout-header-logo-max-width: 12rem;
    --wwc-layout-header-logo-max-height: 2.5rem;
    --wwc-layout-header-title-size: var(--wwc-text-lg);
    --wwc-layout-header-eyebrow-size: var(--wwc-text-xs);
  }
}

@media (prefers-reduced-motion: reduce) {
  .wwc-page-header__bar,
  .wwc-page-header__navigation,
  .wwc-page-header .wwc-page-brand__logo,
  .wwc-page-header .wwc-page-brand__title,
  .wwc-page-header .wwc-page-brand__eyebrow {
    transition: none;
  }
}