/**
 * @file
 * Le poche cose che Bootstrap Italia non dà già.
 *
 * Tutta l'impaginazione viene dal Design System: qui restano solo la codifica
 * cromatica delle categorie, che è una scelta della committenza e non del
 * Design System, e lo stato premuto delle pastiglie del filtro. Ogni regola in
 * più sarebbe un modo per rendere la pagina riconoscibile come estranea al
 * portale.
 */

/* Il filtro nasconde con l'attributo "hidden". */
[hidden] {
  display: none !important;
}

/*
 * Titolo di categoria con il filetto della sua tinta. Il colore sta in un
 * filetto e non nel testo perché sei tinte su fondo bianco non garantiscono
 * tutte lo stesso contrasto, e il titolo deve restare leggibile comunque.
 */
.vetrina-categoria__titolo {
  border-left: 4px solid var(--categoria, #1a1a1a);
  padding-left: 0.75rem;
  margin-bottom: 0.25rem;
}

/* La scheda porta la tinta sul bordo superiore, come le card del portale. */
.vetrina-card {
  border-top: 3px solid var(--categoria, #1a1a1a);
  height: 100%;
}

/* La pastiglia porta la tinta in un quadrato, non nel fondo: stessa ragione. */
.vetrina-chip .chip-label::before {
  content: "";
  display: inline-block;
  width: 0.7em;
  height: 0.7em;
  margin-right: 0.4em;
  background-color: var(--categoria, #1a1a1a);
  vertical-align: baseline;
}

/* Stato premuto del filtro: Bootstrap Italia non ha una chip a interruttore. */
[data-pastiglie] .chip[aria-pressed="true"] {
  background-color: #06c;
  border-color: #06c;
}

[data-pastiglie] .chip[aria-pressed="true"] .chip-label {
  color: #fff;
}

[data-pastiglie] .chip[aria-pressed="true"] .chip-label::before {
  outline: 1px solid #fff;
}

/*
 * Campo di ricerca: il bottone dell'icona e il campo devono chiudere sulla
 * stessa riga. Bootstrap Italia dà a .form-control un'altezza maggiore di
 * quella naturale di .input-group-text, quindi i due filetti inferiori
 * cadevano sfalsati di sei pixel. Si risolve lasciando che l'icona si allunghi
 * quanto il campo, invece di ritoccare l'altezza a mano.
 */
.vetrina-ricerca .input-group-text {
  height: auto;
  align-self: stretch;
  display: flex;
  align-items: center;
}

/*
 * Testo delle schede.
 *
 * Bootstrap Italia dà a ".card-text" il carattere serif Lora. È una sua scelta
 * predefinita, ma su questo portale non compare in nessuna pagina: fra i
 * caratteri che lo staging scarica ci sono soltanto Titillium Web e Roboto
 * Mono, Lora mai. Un paragrafo serif in mezzo a una pagina tutta Titillium si
 * riconosce subito come corpo estraneo, quindi si riporta alla famiglia del
 * portale.
 */
.card-wrapper .card .card-body .card-text {
  font-family: "Titillium Web", Geneva, Tahoma, sans-serif;
}

/*
 * Avviso di ambiente di prova.
 *
 * Copiato dal portale di staging, che lo scrive come "body::before": stesso
 * testo, stesso arancione, stessa altezza, così chi passa dall'uno all'altra
 * vede la stessa cosa e capisce che nessuno dei due è il sito pubblico.
 */
.avviso-staging {
  margin: 0;
  height: 34px;
  background: #f0a500;
  color: #1a1a1a;
  font: 700 13px/34px system-ui, Arial, sans-serif;
  text-align: center;
  letter-spacing: 0.02em;
}