/* --- style.css --- */

:root {

    --primary: #0f2e5a;       /* Blu Scuro UNSIC */

    --accent: #ff9f1c;        /* Arancio Call to Action */

    --enasc: #e67e22;         /* Arancio Patronato */

    --caf: #c71585;           /* Mediumvioletred CAF */

    --light: #f4f7f6;

    --white: #ffffff;

    --dark: #2d3436;

    --shadow: 0 5px 20px rgba(0,0,0,0.08);

}



* { box-sizing: border-box; margin: 0; padding: 0; }

body { font-family: 'Open Sans', sans-serif; background: var(--light); color: var(--dark); line-height: 1.6; }

h1, h2, h3 { font-family: 'Montserrat', sans-serif; font-weight: 700; margin-bottom: 1rem; }

a { text-decoration: none; color: inherit; transition: 0.3s; }



/* NAVBAR */

.navbar { background: var(--white); box-shadow: 0 2px 10px rgba(0,0,0,0.05); position: sticky; top: 0; z-index: 1000; padding: 0 20px; }

.nav-container { max-width: 1200px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; height: 80px; }

.logo-mini { height: 50px; width: auto; }

.nav-menu { display: flex; gap: 25px; }

.nav-link { font-weight: 600; color: var(--primary); text-transform: uppercase; font-size: 0.9rem; }

.nav-link:hover, .nav-link.active { color: var(--accent); }

.nav-cta { background: var(--accent); color: white !important; padding: 10px 20px; border-radius: 5px; }



/* HERO SECTIONS */

.hero { padding: 80px 20px; text-align: center; color: white; background-size: cover; background-position: center; }

.hero-home { background: linear-gradient(135deg, var(--primary) 0%, #000 100%); }

.hero-enasc { background: linear-gradient(135deg, var(--enasc) 0%, #d35400 100%); }

.hero-unsic { background: linear-gradient(135deg, var(--primary) 0%, #0c2461 100%); }

.hero-caf { background: linear-gradient(135deg, var(--caf) 0%, #2d3436 100%); }

.hero-sportello { background: linear-gradient(135deg, #16a085 0%, #2c3e50 100%); }



.hero h1 { font-size: 3rem; margin-bottom: 10px; }

.hero-logo-main { height: 120px; margin-bottom: 20px; filter: drop-shadow(0 5px 10px rgba(0,0,0,0.3)); }



/* LAYOUT & CARDS */

.container { max-width: 1100px; margin: 0 auto; padding: 60px 20px; }

.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }



.card { background: var(--white); padding: 30px; border-radius: 12px; box-shadow: var(--shadow); border-top: 5px solid var(--primary); transition: transform 0.3s; }

.card:hover { transform: translateY(-5px); }

.card h3 { color: var(--primary); }

.card-icon { font-size: 2.5rem; color: var(--accent); margin-bottom: 15px; }



/* SERVICE LISTS */

.service-list { list-style: none; margin-top: 20px; }

.service-list li { margin-bottom: 15px; padding-left: 25px; position: relative; }

.service-list li::before { content: '✔'; color: var(--accent); position: absolute; left: 0; font-weight: bold; }



/* FORMS */

.form-group { margin-bottom: 20px; }

.form-label { display: block; font-weight: 600; margin-bottom: 8px; }

.form-input, .form-select, .form-textarea { width: 100%; padding: 12px; border: 1px solid #ddd; border-radius: 8px; font-size: 1rem; }

.form-textarea { height: 120px; resize: vertical; } /* Nuovo stile per campo note */

.btn-submit { background: var(--primary); color: white; border: none; padding: 15px 30px; width: 100%; border-radius: 8px; font-weight: bold; cursor: pointer; font-size: 1.1rem; }

.btn-submit:hover { background: var(--accent); }



/* IBAN & PAYMENTS */

.iban-box { background: #eef2f5; padding: 20px; border-radius: 8px; font-family: monospace; font-size: 1.2rem; text-align: center; margin: 20px 0; border: 2px dashed var(--primary); }



/* FOOTER */

footer { background: #1a1a1a; color: #aaa; padding: 50px 0; margin-top: auto; }

.footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 40px; max-width: 1100px; margin: 0 auto; padding: 0 20px; }

.



/* Hero Specifica per News */

.hero-news {

    background: linear-gradient(135deg, var(--dark) 0%, var(--primary) 100%);

    padding: 100px 20px;

    text-align: left; /* Allineamento più moderno per le news */

}



/* Search Bar Container */

.search-bar-wrapper {

    background: var(--white);

    padding: 20px;

    border-radius: 8px;

    box-shadow: 0 -10px 20px rgba(0,0,0,0.05); /* Effetto "galleggiamento" sopra la sezione */

    display: flex;

    gap: 15px;

    margin-top: -40px; /* Sovrapposizione alla Hero per stile "Material Design" */

    position: relative;

    z-index: 10;

}



@media (max-width: 768px) {

    .search-bar-wrapper { flex-direction: column; margin-top: 0; }

}



/* News Card Styling - Estensione della classe .card esistente */

.news-card {

    padding: 0; /* Rimuoviamo padding globale per gestire l'immagine */

    overflow: hidden;

    display: flex;

    flex-direction: column;

    border-top: none; /* Rimuove il bordo superiore standard per usare l'immagine */

}



.news-image-placeholder {

    height: 180px;

    width: 100%;

    /* In futuro sostituire con background-image url() */

    opacity: 0.9;

    transition: 0.3s;

}



.news-card:hover .news-image-placeholder {

    opacity: 1;

    transform: scale(1.05);

}



.news-content {

    padding: 20px;

    display: flex;

    flex-direction: column;

    flex-grow: 1;

}



/* Badges e Meta Dati */

.news-meta {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 10px;

    font-size: 0.85rem;

}



.badge {

    padding: 4px 10px;

    border-radius: 4px;

    color: white;

    font-weight: 700;

    text-transform: uppercase;

    font-size: 0.7rem;

    letter-spacing: 0.5px;

}



.badge-primary { background: var(--primary); }

.badge-accent { background: var(--accent); color: var(--dark); } /* Giallo/Arancio */

.badge-enasc { background: var(--enasc); } /* Arancio Patronato */

.badge-agri { background: #27ae60; } /* Verde custom per agricoltura */



.date {

    color: #888;

    font-style: italic;

}



/* Link "Leggi tutto" */

.read-more {

    margin-top: auto; /* Spinge il link in fondo alla card */

    color: var(--primary);

    font-weight: 700;

    text-transform: uppercase;

    font-size: 0.9rem;

    padding-top: 15px;

}



.read-more:hover {

    color: var(--accent);

    padding-left: 5px; /* Piccola animazione di spostamento */

}