/* ============================================================
   GLS · HEADER E MEGA MENU "FILIGRANA" · 1.0 · 2026-09-26
   Scelta del cliente fra otto varianti (anteprima locale
   header-varianti/gls-header-mega-varianti-chiare.html, variante 5).
   Header: voci in tondo 15,5px Navy, punto Royal sotto la voce attiva,
   voci centrate, CTA a destra con freccia. Mega menu Servizi: titolo a
   sinistra, sei tessere (cinque pilastri e "Tutti i servizi") con un
   evidenziatore che segue il mouse, scheda contatto con ritratto e campo
   di quadrati. Il pannello e costruito da gls-header-filigrana.js leggendo
   il menu di WordPress (voce Servizi): i link restano quelli del menu.
   Solo desktop (1000px e oltre, soglia di Salient); il menu mobile di
   Salient non cambia. Carica dopo gls-design-system.css.
   ============================================================ */

@media (min-width: 1000px) {

  /* ---------- Barra: voci centrate, CTA a destra ---------- */
  #header-outer #top .span_9 { flex: 1 1 auto !important; }            /* la colonna del menu occupa lo spazio libero */
  #header-outer #top nav { width: 100%; }
  #header-outer #top nav > ul.sf-menu:not(.buttons) { display: flex !important; flex: 1 1 auto; align-items: center; float: none !important; }
  #header-outer #top nav > ul.buttons { flex: 0 0 auto !important; }                 /* lista vuota di Salient: non prende spazio */
  #header-outer #top nav > ul.sf-menu:not(.buttons) > li:first-child { margin-left: auto !important; }
  #header-outer #top nav > ul.sf-menu:not(.buttons) > li.gls-nav-cta { margin-left: auto !important; }

  /* ---------- Voci: tondo 15,5px Navy (variante Filigrana) ---------- */
  #header-outer #top nav > ul > li:not([class*="button_"]) > a {
    position: relative !important;
    font-size: 15.5px !important;                      /* vince sul 12px in occhiello del design system */
    font-weight: var(--gls-weight-medium) !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    color: var(--gls-primary) !important;
    padding-left: 16px !important; padding-right: 16px !important; margin: 0 !important; }
  #header-outer #top nav > ul > li:not([class*="button_"]) > a:hover,
  #header-outer #top nav > ul > li.sfHover:not([class*="button_"]) > a,
  #header-outer #top nav > ul > li.current-menu-item > a,
  #header-outer #top nav > ul > li.current-menu-ancestor > a,
  #header-outer #top nav > ul > li.gls-open > a { color: var(--gls-primary) !important; }

  /* Niente filetto animato di Salient: al suo posto un punto Royal 5px sotto la voce */
  #header-outer[data-lhe="animated_underline"] #top nav > ul > li > a .menu-title-text::after { display: none !important; }
  #header-outer #top nav > ul > li:not([class*="button_"]) > a::after {
    content: "" !important; position: absolute !important; left: 50% !important; top: calc(50% + 17px) !important; bottom: auto !important; right: auto !important;
    width: 5px !important; height: 5px !important; margin: 0 !important; border: 0 !important;
    background: var(--gls-royal) !important;
    transform: translateX(-50%) scale(0) !important;
    transition: transform .35s cubic-bezier(.16,1,.3,1) !important; }
  #header-outer #top nav > ul > li:not([class*="button_"]) > a:hover::after,
  #header-outer #top nav > ul > li.current-menu-item > a::after,
  #header-outer #top nav > ul > li.current-menu-ancestor > a::after,
  #header-outer #top nav > ul > li.gls-open > a::after { transform: translateX(-50%) scale(1) !important; }

  /* Freccia della voce Servizi (inserita dallo script) */
  #header-outer .gls-chev { display: inline-block; width: 10px; height: 10px; margin-left: 7px; vertical-align: 1px; transition: transform .35s cubic-bezier(.16,1,.3,1); }
  #header-outer li.gls-open .gls-chev { transform: rotate(180deg); }

  /* CTA con freccia */
  #header-outer #top nav > ul > li.gls-nav-cta > a .gls-ar { display: inline-block; margin-left: 10px; transition: transform .35s cubic-bezier(.16,1,.3,1); }
  #header-outer #top nav > ul > li.gls-nav-cta > a:hover .gls-ar { transform: translateX(4px); }

  /* Il pannello nativo di Salient non si mostra: lo sostituisce #gls-mega */
  #header-outer #top nav > ul > li.gls-mm-servizi > ul.sub-menu { display: none !important; }
}

/* ---------- Pannello Filigrana ---------- */
#gls-mega { display: none; }
@media (min-width: 1000px) {
  #gls-mega {
    display: block; position: absolute; left: 0; right: 0; top: 100%;
    background: var(--gls-surface-base);
    box-shadow: inset 0 1px 0 var(--gls-line-hairline), 0 40px 70px -40px rgba(20, 30, 85, .35);
    visibility: hidden; opacity: 0; transform: translateY(-8px);
    transition: opacity .28s var(--gls-ease), transform .45s cubic-bezier(.16,1,.3,1), visibility 0s linear .45s; }
  #header-outer.gls-mega-open #gls-mega {
    visibility: visible; opacity: 1; transform: none;
    transition: opacity .28s var(--gls-ease), transform .45s cubic-bezier(.16,1,.3,1); }
  #gls-mega-scrim {
    position: fixed; inset: 0; z-index: 9998;
    background: rgba(20, 30, 85, .18);
    -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
    opacity: 0; visibility: hidden; transition: opacity .3s var(--gls-ease), visibility 0s linear .3s; }
  body.gls-mega-dim #gls-mega-scrim { opacity: 1; visibility: visible; transition: opacity .3s var(--gls-ease); }
}
#gls-mega .gm-in { max-width: var(--gls-max-width); margin: 0 auto; padding: 44px var(--gls-gutter) 48px;
  display: grid; grid-template-columns: 190px minmax(0, 1fr) 330px; gap: 40px; font-family: var(--gls-font-body); }
/* Azzeramenti: Salient da margini ai paragrafi e peso ai grassetti */
#gls-mega p, #gls-mega b, #gls-mega small, #gls-mega span, #gls-mega em { margin: 0; padding: 0; font-family: var(--gls-font-body); letter-spacing: 0; text-transform: none; }
#gls-mega p { line-height: 1.4; }
#gls-mega a { text-decoration: none; }
#gls-mega .gm-t { font-family: var(--gls-font-display) !important; font-weight: 400; font-size: 46px; line-height: 1; letter-spacing: -.02em; color: var(--gls-primary); margin: 0; }
#gls-mega .gm-c { margin: 10px 0 30px !important; font-size: 14px; line-height: 1.4; color: var(--gls-ink-muted); }
#gls-mega .gm-lnk { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 500; color: var(--gls-royal); }
#gls-mega .gm-ar { display: inline-block; transition: transform .35s cubic-bezier(.16,1,.3,1); }
#gls-mega a:hover .gm-ar { transform: translateX(4px); }

/* Tessere con evidenziatore che segue il mouse */
#gls-mega .gm-mag { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 18px; align-content: start; }
#gls-mega .gm-hl { position: absolute; left: 0; top: 0; background: var(--gls-blue-050); opacity: 0; pointer-events: none;
  transition: transform .45s cubic-bezier(.16,1,.3,1), width .45s cubic-bezier(.16,1,.3,1), height .45s cubic-bezier(.16,1,.3,1), opacity .25s var(--gls-ease); }
#gls-mega .gm-hl::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--gls-royal); }
#gls-mega .gm-mag.is-on .gm-hl { opacity: 1; }
#gls-mega .gm-it { position: relative; display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 18px; align-items: center; padding: 14px 16px; }
#gls-mega .gm-tb { display: flex; align-items: center; justify-content: center; width: 54px; height: 54px; background: var(--gls-blue-050); color: var(--gls-royal);
  transition: background .35s var(--gls-ease), color .35s var(--gls-ease); }
#gls-mega .gm-tb svg { width: 24px; height: 24px; transition: transform .45s cubic-bezier(.16,1,.3,1); }
#gls-mega .gm-it:hover .gm-tb, #gls-mega .gm-it:focus-visible .gm-tb { background: var(--gls-royal); color: var(--gls-ink-inverse); }
#gls-mega .gm-it:hover .gm-tb svg { transform: scale(1.1); }
#gls-mega .gm-it b { display: block; font-size: 17px; font-weight: 500; line-height: 1.25; color: var(--gls-primary); }
#gls-mega .gm-it small { display: block; margin-top: 5px; font-size: 13px; line-height: 1.4; color: var(--gls-ink-muted); }
#gls-mega .gm-it .gm-k { display: block; margin: 0 0 4px; font-style: normal; font-size: 10px; font-weight: 600; line-height: 1.2; letter-spacing: .1em; white-space: nowrap; text-transform: uppercase; color: var(--gls-blue-600); } /* numero e parola chiave del pilastro, colore Struttura */
#gls-mega .gm-it:hover .gm-k { color: var(--gls-royal); }
#gls-mega .gm-it.is-all b { color: var(--gls-royal); }
#gls-mega .gm-it.is-all .gm-tb { background: var(--gls-surface-base); box-shadow: inset 0 0 0 1px var(--gls-blue-200); }
#gls-mega .gm-it:focus-visible { outline: 2px solid var(--gls-royal); outline-offset: 2px; }

/* Scheda contatto */
#gls-mega .gm-card { position: relative; overflow: hidden; display: flex; flex-direction: column; min-height: 320px; padding: 32px; background: var(--gls-blue-050); }
#gls-mega .gm-field { position: absolute; right: 0; top: 0; display: grid; grid-template-columns: repeat(9, 16px); gap: 6px; padding: 14px; }
#gls-mega .gm-field i { width: 16px; height: 16px; background: var(--gls-royal); opacity: .08; }
#header-outer.gls-mega-open #gls-mega .gm-field i { animation: gls-mega-cell 6s var(--gls-ease) infinite; animation-delay: var(--d); }
#gls-mega .gm-ph { position: relative; width: 76px; height: 76px; padding: 0 8px 8px 0; }
#gls-mega .gm-ph::before { content: ""; position: absolute; left: 8px; top: 8px; right: 0; bottom: 0; background: var(--gls-royal); }
#gls-mega .gm-ph img { position: relative; display: block; width: 68px; height: 68px; object-fit: cover; }
#gls-mega .gm-card .gm-h { position: relative; margin: auto 0 8px; padding-top: 28px; font-family: var(--gls-font-display) !important; font-weight: 400; font-size: 29px; line-height: 1.15; letter-spacing: -.01em; color: var(--gls-primary); }
#gls-mega .gm-card p:not(.gm-h) { position: relative; margin: 0 0 22px; font-size: 14px; line-height: 1.5; color: var(--gls-ink-muted); }
#gls-mega .gm-btn { position: relative; align-self: flex-start; display: inline-flex; align-items: center; gap: 12px; height: 50px; padding: 0 24px;
  border-radius: var(--gls-radius-btn); background: var(--gls-royal); color: var(--gls-ink-inverse); font-size: 15px; font-weight: 500; transition: background-color .16s var(--gls-ease); }
#gls-mega .gm-btn:hover { background: var(--gls-action-hover); color: var(--gls-ink-inverse); }
#gls-mega .gm-btn:focus-visible, #gls-mega .gm-lnk:focus-visible { outline: 2px solid var(--gls-royal); outline-offset: 2px; }

/* Entrata: salita in sequenza e icone disegnate tratto per tratto */
#header-outer.gls-mega-play #gls-mega .gm-st { animation: gls-mega-rise .6s cubic-bezier(.16,1,.3,1) both; animation-delay: var(--d, 0s); }
#header-outer.gls-mega-play #gls-mega .gm-draw svg * { stroke-dasharray: 1; stroke-dashoffset: 1; animation: gls-mega-draw .9s cubic-bezier(.16,1,.3,1) forwards; animation-delay: var(--d, 0s); }
@keyframes gls-mega-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes gls-mega-draw { to { stroke-dashoffset: 0; } }
@keyframes gls-mega-cell { 0%, 40% { opacity: .08; } 48% { opacity: .9; } 60%, 100% { opacity: .08; } }

@media (prefers-reduced-motion: reduce) {
  #gls-mega, #gls-mega *, #gls-mega-scrim { transition-duration: 1ms !important; animation: none !important; }
  #gls-mega .gm-draw svg * { stroke-dashoffset: 0 !important; }
}