/* Busca do cabeçalho.
   O `base.html` monta `.search-box > #search-input + #search-results`, e o
   `js/search.js` põe e tira a classe `.active` no container de resultados. O
   `hidden` do HTML garante que nada apareça antes do JS rodar; o seletor
   `.active` abaixo precisa vencer esse `hidden`, daí o `display: block`. */

.search-box {
  position: relative;
  flex: 0 1 20rem;
  min-width: 0;
}

.search-box #search-input {
  width: 100%;
  padding: 0.45rem 0.75rem;
  font: inherit;
  font-size: 0.9rem;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 4px;
}

.search-box #search-input:focus {
  outline: 2px solid var(--accent-light);
  border-color: var(--accent);
}

.search-results {
  position: absolute;
  z-index: 50;
  top: calc(100% + 0.35rem);
  left: 0;
  right: 0;
  max-height: 60vh;
  overflow-y: auto;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  box-shadow: 0 6px 24px rgb(0 0 0 / 12%);
}

/* Vence o atributo `hidden` do markup quando o JS marca `.active`. */
.search-results[hidden] {
  display: none;
}

.search-results.active {
  display: block;
}

a.search-result {
  display: block;
  padding: 0.6rem 0.75rem;
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--border-light);
}

a.search-result:last-child {
  border-bottom: 0;
}

a.search-result:hover,
a.search-result:focus {
  background: var(--accent-light);
}

.search-result-title {
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--accent);
}

.search-result-excerpt {
  margin-top: 0.15rem;
  font-size: 0.82rem;
  line-height: 1.4;
  color: var(--ink-light);
}

.search-no-results {
  padding: 0.75rem;
  font-size: 0.85rem;
  color: var(--ink-lighter);
}

@media (max-width: 640px) {
  .search-box {
    flex-basis: 100%;
    order: 3;
    margin-top: 0.5rem;
  }
}