/* =====================================================================
   SEARCH PANEL (a fascia, in alto)
   Il pannello bianco copre solo la zona header e termina dove inizia
   la hero; sotto resta un velo leggero: click fuori = chiude.
   Nessuna anteprima live: Invio/SEARCH -> pagina risultati.
   ===================================================================== */

.mc-search-overlay[hidden]{
  display: none !important;
}

/* Trigger (icona lente nell'header) */
.mc-search-trigger{
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
  color: #111;
}

.mc-search-trigger svg{
  display: block;
  width: 24px;
  height: 24px;
  fill: currentColor;
}

/* Contenitore: copre tutta la finestra ma e' un velo trasparente;
   serve a intercettare il click fuori dal pannello (= chiudi) */
.mc-search-overlay{
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  background: rgba(17, 17, 17, 0.2);   /* leggero velo sulla pagina sotto */
  z-index: 1000000;
  display: block;
  overflow: hidden;
}

/* Blocca scroll del body quando il pannello e' aperto */
html.mc-search-open,
html.mc-search-open body{
  overflow: hidden;
}

/* PANNELLO: fascia bianca dall'alto fino all'inizio della hero */
.mc-search-panel{
  position: relative;
  width: 100%;
  max-width: none;
  margin: 0;
  min-height: 300px;                    /* ~ zona header: termina dove parte la hero */
  padding: 60px clamp(20px, 4vw, 64px) 56px;
  background: rgba(255, 255, 255, 0.94);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid #e5e5e5;
  box-sizing: border-box;
}

/* Titolo grande */
.mc-search-heading{
  font-family: 'Nunito', sans-serif;
  font-size: clamp(34px, 4vw, 52px);
  font-weight: 400;
  text-transform: uppercase;
  color: #111;
  margin: 0 0 30px;
}

/* Form: campo grigio + bottone (identici alla pagina risultati) */
.mc-search-form{
  display: flex;
  max-width: 900px;
  margin: 0;
}

.mc-search-form .mc-search-input,
.mc-search-form input.mc-search-input[type="search"]{
  flex: 1;
  min-width: 0;
  height: 56px;                 /* stessa altezza del bottone */
  background: #efefef;
  border: 1px solid #e3e3e3;
  border-right: 0;
  border-radius: 0;
  padding: 0 20px;
  font-family: 'Jost', sans-serif;
  font-size: 15px;
  color: #111;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
}

.mc-search-input::placeholder{
  color: #8a8a8a;
}

.mc-search-input:focus,
.mc-search-input:focus-visible{
  outline: none;
  box-shadow: none;
  border-color: #cfcfcf;
}

.mc-search-submit{
  background: #ae8687;   /* stesso sfondo degli altri bottoni del sito */
  color: #fff;
  border: 0;
  border-radius: 0;
  height: 56px;          /* stessa altezza del campo */
  padding: 0 44px;
  font-family: 'Nunito', sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .2s ease;
  box-sizing: border-box;
}

.mc-search-submit:hover{ background: #333; }

/* Bottone chiusura: in alto a destra, scuro */
.mc-search-close{
  position: absolute;
  top: 24px;
  right: clamp(20px, 4vw, 64px);
  width: 44px;
  height: 44px;
  border: none;
  color: #111;
  background: transparent;
  font-size: 34px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mc-search-close:hover{
  opacity: 0.6;
}

/* =====================================================================
   Mobile adjustments
   ===================================================================== */
@media (max-width: 767px){
  .mc-search-panel{
    min-height: 0;
    padding: 56px 16px 36px;
  }
  .mc-search-heading{
    margin-bottom: 22px;
  }
  .mc-search-form .mc-search-input,
  .mc-search-form input.mc-search-input[type="search"]{
    font-size: 16px;
    height: 48px;
    padding: 0 14px;
  }
  .mc-search-submit{
    height: 48px;
    padding: 0 20px;
  }
  .mc-search-close{
    top: 12px;
    right: 12px;
    width: 40px;
    height: 40px;
    font-size: 28px;
  }
}