/* Stable client-branding shell.
   Platform themes may style the surrounding header, but logo sizing and
   alignment remain client branding controls and must not be overridden. */

.site-header .header-inner {
  position: relative;
}

.site-header .brand {
  display: inline-flex;
  align-items: center;
  min-width: 0;
}

.site-header .brand-logo {
  display: block;
  height: auto !important;
  object-fit: contain;
}

.site-header.logo-size-small .brand-logo {
  width: 120px !important;
  max-width: min(120px, 46vw) !important;
  max-height: 48px !important;
}

.site-header.logo-size-medium .brand-logo {
  width: 164px !important;
  max-width: min(164px, 52vw) !important;
  max-height: 64px !important;
}

.site-header.logo-size-large .brand-logo {
  width: 230px !important;
  max-width: min(230px, 64vw) !important;
  max-height: 78px !important;
}

.site-header.logo-position-left .brand {
  margin-right: auto;
}

.site-header.logo-position-middle .brand {
  position: static;
  transform: none;
  margin: 0 auto;
}

.site-header.logo-position-right .nav {
  order: 1;
  margin-right: auto;
}

.site-header.logo-position-right .brand {
  order: 2;
  margin-left: auto;
}

/* Branding stays in normal flow above the permission-dependent desktop menu.
   This layer loads after themes, so it owns both rows as well as alignment. */
@media (min-width: 701px) {
  .site-header .header-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
    gap: var(--hub-card-gap, 8px);
    align-items: center;
  }

  .site-header .brand {
    grid-row: 1;
    order: initial;
    max-width: 100%;
  }

  .site-header.logo-position-left .brand {
    justify-self: start;
    margin: 0;
  }

  .site-header.logo-position-middle .brand {
    justify-self: center;
    margin: 0;
  }

  .site-header.logo-position-right .brand {
    justify-self: end;
    margin: 0;
  }

  .site-header .nav {
    grid-row: 2;
    order: initial;
    width: 100%;
    min-width: 0;
    margin: 0;
    justify-content: center;
    flex-wrap: wrap;
    border-top: 1px solid var(--hub-border);
  }
}

@media (max-width: 700px) {
  .site-header.logo-size-small .brand-logo {
    width: 110px !important;
    max-width: min(110px, 50vw) !important;
    max-height: 42px !important;
  }

  .site-header.logo-size-medium .brand-logo {
    width: 178px !important;
    max-width: min(178px, 62vw) !important;
    max-height: 62px !important;
  }

  .site-header.logo-size-large .brand-logo {
    width: 230px !important;
    max-width: min(230px, 78vw) !important;
    max-height: 76px !important;
  }

  .site-header.logo-position-middle .brand {
    position: static;
    transform: none;
    margin: 0 auto;
  }

  .site-header.logo-position-right .brand {
    margin-left: auto;
  }
}