/* brand:auto:start — CSS estrutural, sem nomes de classe do site */

/* 1. A âncora do logo não pode esticar: largura exata do conteúdo */
header .brand,
header a[href="/"]:has(> img[src*="logo"]) {
  display: inline-flex !important;
  flex: 0 0 auto !important;
  align-self: center !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: max-content !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: 0 !important;
  line-height: 0 !important;
  float: none !important;
  position: static !important;
  transform: none !important;
}

/* 2. A imagem manda no tamanho */
header .brand > img,
header .brand__logo,
header a[href="/"]:has(> img[src*="logo"]) > img {
  display: block !important;
  height: 40px !important;
  width: auto !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  vertical-align: middle !important;
  position: static !important;
}

/* 3. O vizinho do logo absorve o espaço livre e fica colado nele */
header .brand + * {
  flex: 0 0 auto !important;
  margin-left: 0 !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  text-align: left !important;
  position: static !important;
}

/* 4. O contêiner do logo para de distribuir espaço */
header:has(.brand),
header *:has(> .brand),
header *:has(> * > .brand) {
  justify-content: flex-start !important;
  align-items: center !important;
}

header *:has(> .brand) {
  column-gap: 10px !important;
}

/* 5. O menu continua ancorado à direita */
header *:has(> .brand) > nav,
header *:has(> .brand) > ul,
header *:has(> .brand) > menu,
header *:has(> .brand) > *:last-child nav {
  margin-left: auto !important;
}

@media (max-width: 640px) {
  header .brand > img,
  header .brand__logo { height: 30px !important; }
}

/* brand:auto:end */