/* static/css/navbar.css */

/* VARIABILI CSS PER LA GESTIONE DEI COLORI */
:root {
    --navbar-icon-color-default: #444444;
    --navbar-icon-color-with-bg: #ffffff;
    --navbar-bg-circle: rgba(68, 68, 68, 0.6);
}

/* STRUTTURA PRINCIPALE FLEXBOX */
/* Questo definisce il layout principale della navbar: 3 colonne flessibili. */
.main-navbar {
    /* ✅ NAVBAR STICKY DI DEFAULT */
    position: sticky; /* Sticky per il layout normale */
    top: 0;           
    background-color: white; /* Sfondo bianco di default */

    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    width: 100%;
    z-index: 1000; /* Alto z-index per stare sopra il background */
    height: 65px; /* Altezza fissa per la navbar */
}

/* ✅ NAVBAR FISSA SOLO PER ID PAGE CON BACKGROUND */
body.page-idpage .main-navbar.navbar-with-background {
    position: fixed; /* Fixed solo per ID page con background */
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    margin: 0 auto;
}

/* ✅ NAVBAR FISSA PER EVENTO CON BACKGROUND */
body.page-evento .main-navbar.navbar-with-background {
    position: fixed; 
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    margin: 0 auto;
}

/* Navbar con background image - rimuove sfondo bianco */
.main-navbar.navbar-with-background {
    background-color: transparent;
}

/* ✅ BARRA BIANCA SOTTO LA NAVBAR ALLO SCROLL */
.main-navbar.is-scrolled {
    background-color: white !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    border-bottom: 1px solid rgba(0,0,0,0.1);
}

/* Quando c'è scroll, le icone tornano al colore default anche con background */
.main-navbar.is-scrolled .navbar-icon {
    color: var(--navbar-icon-color-default) !important;
}

/* Quando c'è scroll, rimuovi il tondo grigio */
.main-navbar.is-scrolled .navbar-icon-btn {
    background-color: transparent !important;
    backdrop-filter: none !important;
}

/* Definisce le sezioni sinistra, centro e destra */
.main-navbar .navbar-item {
    flex: 1; /* Ogni sezione occupa 1/3 dello spazio */
}

.main-navbar .navbar-left {
    display: flex;
    justify-content: flex-start; /* Allinea a sinistra */
}

.main-navbar .navbar-center {
    display: flex;
    justify-content: center; /* Allinea al centro */
}

.main-navbar .navbar-right {
    display: flex;
    justify-content: flex-end; /* Allinea a destra */
}


/* STILI DEGLI ATOMI */

/* Stile per il pulsante-icona (rimuove bordi, sfondi, etc.) */
.navbar-icon-btn {
    background: none;
    border: none;
    padding: 12px; /* Aumentato da 10px per tondo più grande */
    cursor: pointer;
    border-radius: 50%;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 48px;  /* Dimensione fissa per tondo più grande */
    height: 48px; /* Dimensione fissa per tondo più grande */
}

/* Stile per le icone SVG */
.navbar-icon {
    width: 27px;
    height: 27px;
    color: var(--navbar-icon-color-default);
    transition: all 0.3s ease;
}

/* Stili specifici per le icone con background */
.navbar-with-background .navbar-icon {
    color: var(--navbar-icon-color-with-bg);
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.7));
    transition: all 0.3s ease;
}



/* Effetti hover */
.navbar-icon-btn:hover {
    transform: scale(1.1);
}

.navbar-with-background .navbar-icon-btn:hover {
    background-color: rgba(68, 68, 68, 0.8);
}

.navbar-with-background .navbar-icon-btn:hover .navbar-icon {
    filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.8));
}

/* Stile per il menu a tendina del burger */
.burger-dropdown-menu {
    min-width: 200px;
}

/* Stile per l'immagine del logo nella navbar */
.navbar-logo-img {
    max-height: 55px; /* Altezza massima, la larghezza si adatterà */
    width: auto;
}

/* RESPONSIVE DESIGN */
@media (max-width: 768px) {
    .main-navbar {
        padding: 8px 12px;
        height: 65px;
    }
    
    .navbar-icon {
        width: 25px;
        height: 25px;
    }
    
    .navbar-icon-btn {
        padding: 8px; /* Ridotto per mobile ma ancora più grande dell'originale */
        width: 36px;  /* Tondo più piccolo su mobile */
        height: 36px;
    }
    
    .navbar-logo-img {
        max-height: 45px;
    }
}

@media (max-width: 480px) {
    .main-navbar {
        padding: 6px 10px;
        height: 65px;
    }
    
    .navbar-icon {
        width: 22px;
        height: 22px;
    }
    
    .navbar-icon-btn {
        padding: 6px; /* Ancora più piccolo su schermi piccoli */
        width: 32px;
        height: 32px;
    }
    
    .navbar-logo-img {
        max-height: 40px;
    }
}