/* 20-navegacao.css — Cabeçalho, barra de abas e menu completo */

.topo {
  background: var(--cor-roxo);
  padding: var(--espaco-2);
}

.marca {
  color: var(--cor-amarelo);
  font-family: var(--fonte-titulo);
  font-weight: 800;
  font-size: var(--texto-g);
  text-decoration: none;
}

/* Espaço no fim da página para a barra fixa não cobrir o conteúdo */
body {
  padding-bottom: 5rem;
}

.icone {
  width: 24px;
  height: 24px;
}

/* ---------- Barra de abas, fixa no rodapé ---------- */
.barra-abas {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 10;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  max-width: none;
  padding: 0 0 env(safe-area-inset-bottom);
  background: var(--cor-roxo);
}

.aba {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 3.5rem;
  padding: var(--espaco-1) 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--cor-branco);
  font-size: 0.8125rem;
  font-weight: 400;
  text-decoration: none;
  cursor: pointer;
}

.aba:hover {
  background: none;
  color: var(--cor-amarelo);
}

.aba[aria-current="page"] {
  color: var(--cor-amarelo);
  font-weight: 700;
}

.aba img.icone {
  border-radius: 50%;
}

/* ---------- Menu completo (popover), sobe do rodapé ---------- */
.menu-completo {
  inset: auto 0 0 0;
  width: 100%;
  max-width: none;
  max-height: 80vh;
  margin: 0;
  padding: var(--espaco-2);
  border: 0;
  border-radius: var(--raio) var(--raio) 0 0;
  background: var(--cor-branco);
  color: var(--cor-texto);
}

.menu-completo::backdrop {
  background: rgb(0 0 0 / 0.4);
}

.menu-completo ul {
  display: grid;
  gap: var(--espaco-1);
  padding: 0;
}

.menu-completo li a {
  display: block;
  padding: var(--espaco-2);
  border-radius: var(--raio);
  background: var(--cor-roxo-claro);
  font-weight: 600;
  text-decoration: none;
}

.menu-completo .button_to button {
  width: 100%;
  padding: var(--espaco-2);
}

.fechar-menu {
  display: flex;
  align-items: center;
  gap: var(--espaco-1);
  margin-left: auto;
  margin-bottom: var(--espaco-2);
  background: none;
  color: var(--cor-texto);
}

.fechar-menu:hover {
  background: none;
}