/* ==========================================================================
   FONDOPRO — SEARCH-BOX.CSS
   Box di ricerca testuale condiviso (.fp-search-box): input + pulsante con
   icona lente. Usato in più pagine (Fonti Istitutive, FAQ, e le prossime
   pagine con contenuti filtrabili) — un solo posto da aggiornare per
   tutte. Il markup tipico:
   <form class="fp-search-box" role="search">
     <input type="search" class="fp-search-box__input" ...>
     <button type="submit" class="fp-search-box__btn" aria-label="Cerca">
       <i class="bi bi-search" aria-hidden="true"></i>
     </button>
   </form>
   ========================================================================== */

.fp-search-box {
  display: flex;
  width: 100%;
  max-width: 320px;
}

.fp-search-box__input {
  flex: 1 1 auto;
  min-width: 0; /* permette al flex item di restringersi sotto il suo content-width naturale */
  border: 1.5px solid var(--color-gray-border); /* era gray-light: 1,7:1, ora 3,4:1 */
  border-right: none;
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  font-family: inherit;
  font-size: var(--fs-body);
  color: var(--color-text-primary);
  background-color: #ffffff;
}
.fp-search-box__input:focus-visible {
  /* Prima: outline tolto e sostituito da un alone #e6eef5 (1,2:1 su
     bianco, invisibile). Ora stesso doppio anello globale di style.css,
     più il bordo che diventa blu. */
  border-color: var(--color-blue-primary);
  outline: 3px solid var(--focus-ring-outer);
  outline-offset: 2px;
  box-shadow: var(--focus-ring);
}
/* Safari/iOS aggiunge una "x" nativa alle input[type=search] con doppia
   icona sovrapposta alla nostra: la rimuoviamo, il campo resta comunque
   cancellabile normalmente da tastiera. */
.fp-search-box__input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}

.fp-search-box__btn {
  flex-shrink: 0;
  border: 1.5px solid var(--color-gray-border);
  border-left: none;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background-color: var(--color-gray-lighter);
  color: var(--color-text-secondary);
  padding-inline: var(--space-4);
  cursor: pointer;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}
.fp-search-box__btn:hover {
  background-color: var(--color-gray-light);
  color: var(--color-text-primary);
}
.fp-search-box__btn:focus-visible {
  outline: 3px solid var(--focus-ring-outer);
  outline-offset: 2px;
  box-shadow: var(--focus-ring);
}