/* ====================================================================================================================================================================================
                                                                               Stili dell'HEADER (header.php)
   ==================================================================================================================================================================================== */

header {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   z-index: 1000;
   padding: 2.778vw 6.944vw 0 6.944vw;
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: space-between;
   transform: translateY(0);
   background-color: transparent;
   will-change: transform;
}

header.is-fixed {
   position: fixed;
   transition: transform 0.35s ease, background-color 0.35s ease;
}

header.is-hidden {
   transform: translateY(-100%);
}

/* Usata dal JS solo per il PRIMO aggancio (da "parte della pagina" a fixed):
   niente animazione, così non si vede lo scivolamento iniziale. */
header.no-anim {
   transition: none !important;
}

/* 
Visibile ma non in cima (scroll verso l'alto): sfondo bianco.
Un po' di padding sotto e ombra leggera per staccarla dal contenuto. 
*/

header.is-solid {
   background-color: #fff;
   padding-bottom: 1.55vw;
   padding-top: 1.55vw;
}

nav {
   display: flex;
   padding: 1.111vw 2.778vw;
   align-items: center;
   gap: 1.389vw;
   border-radius: 64px;
   background: var(--grigio-chiaro, #F3F3F3);
}

.header_nav {
   display: flex;
   flex-direction: row;
   gap: 0;
}

nav {
   display: flex;
   flex-direction: row;
   gap: 1.389vw;
}

/* La <ul> generata da wp_nav_menu: in riga, senza pallini. */
.header_menu {
   display: flex;
   flex-direction: row;
   align-items: center;
   gap: 1.389vw;
   list-style: none;
   margin: 0;
   padding: 0;
}

.header_menu a {
   display: inline-flex;
   align-items: center;
   gap: 0.417vw;
   text-decoration: none;
   color: var(--grigio-2);
   /* colore a riposo */
   transition: color 0.2s ease;
}

/* Hover + pagina corrente: nero.
   Le classi current-* le aggiunge WordPress da solo alla voce attiva.
   current_page_parent e' quella che finisce sulla voce della pagina blog
   ("Newsroom") mentre si legge un singolo articolo: senza questa riga,
   aprendo un articolo il menu non evidenzia piu' nulla. */
.header_menu a:hover,
.header_menu .current-menu-item>a,
.header_menu .current_page_item>a,
.header_menu .current_page_parent>a,
.header_menu .current-menu-parent>a,
.header_menu .current-menu-ancestor>a {
   color: var(--nero);
}

/* Freccia accanto a "Servizi" (il link personalizzato con href="#").
   Vale anche per qualsiasi voce che avrà un sottomenù.

   Usiamo "mask" invece di background-image: così l'SVG diventa una sagoma
   riempita da background-color. Con currentColor la freccia prende
   AUTOMATICAMENTE il colore del testo, hover e pagina corrente compresi. */
.header_menu a[href="#"]::after,
.header_menu .menu-item-has-children>a::after {
   content: "";
   display: inline-block;
   width: 1.111vw;
   height: 1.111vw;
   flex-shrink: 0;
   background-color: currentColor;
   -webkit-mask-image: url('../assets/svg/icon-arrow-down.svg');
   mask-image: url('../assets/svg/icon-arrow-down.svg');
   -webkit-mask-size: contain;
   mask-size: contain;
   -webkit-mask-repeat: no-repeat;
   mask-repeat: no-repeat;
   -webkit-mask-position: center;
   mask-position: center;
}

/* ============================================================
   PANNELLO SERVIZI (solo desktop)
   ============================================================ */

/* Sfondo dietro al pannello: sfuma verso destra, dove si apre. */
.servizi_overlay {
   position: fixed;
   inset: 0;
   z-index: 900;
   background: linear-gradient(to left, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.15) 75%);
   opacity: 0;
   visibility: hidden;
   transition: opacity 0.35s ease, visibility 0.35s ease;
}

.servizi_overlay.is-open {
   opacity: 1;
   visibility: visible;
}

/* Col pannello aperto la pagina sotto non scrolla. */
body.no-scroll {
   overflow: hidden;
}

/* 
   Il pannello: alto quanto la viewport, largo quanto la nav
   (--servizi-panel-width la imposta il JS misurando la nav). 
*/

.servizi_panel {
   position: fixed;
   top: 0;
   right: 0;
   padding: 11.944vw 6.944vw 0 6.944vw;
   /* 100dvh meno il margine superiore: così arriva esattamente a fondo pagina. */
   height: calc(100dvh - 11.944vw);
   width: var(--servizi-panel-width, 28vw);
   z-index: 950;
   background: #fff;
   overflow-y: auto;
   /* Fuori schermo: alla width sommiamo il margine destro,
      altrimenti resterebbe una fetta di pannello visibile. */
   transform: translateX(calc(100% + 6.944vw));
   transition: transform 0.35s ease;
}

.servizi_panel.is-open {
   transform: translateX(0);
}

.servizi_panel_lista {
   display: flex;
   flex-direction: column;
   gap: 0.694vw;
   /* margin: 11.944vw 6.944vw 0 6.944vw; */
}

.servizi_panel_voce {
   border-radius: 12px;
   padding: 1.111vw;
   text-decoration: none;
   display: flex;
   flex-direction: row;
   gap: 0.833vw;
   align-items: center;
}

.icon_area {
   width: 2.292vw;
   height: auto;
}

/* La freccia di "Servizi" gira quando il pannello è aperto. */
.header_menu a[href="#"]::after,
.header_menu .menu-item-has-children>a::after {
   transition: transform 0.3s ease;
}

.header_menu a[href="#"].is-open::after {
   transform: rotate(180deg);
}

.menuMob {
   display: none;
}

/* Popup menu mobile: su desktop non esiste proprio. */
.menuMob_popup {
   display: none;
}

@media screen and (max-width: 750px) {

   /* Per ora il pannello è solo desktop. */
   .servizi_panel,
   .servizi_overlay {
      display: none;
   }


   header {
      padding: 5.385vw 6.154vw;
   }

   /* Stato bianco su mobile: mantiene il padding coerente con l'header mobile. */
   header.is-solid {
      padding: 5.385vw 6.154vw;
   }

   .header_nav {
      gap: 0;
   }

   .menuMob {
      border-radius: 8px;
      display: block;
      border: none;
      display: flex;
      align-items: center;
      height: 10.2564vw;
      width: 10.2564vw;
      justify-content: center;
   }

   .menuMob>img {
      width: 24px;
      height: 24px;
   }

   .navDesk {
      display: none !important;
   }

   /* --- Popup menu mobile: CSS funzionale (le voci le stili tu) --- */

   /* Copre tutta la pagina TRANNE l'header (che è fixed con z-index 1000).
      z-index 940 = sotto l'header ma sopra il contenuto.
      padding-top: lascia scoperto l'header, regolalo sull'altezza reale. */
   /* Il popup c'e' sempre nel DOM: parte fuori schermo (sopra) e trasparente,
      cosi' all'apertura puo' scendere dall'alto con un fade. */
   .menuMob_popup {
      display: block;
      position: fixed;
      inset: 0;
      z-index: 940;
      background: #fff;
      overflow-y: auto;
      /* Alto: header mobile (5.385vw*2 + bottone 10.2564vw). Lati: 6.1538vw. */
      padding: 21.026vw 6.1538vw 0 6.1538vw;

      /* Stato CHIUSO: trasparente e non cliccabile (resta al suo posto:
         l'entrata è solo un fade, niente movimento). */
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transition: opacity 0.35s ease,
                  visibility 0s linear 0.35s;
   }

   /* Stato APERTO: sfuma dentro. */
   .menuMob_popup.is-open {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
      transition: opacity 0.35s ease,
                  visibility 0s;
   }

   .menuMob_nav {
      height: 100%;
      background-color: white;
      align-items: center;
      justify-content: center;
      display: flex;
   }

   /* --- Menu popup: la lista --- */

   .menuMob_menu {
      list-style: none;
      margin: 0;
      padding: 0;
      width: 100%;
      display: flex;
      flex-direction: column;
   }

   /* Il border sta sul <li>: così sotto "Servizi" segue l'accordion
      (in fondo quando aperto, sotto il testo quando chiuso). */
   .menuMob_menu>li {
      border-bottom: 1px solid var(--grigio-chiaro-2, #E5E5E5);
   }

   /* VOCI PRINCIPALI (Homepage, Servizi, Chi siamo, Blog, Contatti) */
   .menuMob_menu>li>a {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      padding: 3.0769vw 0;
      text-decoration: none;
      color: var(--nero, #363636);
      font-family: var(--font-sora);
      font-size: 7.1795vw;
      font-style: normal;
      font-weight: 600;
      line-height: 110%;
   }

   /* Freccia della voce "Servizi" (accordion): gialla, a destra. */
   .menuMob_menu .menu-item-has-children>a::after {
      content: "";
      width: 6.1538vw;
      height: 6.1538vw;
      flex-shrink: 0;
      background-color: var(--giallo);
      -webkit-mask-image: url('../assets/svg/icon-arrow-down.svg');
      mask-image: url('../assets/svg/icon-arrow-down.svg');
      -webkit-mask-size: contain;
      mask-size: contain;
      -webkit-mask-repeat: no-repeat;
      mask-repeat: no-repeat;
      -webkit-mask-position: center;
      mask-position: center;
      /* APERTO: freccia verso l'ALTO (base icon = arrow-down, quindi 180°). */
      transform: rotate(180deg);
      transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
   }

   /* CHIUSO: freccia verso il BASSO (0°). Di default parte chiuso (vedi menu-mobile.js). */
   .menuMob_menu .menu-item-has-children.is-closed>a::after {
      transform: rotate(0deg);
   }

   /* SOTTOMENÙ = le Aree. Apertura/chiusura smooth con max-height.
      500vw = valore "abbondante", basta che superi l'altezza reale. */
   /* Apertura/chiusura FLUIDA via grid-template-rows (come diversi_home_text_accordion):
      il <li> è il contenitore grid con 2 righe = <a> (auto) + sotto-menù (0fr/1fr).
      Anima l'altezza reale del sotto-menù, niente max-height "a caso" che va a scatti. */
   .menuMob_menu .menu-item-has-children {
      display: grid;
      grid-template-rows: auto 1fr;
      /* aperto: la riga del sotto-menù occupa la sua altezza */
      transition: grid-template-rows 0.75s cubic-bezier(0.4, 0, 0.2, 1);
   }

   /* Chiuso: la riga del sotto-menù collassa a 0. */
   .menuMob_menu .menu-item-has-children.is-closed {
      grid-template-rows: auto 0fr;
   }

   .menuMob_menu .sub-menu {
      list-style: none;
      margin: 0;
      padding: 0 0;
      display: flex;
      flex-direction: column;
      gap: 2.0513vw;
      /* overflow + min-height:0 => la riga può collassare davvero a 0. */
      overflow: hidden;
      min-height: 0;
   }

   .menuMob_menu .sub-menu>:last-child {
      padding-bottom: 3.0769vw;
   }

   .sub-menu a {
      padding: 16px;
      border-radius: 12px;
   }

   /* Voce Area: icona a sinistra + nome, in riga. */
   .menuMob_menu .menu-item-area>a {
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 2.5641vw;
      text-decoration: none;
   }

   .menuMob_area_icon {
      width: 6.4103vw;
      height: 6.4103vw;
      flex-shrink: 0;
   }

   .menuMob_area_nome {
      font-family: var(--font-sora);
      font-size: 5.6410vw;
      font-style: normal;
      font-weight: 600;
      line-height: 110%;
      /* il colore arriva inline dal PHP = colore dell'Area */
   }

}