/* One logo component, with explicit context sizes. Header defaults stay intact;
   header/footer layout components own position and surrounding spacing. */
.sfui-header-logo {
  --sfui-brand-width: 196px;
  --sfui-brand-width-tablet: 176px;
  --sfui-brand-height: 60px;
  --sfui-brand-width-mobile: 244px;
  --sfui-brand-height-mobile: 72px;
  display: flex;
  align-items: center;
  width: var(--sfui-brand-width);
  max-width: 100%;
  min-width: 0;
}
.sfui-header-logo__image {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: var(--sfui-brand-height);
  object-fit: contain;
  object-position: left center;
}
@media (min-width: 992px) and (max-width: 1199.98px) {
  .sfui-header-logo { width: var(--sfui-brand-width-tablet); }
}
@media (max-width: 991.98px) {
  .sfui-header-logo { width: min(100%,var(--sfui-brand-width-mobile)); }
  .sfui-header-logo__image { max-height: var(--sfui-brand-height-mobile); object-position: center; }
}
/* Footer uses the configured footer image/fallback, never a second sizing rule. */
.sfui-header-logo--footer {
  --sfui-brand-width: 240px;
  --sfui-brand-width-tablet: 240px;
  --sfui-brand-width-mobile: 240px;
  --sfui-brand-height: 72px;
  --sfui-brand-height-mobile: 72px;
}
.sfui-header-logo--footer .sfui-header-logo__image { object-position: left center; }