/* styless.css - Stili per il contenuto della pagina "Lavori in Corso" (HEADER STATICO) */

body {
    margin: 0;
    font-family: 'Lato', sans-serif;
    background-color: #fdfaf3; /* Colore crema chiaro, tipo pane */
    color: #5a3e2b; /* Marrone scuro, tipo caffè o cioccolato */
    /* Nessun padding-top qui se l'header è statico */
}

.content-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    
    padding: 40px 20px; /* Padding interno per il contenuto */
    box-sizing: border-box;
    
    background-color: #ffffff; /* Sfondo bianco per il box del contenuto */
    
    /* Questo margin-top crea lo spazio sotto l'header.
       Regola '30px' se vuoi più o meno spazio.
       'auto' per i margini laterali lo centra orizzontalmente. */
    margin: 30px auto 30px auto;
    
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    
    max-width: 600px;
    width: 90%; /* O la percentuale che preferisci */

    /* Un po' di altezza minima per far sembrare il box più sostanzioso se il contenuto è poco */
    min-height: 50vh;
}

.bakery-icon {
    font-size: 4rem;
    color: #e0a75e;
    margin-bottom: 20px;
    position: relative;
    display: inline-block;
}

.steam {
    position: absolute;
    background-color: rgba(199, 161, 122, 0.5);
    width: 8px;
    height: 25px;
    border-radius: 50%;
    opacity: 0;
    animation: steam-animation 2s infinite ease-out;
}
.steam1 { left: 35%; bottom: 80%; animation-delay: 0s; }
.steam2 { left: 50%; bottom: 85%; animation-delay: 0.5s; }
.steam3 { left: 65%; bottom: 80%; animation-delay: 1s; }

@keyframes steam-animation {
    0% { transform: translateY(0) scale(0.5); opacity: 0; }
    50% { opacity: 1; }
    100% { transform: translateY(-40px) scale(1.2); opacity: 0; }
}

.content-container h1 {
    font-family: 'Playfair Display', serif;
    color: #d2691e;
    font-size: 2.5rem;
    font-weight: 700;
    margin-top: 0; /* Rimuove il margine superiore predefinito dell'h1 */
    margin-bottom: 25px;
}

.content-container p {
    font-size: 1rem;
    line-height: 1.7;
    margin-bottom: 15px;
    max-width: 500px;
}

.content-container p strong {
    color: #e0a75e;
    font-weight: 600;
}

.loading-dots {
    margin: 25px 0;
}

.loading-dots span {
    display: inline-block;
    width: 10px;
    height: 10px;
    background-color: #e0a75e;
    border-radius: 50%;
    margin: 0 5px;
    animation: bounce 1.4s infinite ease-in-out both;
}
.loading-dots span:nth-child(1) { animation-delay: -0.32s; }
.loading-dots span:nth-child(2) { animation-delay: -0.16s; }
.loading-dots span:nth-child(3) { animation-delay: 0s; }

@keyframes bounce {
    0%, 80%, 100% { transform: scale(0); }
    40% { transform: scale(1.0); }
}

.padaria-info {
    margin-top: 30px;
    font-size: 0.9rem;
    color: #8c705d;
}

.padaria-info p {
    margin-bottom: 5px;
    font-size: 0.9rem;
    max-width: none;
}

/* Responsive adjustments per il contenuto */
@media (max-width: 600px) {
    .content-container h1 {
        font-size: 2rem;
    }
    .bakery-icon {
        font-size: 3rem;
    }
    .content-container p {
        font-size: 0.9rem;
    }
    .content-container {
        padding: 30px 15px;
        margin: 20px auto 20px auto; /* Riduci il margine su schermi piccoli se necessario */
        width: 95%;
    }
}