/* Nuovo header XMAG — mega-menu, evidenziazione pagina attiva, menu mobile off-canvas.
   Palette e forma riprendono l'header originale (trasparente in alto, pesca/arancione
   allo scroll e su mobile) per restare graficamente coerenti col resto del sito.
   Regole isolate in questo file (non tocca style.css) per limitare il rischio di
   regressioni sul resto del sito. */
:root{
  --xh-peach:#ffc181;
  --xh-orange:#faa752;
  --xh-orange-deep:#ff8000;
  --xh-cream:#f0f0f0;
  --xh-ink:#201a12;
  --xh-ink-dim:rgba(32,26,18,0.65);
  --xh-line-light:rgba(0,0,0,0.08);
  --xh-shadow:0px 10px 34px -20px rgba(0,0,0,0.41);
  --xh-shadow-scrolled:0 0 10px 0 rgba(0,0,0,0.1);
  --xh-font:"Work Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}

.skip-link{
  position:absolute;left:-999px;top:0;background:var(--xh-orange);color:var(--xh-ink);
  padding:.6rem 1rem;border-radius:0 0 8px 0;z-index:1200;font-weight:600;font-family:var(--xh-font);
}
.skip-link:focus{left:0;}

/* ---------- Header bar ---------- */
header.xmag-header{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  background:transparent;padding:26px 0;font-family:var(--xh-font);
  transition:background-color .3s ease, padding .3s ease, box-shadow .3s ease;
}
header.xmag-header.scrolled{
  background:var(--xh-peach);padding:8px 0;box-shadow:var(--xh-shadow-scrolled);
}
header.xmag-header.scrolled .brand img{max-width:70px;}
.xmag-header .bar{
  max-width:1140px;margin:0 auto;padding:0 15px;
  display:flex;align-items:center;gap:22px;
}

.xmag-header .brand{display:flex;align-items:center;gap:10px;flex-shrink:0;}
.xmag-header .brand img{max-width:90px;height:auto;display:block;transition:max-width .3s ease;}

.xmag-header nav.primary{display:flex;align-items:center;gap:2px;flex:1;}
.xmag-header nav.primary > ul{display:flex;align-items:center;gap:2px;list-style:none;margin:0;padding:0;}
.xmag-header .nav-item{position:relative;display:flex;align-items:center;}
.xmag-header .nav-link{
  display:flex;align-items:center;gap:6px;
  padding:10px 14px;border-radius:4px;
  font-size:.92rem;color:rgba(255,255,255,0.88);font-weight:400;font-family:inherit;
  white-space:nowrap;cursor:pointer;border:none;background:none;text-decoration:none;
  transition:color .2s, background-color .2s;
}
.xmag-header .nav-link:hover, .xmag-header .nav-link:focus-visible{color:#fff;background:rgba(255,255,255,0.08);}
header.xmag-header.scrolled .nav-link{color:var(--xh-ink);}
header.xmag-header.scrolled .nav-link:hover, header.xmag-header.scrolled .nav-link:focus-visible{color:#000;background:rgba(0,0,0,0.05);}

.xmag-header .nav-item.is-active > .nav-link,
.xmag-header .nav-item.has-link.is-active .nav-link{color:#fff;}
header.xmag-header.scrolled .nav-item.is-active > .nav-link,
header.xmag-header.scrolled .nav-item.has-link.is-active .nav-link{color:#000;}
.xmag-header .nav-item.is-active::after,
.xmag-header .nav-item.has-link.is-active::after{
  content:"";position:absolute;left:14px;right:14px;bottom:2px;height:2px;
  background:linear-gradient(90deg,var(--xh-orange),var(--xh-orange-deep));border-radius:2px;
}
.xmag-header .chev{width:9px;height:9px;flex-shrink:0;transition:transform .2s ease;opacity:.7;}
.xmag-header .nav-item.is-open .chev{transform:rotate(180deg);}
.xmag-header a.nav-link:focus-visible, .xmag-header button.nav-link:focus-visible,
.xmag-header .nav-chev:focus-visible{outline:2px solid var(--xh-orange);outline-offset:2px;}

/* split link+chevron items (Omnichannel / Prodotto / Chi Siamo) */
.xmag-header .nav-item.has-link{border-radius:4px;padding-right:4px;}
.xmag-header .nav-item.has-link:hover, .xmag-header .nav-item.has-link:focus-within{background:rgba(255,255,255,0.08);}
header.xmag-header.scrolled .nav-item.has-link:hover, header.xmag-header.scrolled .nav-item.has-link:focus-within{background:rgba(0,0,0,0.05);}
.xmag-header .nav-item.has-link:hover .nav-link, .xmag-header .nav-item.has-link:focus-within .nav-link{color:#fff;}
header.xmag-header.scrolled .nav-item.has-link:hover .nav-link, header.xmag-header.scrolled .nav-item.has-link:focus-within .nav-link{color:#000;}
.xmag-header .nav-item.has-link .nav-link{padding-right:4px;}
.xmag-header .nav-chev{
  display:flex;align-items:center;padding:10px 10px 10px 4px;border-radius:4px;
  border:none;background:none;color:rgba(255,255,255,0.7);cursor:pointer;
}
header.xmag-header.scrolled .nav-chev{color:var(--xh-ink-dim);}
.xmag-header .nav-item.has-link:hover .nav-chev, .xmag-header .nav-item.has-link:focus-within .nav-chev{color:#fff;}
header.xmag-header.scrolled .nav-item.has-link:hover .nav-chev, header.xmag-header.scrolled .nav-item.has-link:focus-within .nav-chev{color:#000;}

/* mini mega-menu — pannello chiaro, come i dropdown dell'header originale */
.xmag-header .mega{
  position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%) translateY(4px);
  width:340px;padding:10px;border-radius:6px;
  background:#fff;border:none;box-shadow:var(--xh-shadow);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .16s ease, transform .16s ease, visibility .16s;
  z-index:50;
}
.xmag-header .nav-item.is-open .mega{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0);}
.xmag-header .mega a{
  display:flex;gap:12px;align-items:flex-start;padding:10px 10px;border-radius:4px;
  color:#495057;text-decoration:none;transition:background-color .15s;
}
.xmag-header .mega a:hover, .xmag-header .mega a:focus-visible{background:rgba(250,167,82,0.1);}
.xmag-header .mega a:focus-visible{outline:2px solid var(--xh-orange);outline-offset:-2px;}
.xmag-header .mega .ic{
  flex:0 0 34px;height:34px;border-radius:8px;background:rgba(250,167,82,0.15);
  display:flex;align-items:center;justify-content:center;color:var(--xh-orange);
}
.xmag-header .mega .ic i{font-size:17px;line-height:1;}
.xmag-header .mega strong{display:block;font-size:.86rem;font-weight:600;color:var(--xh-ink);}
.xmag-header .mega small{display:block;margin-top:2px;font-size:.76rem;color:#6c757d;line-height:1.35;}

/* CTA + social */
.xmag-header .side{display:flex;align-items:center;gap:14px;flex-shrink:0;margin-left:auto;}
.xmag-header .socials{display:flex;align-items:center;gap:8px;padding-right:12px;border-right:1px solid rgba(255,255,255,0.25);}
header.xmag-header.scrolled .socials{border-right-color:rgba(0,0,0,0.15);}
.xmag-header .socials a{
  width:50px;height:50px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,0.05);
  color:rgba(255,255,255,0.85);transition:color .2s, background-color .2s;
}
.xmag-header .socials a:hover, .xmag-header .socials a:focus-visible{color:#fff;background:rgba(255,255,255,0.1);}
header.xmag-header.scrolled .socials a{color:var(--xh-ink-dim);background:rgba(0,0,0,0.03);}
header.xmag-header.scrolled .socials a:hover, header.xmag-header.scrolled .socials a:focus-visible{color:var(--xh-ink);background:rgba(0,0,0,0.05);}
.xmag-header .socials span{font-size:26px;line-height:1;}

.xmag-header .cta, .xmag-offcanvas .cta{
  display:inline-flex;align-items:center;gap:8px;
  padding:.5rem 1.25rem;margin-top:4px;border-radius:30px;font-weight:400;font-size:.92rem;font-family:inherit;
  color:#fff;background:transparent;border:1px solid rgba(255,255,255,0.3);text-decoration:none;
  transition:background-color .2s, color .2s, border-color .2s;
}
.xmag-header .cta:hover, .xmag-header .cta:focus-visible{background:rgba(255,255,255,0.1);}
.xmag-header .cta:focus-visible{outline:2px solid #fff;outline-offset:2px;}
header.xmag-header.scrolled .cta{color:#000;background:var(--xh-orange);border-color:transparent;}
header.xmag-header.scrolled .cta:hover{background:var(--xh-orange-deep);}

.xmag-header .burger{
  display:none;width:42px;height:42px;border-radius:6px;border:1px solid rgba(32,26,18,0.2);
  background:rgba(32,26,18,0.06);color:var(--xh-ink);
  align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;
}
.xmag-header .burger svg{width:19px;height:19px;}

/* ---------- Off-canvas mobile menu — pesca, come il menu mobile originale ---------- */
.xmag-backdrop{
  position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:1050;
  opacity:0;pointer-events:none;transition:opacity .25s ease;
}
.xmag-backdrop.show{opacity:1;pointer-events:auto;}
.xmag-offcanvas{
  position:fixed;top:0;right:0;bottom:0;width:min(86vw,360px);z-index:1060;
  background:var(--xh-peach);
  display:flex;flex-direction:column;font-family:var(--xh-font);
  transform:translateX(100%);transition:transform .3s ease;
  box-shadow:-20px 0 40px rgba(0,0,0,.25);
}
.xmag-offcanvas.show{transform:translateX(0);}
.xmag-offcanvas .oc-head{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:1px solid var(--xh-line-light);}
.xmag-offcanvas .oc-close{width:38px;height:38px;border-radius:6px;border:1px solid rgba(32,26,18,0.2);background:none;color:var(--xh-ink);display:flex;align-items:center;justify-content:center;cursor:pointer;}
.xmag-offcanvas .oc-close svg{width:16px;height:16px;}
.xmag-offcanvas .oc-nav{list-style:none;margin:0;padding:10px 12px;overflow-y:auto;flex:1;}
.xmag-offcanvas .oc-nav > li{border-bottom:1px solid var(--xh-line-light);}
.xmag-offcanvas .oc-row{display:flex;align-items:center;}
.xmag-offcanvas .oc-link{
  display:flex;align-items:center;justify-content:space-between;gap:8px;flex:1;
  padding:15px 8px;background:none;border:none;color:var(--xh-ink);
  font-size:1rem;font-weight:500;font-family:inherit;text-align:left;text-decoration:none;cursor:pointer;
}
.xmag-offcanvas .oc-chev{
  flex:0 0 auto;padding:15px 10px;background:none;border:none;color:var(--xh-ink-dim);cursor:pointer;display:flex;align-items:center;
}
.xmag-offcanvas .chev{width:10px;height:10px;transition:transform .2s;flex-shrink:0;}
.xmag-offcanvas .oc-item.is-open .chev{transform:rotate(180deg);}
.xmag-offcanvas .oc-sub{list-style:none;margin:0;padding:0 8px 12px 14px;max-height:0;overflow:hidden;transition:max-height .25s ease;}
.xmag-offcanvas .oc-item.is-open .oc-sub{max-height:400px;}
.xmag-offcanvas .oc-sub a{display:block;padding:10px 6px;color:var(--xh-ink-dim);font-size:.92rem;border-radius:4px;text-decoration:none;}
.xmag-offcanvas .oc-sub a:hover{color:var(--xh-ink);background:rgba(0,0,0,0.05);}
.xmag-offcanvas .oc-foot{padding:18px 20px;border-top:1px solid var(--xh-line-light);display:flex;flex-direction:column;gap:14px;}
.xmag-offcanvas .oc-foot .cta{justify-content:center;width:100%;color:#000;background:var(--xh-orange);border:none;}
.xmag-offcanvas .oc-foot .cta:hover{background:var(--xh-orange-deep);}
.xmag-offcanvas .oc-foot .socials{display:flex;align-items:center;gap:8px;justify-content:center;}
.xmag-offcanvas .oc-foot .socials a{
  width:36px;height:36px;border-radius:8px;display:flex;align-items:center;justify-content:center;
  color:var(--xh-ink);transition:background-color .2s;
}
.xmag-offcanvas .oc-foot .socials a:hover{background:rgba(0,0,0,0.06);}
.xmag-offcanvas .oc-foot .socials span{font-size:16px;line-height:1;}

@media (max-width:991.98px){
  header.xmag-header{background:var(--xh-peach) !important;padding:14px 0;}
  .xmag-header nav.primary, .xmag-header .socials{display:none;}
  .xmag-header .burger{display:flex;}
  .xmag-header .bar{gap:12px;}
}

@media (prefers-reduced-motion: reduce){
  header.xmag-header, .xmag-header .mega, .xmag-header .chev, .xmag-header .brand img,
  .xmag-offcanvas, .xmag-backdrop, .xmag-offcanvas .oc-sub{transition-duration:.001s !important;}
}
