/*-------------------------------------------------------------------------*/
/* Copyright (c) DELTA X MULTIMEDIA                                        */
/* Tutti i diritti sono riservati - All rights reserved                    */
/* https://www.deltacms.eu - info@deltaxmultimedia.it                      */
/*-------------------------------------------------------------------------*/
/* CSS Document - DELTA CMS 3.2                                            */
/*-------------------------------------------------------------------------*/
/* Navigation Elements - v.3.02 April 2025                                 */
/*-------------------------------------------------------------------------*/

nav ul {
    list-style: none;
    margin: 0;
    display: flex;
    justify-content: center;
}

nav ul li {
    margin: 0 14px;
}

.main-menu nav ul li {
    margin: 0;
}

.extra nav ul li {
   margin: 0 8px;
}


nav ul li:last-child {
    margin-right: 0;
}

nav ul li a {
    color: black;
    text-decoration: none;
    font-size: 18px;
    /*font-weight: 500;*/
    transition: color 0.2s ease;
    position: relative;
    display: inline-block;
    z-index: 1;
}

nav ul li a:hover {
    /*background-color: rgba(255, 255, 255, 0.1);*/
    color: #d85600;
}

.main-menu nav ul li a {
    padding: 8px 12px;
    font-weight: 500;
}

/* debug */
/** { border: 1px solid red !important; } /* Debug layout */

/* Classe riutilizzabile per l'effetto */
.button-over {
    padding: 10px 14px; /* AGGIUNTO - Stesso padding del .menu */
   /* background: rgba(0,255,0,0.1) !important;*/

 /*   transition: color 0.2s ease-in-out;*/
}
/* [ANIMAZIONE CONTINUA] */
.button-over::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    background-color: #ff6600;
    border-radius: 50px;
    
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
    z-index: -1;
    pointer-events: none; /* Permette interazioni durante l'animazione */
}

/* Animazione IN (mouse enter) */
.button-over.animate-in::before {
    animation: scaleIn 0.3s cubic-bezier(0.34, 1.30, 0.74, 1) forwards;
}

/* Animazione OUT (mouse leave) */
.button-over.animate-out::before {
    animation: scaleOut 0.2s ease-in-out forwards;
}

/* Mantiene il testo bianco durante l'animazione */
.button-over.animate-in,
.button-over.animate-in:active {
    color: white;
}

@keyframes scaleIn {
    0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 0;
    }

    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
}

@keyframes scaleOut {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -50%) scale(0.5);
        opacity: 0;
    }
}


/* SIDE MENU */
/* Icona side-menu per schermi piccoli */
.side-menu-toggle {
    display: none;
   /* margin-right: auto; /* Forza l'allineamento a sinistra */

    z-index: 99999;
    font-size: 20px;
    color: black;
    cursor: pointer;
}


.side-menu {
    position: fixed;
    top: 0;
    left: -75%;
    width: 70%;
    height: 100%;

    max-width: 340px;
    /*background: #2c3e50;*/
    background: #361f03;
    z-index: 9998;
    transition: left 0.5s ease;
    box-shadow: 2px 0 5px rgba(0,0,0,0.2);
}

.side-menu.active {
    left: 0;
}

.side-menu ul {
    list-style: none;
    padding: 0;
    margin: 0px 0 0 0;
}

.side-menu li {
    
    border-bottom: 1px solid #502e05;
}

.side-menu a {
    color: white;
    padding: 15px 20px;
    text-decoration: none;
    font-size: 18px;
    display: block;
}

.side-menu a:hover {
    color: #ff6600;
}


.side-menu i
{
    margin-right:16px;
}

.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.3);
    z-index: 9998;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.overlay.active {
    opacity: 1;
    visibility: visible;
}