/* Design Scuole Italia — child "Formigine 2" · f2-search.css
 * LA RICERCA ISTANTANEA, vestita come la ricerca nativa del tema.
 *
 * 🔴 CHE COSA È CAMBIATO IL 30/07 E PERCHÉ.
 * Prima questo file disegnava una «command palette» da editor di codice: riquadro scuro sospeso
 * al centro, campo senza etichetta, pastiglie piene colorate, barra dei tasti in fondo. Nel sito
 * non esisteva niente di simile, e si vedeva.
 *
 * Adesso ricalca la modale di ricerca del tema padre (`#search-modal`), che è a TUTTA PAGINA su
 * fondo bianco, con il titolo grande, la X in alto a destra, l'etichetta sopra il campo e la fila
 * delle pastiglie che dichiara l'ambito. Le misure qui sotto sono quelle misurate nel tema:
 * titolo 3.5rem peso 600 con crenatura -2px, pastiglie con bordo 2px e raggio 4px, testi #17324d
 * e #435a70. Le classi del tema (`h2`, `close dismiss`, `form-group`, `form-control`,
 * `cat-filters`, `custom-control-submit`) fanno il lavoro: qui si aggiunge solo ciò che al tema
 * manca, cioè l'elenco dei risultati che compaiono mentre si scrive.
 *
 * L'unica differenza voluta fra le due ricerche è il COLORE: blu istituzionale per il sito,
 * amaranto per l'area riservata, che è il colore che il design system assegna a quella sezione.
 */

/* Il fondo di pagina non scorre mentre la ricerca è aperta. */
.f2s-lock { overflow: hidden; }

.f2s-root {
  position: fixed;
  inset: 0;
  z-index: 1055;               /* sopra la testata del tema, sotto gli avvisi di sistema */
  display: flex;
  opacity: 0;
  transition: opacity .18s ease-out;
}

.f2s-root.f2s-in { opacity: 1; }
.f2s-root[hidden] { display: none; }

/* Non c'è un velo scuro: la ricerca del tema occupa tutta la pagina su fondo bianco. Il velo
   resta come elemento per non cambiare il comportamento del clic fuori dal pannello. */
.f2s-backdrop {
  position: absolute;
  inset: 0;
  background: #fff;
}

.f2s-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-height: 100%;
  overflow-y: auto;
  background: #fff;
  padding: 40px 24px 32px;
}

/* Il contenuto incolonnato come il `container` del tema, così titolo, campo e risultati stanno
   sulla stessa griglia del resto del sito. */
.f2s-testa,
.f2s-list,
.f2s-panel .f2s-live {
  width: 100%;
  max-width: 1176px;
  margin-left: auto;
  margin-right: auto;
}

/* ---------- Titolo e chiusura (come `#search-modal .h2` + `.close.dismiss`) ---------- */

.f2s-panel .h2 {
  position: relative;
  margin: 0 0 24px;
  padding-right: 64px;
  font-size: 3.5rem;
  font-weight: 600;
  letter-spacing: -2px;
  line-height: 1.1;
  color: #17324d;
}

.f2s-panel .f2s-close {
  position: absolute;
  top: 4px;
  right: 0;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #17324d;
  cursor: pointer;
  opacity: 1;
}

.f2s-panel .f2s-close svg {
  width: 28px;
  height: 28px;
  fill: currentColor;
  pointer-events: none;
}

.f2s-panel .f2s-close:hover { color: #d8333a; }
.f2s-panel .f2s-close:focus-visible { outline: 2px solid #d8333a; outline-offset: 2px; }

/* ---------- Il campo (come `.form-group` + `.form-control` del tema) ---------- */

/* L'etichetta del tema è flottante e la anima il JavaScript di Bootstrap Italia, che non conosce
   un pannello creato dopo il caricamento della pagina: qui resta ferma sopra il campo. Stessa
   misura e stesso peso dell'originale, nessuna dipendenza. */
.f2s-panel .f2s-gruppo {
  position: relative;
  margin-bottom: 20px;
}

.f2s-panel .f2s-gruppo label {
  position: static;
  display: block;
  margin-bottom: 6px;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.4;
  color: #435a70;
  cursor: pointer;
  max-width: none;
  overflow: visible;
}

.f2s-panel .f2s-input {
  height: 3.25rem;
  padding: 0 48px 0 4px;
  font-size: 1.25rem;
  font-weight: 400;
  color: #17324d;
  background: #fff;
  border: 0;
  border-bottom: 1px solid #5c6f82;
  border-radius: 0;
  box-shadow: none;
}

.f2s-panel .f2s-input:focus {
  border-bottom-color: #d8333a;
  box-shadow: 0 1px 0 0 #d8333a;
  outline: 0;
}

.f2s-panel .f2s-input::placeholder { color: #5c6f82; opacity: 1; font-weight: 300; }

.f2s-lente {
  position: absolute;
  right: 4px;
  bottom: 10px;
  pointer-events: none;
  color: #5c6f82;
}

.f2s-lente svg { width: 26px; height: 26px; fill: currentColor; }

/* ---------- La pastiglia dell'ambito (classi `cat-filters` del tema) ---------- */

.f2s-ambito {
  margin: 0 0 8px;
  flex-wrap: wrap;
}

/* Nel tema la pastiglia è un bottone che invia il modulo. Qui è una dichiarazione, non un
   comando: stesso aspetto, niente puntatore a mano e niente stato attivo. */
.f2s-ambito .custom-control-submit {
  display: inline-block;
  cursor: default;
}

.f2s-ambito .custom-control-submit:hover { text-decoration: none; }

/* 🔴 I colori del tema sono scritti per `button` (`.cat-filters .custom-control.custom-submit-primary
   button{color:#06c}`, azzurro nativo), e qui la pastiglia è uno `span`: senza queste righe restava grigia, cioè
   proprio l'informazione che deve dare. Verificato nel browser: #455b71 prima, #d8333a (rosso istituto) e #d8333a sulla pastiglia attiva, dopo.
   Gli esadecimali sono copiati dal tema, non scelti. */
.f2s-ambito .custom-control.custom-submit-primary .custom-control-submit {
  color: #d8333a;
  border-color: #d8333a;
}

.f2s-ambito .custom-control.custom-submit-redbrown .custom-control-submit {
  color: #d8333a;
  border-color: #d8333a;
}

.f2s-ambito .custom-control.custom-submit-greendark .custom-control-submit {
  color: #0e865c;
  border-color: #0e865c;
}

.f2s-nota {
  margin: 0 0 4px;
  font-size: .9375rem;
  line-height: 1.5;
  color: #435a70;
}

/* ---------- I risultati ---------- */

.f2s-list {
  list-style: none;
  margin: 12px auto 0;
  padding: 0;
  border-top: 1px solid #e3e9ee;
}

.f2s-sec {
  padding: 16px 0 4px;
  font-size: .7777777778rem;
  font-weight: 700;
  letter-spacing: .9px;
  text-transform: uppercase;
  color: #5c6f82;
}

.f2s-item {
  display: flex;
  align-items: baseline;
  gap: 24px;
  padding: 14px 8px;
  border-bottom: 1px solid #e3e9ee;
  cursor: pointer;
}

.f2s-item[aria-selected="true"] { background: #f2f6f9; }
.f2s-item[aria-selected="true"] .f2s-t { text-decoration: underline; }

.f2s-body { min-width: 0; flex: 1 1 auto; }

/* L'occhiello del tipo di contenuto: è la riga `category-top` delle schede del tema. */
.f2s-tipo {
  display: block;
  margin-bottom: 2px;
  font-size: .7777777778rem;
  font-weight: 700;
  letter-spacing: .9px;
  text-transform: uppercase;
}

.f2s-t {
  display: block;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.35;
  color: #17324d;
}

.f2s-x {
  display: block;
  margin-top: 2px;
  font-size: .9375rem;
  line-height: 1.45;
  color: #435a70;
}

.f2s-doc {
  display: block;
  margin-top: 2px;
  font-size: .8125rem;
  font-style: italic;
  color: #5c6f82;
}

.f2s-date {
  flex: 0 0 auto;
  font-size: .875rem;
  color: #5c6f82;
  white-space: nowrap;
}

/* I colori delle sezioni, gli stessi del tema (`cat-filters`). */
.f2s-greendark   { color: #0e865c; }
.f2s-bluelectric { color: #0d00ff; }
.f2s-redbrown    { color: #d8333a; }
.f2s-purplelight { color: #8c17a3; }
.f2s-petrol      { color: #00666e; }

.f2s-empty {
  padding: 20px 8px;
  font-size: 1rem;
  line-height: 1.6;
  color: #435a70;
}

.f2s-live {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- L'area riservata: stesso pannello, colore della sua sezione ---------- */

.f2s-root-ris .f2s-panel .f2s-input:focus {
  border-bottom-color: #d8333a;
  box-shadow: 0 1px 0 0 #d8333a;
}

.f2s-root-ris .f2s-panel .f2s-close:hover { color: #d8333a; }
.f2s-root-ris .f2s-panel .f2s-close:focus-visible { outline-color: #d8333a; }
.f2s-root-ris .f2s-item[aria-selected="true"] { background: #fcf0f1; }
.f2s-root-ris .f2s-nota { color: #17324d; }

/* ---------- Schermi piccoli ---------- */

@media (max-width: 991.98px) {
  .f2s-panel .h2 { font-size: 2.5rem; letter-spacing: -1px; }
}

@media (max-width: 575.98px) {
  .f2s-panel { padding: 24px 16px 24px; }
  .f2s-panel .h2 { font-size: 2rem; letter-spacing: -.5px; padding-right: 52px; }
  .f2s-panel .f2s-input { font-size: 1.125rem; }
  .f2s-item { flex-direction: column; gap: 4px; }
  .f2s-date { order: -1; }
}

@media (prefers-reduced-motion: reduce) {
  .f2s-root { transition: none; }
}