/* =============================================================
   MEGAMENU — organozoto
   File: hello-theme-child/css/megamenu.css
   ============================================================= */

/* -----------------------------------------------------------
   Header: riferimento per position:absolute dei panel
   ----------------------------------------------------------- */
header.e-con,
header.elementor-section {
    position: relative;
}

/* -----------------------------------------------------------
   MEGA PANEL — base comune
   ----------------------------------------------------------- */
.mega-panel {
    position: absolute;
    top: 100%;
    left: 0;
    background: #ffffff;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08);
    z-index: 9999;
    margin-top: -60px;
    margin-right: 40px;
    /* hidden di default */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-4px);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
}

.mega-panel.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
    transform: translateY(0);
}

/* -----------------------------------------------------------
   MEGA PANEL PRODOTTI — larghezza contenuta, non full width
   ----------------------------------------------------------- */
.mega-panel--prodotti {
    width: auto;
    min-width: 560px;
}

/* -----------------------------------------------------------
   MEGA PANEL AZIENDA — dropdown piccolo
   ----------------------------------------------------------- */
.mega-panel--azienda {
    width: 220px;
}

/* -----------------------------------------------------------
   PADDING DEL PANEL: solo sul container diretto figlio
   Usiamo il selettore .e-con-inner che Elementor mette
   dentro ogni container Flexbox
   ----------------------------------------------------------- */
.mega-panel--prodotti > .e-con-inner {
    padding: 20px 36px 20px 36px !important;
    gap: 12px !important;           /* spazio tra riga PROD.SOLIDI e riga CONC.SPECIALI */
    flex-direction: column !important;
    align-items: flex-start !important;
}

.mega-panel--azienda > .e-con-inner {
    padding: 16px 24px !important;
    gap: 6px !important;
    flex-direction: column !important;
    align-items: flex-start !important;
}

/* Container riga (titolo + lista link): gap orizzontale */
.mega-panel--prodotti .e-con-inner > .e-con > .e-con-inner {
    gap: 48px !important;
    align-items: flex-start !important;
}

/* Container lista link: gap verticale stretto tra le voci */
.mega-panel--prodotti .e-con-inner > .e-con > .e-con-inner > .e-con > .e-con-inner {
    gap: 4px !important;
}

/* -----------------------------------------------------------
   AZZERAMENTO MARGINI DEFAULT SUI WIDGET HEADING
   Elementor aggiunge margin-bottom a ogni widget
   ----------------------------------------------------------- */
.mega-panel .elementor-widget-heading {
    margin-bottom: 0 !important;
}

/* -----------------------------------------------------------
   TITOLI CATEGORIA (PRODOTTI SOLIDI, CONCIMI SPECIALI)
   Classe CSS da mettere su ogni widget heading titolo
   ----------------------------------------------------------- */
.mega-panel .mega-cat-title .elementor-heading-title {
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.13em !important;
    text-transform: uppercase !important;
    color: #1a1a1a !important;
    text-decoration: none !important;
    line-height: 1.3 !important;
}

/* -----------------------------------------------------------
   LINK SOTTOCATEGORIE con underline
   Classe CSS da mettere su ogni widget heading link
   ----------------------------------------------------------- */
.mega-panel .mega-sublink .elementor-heading-title,
.mega-panel .mega-sublink .elementor-heading-title a {
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.11em !important;
    text-transform: uppercase !important;
    color: #333333 !important;
    text-decoration: underline !important;
    line-height: 1.4 !important;
    transition: color 0.15s ease;
}

.mega-panel .mega-sublink .elementor-heading-title a:hover {
    color: #000000 !important;
}

/* -----------------------------------------------------------
   LINK "TUTTI I PRODOTTI"
   ----------------------------------------------------------- */
.mega-panel .mega-link-tutti .elementor-heading-title,
.mega-panel .mega-link-tutti .elementor-heading-title a {
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.13em !important;
    text-transform: uppercase !important;
    color: #1a1a1a !important;
    text-decoration: none !important;
    line-height: 1.3 !important;
    transition: color 0.15s ease;
}

.mega-panel .mega-link-tutti .elementor-heading-title a:hover {
    color: #555555 !important;
}

/* -----------------------------------------------------------
   RESPONSIVE — sotto 1024px nasconde il megamenu
   ----------------------------------------------------------- */
@media (max-width: 1024px) {
    .mega-panel {
        display: none !important;
    }
}