/* ============================================================
   CABEÇALHO GERAL: O que este arquivo faz no site
   ------------------------------------------------------------
   Este arquivo cuida da barra de busca e dos resultados.
   Aqui ele define:
   - onde a busca fica (centralizada e com limites),
   - como o campo de texto deve parecer,
   - como aparecem os resultados (lista que abre embaixo),
   - e mensagens quando não há resultados.
   Tudo comentado linha a linha para facilitar futuras mudanças.
   ============================================================ */


/* ==========================
   INVÓLUCRO DA BARRA DE BUSCA
   ========================== */
/* A div que envolve a barra de busca inteira (campo + resultados) */
.search-bar-wrap {
  margin: 20px auto;       /* espaço acima e abaixo; centraliza horizontalmente */
  max-width: 600px;        /* largura máxima da área de busca */
  position: relative;      /* relativo para posicionar lista de resultados absolut/relat. */
}

/* ==========================
   CAMPO DE TEXTO (INPUT) DENTRO DO INVÓLUCRO
   ========================== */
/* Estilo aplicado ao input dentro do .search-bar-wrap */
.search-bar-wrap input {
  width: 100%;             /* ocupa toda a largura do invólucro */
  padding: 12px 16px;      /* espaço interno: 12px em cima/baixo e 16px nas laterais */
  font-size: 16px;         /* tamanho do texto dentro do campo */
  border-radius: 10px;     /* cantos arredondados do campo */
  border: 1px solid #CBD5D6; /* borda fina e clarinha ao redor do campo */
  outline: none;           /* tira o contorno padrão quando clica (o browser não desenha um "foco") */
}

/* ==========================
   LISTA DE RESULTADOS
   ========================== */
/* Estilo da lista que mostra os resultados da busca */
.search-results {
  list-style: none;        /* tira os marcadores (bolinhas) da lista */
  margin: 6px 0 0;         /* pequeno espaço acima, sem espaço lateral, sem espaço embaixo */
  padding: 0;              /* sem espaçamento interno padrão da lista */
  background: white;       /* fundo branco para a lista de resultados */
  border-radius: 10px;     /* cantos arredondados na caixinha dos resultados */
  box-shadow: 0 8px 20px rgba(0,0,0,0.15); /* sombra para parecer sobreposto ao conteúdo */
  max-height: 300px;       /* altura máxima antes de aparecer rolagem */
  overflow-y: auto;        /* permite rolar verticalmente se tiver muitos resultados */
}

/* ==========================
   ITEM DE RESULTADO (LINK)
   ========================== */
/* Cada item de resultado contém um link; estilo do link dentro do item */
.result-item a {
  display: block;          /* link se comporta como um bloco (ocupa toda a linha) */
  padding: 10px 14px;      /* espaço interno do link para ficar fácil de clicar */
  color: #1F2D2D;          /* cor do texto do link (escura) */
}

/* Cor de fundo quando o mouse passa por cima de um resultado */
.result-item a:hover {
  background: #E7F3F3;     /* fundo clarinho para indicar que o item está em foco */
}

/* ==========================
   MENSAGEM QUANDO NÃO HÁ RESULTADOS
   ========================== */
/* Estilo para a mensagem que aparece se nada for encontrado */
.no-results {
  padding: 10px 14px;      /* espaço interno para a mensagem */
  color: #555;             /* cor cinza para a mensagem */
}