/* site-header + nav + flyout.
   Quebra única em 834px (medida no estudo): acima, barra com painel suspenso;
   abaixo, botão "Menu" com painel de tela cheia e o grupo em sanfona. */

.site-header {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 40;
  background: var(--nav-bg);
  border-bottom: 1px solid var(--color-border);
  transition: background-color var(--duration-normal);
}

.nav {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  height: var(--nav-height);
}

/* ---------- marca ---------- */
.nav__brand {
  display: flex;
  align-items: center;
  flex: none;
  margin-right: auto;
}
.nav__brand img {
  display: block;
  height: var(--nav-logo-height);
  width: auto;
}
.nav__brand .logo-escuro,
:root[data-tema="escuro"] .nav__brand .logo-claro {
  display: none;
}
:root[data-tema="escuro"] .nav__brand .logo-escuro {
  display: block;
}

/* ---------- lista principal ---------- */
.nav__list {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}

.nav__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  height: var(--nav-height);
  font-size: 0.9375rem;
  color: var(--color-text-muted);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--duration-fast) var(--ease-out);
}
.nav__link:hover,
.nav__link[aria-expanded="true"],
.nav__link[aria-current="page"] {
  color: var(--color-text);
}
.nav__link[aria-current="page"] {
  box-shadow: inset 0 -2px 0 var(--color-accent);
}
.nav__link:focus-visible {
  outline-offset: -0.75rem;
}

/* seta do item que abre painel */
.nav__link[aria-expanded]::after {
  content: "";
  width: 0.375rem;
  height: 0.375rem;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: translateY(-0.125rem) rotate(45deg);
  transition: transform var(--duration-fast) var(--ease-out);
}
.nav__link[aria-expanded="true"]::after {
  transform: translateY(0.0625rem) rotate(-135deg);
}

/* ---------- seletor de idioma ---------- */
.nav__idiomas,
.site-footer__idiomas {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.nav__idiomas a,
.site-footer__idiomas a {
  color: var(--color-text-muted);
  text-decoration: none;
  padding-block: 0.5rem;
}
.nav__idiomas a:hover,
.site-footer__idiomas a:hover,
.nav__idiomas a[aria-current],
.site-footer__idiomas a[aria-current] {
  color: var(--color-text);
}
.nav__idiomas a[aria-current],
.site-footer__idiomas a[aria-current] {
  box-shadow: inset 0 -1px 0 currentColor;
}
/* na barra só cabe em telas largas; no rodapé aparece sempre */
@media (max-width: 1180px) {
  .nav__idiomas {
    display: none;
  }
}

/* ---------- utilitários ---------- */
.nav__utility {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  margin-left: auto;
}

.nav__tema {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 2.75rem;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-dado);
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.nav__tema::before {
  content: "";
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 50%;
  border: 1px solid currentColor;
  background: linear-gradient(90deg, currentColor 50%, transparent 50%);
}
.nav__tema:hover {
  color: var(--color-text);
}

.nav__menu,
.nav__acao-painel {
  display: none;
}

/* ---------- painel suspenso (flyout) ---------- */
.nav__flyout {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  background: var(--nav-flyout-bg);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-0.375rem);
  transition:
    opacity var(--duration-normal) var(--ease-out),
    transform var(--duration-normal) var(--ease-out),
    visibility 0s linear var(--duration-normal);
}
.nav__flyout[data-open="true"] {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}

.nav__flyout-grade {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: var(--space-7);
  padding-block: var(--space-7) var(--space-6);
}

.nav__grupo-titulo {
  margin-bottom: var(--space-4);
}

/* grupo "categorias": tipo grande, numerado, em duas colunas */
.nav__grupo--categorias ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-flow: column;
  grid-template-rows: repeat(4, auto);
  column-gap: var(--space-6);
  counter-reset: categoria;
}
.nav__grupo--categorias li {
  counter-increment: categoria;
  border-top: 1px solid var(--color-border);
}
.nav__grupo--categorias a {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  padding-block: var(--space-3);
  font-size: clamp(1.25rem, 1.9vw, 1.625rem);
  font-weight: var(--weight-light);
  letter-spacing: var(--tracking-titulo);
  text-decoration: none;
}
.nav__grupo--categorias a::before {
  content: counter(categoria, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-dado);
  color: var(--color-text-muted);
}
.nav__grupo--categorias a:hover {
  color: var(--color-accent);
}

/* grupos em lista simples */
.nav__grupo--lista ul {
  display: grid;
  gap: var(--space-1);
}
.nav__grupo--lista a {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--space-2);
  padding-block: var(--space-2);
  font-size: var(--text-md);
  text-decoration: none;
}
.nav__grupo--lista a:hover {
  color: var(--color-accent);
}
.nav__sobre {
  color: var(--color-text-muted);
}
.nav__grupo--lista .selo {
  margin-left: var(--space-1);
}

.nav__flyout-rodape {
  border-top: 1px solid var(--color-border);
  padding-block: var(--space-4);
}
.nav__todos {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 2.75rem;
  font-size: 0.9375rem;
  font-weight: var(--weight-medium);
  text-decoration: none;
}

/* véu sobre a página enquanto o painel está aberto */
.nav__veu {
  position: fixed;
  inset: 0;
  z-index: 30;
  background: var(--color-scrim);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--duration-normal) var(--ease-out),
    visibility 0s linear var(--duration-normal);
}
.nav__veu[data-open="true"] {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

/* ---------- entre 834px e 1068px: barra mais justa ---------- */
@media (max-width: 1068px) {
  .nav {
    gap: var(--space-4);
  }
  .nav__list {
    gap: var(--space-4);
  }
  .nav__utility {
    gap: var(--space-2);
  }
  .nav__tema span {
    display: none;
  }
}

/* ---------- abaixo de 834px: menu de tela cheia ---------- */
@media (max-width: 833px) {
  .nav {
    gap: var(--space-4);
  }
  .nav__utility {
    margin-left: 0;
  }
  .nav__utility .btn {
    display: none;
  }
  .nav__tema span {
    display: none;
  }
  .nav__tema {
    min-width: 2.75rem;
    justify-content: center;
  }

  .js .nav__menu {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 2.75rem;
    order: 3;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-dado);
    text-transform: uppercase;
  }
  .nav__menu::before {
    content: "";
    width: 1.125rem;
    height: 0.4375rem;
    border-top: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
    transition: height var(--duration-fast) var(--ease-out);
  }
  .nav__menu[aria-expanded="true"]::before {
    height: 0;
    border-bottom: 0;
  }

  /* sem JS, os links ficam visíveis numa linha rolável */
  .nav__painel {
    order: 4;
    overflow-x: auto;
  }
  .nav__list {
    gap: var(--space-5);
  }

  .js .nav__painel {
    position: fixed;
    inset: calc(var(--nav-height) + env(safe-area-inset-top, 0px) + 1px) 0 0;
    overflow: hidden auto;
    overscroll-behavior: contain;
    background: var(--nav-bg);
    padding: var(--space-4) var(--gutter-right) var(--space-7) var(--gutter-left);
    display: none;
  }
  .js .nav__painel[data-open="true"] {
    display: block;
  }
  .js .nav__list {
    display: block;
  }
  .js .nav__item {
    border-bottom: 1px solid var(--color-border);
  }
  .js .nav__link {
    width: 100%;
    height: auto;
    min-height: 3.75rem;
    justify-content: space-between;
    font-size: var(--text-xl);
    font-weight: var(--weight-light);
    letter-spacing: var(--tracking-titulo);
    color: var(--color-text);
  }
  .nav__link[aria-current="page"] {
    box-shadow: none;
  }

  .nav__flyout {
    position: static;
    display: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    border: 0;
    background: none;
    transition: none;
  }
  .nav__flyout[data-open="true"] {
    display: block;
  }
  .nav__flyout > .w {
    padding-inline: 0;
  }
  .nav__flyout-grade {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-6);
    padding-block: var(--space-2) var(--space-5);
  }
  .nav__grupo--categorias ul {
    grid-template-columns: minmax(0, 1fr);
    grid-auto-flow: row;
    grid-template-rows: none;
  }
  .nav__grupo--categorias a {
    font-size: var(--text-lg);
  }
  .nav__flyout-rodape {
    border-top: 0;
    padding-block: 0 var(--space-5);
  }

  .js .nav__acao-painel {
    display: flex;
    justify-content: center;
    margin-top: var(--space-6);
  }

  .nav__veu {
    display: none;
  }

  /* trava a rolagem da página enquanto o menu está aberto */
  .nav-aberta,
  .nav-aberta body {
    overflow: hidden;
  }
}

/* ---------- menu do celular aberto com a página rolada ----------
   Com a rolagem travada, a barra "sticky" saía da tela e levava o botão
   Fechar junto. Aberto o menu, a barra fica presa ao topo visível. */
@media (max-width: 833px) {
  .nav-aberta .site-header {
    position: fixed;
    top: env(safe-area-inset-top, 0px);
    left: 0;
    right: 0;
  }
  /* idiomas dentro do menu do celular (header.js copia o seletor da barra) */
  .nav__idiomas--painel {
    display: flex;
    justify-content: center;
    gap: var(--space-2);
    margin-top: var(--space-6);
  }
  .nav__idiomas--painel a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
  }
}
.nav__idiomas--painel {
  display: none;
}
@media (max-width: 833px) {
  .js .nav__idiomas--painel {
    display: flex;
  }
}
/* alvos de toque de 44 px */
.nav__idiomas a,
.site-footer__idiomas a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding-block: 0;
}
.nav__idiomas,
.site-footer__idiomas {
  gap: 0;
}
.nav__tema {
  min-height: 44px;
}

/* ---------- busca por modelo (rodada v3) ---------- */
.nav__busca {
  display: none;
  align-items: center;
  gap: var(--space-2);
  min-height: 2.75rem;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-dado);
  text-transform: uppercase;
  color: var(--color-text-muted);
}
/* sem script não há o que abrir */
.js .nav__busca {
  display: inline-flex;
}
.nav__busca:hover {
  color: var(--color-text);
}
.nav__busca svg {
  flex: none;
}
@media (max-width: 1068px) {
  .nav__busca span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .nav__busca {
    position: relative;
    min-width: 2.75rem;
    justify-content: center;
  }
}

.busca {
  width: min(100% - 2 * var(--gutter-left, 16px), 720px);
  max-width: none;
  max-height: min(100dvh - 48px, 720px);
  margin: max(24px, 8vh) auto auto;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md, 14px);
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: 0 24px 60px rgb(0 0 0 / 0.28);
  overflow: hidden;
}
.busca::backdrop {
  background: rgb(8 16 32 / 0.55);
}
.busca__caixa {
  display: flex;
  flex-direction: column;
  max-height: inherit;
}
.busca__form {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
}
.busca__campo {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 2.75rem;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-size: 1.0625rem; /* 17 px: o celular não amplia a página ao focar */
}
.busca__campo::placeholder {
  color: var(--color-text-muted);
  opacity: 1;
}
.busca__campo:focus-visible {
  outline: none;
}
.busca__form:focus-within {
  box-shadow: inset 0 -2px 0 var(--color-accent);
}
.busca__fechar {
  flex: none;
  min-height: 2.75rem;
  padding-inline: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-dado);
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.busca__fechar:hover {
  color: var(--color-text);
}
.busca__contagem {
  margin: 0;
  padding: var(--space-3) var(--space-4) 0;
}
.busca__contagem:empty {
  display: none;
}
.busca__lista {
  margin: 0;
  padding: var(--space-2) 0;
  list-style: none;
  overflow-y: auto;
}
.busca__lista:empty {
  display: none;
}
.busca__lista a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 2px var(--space-3);
  min-height: 2.75rem;
  padding: var(--space-3) var(--space-4);
  text-decoration: none;
}
.busca__lista a:hover,
.busca__lista a:focus-visible {
  background: var(--color-surface-alt);
}
.busca__nome {
  grid-column: 1 / -1;
  font-size: 1.0625rem;
  font-weight: var(--weight-medium);
}
.busca__marca {
  color: var(--color-text-muted);
}
.busca__nome .selo {
  margin-left: 0.625rem;
  vertical-align: 0.15em;
}
.busca__tipo {
  grid-column: 1;
}
.busca__categoria {
  grid-column: 2;
  justify-self: end;
  text-align: right;
}
.busca__vazio[hidden] {
  display: none;
}
.busca__vazio {
  padding: var(--space-4);
  display: grid;
  gap: var(--space-3);
}
.busca__vazio p {
  margin: 0;
  color: var(--color-text-muted);
}
.busca__saidas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
}
.busca__saidas .mais {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  margin-top: 0;
}

/* celular estreito: com o botão de busca, a barra precisa caber a partir de 320 px */
@media (max-width: 420px) {
  .nav {
    gap: var(--space-2);
  }
  .nav__utility {
    gap: 0;
  }
  .nav__brand {
    flex: 0 1 auto;
    min-width: 0;
  }
  .nav__brand img {
    height: auto;
    max-height: var(--nav-logo-height);
    width: 100%;
    max-width: 9.5rem;
  }
}