/* cerca-barra.css — la barra della Libreria Magica sotto la testata di ogni pagina e il riquadro in home.
   Sta in un foglio suo, con la versione scritta in elements/em2026/testata.html: così non si tocca il ?v= di em2026.css
   in tutte le pagine. Sulle due pagine di ricerca la barra sparisce: lì il modulo è già grande. */

.em-cerca-barra { background: var(--ink); border-block: 1px solid #e6c58933; color: var(--paper); }
.em-cerca-barra form { display: flex; align-items: center; justify-content: center; gap: 16px; width: min(1240px, calc(100% - 96px));
  margin-inline: auto; padding-block: 11px; }
.em-cerca-barra label { font-family: var(--serif); font-size: 18px; white-space: nowrap; color: var(--paper); }
.em-cerca-barra label em { color: var(--moonlight); }
.em-cerca-barra .em-cerca-campo { display: flex; flex: 0 1 560px; min-width: 0; }
.em-cerca-barra input { flex: 1; min-width: 0; height: 42px; padding: 0 14px; font: 16px var(--sans); color: var(--ink); background: var(--paper);
  border: 1px solid var(--moonlight); border-right: 0; border-radius: 3px 0 0 3px; }
.em-cerca-barra input::placeholder { color: var(--muted); }
.em-cerca-barra button { height: 42px; padding: 0 20px; font: 700 14px var(--sans); color: var(--night); background: var(--moonlight);
  border: 1px solid var(--moonlight); border-radius: 0 3px 3px 0; cursor: pointer; }
.em-cerca-barra button:hover { background: #f1dcae; }
.em-cerca-barra input:focus-visible, .em-cerca-barra button:focus-visible { outline: 3px solid var(--moonlight); outline-offset: 2px; }
.em-cerca-barra small { font-size: 13px; color: #dedfd2; white-space: nowrap; }
body:has(.cerca-pagina) .em-cerca-barra { display: none; }

@media (max-width: 1000px) { .em-cerca-barra small { display: none; } }
@media (max-width: 800px) {
  .em-cerca-barra form { width: calc(100% - 32px); flex-wrap: wrap; gap: 6px 12px; padding-block: 10px 12px; }
  .em-cerca-barra label { font-size: 16px; }
  .em-cerca-barra .em-cerca-campo { flex: 1 1 100%; }
}
@media print { .em-cerca-barra { display: none; } }

/* il riquadro in home */
.cerca-home { padding-block: 64px 0; }
.cerca-home-dentro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 40px; align-items: center; padding: 44px 48px;
  background: var(--ink); color: var(--paper); border-radius: var(--radius); box-shadow: var(--shadow-soft); }
.cerca-home .eyebrow { color: var(--moonlight); margin: 0 0 12px; }
.cerca-home h2 { color: var(--paper); margin: 0; font-size: clamp(32px, 3.6vw, 46px); }
.cerca-home h2 em { color: var(--moonlight); }
.cerca-home p.cerca-home-testo { margin: 14px 0 0; color: #dedfd2; }
.cerca-home form { display: flex; }
.cerca-home input { flex: 1; min-width: 0; height: 54px; padding: 0 16px; font: 17px var(--sans); color: var(--ink); background: var(--paper);
  border: 1px solid var(--moonlight); border-right: 0; border-radius: 3px 0 0 3px; }
.cerca-home button { height: 54px; padding: 0 26px; font: 700 15px var(--sans); color: var(--night); background: var(--moonlight);
  border: 1px solid var(--moonlight); border-radius: 0 3px 3px 0; cursor: pointer; }
.cerca-home button:hover { background: #f1dcae; }
.cerca-home input:focus-visible, .cerca-home button:focus-visible { outline: 3px solid var(--moonlight); outline-offset: 2px; }
.cerca-home ul { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 10px; padding: 0; margin: 14px 0 0; font-size: 14px; }
.cerca-home ul a { display: inline-block; padding: 4px 12px; color: var(--paper); border: 1px solid #e6c58966; border-radius: 999px; text-decoration: none; }
.cerca-home ul a:hover { background: #e6c5891f; }
.cerca-home label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
@media (max-width: 900px) {
  .cerca-home { padding-block: 44px 0; }
  .cerca-home-dentro { grid-template-columns: 1fr; gap: 24px; padding: 30px 22px; }
}