/* =========================================
   HAMBURGER (Icona)
   Sempre attivo: serve per mostrare/nascondere l'icona
   ========================================= */
.mn-hamburger {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 22px;
    cursor: pointer;
    z-index: 1001;
}

/* Quando il menu è aperto l'hamburger sparisce */
body.mn-menu-open .mn-hamburger {
    visibility: hidden;
}

.mn-icon-bar {
    width: 100%;
    height: 3px;
    background-color: var(--mn-primary);
    border-radius: 2px;
}

.mn-align-right { margin-left: auto; }
.mn-align-left { margin-right: auto; }


/* =========================================
   PANNELLO OFF-CANVAS (Struttura)
   Sempre attivo: serve per il pannello stesso,
   animazioni e backdrop indipendentemente dal contenuto
   ========================================= */
.mn-mobile-container {
    position: fixed;
    top: 0;
    bottom: 0;
    width: var(--mn-mobile-width, 300px);
    background: var(--mn-mobile-bg);
    z-index: 2000;
    overflow-y: auto;
    box-shadow: 0 0 20px rgba(0,0,0,0.2);
    display: none;
}

.mn-backdrop {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.5); z-index: 1999;
    opacity: 0; visibility: hidden; transition: 0.3s;
}
body.mn-menu-open .mn-backdrop { opacity: 1; visibility: visible; }
body.mn-menu-open { overflow: hidden; }

/* Animazioni */
/* Slide Destra: entra dalla destra */
.mn-anim-slide_right {
    right: 0;
    left: auto;
    transform: translateX(100%);
    transition: transform 0.4s cubic-bezier(0.77, 0, 0.175, 1);
}
.mn-anim-slide_right.is-open { transform: translateX(0); }

/* Slide Sinistra: entra dalla sinistra */
.mn-anim-slide_left {
    left: 0;
    right: auto;
    transform: translateX(-100%);
    transition: transform 0.4s cubic-bezier(0.77, 0, 0.175, 1);
}
.mn-anim-slide_left.is-open { transform: translateX(0); }

/* Slide Alto: entra dall'alto fino alla fine dello schermo */
.mn-anim-slide_top {
    left: 0;
    right: 0;
    width: 100%;
    top: 0;
    bottom: 0;
    transform: translateY(-100%);
    transition: transform 0.4s cubic-bezier(0.77, 0, 0.175, 1);
}
.mn-anim-slide_top.is-open { transform: translateY(0); }

/* Slide Basso: entra dal basso fino alla fine dello schermo */
.mn-anim-slide_bottom {
    left: 0;
    right: 0;
    width: 100%;
    top: auto;
    bottom: 0;
    transform: translateY(100%);
    transition: transform 0.4s cubic-bezier(0.77, 0, 0.175, 1);
}
.mn-anim-slide_bottom.is-open { transform: translateY(0); }

/* Dissolvenza: appare sul posto senza movimento */
.mn-anim-fade {
    left: 0;
    right: 0;
    width: 100%;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
}
.mn-anim-fade.is-open { opacity: 1; visibility: visible; }

/* Header (chiusura) - sempre attivo */
.mn-mobile-header {
    padding: 20px;
    border-bottom: 1px solid var(--mn-mobile-border);
    display: flex; justify-content: flex-end;
}
.mn-close-btn { font-size: 24px; cursor: pointer; color: var(--mn-mobile-text); }


/* =========================================
   NAVIGAZIONE MOBILE (Contenuto)
   Tutto prefissato con .mn-is-mobile.
   Questa classe viene aggiunta dal JS solo sotto il breakpoint
   (o sempre per mobile_only).
   Sopra il breakpoint non c'è → nessuna regola qui si attiva.
   ========================================= */

/* Lista principale */
.mn-is-mobile .mn-mobile-nav { list-style: none; padding: 0; margin: 0; }
.mn-is-mobile .mn-mobile-nav li { border-bottom: 1px solid var(--mn-mobile-border); }

/* Riga voce */
.mn-is-mobile .mn-mobile-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0;
}

/* Link Testo */
.mn-is-mobile .mn-mobile-row a,
.mn-is-mobile .mn-mobile-row span:not(.mn-toggler) {
    color: var(--mn-mobile-text);
    text-decoration: none;
    font-weight: 600;
    font-size: 16px;
    flex-grow: 1;
    padding: 15px 20px;
    display: flex;
    align-items: center;
}

/* Split Button (Toggler) */
.mn-is-mobile .mn-toggler {
    width: 50px;
    height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: transparent;
    transition: 0.3s;
    flex-shrink: 0;
    border-left: 1px solid var(--mn-mobile-border);
}
.mn-is-mobile .mn-toggler::after {
    content: ''; display: inline-block; width: 10px; height: 10px;
    border-right: 2px solid var(--mn-mobile-text);
    border-bottom: 2px solid var(--mn-mobile-text);
    transform: rotate(45deg); margin-top: -3px; transition: 0.3s;
}

/* Stati Attivi */
.mn-is-mobile .mn-mobile-row.active { background-color: #f0f0f0; }
.mn-is-mobile .mn-mobile-row.active .mn-toggler::after {
    transform: rotate(225deg);
    margin-top: 3px;
    border-color: var(--mn-accent);
}

.mn-is-mobile .mn-mobile-nav li.current > .mn-mobile-row > a { color: var(--mn-accent); font-weight: 700; }
.mn-is-mobile .mn-mobile-nav li.active-parent > .mn-mobile-row > a { color: var(--mn-accent); }

/* Sottomenu (Accordion) */
.mn-is-mobile .mn-mobile-sub {
    display: none; background: var(--mn-mobile-sub-bg);
    list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--mn-mobile-border);
}
.mn-is-mobile .mn-mobile-sub a { font-size: 15px; font-weight: 400; padding-left: 30px; }
.mn-is-mobile .mn-mobile-sub .mn-mobile-sub a { font-size: 14px; padding-left: 45px; color: #666; }