/* La ricerca nel menu (assets/js/ricerca.js), dal riferimento "Glassy Navbar UI" (reel di code.xr).
   Chiusa è un tondo con la lente; al tocco diventa un campo di vetro che si allunga con una molla, poi compaiono lente,
   campo e ×. I risultati (serate, locali, pagine) sotto la barra. L'animazione è tutta in ricerca.js (Web Animations,
   solo transform e opacity).
   Computer: la lente sta nella pillola del menu, fra Contatti e Lavora con noi; la pillola si allarga dai due lati e le voci scivolano.
   Telefono (fino a 960px): ricerca.js sposta lente e risultati nella testata, accanto al menu (.nav__msearch); il campo si
   allunga verso sinistra al posto del logo e i risultati stanno sotto la testata. */

/* nel menu a tutto schermo del telefono la lente e i pezzi della pillola non ci sono
   (.nav__links davanti: nel menu del telefono vale .nav__links li { display: block }) */
.nav__links .nav__search, .nav__links .gpill { display: none; }

/* ---------- il campo, il vetro e i risultati: comuni ---------- */
.srch { --h: 34px; position: relative; isolation: isolate;   /* piano suo: il vetro del campo sopra quello della pillola */
  display: flex; align-items: center; width: var(--h); height: var(--h); border-radius: 999px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); transition: background .3s, border-color .3s; }
.srch__btn { flex: none; display: grid; place-items: center; width: calc(var(--h) - 2px); height: calc(var(--h) - 2px); padding: 0; border: 0; border-radius: 50%;
  background: none; color: var(--grigio); cursor: pointer; transition: color .3s; -webkit-tap-highlight-color: transparent; }
.srch__btn svg, .srch__x svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.srch__btn:focus-visible, .srch__x:focus-visible { outline: 2px solid var(--accento); outline-offset: 2px; }
.srch__in, .srch__x { display: none; }
@media (hover: hover) and (pointer: fine) { .srch:hover { background: rgba(255,255,255,.1); } .srch:hover .srch__btn { color: var(--bianco); } }
.srch__btn:focus-visible { color: var(--bianco); }

/* aperta: lente a sinistra, testo, × */
.nav.is-searching .srch__btn { color: var(--bianco); cursor: default; }
.nav.is-searching .srch__in { display: block; flex: 1; min-width: 0; height: 100%; padding: 0 4px 0 0; border: 0; outline: 0; background: none;
  color: var(--bianco); font: 600 14px/20px var(--font-body); caret-color: var(--viola-chiaro); }
.srch__in::placeholder { color: rgba(247,243,255,.4); }
.srch__in::-webkit-search-cancel-button { display: none; }
.nav.is-searching .srch__x { display: grid; place-items: center; flex: none; width: 26px; height: 26px; margin: 0 3px 0 4px; padding: 0; border: 0; border-radius: 50%;
  background: none; color: var(--grigio); cursor: pointer; transition: color .3s, background .3s; -webkit-tap-highlight-color: transparent; }
.srch__x svg { width: 13px; height: 13px; }
@media (hover: hover) and (pointer: fine) { .srch__x:hover { color: var(--bianco); background: rgba(255,255,255,.08); } }

/* Vetro in tre pezzi (.gpill: estremità sinistra, centro, estremità destra), messo da ricerca.js nel campo (e su computer
   nella pillola del menu): le estremità scorrono e il centro si allarga, così la molla può portare la forma oltre la misura
   finale (esce dal contorno e ci torna, come nel reel) senza deformare angoli e bordo. Con lo script attivo (.nav--glass)
   il fondo del tondo passa ai pezzi; senza script resta quello qui sopra. */
.nav--glass .srch, .nav--glass .srch:hover, .nav--glass.is-searching .srch { background: none; border-color: transparent; }
.nav .srch .gpill { display: block; }
.gpill { position: absolute; inset: -1px; z-index: -1; pointer-events: none; list-style: none; --r: 22px; }
.gpill--field { --r: calc(var(--h) / 2); }
.gpill i { position: absolute; top: 0; bottom: 0; will-change: transform;
  background: rgba(21,8,39,.55); border: 1px solid rgba(255,255,255,.1); backdrop-filter: blur(18px) saturate(1.5); -webkit-backdrop-filter: blur(18px) saturate(1.5); }
.gpill__l { left: 0; width: calc(var(--r) + 1px); border-right: 0 !important; border-radius: var(--r) 0 0 var(--r); }
.gpill__r { right: 0; width: calc(var(--r) + 1px); border-left: 0 !important; border-radius: 0 var(--r) var(--r) 0; }
/* estremità 1px più larghe del raggio: anche col centro ridotto a zero (campo tondo) si sovrappongono, niente riga in mezzo */
.gpill__c { left: calc(var(--r) - 1px); right: calc(var(--r) - 1px); border-left: 0 !important; border-right: 0 !important; transform-origin: 0 50%; }
/* Giunture: in movimento i pezzi stanno a mezzo pixel e con colori trasparenti la sovrapposizione raddoppiava (una riga).
   Quindi pezzi pieni che si sovrappongono di 1px. Il campo: vetro più chiaro con il bordo luminoso e una luce in alto,
   colori pieni misurati sul vetro trasparente di prima. */
.gpill--field i { background: #251636; border-color: #3f3350; box-shadow: inset 0 1px 0 #2f2241; backdrop-filter: none; -webkit-backdrop-filter: none; transition: background .3s, border-color .3s; }
@media (hover: hover) and (pointer: fine) { .srch:hover .gpill--field i { background: #2f2140; } }
.nav.is-searching .gpill--field i { background: #271938; border-color: #554a62; box-shadow: inset 0 1px 0 #352845; }
/* riflesso che attraversa il campo una volta, all'apertura */
.srch__shine { position: absolute; inset: 0; border-radius: 999px; overflow: hidden; pointer-events: none; display: none; }
.nav.is-searching .srch__shine { display: block; }
.srch__shine::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 45%; opacity: 0;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.16) 50%, transparent); }

/* risultati: lo stesso vetro della pillola del menu */
.srch__res { position: absolute; z-index: 3; top: calc(100% + 10px); right: 0; width: 400px; max-height: min(460px, 70vh); overflow-y: auto; overscroll-behavior: contain;
  padding: 8px; border-radius: 22px; background: rgba(21,8,39,.86); border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(18px) saturate(1.5); -webkit-backdrop-filter: blur(18px) saturate(1.5);
  box-shadow: 0 30px 60px -20px rgba(0,0,0,.8); transform-origin: 85% 0; }
.srch__res[hidden] { display: none; }
.srch__group { margin: 0; padding: 8px 12px 6px; font: 700 11px/1 var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: rgba(247,243,255,.45); }
/* .nav davanti: altrimenti vincono gli stili dei link del menu (.nav__links a) */
.nav .srch__item { display: grid; font-size: inherit; line-height: inherit; grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 10px 12px; border-radius: 14px;
  color: var(--bianco); background: none; border: 0; transition: background .2s; -webkit-tap-highlight-color: transparent; }
.nav .srch__item b { font: 700 15px/1.25 var(--font-body); }
.nav .srch__item small { grid-column: 1; font: 500 13px/1.35 var(--font-body); color: rgba(247,243,255,.6); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav .srch__item[aria-selected="true"] { background: rgba(255,255,255,.08); }
.nav .srch__item mark { background: none; color: var(--viola-chiaro); }
.srch__none { margin: 0; padding: 14px 12px; font: 500 14px/1.4 var(--font-body); color: rgba(247,243,255,.6); }

/* ---------- computer: nella pillola del menu ---------- */
@media (min-width: 961px) {
  .nav__links { position: relative; }   /* i risultati si appoggiano al bordo destro della pillola */
  .nav__links .nav__search { display: flex; margin: 0 2px; }
  .nav__links .gpill { display: block; }
  /* fondo, bordo e sfocatura della pillola passano ai pezzi: una sfocatura sulla pillola ferma restava indietro (una scia) */
  .nav--glass .nav__links { background: none; border-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
  /* la pillola: pezzi pieni con la trasparenza data dal gruppo intero (una volta sola: niente righe sulle giunture) */
  .gpill--nav { opacity: .55; }
  .gpill--nav i { background: rgb(21,8,39); border-color: #3f344e; backdrop-filter: none; -webkit-backdrop-filter: none; }
  /* la sfocatura: tre pezzi senza colore che si muovono insieme alla pillola (dentro un gruppo trasparente non funzionerebbe) */
  .gpill--blur i { background: none; border-color: transparent; }
  /* a ricerca aperta la pillola si allarga anche a destra (nel reel la barra cresce dai due lati), senza toccare il bordo */
  .nav.is-searching .nav__links { margin-right: max(-28px, calc(14px - var(--gutter))); }
  /* campo largo; la larghezza cresce con lo schermo per non toccare il logo */
  .nav.is-searching .srch { width: clamp(230px, 23vw, 316px); }
}

/* ---------- telefono: nella testata, accanto al menu ---------- */
.nav__msearch { display: none; }
@media (max-width: 960px) {
  /* menu: la lente (nascosta) sta prima di "Lavora con noi" e sposterebbe i ritardi d'entrata dati per posizione in style.css */
  .nav.is-open .nav__links li:has(> .cta) { transition-delay: .3s; }
  .nav.is-open .nav__links li.nav__social { transition-delay: .34s; }

  .nav__msearch { display: block; position: relative; z-index: 2; margin: 0 8px 0 auto; transition: opacity .25s, visibility .25s; }
  .nav.is-open .nav__msearch { opacity: 0; visibility: hidden; }   /* con il menu aperto non serve */
  .nav__msearch .srch { --h: 44px; }   /* bersaglio comodo per il dito, come il tondo del menu */
  .nav__msearch .srch__btn svg { width: 19px; height: 19px; }
  /* aperta: il campo prende il posto del logo, fino al bottone del menu */
  .nav.is-searching .nav__msearch .srch { width: calc(100vw - 2 * var(--gutter) - 44px - 8px); }
  .nav.is-searching .nav__logo { position: absolute; opacity: 0; visibility: hidden; }
  .nav.is-searching .nav__msearch .srch__in { font-size: var(--m-body); }   /* 16px: sotto, l'iPhone ingrandisce la pagina al tocco */
  .nav__msearch .srch__x { width: 32px; height: 32px; margin-right: 5px; }
  .nav__msearch .srch__x svg { width: 15px; height: 15px; }
  /* risultati sotto la testata, larghi quanto lo schermo meno i margini */
  .nav__msearch .srch__res { position: fixed; top: 76px; left: var(--gutter); right: var(--gutter); width: auto; max-height: calc(100svh - 76px - 24px);
    padding: 6px; border-radius: 20px; transform-origin: 80% 0; }
  .nav__msearch .srch__group { font-size: var(--m-label); }
  .nav .nav__msearch .srch__item { padding: 12px; }
  .nav .nav__msearch .srch__item b { font-size: var(--m-body); }
  .nav .nav__msearch .srch__item small { font-size: var(--m-small); }
  .nav__msearch .srch__none { font-size: var(--m-small); }
}