/* Opera Duomo Suite — riquadro delle pagine iniziali delle sezioni ([accesso_archivio]). HTML: accesso.mustache.
   Stesso aspetto del vecchio comune/accesso-archivio del tema: campo scuro trasparente sopra la foto della pagina. */

.od-accesso { font-family: inherit; display: flex; flex-direction: column; align-items: center; }   /* il pulsante al centro, sotto la ricerca */

/* ricerca: come il pulsante qui sotto (forma arrotondata, bordo oro, velo scuro sfocato), testo bianco, lente su un
   cerchio oro; scrivendo il velo si scurisce e compare un alone oro */
.od-accesso__search {
  display: flex; align-items: center;
  width: 100%; min-height: 46px; margin: 0; padding: 0 4px 0 18px; box-sizing: border-box;
  border: 1px solid #dca54a; border-radius: 999px;
  background: rgba(20, 15, 10, .55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: background .25s, box-shadow .25s;
}
.od-accesso__search:focus-within { background: rgba(20, 15, 10, .72); box-shadow: 0 0 0 3px rgba(220, 165, 74, .25); }
.od-accesso__search input[type=text],
.od-accesso__search input[type=text]:focus {
  flex: 1; min-width: 0; padding: 10px 6px;
  border: none; border-radius: 0; outline: none;
  background: transparent; color: #fff; font-size: 15px; letter-spacing: .02em;
}
.od-accesso__search input::placeholder { color: rgba(255, 255, 255, .78); }
.od-accesso__search button {
  display: grid; place-items: center; flex: none; width: 38px; height: 38px; padding: 0;
  border: none; border-radius: 50%; background: #dca54a; color: #fff; cursor: pointer; transition: background .25s;
}
.od-accesso__search button:hover { background: #c48f36; }
.od-accesso__search button svg { width: 15px; height: 15px; }

/* avviso "almeno 3 caratteri" */
.od-accesso__hint {
  margin: 6px 0 0; padding: 6px 10px;
  border-left: 3px solid #dca54a; border-radius: 4px;
  background: rgba(0, 0, 0, .45); color: #fff; font-size: 14px;
}
.od-accesso__hint[hidden] { display: none; }

/* "Vedi tutte le schede" (opere, fototeca) sotto la ricerca: lo stesso pulsante di "Sfoglia i corali" */
.od-accesso__all { margin-top: 14px; white-space: nowrap; }

/* corali, libro: solo il pulsante */
/* "Sfoglia i corali", "Vedi tutte le schede"…: come i pulsanti del sito sopra una foto (contorno oro, testo bianco su un velo scuro) */
.od-accesso__btn {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 26px; box-sizing: border-box;
  border: 1px solid #dca54a; border-radius: 999px; background: rgba(20, 15, 10, .35); color: #fff !important;
  font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; text-decoration: none !important;
  transition: background .25s;
}
.od-accesso__btn:hover { background: #dca54a; color: #fff !important; }

/* stessa altezza in tutte le sezioni (ricerca + pulsante "Vedi tutte le schede" = circa 103 px): il blocco titolo +
   riquadro è centrato sulla foto, e con il solo pulsante dei corali, più basso, il titolo "CORALI" scenderebbe */
.od-accesso { min-height: 103px; box-sizing: border-box; }