/* CSS per le transizioni smooth */
.logo svg {
    transition: all 0.4s ease;
}

nav a,
nav button {
    transition: all 0.3s ease-in-out;
}

#header-bottom {
    transition: all 0.3s ease-in-out;
}

#header-bottom .screen {
    transition: all 0.3s ease-in-out;
}

/* Stili per il logo container con scaling dinamico */
.logo-container {
    /* Dimensioni base: grandi iniziali */
    height: 80px !important; /* Altezza fissa iniziale */
    transition: all 0.4s ease;
    color: white; /* Colore iniziale bianco */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* L'SVG si adatta automaticamente come nel CSS originale */
.logo-container svg {
    width: 150%; /* Usa percentuale come nell'originale */
    height: auto;
    max-height: 150%;
    transition: all 0.4s ease; /* Transizione più fluida come nell'originale */
    color: #fff;
    position: relative;
}

/* Quando la navbar è scrollata, il logo diventa piccolo */
.navbar-scrolled .logo-container {
    height: 40px !important; /* Metà dell'altezza iniziale */
    color: #4b4b4b; 
}

.navbar-scrolled .logo-container svg {
    width: 100%; /* Dimensione fissa come nell'originale quando scrolled */
    top: -5px; /* Piccolo offset come nell'originale */
    position: relative;
    color: #4b4b4b; 

}


/* Stili per quando la navbar è scrollata */
.navbar-scrolled {
    transform: scale(1); /* Rimuove il scaling della navbar */
}

/* Assicurati che l'header sia sticky */
header .fixed {
    position: fixed;
    top: 0;
    z-index: 50;
}

/* Migliora la leggibilità del testo del logo - usa currentColor per il cambio dinamico */
.st0 {
    fill: currentColor !important;
    transition: fill 0.4s ease;
}

.st1 {
    fill: #cfaa56; /* Mantiene sempre il colore dorato */
}

/* Smooth scroll behavior */
html {
    scroll-behavior: smooth;
}

/* Assicura che i bordi cambino colore fluidamente */
.border-white,
.border-gray-200,
.divide-white,
.divide-gray-200 {
    transition: border-color 0.3s ease-in-out;
}

/* Media queries per dispositivi più piccoli - replica l'originale */
@media (max-width: 768px) {
    .logo-container {
        height: 40px !important; /* Versione ridotta per mobile */
    }
    
    .logo-container svg {
        width: 160px; /* Dimensione fissa per mobile */
        top: 3px;
        position: relative;
    }
    
    .navbar-scrolled .logo-container {
        height: 35px !important; /* Ancora più piccolo quando scrollato su mobile */
    }
    
    .navbar-scrolled .logo-container svg {
        width: 112px; /* Come nell'originale per mobile scrolled */
    }
}

/* Stili aggiuntivi per replicare il comportamento originale */
.logo {
    display: block;
    transition: all 0.4s ease;
}

.logo a {
    display: inline-block;
    transition: all 0.4s ease;
}