/* === SEARCH PANEL (glass, sopra header, no-JS required) === */

/* nascondi solo quando c'è [hidden] o .off */
#site-search[hidden], #site-search.off { display: none !important; }

/* overlay di base SEMPRE su #site-search (non vincolato a [role="dialog"]) */
#site-search{
  position: fixed;
  inset: 0;
  z-index: 12000;
  display: grid;
  grid-template-rows: min-content 1fr;
  padding: clamp(12px, 2.5vw, 20px);
  background:
    radial-gradient(1200px 800px at 20% -10%, rgba(255,255,255,.35), rgba(255,255,255,0) 70%),
    radial-gradient(1200px 800px at 120% 110%, rgba(255,255,255,.35), rgba(255,255,255,0) 70%),
    rgba(255,255,255,.50);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border-top: 1px solid rgba(255,255,255,.35);
  border-bottom: 1px solid rgba(0,0,0,.06);
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s ease;
}

/* consideralo "aperto" in QUALSIASI di questi casi */
#site-search[aria-hidden="false"],
#site-search[open],
#site-search.is-open,
#site-search:not([hidden]) {
  opacity: 1;
  transform: translateY(0);
}

/* barra superiore con input */
#site-search .search-shell{
  max-width: min(1100px, 92vw);
  margin-inline: auto;
  display: grid; gap: 10px;
}

/* input “glass” */
#site-search .search-input{
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(255,255,255,.75);
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 10px 24px rgba(0,0,0,.08);
}
#site-search .search-input input{
  appearance: none; border: 0; outline: 0;
  width: 100%;
  font: 500 16px/1.25 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  background: transparent;
}
#site-search .search-input input::placeholder{
  opacity: .6;
}

/* piccolo hint (usa Oswald) */
#site-search .search-hint{
  font: 600 12px/1 Oswald, system-ui, sans-serif;
  text-transform: uppercase;
  letter-spacing: .04em;
  opacity: .7;
}

/* area risultati scrollabile */
#site-search .search-results{
  max-width: min(1100px, 92vw);
  margin: 8px auto 0;
  overflow: auto;
  padding-bottom: 24px;
}

/* card risultato */
#site-search .result{
  display: grid; gap: 6px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(255,255,255,.60);
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 10px 20px rgba(0,0,0,.06);
}
#site-search .result + .result{ margin-top: 10px; }

#site-search .result .title{
  font: 700 15px/1.2 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}
#site-search .result .meta{
  font: 12px/1.2 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  opacity: .65;
}

/* mobile accorcia padding e curva */
@media (max-width: 600px){
  #site-search{ padding: 10px; }
  #site-search .search-input{ padding: 10px 12px; border-radius: 12px; }
  #site-search .result{ border-radius: 12px; }
}

/* OPTIONAL: quando aperto, blocca lo scroll del body se aggiungi la classe */
body.is-search-open{ overflow: hidden; }