:root {
    --dark-blue: #003366;
    --accent-blue: #0077b6;
    --glass: rgba(255, 255, 255, 0.9);
}

body, html {
    margin: 0; padding: 0; min-height: 100vh;
    font-family: 'Montserrat', sans-serif;
    background: url('img/wall_nuvole.jpg') no-repeat center center fixed;
    background-size: cover;
    color: var(--dark-blue);
    overflow-x: hidden;
}

.container {
    display: flex; flex-direction: column; align-items: center;
    padding: 140px 20px 120px 20px; 
    gap: 30px;
}

.logo-text {
    font-size: clamp(2.5rem, 10vw, 4.5rem);
    font-weight: 700;
    text-shadow: 2px 2px 15px rgba(255,255,255,0.9);
    margin: 0;
}

.widgets-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    width: 100%; max-width: 1200px; gap: 25px;
}

.card {
    background: var(--glass);
    border-radius: 20px; padding: 25px;
    box-shadow: 0 12px 30px rgba(0,0,0,0.1);
    text-align: center; border: 1px solid rgba(255,255,255,0.5);
    backdrop-filter: blur(8px);
    display: flex; flex-direction: column; align-items: center;
    min-height: 260px;
}

.card i { font-size: 2.2rem; margin-bottom: 10px; }

/* Meteo Card Layout */
.weather-current { display: flex; align-items: center; gap: 15px; margin-bottom: 20px; }
.forecast-grid {
    display: grid; grid-template-columns: repeat(4, 1fr);
    width: 100%; gap: 10px; border-top: 1px solid rgba(0,0,0,0.1);
    padding-top: 15px; margin-bottom: 15px;
}
.forecast-day { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.f-name { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; }
.forecast-day i { font-size: 1rem !important; margin: 0; }
.f-temp { font-size: 0.8rem; font-weight: 600; }

/* Icone Colori */
.fa-sun { color: #ffb703; }
.fa-cloud-sun { color: #457b9d; }
.fa-cloud-showers-heavy, .fa-cloud-rain { color: #0077b6; }
.fa-snowflake { color: #ade8f4; }
.fa-bolt { color: #ffd60a; }

.weather-animate { animation: pulse-icon 3s infinite ease-in-out; }
@keyframes pulse-icon { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }

/* Cal Nav Header */
.cal-nav-header { display: flex; align-items: center; justify-content: space-between; width: 100%; margin-bottom: 10px; }
.cal-nav-header h3 { font-size: 0.85rem !important; margin: 0 !important; min-width: 120px; }
.cal-nav-header button { background: none; color: var(--accent-blue); padding: 5px; font-size: 1.2rem; border: none; cursor: pointer;}

.quick-links { display: flex; gap: 25px; margin-top: 10px; }
.quick-links a { font-size: 1.8rem; color: var(--dark-blue); transition: 0.3s; }
.quick-links a:hover { color: var(--accent-blue); transform: scale(1.2); }

.news-footer {
    position: fixed; bottom: 0; left: 0; width: 100%; height: 55px;
    background: rgba(255, 255, 255, 0.95);
    display: flex; align-items: center; border-top: 2px solid var(--accent-blue); z-index: 10000;
}
.ticker-label { background: var(--dark-blue); color: white; font-weight: 700; padding: 0 15px; height: 100%; display: flex; align-items: center; font-size: 0.7rem; }
.ticker-content { flex: 1; overflow: hidden; white-space: nowrap; }
.ticker-wrapper { display: inline-block; padding-left: 100%; animation: ticker-move 85s linear infinite; }
.news-item { display: inline-block; padding-right: 60px; font-size: 0.9rem; }

@keyframes ticker-move { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } }

.quote-box { max-width: 700px; text-align: center; background: rgba(255,255,255,0.75); padding: 15px 40px; border-radius: 50px; font-style: italic; font-size: 0.85rem; }

#clock { font-size: 2.2rem; font-weight: 700; color: var(--accent-blue); margin: 5px 0; }
.calendar-table { width: 100%; font-size: 0.8rem; border-collapse: collapse; }
.today { background: var(--dark-blue); color: white; border-radius: 6px; font-weight: bold; }

button { background: var(--dark-blue); color: white; border: none; padding: 10px 20px; border-radius: 10px; cursor: pointer; font-weight: 600; }
.weather-input-group input { padding: 8px; border-radius: 8px; border: 1px solid #ccc; width: 100px; text-align: center; }

@media (max-width: 600px) {
    .container { padding-top: 60px; }
    .logo-text { font-size: 2.2rem; }
}