/*  -------------------------------------------------------------------------- */
/*  Base (comune)  
/*  -------------------------------------------------------------------------- */

#Header {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 9999;
  background-color: var(--Header_Background_Color);
  color: var(--Header_Text_Color);
  font-family: var(--Header_Font);
  box-sizing: border-box;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
}
#Header .Inner {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  justify-content: center;
  padding-left: 4rem;
}
#Header .LogoBox {
  display: flex;
  align-items: center;
  position: absolute;
  left: 8%;
  z-index: 199;
  top: 0.9rem;
}
#Header .Logo {
  display: flex;
  align-items: center;
  text-decoration: none;
}
#Header #google_translate_element{ display: none !important; }


/*  -------------------------------------------------------------------------- */
/*  Mobile  
/*  -------------------------------------------------------------------------- */
  @media screen and (max-width: 440px) {

    body {
      padding-top: 6.5rem !important;
    }

    #Header {
      height: 6.5rem;
      padding: 0 2rem;
    }
    #Header .Inner {
      justify-content: flex-end;
      padding-left: 0;
    }
    #Header .LogoBox .Logo img {
      height: 3.6rem;
    }
    #Header .LogoBox {
      display: flex;
      align-items: center;
      position: absolute;
      left: 5%;
      z-index: 199;
      top: auto;
    }

    #Header #MobileMenu {
      display: block;
      font-size: 2.9rem;
      line-height: 1em;
      color: var(--Palette2);
      cursor: pointer;
    }
    #MobileMenu.MobileMenu span {
      display: block;
      width: 28px;
      height: 3px;
      margin: 5px 0;
      background: var(--Palette1dark);
      transition: transform 0.25s ease, opacity 0.1s ease;
      transform-origin: center;
      border-radius: 1rem;
    }
    #MobileMenu.MobileMenu.is-open span:nth-child(1) {
      transform: translateY(8px) rotate(45deg);
      background: var(--Box_Evento_Button_Text_Color) !important;
    }
    #MobileMenu.MobileMenu.is-open span:nth-child(2) {
      opacity: 0;
    }
    #MobileMenu.MobileMenu.is-open span:nth-child(3) {
      transform: translateY(-8px) rotate(-45deg);
      background: var(--Box_Evento_Button_Text_Color) !important;
    }

    #Header .Inner > .rightHeader {
      display: none; /* su mobile vive dentro il pannello overlay, vedi .mobile-utility */
    }

    #Header #HeaderMenu {
      display: none;
      position: fixed;
      left: 0;
      top: 6.5rem;
      background: #ffffff;
      width: 100%;
      overflow-x: hidden;
      overflow-y: auto;
      height: calc(100vh - 6.5rem);
      overscroll-behavior: contain;
      z-index: 100;
      font-family: var(--Header_Menu_Font);
      max-height: 0;
      opacity: 0;
      transform: translateY(-10px);
      transition: max-height 0.3s ease, opacity 0.3s ease, transform 0.3s ease;
    }
    #Header #HeaderMenu.is-open {
      display: flex;
      flex-direction: column;
      max-height: calc(100vh - 6.5rem);
      opacity: 1;
      transform: translateY(0);
      background: #ffffff;
    }

    #Header #HeaderMenu > UL,
    #Header #HeaderMenu > UL > LI > UL,
    #Header #HeaderMenu > UL > LI > UL > LI {
      margin: 0;
      padding: 0;
      list-style: none;
      display: block;
    }
    #Header #HeaderMenu > UL {
      order: 1;
      padding-top: 0.5rem;
    }
    #Header #HeaderMenu > UL > LI {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      column-gap: 0.7rem;
      position: relative;
      font-size: 1.2rem;
      font-weight: 600;
      line-height: 3.2rem;
      text-transform: uppercase;
      color: var(--Palette1dark);
      padding: 0 2rem;
      box-sizing: border-box;
      -webkit-user-select: none;
      user-select: none;
      transition: background 0.2s ease, color 0.2s ease;
    }
    #Header #HeaderMenu > UL > LI.sub-open {
      background: #ec3036;
      color: #ffffff;
    }
    #Header #HeaderMenu > UL > LI > A {
      display: block;
      text-decoration: none;
      color: inherit;
      line-height: 3.2rem;
      font-weight: 600;
      outline: none;
      font-size: 1.2rem;
      text-transform: uppercase;
      flex: 0 1 auto;
    }
    /* la voce non naviga né apre/chiude: comanda solo la freccia */
    #Header #HeaderMenu > UL > LI.has-submenu > A {
      pointer-events: none;
    }
    #Header #HeaderMenu > UL > LI > UL {
      flex: 1 0 100%;
      order: 3;
      display: block;
      background: #ffffff;
      margin: 0 -2rem; /* bleed: copre il padding della LI, elimina le strisce rosse ai lati */
      padding: 0.3rem 0 0.8rem 0;
    }
    #Header #HeaderMenu > UL > LI > UL > LI {
      font-size: 1.05rem;
      font-weight: 500;
      line-height: 2.8rem;
      text-transform: uppercase;
      color: var(--Palette1dark);
      padding: 0 2rem;
      box-sizing: border-box;
    }
    #Header #HeaderMenu > UL > LI > UL > LI > A {
      display: block;
      text-decoration: none;
      color: inherit;
      margin: 0 -2rem;
      padding: 0 2rem;
      line-height: 2.8rem;
      font-weight: 500;
      outline: none;
      font-size: 1.05rem;
      text-transform: uppercase;
    }
    #Header #HeaderMenu li.has-submenu > ul{
      max-height: 0;
      overflow: hidden;
      opacity: 0;
      pointer-events: none;
      transition: max-height .25s ease, opacity .2s ease;
    }
    #Header #HeaderMenu li.sub-open > ul{
      max-height: 100vh;
      opacity: 1;
      pointer-events: auto;
    }
    #Header #HeaderMenu button.SubToggle {
      position: static;
      order: 2;
      flex: 0 0 auto;
      width: 1.4rem;
      height: 1.4rem;
      margin: 0;
      padding: 0;
      border: 0;
      background: transparent;
      color: inherit;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }
    #Header #HeaderMenu button.SubToggle::before {
      content: "";
      width: 0;
      height: 0;
      border-left: 0.4rem solid transparent;
      border-right: 0.4rem solid transparent;
      border-top: 0.5rem solid currentColor;
      transition: transform 0.2s ease;
    }
    #Header #HeaderMenu li.sub-open > button.SubToggle::before {
      transform: rotate(180deg);
    }

    #Header #HeaderMenu .mobile-utility {
      order: 2;
      display: flex;
      flex-direction: column;
      gap: 1.2rem;
      padding: 1.5rem 2rem 2rem 2rem;
      background: #ffffff;
      font-family: var(--Header_Font);
    }
    #Header #HeaderMenu .mobile-utility .LangToggle {
      order: 1;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      font-size: 1.1rem;
      font-weight: 500;
      text-transform: uppercase;
      text-decoration: none;
      color: var(--Palette1dark);
    }
    #Header #HeaderMenu .mobile-utility .LoginButton {
      order: 2;
      display: flex;
      align-items: center;
      gap: 0.6rem;
      font-size: 1.3rem;
      text-decoration: none;
      color: var(--Palette1dark);
    }
    #Header #HeaderMenu .mobile-utility #SearchBlock {
      order: 3;
      background-color: #fafafa;
      border: 0.05rem solid #999999;
      border-radius: 0.25rem;
      height: 2.8rem;
      line-height: 2.8rem;
    }
    #Header #HeaderMenu .mobile-utility #SearchBlock .SrcInner {
      display: flex;
      align-items: center;
    }
    #Header #HeaderMenu .mobile-utility #SearchBlock .GsTextBox {
      border: 0;
      background: transparent;
      outline: none;
      padding-left: 0.7rem;
      font-size: 1.1rem;
      color: #666666;
      flex: 1;
    }
    #Header #HeaderMenu .mobile-utility #SearchBlock #bt {
      width: 2.8rem;
      text-align: center;
      color: #666666;
      cursor: pointer;
    }

    body.menu-open #acsb-trigger,
    body.menu-open .acsb-trigger,
    body.menu-open .acsb-widget,
    body.menu-open #userway-widget,
    body.menu-open .userway,
    body.menu-open .uwy,
    body.menu-open [class*="accessibility"],
    body.menu-open [id*="accessibility"]{
      display: none !important;
      visibility: hidden !important;
      opacity: 0 !important;
      pointer-events: none !important;
    }

  }

/*  -------------------------------------------------------------------------- */
/*  Desktop  
/*  -------------------------------------------------------------------------- */
  @media screen and (min-width: 441px) {

    body {
      padding-top: 5rem !important;
    }

    #Header {
      height: 5rem;
      padding: 0 2.5rem;
    }
    #Header .Inner {
      column-gap: 1.8rem;
    }
    #Header .LogoBox .Logo img {
      height: 3rem;
    }

    #Header #MobileMenu,
    #Header #UserMenu {
      display: none;
    }

    #Header .rightHeader {
      display: flex;
      align-items: center;
      column-gap: 1.8rem;
      font-family: var(--Header_Font);
      height: 100%;
    }

    /* ---- menu Atelier (header-menu) ---- */
    #Header #HeaderMenu {
      font-family: var(--Header_Menu_Font);
      -webkit-user-select: none;
      user-select: none;
      height: 100%;
      display: flex;
      align-items: center;
      flex-wrap: nowrap;
    }
    #HeaderMenu ul {
      display: flex;
      align-items: center;
      margin: 0;
      padding: 0;
      list-style: none;
      column-gap: 1.8rem;
    }
    #HeaderMenu > ul {
      height: 100%;
    }
    #Header .LangToggle,
    #HeaderMenu > ul > li {
      position: relative;
      height: 50%;
      display: flex;
      align-items: center;
      text-transform: uppercase;
      font-size: 1.1rem;
      border-bottom: 0.2rem solid transparent;
      transition: color 0.3s ease, border-color 0.3s ease;
      cursor: pointer;
      padding-bottom: 0rem;
      margin-bottom: 0rem !important;
    }
    #HeaderMenu > ul > li > a {
      text-transform: uppercase;
      text-decoration: none;
      color: var(--Palette1dark);
    }
    #HeaderMenu > ul > li:hover,
    #HeaderMenu > ul > li > a:hover,
    #HeaderMenu > ul > li.active > a {
      border-bottom-color: #ec3036;
    }

    /* ---- sottomenu: pannello full-width, colonne max 5 voci ---- */
    #HeaderMenu > ul > li > ul {
      position: fixed;
      top: 3.8rem;
      left: 0;
      width: 100%;
      background: #ffffff;
      box-shadow: 0 1rem 1.4rem rgba(0, 0, 0, 0.1);
      margin: 0;
      padding: 0rem 4rem 2.5rem var(--menu-offset, 4rem);
      padding-top: 1rem;
      list-style: none;
      display: grid;
      grid-template-rows: repeat(5, auto);
      grid-auto-flow: column;
      column-gap: 3rem;
      row-gap: 0.3rem;
      justify-content: start;
      box-sizing: border-box;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transform: translateY(-0.5rem);
      transition: opacity 0.2s ease, transform 0.2s ease;
      z-index: 99;
    }
    #HeaderMenu > ul > li:hover > ul {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
      transform: translateY(0);
    }
    #HeaderMenu > ul > li > ul > li {
      list-style: none;
    }
    #HeaderMenu > ul > li > ul > li > a {
      display: block;
      padding: 0.3rem 0;
      font-size: 1.1rem;
      font-weight: 300;
      text-transform: none;
      text-align: left;
      text-decoration: none;
      white-space: nowrap;
      color: var(--Palette1dark);
      transition: color 0.2s ease;
    }
    #HeaderMenu > ul > li > ul > li > a:hover {
      color: #ec3036;
    }

    /* ---- utility: lingua / ricerca / accedi ---- */
    #Header .LangToggle {
      font-size: 1.1rem;
      text-transform: uppercase;
      text-decoration: none;
      color: var(--Palette1dark);
      font-family: var(--Header_Font);
      border-bottom: 0.2rem solid transparent;
      transition: color 0.3s ease, border-color 0.2s ease;
      cursor: pointer;
    }
    #Header .LangToggle:hover {
      border-bottom-color: #ec3036;
    }
    #Header .rightHeader #SearchBlock {
      position: relative;
      display: flex;
      align-items: center;
      height: 2.2rem;
    }
    #Header .rightHeader #SearchBlock #bt {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 1.6rem;
      height: 2.2rem;
      cursor: pointer;
      color: var(--Palette1dark);
      transition: color 0.2s ease;
      font-weight: 300;
    }
    #Header .rightHeader #SearchBlock:hover #bt {
      color: #ec3036;
    }
    #Header .rightHeader #SearchBlock .GsTextBox {
      max-width: 0;
      opacity: 0;
      overflow: hidden;
      pointer-events: none;
      border: 0;
      border-bottom: 0.1rem solid var(--Palette1dark);
      outline: none;
      background: transparent;
      font-size: 0.9rem;
      padding: 0;
      transition: max-width 0.4s ease, opacity 0.25s ease, padding 0.4s ease;
    }
    #Header .rightHeader #SearchBlock.is-open .GsTextBox {
      max-width: 16rem;
      opacity: 1;
      pointer-events: auto;
      padding-left: 0.6rem;
    }
    #Header .rightHeader .LoginButton {
      display: flex;
      align-items: center;
      gap: 0.4rem;
      font-size: 1.1rem;
      font-weight: 500;
      text-transform: uppercase;
      text-decoration: none;
      color: var(--Palette1dark);
      transition: color 0.2s ease;
    }
    #Header .rightHeader .LoginButton:hover {
      color: #ec3036;
    }
    #Header .rightHeader .LoginButton .fa-caret-right {
      display: none;
    }

    button.SubToggle {
      display: none;
    }

  }