/* Italpark — IMMERSIVO MOBILE (≤1199px). Porta su mobile il "vetro" del desktop:
   (A) home: header trasparente-vetro sopra la hero full-screen, solido allo scroll;
   (B) hamburger/offcanvas col vetro scuro del megamenu desktop.
   File NUOVO e dedicato → non tocca immersive.css/megamenu.css (desktop intatto), reversibile togliendolo.
   Il desktop (≥1200px) non è mai coinvolto: tutto è dentro @media(max-width:1199px). NIENTE PILLOLE. */

@media (max-width:1199px){

  /* ===================================================================
     (A) HEADER VETRO SOPRA LA COVER FULL-SCREEN — pagine immersive del desktop:
     home (body.page-index), Storia (body.cms-id-4), categorie + pagine-contenuto (body:has(.itlp-sacricover)).
     In cima trasparente+blur+bianco, VERDE allo scroll (.itlp-scrolled). I PRODOTTI (body.itlp-imm) NO:
     disattivati di proposito su mobile in immersivo.css — decisione da confermare con Silvano.
     =================================================================== */
  :is(body.page-index,body.cms-id-4,body:has(.itlp-sacricover)) header.header{
    position:absolute; top:0; left:0; right:0; width:100%; z-index:60;
    background:linear-gradient(180deg, rgba(18,28,16,.74) 0%, rgba(18,28,16,.34) 58%, rgba(18,28,16,0) 100%) !important;
    box-shadow:none !important; border-bottom:0 !important;
  }
  /* frosted blur dietro l'header, mascherato → sfuma in basso (non taglia netto sulla hero) */
  :is(body.page-index,body.cms-id-4,body:has(.itlp-sacricover)) header.header::before{
    content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
    -webkit-backdrop-filter:blur(8px) saturate(1.04); backdrop-filter:blur(8px) saturate(1.04);
    -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 50%,rgba(0,0,0,.3) 78%,transparent 100%);
            mask-image:linear-gradient(180deg,#000 0%,#000 50%,rgba(0,0,0,.3) 78%,transparent 100%);
  }
  :is(body.page-index,body.cms-id-4,body:has(.itlp-sacricover)) header.header > *{ position:relative; z-index:1; }

  /* testo + icone bianchi sopra la hero scura */
  :is(body.page-index,body.cms-id-4,body:has(.itlp-sacricover)) header.header,
  :is(body.page-index,body.cms-id-4,body:has(.itlp-sacricover)) header.header a,
  :is(body.page-index,body.cms-id-4,body:has(.itlp-sacricover)) header.header .header-block__title,
  :is(body.page-index,body.cms-id-4,body:has(.itlp-sacricover)) header.header .header-block__badge,
  :is(body.page-index,body.cms-id-4,body:has(.itlp-sacricover)) header.header svg,
  :is(body.page-index,body.cms-id-4,body:has(.itlp-sacricover)) header.header i,
  :is(body.page-index,body.cms-id-4,body:has(.itlp-sacricover)) header.header .material-icons{ color:#fff !important; fill:currentColor; }
  :is(body.page-index,body.cms-id-4,body:has(.itlp-sacricover)) header.header .header-top{ background:transparent !important; border-bottom:1px solid rgba(255,255,255,.15) !important; }

  /* logo in bianco (silhouette) sia trasparente al top sia sul vetro verde scrolled → sempre bianco */
  :is(body.page-index,body.cms-id-4,body:has(.itlp-sacricover)) header.header img.logo{ filter:brightness(0) invert(1); }

  /* allo scroll: header FISSO col VETRO VERDE del desktop (NON bianco solido) — identico a immersive.css >=1200.
     Testo, icone e logo restano BIANCHI sul vetro scuro. */
  :is(body.page-index,body.cms-id-4,body:has(.itlp-sacricover)) header.header.itlp-scrolled{
    position:fixed;
    background:rgba(17,24,14,.70) !important;
    -webkit-backdrop-filter:blur(15px) saturate(1.3); backdrop-filter:blur(15px) saturate(1.3);
    border-bottom:1px solid rgba(201,171,110,.3) !important;
    box-shadow:0 10px 30px -10px rgba(0,0,0,.5) !important;
  }
  :is(body.page-index,body.cms-id-4,body:has(.itlp-sacricover)) header.header.itlp-scrolled::before{ -webkit-backdrop-filter:none; backdrop-filter:none; }
  :is(body.page-index,body.cms-id-4,body:has(.itlp-sacricover)) header.header.itlp-scrolled .header-top{ border-bottom:1px solid rgba(255,255,255,.18) !important; }

  /* ===================================================================
     (A2) COVER FULL-SCREEN sulle pagine immersive con cover (categorie + pagine-contenuto)
     La cover .itlp-sacricover (iniettata da sacrihero.js) su mobile era una banda ~72vh:
     la portiamo a tutto schermo come il desktop. Home (.itlp-hero) è gestita in hero.css.
     =================================================================== */
  .itlp-sacricover{ height:100svh !important; min-height:520px; }
  .itlp-sacricover-media{ background-position:50% 42% !important; }

  /* ===================================================================
     (B) HAMBURGER — OFFCANVAS COL VETRO SCURO DEL MEGAMENU (tutte le pagine)
     Fallback rgba opaco → leggibile anche senza backdrop-filter.
     =================================================================== */
  .ps-mainmenu--mobile.offcanvas,
  .ps-searchbar__offcanvas.offcanvas{
    /* VETRO VERDE TRASLUCIDO FUMÉ = identico al header (approvato da Silvano), non "solo scuro".
       Fallback rgba opaco se backdrop-filter non supportato; altrimenti alleggerito dal blocco @supports. */
    background:rgba(17,24,14,.72) !important;
    -webkit-backdrop-filter:blur(15px) saturate(1.3); backdrop-filter:blur(15px) saturate(1.3);
    color:#f2efe6 !important;
    border-right:1px solid rgba(201,171,110,.3);
  }
  /* dove il blur è supportato: fondo più leggero → si vede il "fumé" (contenuto sfocato dietro) */
  @supports ((-webkit-backdrop-filter:blur(2px)) or (backdrop-filter:blur(2px))){
    .ps-mainmenu--mobile.offcanvas,
    .ps-searchbar__offcanvas.offcanvas{ background:rgba(17,24,14,.56) !important; }
  }
  .ps-searchbar__offcanvas.offcanvas{ border-right:0; border-bottom:1px solid rgba(201,171,110,.22); }

  .ps-mainmenu--mobile.offcanvas a,
  .ps-mainmenu--mobile.offcanvas .ps-mainmenu__tree-link,
  .ps-mainmenu--mobile.offcanvas .btn,
  .ps-mainmenu--mobile.offcanvas .btn-link,
  .ps-mainmenu--mobile.offcanvas .offcanvas-title,
  .ps-mainmenu--mobile.offcanvas label,
  .ps-mainmenu--mobile.offcanvas span{ color:#f2efe6 !important; }
  .ps-mainmenu--mobile.offcanvas .ps-mainmenu__tree-link:hover,
  .ps-mainmenu--mobile.offcanvas a:hover{ color:#d9c290 !important; }

  .ps-mainmenu--mobile.offcanvas .offcanvas-header{ border-bottom:1px solid rgba(255,255,255,.12); }
  .ps-mainmenu--mobile.offcanvas .ps-mainmenu__tree-item{ border-bottom:1px solid rgba(255,255,255,.07); }
  .ps-mainmenu--mobile.offcanvas .ps-mainmenu__additionnals{ border-top:1px solid rgba(255,255,255,.1); }

  /* X di chiusura e icone chiare */
  .ps-mainmenu--mobile.offcanvas .btn-close,
  .ps-searchbar__offcanvas.offcanvas .btn-close{ filter:invert(1) brightness(1.6); opacity:.85; }
  .ps-mainmenu--mobile.offcanvas svg,
  .ps-mainmenu--mobile.offcanvas i,
  .ps-mainmenu--mobile.offcanvas .material-icons{ color:#e9e7de !important; }

  /* campi select lingua/valuta dentro il menu: leggibili sul vetro scuro */
  .ps-mainmenu--mobile.offcanvas select,
  .ps-mainmenu--mobile.offcanvas .form-select,
  .ps-mainmenu--mobile.offcanvas .form-control{
    background:rgba(255,255,255,.06) !important; color:#f2efe6 !important;
    border:1px solid rgba(255,255,255,.18) !important;
  }

  /* backdrop Bootstrap dietro l'offcanvas: lieve sfocatura "vetro sopra la pagina" */
  .offcanvas-backdrop.show{
    -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
    background:rgba(10,14,8,.5) !important; opacity:1 !important;
  }
  /* NB: la gestione dei due tasti flottanti (maniglie ai lati + nascondi a menu aperto) è in fabscroll.css/js */
}

/* chi preferisce meno effetti: niente blur pesante (resta il fondo opaco leggibile) */
@media (max-width:1199px) and (prefers-reduced-motion:reduce){
  .ps-mainmenu--mobile.offcanvas,
  .ps-searchbar__offcanvas.offcanvas,
  :is(body.page-index,body.cms-id-4,body:has(.itlp-sacricover)) header.header::before{ -webkit-backdrop-filter:none; backdrop-filter:none; }
}