/* ==========================================================================
   Pesquisa — "a procura dentro do registo"
   The one page in the system with nothing to show until the reader types, so
   it never opens on an empty box: the field is the set-piece, and beneath it
   the page states what is indexed and offers real places to start from.
   Results are ruled rows, the same ledger the histórico prints.
   ========================================================================== */

.pq {

  /* The results column. Narrower than the page so an excerpt keeps its
     measure while the ruled rows still span something that reads as a table. */
  --pq-lista:  56rem;
}

.pq [hidden] { display: none !important; }

.pq-sr {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* 1. Abertura ------------------------------------------------------------
   The opening is the shared .abertura (main.css). It runs shallower here than
   elsewhere: the field below it is the set-piece and must be reachable without
   scrolling on a phone. */

.pq .abertura { --abertura-pb: clamp(1.75rem, 4vw, 2.75rem); }

/* 2. O campo ------------------------------------------------------------- */

/* The field sits in its own ruled band so it reads as the page's instrument
   rather than as one more form control inside the prose. */
.pq-banda {
  border-top: 1px solid var(--c-border);
  border-bottom: 1px solid var(--c-border);
  background: var(--c-bg-2);
}

.pq-banda-inner {
  max-width: var(--measure);
  margin: 0 auto;
  padding: clamp(1.5rem, 4vw, 2.5rem) var(--gutter);
}

.pq-campo {
  position: relative;
  display: block;
  max-width: var(--pq-lista);
}

.pq-campo-lupa {
  position: absolute;
  left: var(--s-5);
  top: 50%;
  transform: translateY(-50%);
  color: var(--c-text-muted);
  pointer-events: none;
}

.pq-campo-input {
  width: 100%;
  min-height: 60px;
  padding: var(--s-4) 3.5rem var(--s-4) 3.5rem;
  font-family: var(--font-body);
  font-size: var(--t-lg);
  color: var(--c-text);
  background: var(--c-surface);
  border: 1px solid var(--c-border-2);
  border-radius: var(--radius);
  transition: border-color var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease);
  appearance: none;
}

.pq-campo-input::placeholder { color: var(--c-text-muted); opacity: 1; }
.pq-campo-input::-webkit-search-cancel-button { display: none; }

.pq-campo-input:focus-visible {
  outline: none;
  border-color: var(--c-primary);
  box-shadow: 0 0 0 3px rgba(45, 106, 79, 0.15);
}

/* Centred with a margin rather than a transform: main.css lifts every bare
   <button> by 1px on hover, and that rule replaces a translateY(-50%) used for
   centring, dropping the button half its own height every time the pointer
   crosses it. The same rule is why the resets below are explicit. */
.pq-campo-limpar {
  position: absolute;
  right: var(--s-2);
  top: 50%;
  margin-top: -24px;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  color: var(--c-text-muted);
  background: none;
  border: 0;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease),
              background-color var(--dur-fast) var(--ease);
}

.pq-campo-limpar:hover,
.pq-campo-limpar:focus-visible { color: var(--c-primary); background: var(--c-bg-2); }

/* main.css gives every bare <button> the filled primary treatment, and on
   hover a green fill, a 1px lift and a tinted shadow. None of that belongs on
   these three, so each state is put back explicitly rather than left to
   whatever the base rule does next. */
.pq-campo-limpar,
.pq-campo-limpar:hover,
.pq-campo-limpar:active,
.pq-sugestao:hover,
.pq-sugestao:active,
.pq-mais:hover,
.pq-mais:active {
  transform: none;
  box-shadow: none;
}

.pq-sugestao:hover,
.pq-sugestao:active,
.pq-mais:hover,
.pq-mais:active { background: var(--c-surface); }

/* 3. Estado -------------------------------------------------------------- */

/* Ordered rather than stacked in source order: when a term finds only
   approximations, the help and the suggestions come first and the near misses
   sit under them. In the ordinary case the help is hidden and the order is the
   source order anyway. */
.pq-corpo {
  max-width: var(--measure);
  margin: 0 auto;
  padding: clamp(2rem, 5vw, 3rem) var(--gutter) clamp(3.5rem, 9vw, 6rem);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.pq-corpo > * { width: 100%; }

.pq-estado  { order: 0; }
.pq-ajuda   { order: 1; }
.pq-aprox   { order: 2; margin-top: var(--s-4); }
.pq-lista   { order: 3; }
.pq-mais    { order: 4; width: auto; }

.pq-estado {
  max-width: var(--pq-lista);
  font-family: var(--font-mono);
  font-size: var(--t-sm);
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--c-text-muted);
  margin: 0 0 var(--s-6);
  min-height: 1.6em;
}

/* 4. Resultados ---------------------------------------------------------- */

.pq-lista {
  max-width: var(--pq-lista);
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--c-border);
}

.pq-resultado { border-bottom: 1px solid var(--c-border); }

.pq-link {
  display: grid;
  grid-template-columns: 8.5rem minmax(0, 1fr);
  gap: 0 var(--s-6);
  align-items: baseline;
  padding: var(--s-5) var(--s-3);
  color: inherit;
  text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease);
}

.pq-link:hover,
.pq-link:focus-visible { background: var(--c-bg-2); }
.pq-link:hover .pq-titulo-r { color: var(--c-primary); }

.pq-tipo {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--c-text-muted);
}

.pq-tipo-data { display: block; margin-top: var(--s-1); font-variant-numeric: tabular-nums; }

.pq-titulo-r {
  font-family: var(--font-display);
  font-size: var(--t-xl);
  font-weight: 600;
  line-height: 1.25;
  color: var(--c-text);
  transition: color var(--dur-fast) var(--ease);
}

.pq-excerto {
  grid-column: 2;
  font-size: var(--t-base);
  line-height: 1.7;
  color: var(--c-text-muted);
  margin: var(--s-2) 0 0;
  max-width: 68ch;
}

/* Pagefind wraps the matched words in <mark>. Underline carries the match for
   anyone who cannot separate the tint from the ground. */
.pq-excerto mark {
  background: none;
  color: var(--c-text);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--c-accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
}

@media (max-width: 40rem) {
  .pq-link {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-2);
    padding: var(--s-5) var(--s-2);
  }
  .pq-excerto { grid-column: 1; margin-top: 0; }
  .pq-tipo-data { display: inline; margin: 0 0 0 var(--s-3); }
}

/* 5. Mais e sugestões ---------------------------------------------------- */

.pq-mais {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  margin-top: var(--s-8);
  padding: var(--s-3) var(--s-6);
  font-family: var(--font-body);
  font-size: var(--t-base);
  font-weight: 600;
  color: var(--c-text);
  background: var(--c-surface);
  border: 1px solid var(--c-border-2);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
}

.pq-mais:hover,
.pq-mais:focus-visible { color: var(--c-primary); border-color: var(--c-primary); }

/* 6. Antes de escrever, e quando nada bate ------------------------------- */

.pq-ajuda { max-width: var(--pq-lista); }

.pq-ajuda-titulo {
  font-family: var(--font-display);
  font-size: var(--t-2xl);
  font-weight: 600;
  line-height: 1.2;
  color: var(--c-text);
  margin: 0 0 var(--s-4);
}

.pq-ajuda-texto {
  font-size: var(--t-lg);
  line-height: 1.8;
  color: var(--c-text-muted);
  max-width: 52ch;
  margin: 0 0 var(--s-8);
}

.pq-ajuda-texto b { color: var(--c-text); font-weight: 700; }

/* What the index actually covers, counted rather than described. Hairline
   rows, no boxes: this is a list of facts, not a set of cards. */
.pq-ambito {
  list-style: none;
  margin: 0 0 clamp(2.5rem, 6vw, 3.5rem);
  padding: 0;
  border-top: 1px solid var(--c-border);
}

.pq-ambito li {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr);
  gap: var(--s-5);
  align-items: baseline;
  padding: var(--s-4) var(--s-3);
  border-bottom: 1px solid var(--c-border);
}

.pq-ambito-num {
  font-family: var(--font-body);
  font-size: var(--t-xl);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--c-text);
  text-align: right;
}

.pq-ambito-nota { font-size: var(--t-base); line-height: 1.6; color: var(--c-text-muted); }
.pq-ambito-nota b { display: block; color: var(--c-text); font-weight: 700; }

.pq-rotulo {
  font-family: var(--font-mono);
  font-size: var(--t-sm);
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--c-text-muted);
  margin: 0 0 var(--s-4);
}

.pq-sugestoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin: 0 0 clamp(2.5rem, 6vw, 3.5rem);
  padding: 0;
  list-style: none;
}

.pq-sugestao {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 48px;
  padding: var(--s-2) var(--s-5);
  font-family: var(--font-body);
  font-size: var(--t-base);
  color: var(--c-text);
  background: var(--c-surface);
  border: 1px solid var(--c-border-2);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
}

.pq-sugestao:hover,
.pq-sugestao:focus-visible { color: var(--c-primary); border-color: var(--c-primary); }

.pq-sugestao-num {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  font-variant-numeric: tabular-nums;
  color: var(--c-text-muted);
}

.pq-sugestao:hover .pq-sugestao-num { color: var(--c-primary); }

/* The pointer back to browsing. A search page cannot answer "show me
   everything", and the histórico can. */
.pq-remate {
  padding-top: clamp(2rem, 5vw, 2.75rem);
  border-top: 1px solid var(--c-border);
  font-size: var(--t-base);
  line-height: 1.8;
  color: var(--c-text-muted);
  max-width: 56ch;
}

.pq-remate a { color: var(--c-primary); text-decoration-thickness: 1px; text-underline-offset: 3px; }