/* Shared shell refinements loaded after the base/design-system styles. */
.header-inner {
  min-height: 64px;
  transition: min-height 180ms ease;
}

.brand-logo {
  width: clamp(45px, 4.25vw, 59px);
  max-height: 56px;
  object-fit: contain;
  transition: width 180ms ease, max-height 180ms ease;
}

.nav a {
  transition: padding 180ms ease, font-size 180ms ease, color 200ms ease;
}

.site-header[data-compact="true"] .header-inner {
  min-height: 42px;
}

.site-header[data-compact="true"] .brand-logo {
  width: clamp(15px, 1.4vw, 20px);
  max-height: 26px;
}

.site-header[data-compact="true"] .nav a {
  padding-block: .08rem;
  font-size: .7rem;
}

@media (max-width: 850px) {
  .nav {
    top: 64px;
    max-height: calc(100dvh - 64px);
    overflow-y: auto;
    transition: top 180ms ease, max-height 180ms ease;
  }

  .site-header[data-compact="true"] .nav {
    top: 42px;
    max-height: calc(100dvh - 42px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .header-inner,
  .brand-logo,
  .nav,
  .nav a {
    transition: none !important;
  }
}