.header-bottom {
  /* On mobile only the bar changes layout; its children keep stable dimensions. */
  transition: padding-top .22s ease, padding-bottom .22s ease;
}

.header {
  overflow-anchor: none;
}

.webglobe-header-logo,
.webglobe-header-logo .logo {
  transition: transform .22s ease;
}

.header.is-compact .header-bottom {
  padding-top: 0;
  padding-bottom: 0;
}

.header.is-compact .header-top::before {
  background: rgba(255, 255, 255, .92);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

#index header#header.is-compact {
  position: sticky;
}

@media (min-width: 768px) {
  .header,
  .header-top,
  .header-bottom,
  .header-bottom__row,
  .header-block__action-btn,
  .ps-mainmenu__tree-link,
  .ps-mainmenu__tree-dropdown-toggle,
  .ps-searchbar,
  .ps-searchbar__input {
    transition: height .22s ease, min-height .22s ease, padding .22s ease, margin .22s ease, top .22s ease, bottom .22s ease, width .22s ease, transform .22s ease, background-color .22s ease, box-shadow .22s ease;
  }

  .header.is-compact .header-bottom {
    background: rgba(255, 255, 255, .80);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    box-shadow: 0 .5rem 1.25rem rgba(0, 0, 0, .1);
  }

  .header.is-compact .header-bottom__row {
    min-height: 3rem;
  }

  .header.is-compact .header-block__action-btn {
    padding-top: .25rem;
    padding-bottom: .25rem;
  }

  .header.is-compact .header-bottom__logo .logo {
    max-height: 2.25rem;
    min-width: min(150px, 100%);
  }

  #index header#header.is-compact {
    position: fixed;
  }

  .header.is-compact .header-top {
    padding-top: 0;
    padding-bottom: 0;
    font-size: .68rem;
  }

  .header.is-compact .header-top .form-select {
    padding-top: .15rem;
    padding-bottom: .15rem;
    font-size: .68rem;
  }

  .header.is-compact .ps-mainmenu__tree-link,
  .header.is-compact .ps-mainmenu__tree-dropdown-toggle {
    padding-top: .55rem;
    padding-bottom: .55rem;
  }

  .header.is-compact .ps-searchbar {
    margin-top: .2rem;
    margin-bottom: .2rem;
  }

  .header.is-compact .ps-searchbar__input {
    padding-top: .3rem;
    padding-bottom: .3rem;
  }
}

@media (min-width: 1200px) {
  .header.is-compact {
    --webglobe-header-logo-left: clamp(1.25rem, 2vw, 2.5rem);
    --webglobe-header-logo-width: clamp(17rem, 23vw, 22rem);
  }

  .header.is-compact .webglobe-header-logo {
    top: 100%;
    bottom: auto;
    height: 1.8rem;
  }

  .header.is-compact .webglobe-header-logo .logo {
    height: 4.25rem;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .header,
  .header-top,
  .header-bottom,
  .header-bottom__row,
  .header-block__action-btn,
  .ps-mainmenu__tree-link,
  .ps-mainmenu__tree-dropdown-toggle,
  .ps-searchbar,
  .ps-searchbar__input,
  .header-bottom__logo .navbar-brand .logo,
  .webglobe-header-logo,
  .webglobe-header-logo .logo {
    transition: none;
  }
}