/*
 * Menu principale: anmegamenu (Ecco Bella 3.15) con l'aspetto del vecchio an_megamenu del live (fino al 28/10/2026).
 * Valori presi dagli stili calcolati del live a 1440 px (theme.css e custom.css del live, CSS generato da an_theme 3.11).
 * Il CSS generato del live non definisce le variabili del menu nuovo: senza queste il testo delle tendine eredita
 * il bianco dell'intestazione. Caricato per ultimo (priorita' 1010), quindi vale anche se un giorno il CSS di an_theme
 * viene rigenerato dal back office con i valori della 3.15.
 */
.anmm-menu,
.anmm-list-mobile {
  --menu-title-font-size: 15px;
  --menu-title-line-height: 15px;
  --menu-title-weight: 700;
  --menu-title-case: uppercase;
  --menu-title-color: #ffffff;
  --menu-title-color-hover: #ff401e;
  --menu-title-bg-color: transparent;
  --menu-title-bg-color-hover: transparent;
  --menu-title-underline-height: 0px;
  --menu-title-underline-color: transparent;
  --menu-submenu-title-color: #000000;
  --menu-submenu-title-color-hover: #ff4447;
  --menu-submenu-title-font-size: 13px;
  --menu-link-font-size: 13px;
  --menu-link-line-height: 24px;
  --menu-text-color: #000000;
  --menu-link-color: #000000;
  --menu-link-color-hover: #ff4447;
  --menu-bg-color: #ffffff;
  --menu-gap: 0px;
  --radius: 0px;
  --dropdown-border-width: 0px;
  --dropdown-border-color: transparent;
  --dropdown-image-radius: 0px;
}

@keyframes hofer-menu-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (min-width: 992px) {
  /* .anav-top del live: centrata, con margin-right 3% (custom.css del live) */
  .anmm-menu-desktop .anmm-list {
    width: 97%;
    margin-right: 3%;
    justify-content: center;
  }
  /* voci di primo livello: #header .amenu-item .amenu-link del live */
  .anmm-menu-desktop .anmm-menu-item {
    position: relative;
    line-height: 1;
    text-align: center;
  }
  .anmm-menu-desktop .anmm-link {
    display: block;
    padding: 22px 18px 18px;
    font-size: 15px;
    line-height: 15px;
  }
  .anmm-menu-desktop .anmm-title {
    font-weight: 700;
  }
  /* sul live la voce resta rossa solo col mouse sopra, non mentre si scorre la tendina */
  .anmm-menu-desktop .anmm-menu-horizontal.open .anmm-title {
    color: var(--menu-title-color) !important;
  }
  .anmm-menu-desktop .anmm-menu-horizontal .anmm-link:hover .anmm-title {
    color: var(--menu-title-color-hover) !important;
  }

  /* tendina: .amenu-item .adropdown.adropdown-1 del live, centrata sotto la voce.
     Il JS di anmegamenu scrive top/left/right/width in linea, calcolati per una tendina larga quanto il menu. */
  .anmm-menu-desktop .anmm-dropdown {
    top: 100% !important;
    right: auto !important;
    left: 50% !important;
    width: 222px !important;
    min-width: 200px;
    max-height: none;
    overflow: visible;
    padding: 15px 25px 10px;
    transform: translateX(-50%);
    background: #ffffff;
    border: 0;
    border-radius: 0 0 5px 5px;
    box-shadow: 0 8px 19px rgba(0, 0, 0, 0.15);
    z-index: 999;
    line-height: 1;
    text-align: center;
  }
  .anmm-menu-desktop .anmm-menu-item.open .anmm-dropdown {
    animation: hofer-menu-fade 0.3s;
  }

  /* blocchi uno sotto l'altro: .dropdown-content del live */
  .anmm-menu-desktop .anmm-row {
    display: block;
    margin: 0;
  }
  .anmm-menu-desktop .anmm-column {
    float: none;
    width: 100%;
    max-width: 100%;
    flex: none;
    padding: 15px 15px 7px;
    list-style: none;
  }
  /* .categories-grid del live: colonna flex con wrap, quindi larga quanto la categoria piu' larga (i testi si
     centrano su quella anche quando esce dal riquadro) */
  .anmm-menu-desktop .anmm-dropdown-content {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: stretch;
    margin: 0;
  }
  .anmm-menu-desktop .anmm-category-item {
    display: flex;
    flex-direction: column;
    float: none;
    clear: none;
    width: auto;
    max-width: none;
    margin: 0 0 15px;
  }
  .anmm-menu-desktop .anmm-category-title {
    margin: 3px 0 14px;
    font-size: 18px;
    font-weight: 400;
    line-height: 26px;
    color: #000000;
  }
  .anmm-menu-desktop .anmm-category-title a,
  .anmm-menu-desktop .anmm-category-title a span {
    display: inline;
    font-size: 13px;
    font-weight: 700;
    line-height: 24px;
    text-transform: uppercase;
    color: #000000;
  }
  .anmm-menu-desktop .anmm-category-title a:hover,
  .anmm-menu-desktop .anmm-category-title a:hover span {
    color: #ff4447 !important;
  }
}

/* sul live la tendina era 186 px tra 992 e 1199, ma con un minimo di 200 */
@media (min-width: 992px) and (max-width: 1199px) {
  .anmm-menu-desktop .anmm-dropdown {
    width: 200px !important;
  }
}

/* voci piu' strette fino a 1200 px (theme.css del live) */
@media (min-width: 992px) and (max-width: 1200px) {
  .anmm-menu-desktop .anmm-link {
    padding: 22px 5px 18px;
  }
}

/*
 * Menu mobile (sotto i 992 px): pannello del tema con le voci di anmegamenu, con l'aspetto del vecchio menu mobile del
 * live (front.css di an_megamenu e custom.css). Misure prese dal live a 375 px.
 */
@media (max-width: 991px) {
  /* la 3.15 apre il pannello a destra (float: right !important): sul live si apriva da sinistra */
  #mobile_top_menu_wrapper {
    float: left !important;
    padding: 19px 0;
    font-size: 15px;
  }
  /* la 3.15 mette "Accedi" in una riga flex alta 60 px, rientrata di 14 px */
  #_mobile_user_info {
    display: block;
    height: auto;
    margin-left: 0;
  }
  .anmm-list-mobile {
    --menu-title-font-size: 13px;
    --menu-title-line-height: 13px;
    --menu-title-weight: 400;
    --menu-title-color: #000000;
    --menu-title-color-hover: #ff401e;
    /* .anav-top del live: il margin-right 3% valeva anche nel menu mobile */
    width: 97%;
    margin-right: 3%;
  }
  .anmm-list-mobile .anmm-menu-item {
    align-items: center;
    line-height: 15px;
    text-align: center;
  }
  .anmm-list-mobile .anmm-link {
    width: 100%;
    /* il front.css di anmegamenu mette padding: 10px 45px 10px 29px !important */
    padding: 0 29px !important;
    gap: 0;
    justify-content: space-between;
    align-items: center;
    line-height: 13px;
    background: transparent;
  }
  .anmm-list-mobile .anmm-link-title {
    padding: 11px 0;
    margin-bottom: 1px;
    font-size: 13px;
    font-weight: 400;
    line-height: 13px;
    text-transform: uppercase;
    text-align: center;
    color: #000000 !important;
  }
  /* freccia: come lo span .mobile-toggler del live (area di tocco 35x32, freccia a 31 px dal bordo destro) */
  .anmm-list-mobile .anmm-link-arrow-mobile {
    position: static;
    flex: none;
    box-sizing: content-box;
    width: 5px;
    height: 9px;
    padding: 10px 15px;
    margin: -5px -13px -2px auto;
  }
  .anmm-list-mobile .anmm-link-arrow-mobile path {
    fill: #000000;
  }

  /* sottomenu: pannello sopra l'elenco, categorie centrate (.adropdown-mobile del live) */
  .anmm-list-mobile .anmm-dropdown {
    font-size: 15px;
    line-height: 15px;
    text-align: center;
  }
  .anmm-list-mobile .anmm-column {
    padding: 0;
    list-style: none;
  }
  .anmm-list-mobile .anmm-dropdown-content {
    display: block;
    margin: 0;
  }
  .anmm-list-mobile .anmm-category-item {
    display: flex;
    flex-direction: column;
    float: none;
    clear: none;
    width: 100%;
    margin: 0 0 23px;
  }
  .anmm-list-mobile .anmm-category-title {
    margin: 3px 0 14px;
    font-size: 18px;
    font-weight: 400;
    line-height: 26px;
    color: #000000;
  }
  .anmm-list-mobile .anmm-category-title a,
  .anmm-list-mobile .anmm-category-title a span {
    display: inline;
    font-size: 13px;
    font-weight: 700;
    line-height: 19.5px;
    text-transform: uppercase;
    color: #000000;
  }
}