/* ============================================================
   Elementor Sidebar Drawer – drawer.css  v1.0.0
   ============================================================ */

/* ── Reset & base ── */
.esd-trigger {
    display:          inline-flex;
    align-items:      center;
    justify-content:  center;
    cursor:           pointer;
    border:           none;
    outline:          none;
    background:       transparent;
    color:            #ffffff; /* default: bianco — specificità bassa, sovrascrivibile */
    -webkit-tap-highlight-color: transparent;
    transition:       color 0.3s ease, background-color 0.2s ease;
    position:         relative;
    z-index:          10;
}
.esd-trigger:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}

/* ── Hamburger SVG Lines ── */
.esd-ham {
    display:         flex;
    flex-direction:  column;
    justify-content: space-between;
    width:           28px;
    height:          10px;
    pointer-events:  none;
    color:           inherit; /* segue SEMPRE il colore del .esd-trigger padre */
}
.esd-ham__line {
    display:          block;
    width:            100%;
    height:           2px;
    background-color: currentColor;
    border-radius:    2px;
    transform-origin: center;
    transition:
        transform         0.35s cubic-bezier(0.23, 1, 0.32, 1),
        opacity           0.2s ease,
        width             0.3s ease,
        background-color  0.3s ease;
}

/* 2 linee → X (solo se animazione abilitata) */
.esd-trigger[aria-expanded="true"] .esd-ham__line:nth-child(1) {
    transform: translateY(4px) rotate(45deg);
}
.esd-trigger[aria-expanded="true"] .esd-ham__line:nth-child(2) {
    transform: translateY(-4px) rotate(-45deg);
}

/* Animazione disabilitata: blocca transform e transition */
.esd-trigger[aria-expanded="true"] .esd-ham--no-animate .esd-ham__line:nth-child(1),
.esd-trigger[aria-expanded="true"] .esd-ham--no-animate .esd-ham__line:nth-child(2) {
    transform: none;
    transition: none;
}
.esd-ham--no-animate .esd-ham__line {
    transition: background-color 0.3s ease;
}

/* Icon mode */
.esd-icon { display: inline-flex; }

/* ── Overlay ── */
.esd-overlay {
    position:   fixed;
    inset:      0;
    z-index:    1000000;
    opacity:    0;
    visibility: hidden;
    transition: opacity var(--esd-duration, 500ms) var(--esd-easing, ease),
                visibility 0s linear var(--esd-duration, 500ms);
    cursor:     pointer;
}
.esd-overlay.is-visible {
    opacity:    1;
    visibility: visible;
    transition: opacity var(--esd-duration, 500ms) var(--esd-easing, ease),
                visibility 0s linear 0s;
}

/* ── Drawer base ── */
.esd-drawer {
    position:   fixed;
    z-index:    1000001;
    overflow-y: auto;
    overflow-x: hidden;
    will-change: transform;
    /* CSS custom props passati via inline style */
    transition: transform var(--esd-duration, 500ms) var(--esd-easing, ease),
                opacity   var(--esd-duration, 500ms) var(--esd-easing, ease);
}
/* Scrollbar sottile nel drawer */
.esd-drawer::-webkit-scrollbar { width: 4px; }
.esd-drawer::-webkit-scrollbar-track { background: transparent; }
.esd-drawer::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 2px; }

/* ── Drawer posizioni ── */
.esd-drawer--right  { top: 0; right: 0; bottom: 0; width: var(--esd-size, 420px); }
.esd-drawer--left   { top: 0; left:  0; bottom: 0; width: var(--esd-size, 420px); }
.esd-drawer--top    { top: 0; left:  0; right:  0; height: var(--esd-size, 50vh); }
.esd-drawer--bottom { bottom: 0; left: 0; right: 0; height: var(--esd-size, 50vh); }

/* ── Effetto SLIDE (default) ── */
.esd-effect--slide.esd-drawer--right  { transform: translateX(100%); }
.esd-effect--slide.esd-drawer--left   { transform: translateX(-100%); }
.esd-effect--slide.esd-drawer--top    { transform: translateY(-100%); }
.esd-effect--slide.esd-drawer--bottom { transform: translateY(100%); }

.esd-effect--slide.is-open { transform: translate(0); }

/* ── Effetto FADE ── */
.esd-effect--fade { opacity: 0; pointer-events: none; }
.esd-effect--fade.is-open { opacity: 1; pointer-events: auto; }

/* ── Effetto SCALE ── */
.esd-effect--scale { opacity: 0; transform: scale(0.92); pointer-events: none; }
.esd-effect--scale.is-open { opacity: 1; transform: scale(1); pointer-events: auto; }

/* ── Effetto PUSH ── */
/* Il contenuto della pagina si sposta — gestito da JS su body */
.esd-effect--push.esd-drawer--right  { transform: translateX(100%); }
.esd-effect--push.esd-drawer--left   { transform: translateX(-100%); }
.esd-effect--push.esd-drawer--top    { transform: translateY(-100%); }
.esd-effect--push.esd-drawer--bottom { transform: translateY(100%); }
.esd-effect--push.is-open { transform: translate(0); }

body.esd-push-right  { transform: translateX(calc(-1 * var(--esd-push-size, 420px))); transition: transform var(--esd-duration, 500ms) var(--esd-easing, ease); }
body.esd-push-left   { transform: translateX(var(--esd-push-size, 420px));            transition: transform var(--esd-duration, 500ms) var(--esd-easing, ease); }
body.esd-push-top    { transform: translateY(var(--esd-push-size, 50vh));             transition: transform var(--esd-duration, 500ms) var(--esd-easing, ease); }
body.esd-push-bottom { transform: translateY(calc(-1 * var(--esd-push-size, 50vh)));  transition: transform var(--esd-duration, 500ms) var(--esd-easing, ease); }

/* ── Effetto REVEAL ── */
/* Drawer sotto il contenuto; body scivola rivelando il drawer */
.esd-effect--reveal { z-index: 999999; transform: none !important; }
.esd-effect--reveal.esd-drawer--right  { transform: none !important; }

body.esd-reveal-right  { transform: translateX(calc(-1 * var(--esd-push-size, 420px))); transition: transform var(--esd-duration, 500ms) var(--esd-easing, ease); }
body.esd-reveal-left   { transform: translateX(var(--esd-push-size, 420px));            transition: transform var(--esd-duration, 500ms) var(--esd-easing, ease); }
body.esd-reveal-top    { transform: translateY(var(--esd-push-size, 50vh));             transition: transform var(--esd-duration, 500ms) var(--esd-easing, ease); }
body.esd-reveal-bottom { transform: translateY(calc(-1 * var(--esd-push-size, 50vh)));  transition: transform var(--esd-duration, 500ms) var(--esd-easing, ease); }

/* ── Pulsante chiusura × dentro drawer ── */
.esd-drawer__close {
    position:         absolute;
    top:              20px;
    right:            20px;
    display:          inline-flex;
    align-items:      center;
    justify-content:  center;
    background:       none !important;
    background-color: transparent !important;
    border:           none !important;
    box-shadow:       none !important;
    outline:          none;
    cursor:           pointer;
    padding:          0 !important;
    margin:           0;
    line-height:      1;
    z-index:          2;
    transition:       opacity 0.2s, transform 0.2s;
    opacity:          0.8;
    -webkit-appearance: none;
    appearance:       none;
}
.esd-drawer__close:hover { opacity: 1; transform: rotate(90deg); }
.esd-drawer__close--no-hover:hover { transform: none; }
.esd-drawer__close:focus-visible { outline: 2px solid currentColor; }

/* ── Contenuto drawer ── */
.esd-drawer__content {
    position: relative;
    z-index:  1;
}
/* Azzera margini Elementor sul template interno */
.esd-drawer__content > .elementor,
.esd-drawer__content > .elementor > .e-con:first-child,
.esd-drawer__content > .elementor > .elementor-section:first-child {
    margin-top:    0 !important;
    margin-bottom: 0 !important;
    margin-left:   0 !important;
    margin-right:  0 !important;
}
.esd-drawer__content .elementor { max-width: 100% !important; width: 100% !important; }

/* ── Isolamento: protegge il drawer dagli stili CSS dell'header ──
   Il problema: regole tipo .main-header.scrolled .elementor-item { color:#000 !important }
   colpiscono anche gli elementi DENTRO il drawer (che è figlio del .main-header nel DOM).
   Soluzione: impostiamo color:inherit sul drawer e forziamo tutti i discendenti
   a ignorare le sovrascritture dell'header. ── */
.esd-drawer {
    color: #ffffff;
}
/* ── Isolamento colore dal CSS .main-header.scrolled ──
   4 classi → specificità schiacciante su qualsiasi regola header (max 2 classi) */
.esd-drawer .esd-drawer__content .elementor-nav-menu--main .elementor-item,
.esd-drawer .esd-drawer__content .elementor-nav-menu--main .elementor-item:hover,
.esd-drawer .esd-drawer__content .elementor-nav-menu--main .elementor-item:focus,
.esd-drawer .esd-drawer__content .elementor-nav-menu--main .elementor-item.elementor-item-active,
.esd-drawer .esd-drawer__content .elementor-nav-menu--main .elementor-item.highlighted,
.esd-drawer .esd-drawer__content .elementor-nav-menu--main a.elementor-item,
.esd-drawer .esd-drawer__content .elementor-widget-container .elementor-item,
.esd-drawer .esd-drawer__content .elementor-widget-container .elementor-item:hover,
.esd-drawer .esd-drawer__content .elementor-widget-container .elementor-item:focus,
.esd-drawer .esd-drawer__content .elementor-widget-container .elementor-item-active {
    color: #ffffff !important;
    transition: color 0.3s ease !important;
}

/* ── No scroll su body quando drawer aperto ── */
body.esd-open { overflow: hidden; }

/* ══════════════════════════════════════════════════════
   ANIMAZIONE A CASCATA
   Ogni figlio riceve --esd-i (0,1,2…) dal JS.
   Il delay è: --esd-cascade-delay + --esd-i × --esd-cascade-stagger
   ══════════════════════════════════════════════════════ */

@keyframes esd-fade-up {
    from { opacity: 0; transform: translateY(22px); }
    to   { opacity: 1; transform: translateY(0);    }
}
@keyframes esd-fade-down {
    from { opacity: 0; transform: translateY(-22px); }
    to   { opacity: 1; transform: translateY(0);     }
}
@keyframes esd-fade-left {
    from { opacity: 0; transform: translateX(22px); }
    to   { opacity: 1; transform: translateX(0);    }
}
@keyframes esd-fade-right {
    from { opacity: 0; transform: translateX(-22px); }
    to   { opacity: 1; transform: translateX(0);     }
}
@keyframes esd-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* La classe viene aggiunta/rimossa dal JS */
.esd-cascade-item {
    animation-duration:        var( --esd-cascade-duration, 400ms );
    animation-timing-function: var( --esd-easing, cubic-bezier(0.23,1,0.32,1) );
    animation-fill-mode:       both;
    animation-delay: calc(
        var( --esd-cascade-delay,   100ms ) +
        var( --esd-i, 0 )           *
        var( --esd-cascade-stagger, 80ms  )
    );
}
.esd-cascade-item[data-esd-cascade-effect="fade-up"]    { animation-name: esd-fade-up;    }
.esd-cascade-item[data-esd-cascade-effect="fade-down"]  { animation-name: esd-fade-down;  }
.esd-cascade-item[data-esd-cascade-effect="fade-left"]  { animation-name: esd-fade-left;  }
.esd-cascade-item[data-esd-cascade-effect="fade-right"] { animation-name: esd-fade-right; }
.esd-cascade-item[data-esd-cascade-effect="fade"]       { animation-name: esd-fade;       }