/* ==========================================================================
   1. VARIABILI E BASE
   ========================================================================== */
:root {
    --navy: #001d3d;
    --azzurro: #00b4d8;
    --bianco: #ffffff;
    --grigio-light: #f8f9fa;
    --danger-red: #e84118;
}

body { 
    font-family: 'Inter', sans-serif; 
    color: var(--navy); 
    line-height: 1.6;
    margin: 0;
    background-color: var(--bianco);
}

.fw-black { font-weight: 900; }
.tracking-widest { letter-spacing: 4px; }

/* ==========================================================================
   2. NAVBAR
   ========================================================================== */
.navbar { 
    background: var(--navy) !important; 
    border-bottom: 3px solid var(--azzurro); 
    padding: 15px 0;
    z-index: 1000;
}

.nav-link { 
    font-weight: 700; 
    color: white !important; 
    text-transform: uppercase; 
    font-size: 0.85rem;
}

.nav-link:hover, .nav-link.active { 
    color: var(--azzurro) !important; 
}

/* Bottone Iscrizione nella Navbar */
.nav-btn-iscrizione {
    color: var(--azzurro) !important;
    border: 2px solid var(--azzurro) !important;
    border-radius: 8px;
    margin-left: 15px;
    padding: 8px 20px !important;
    font-weight: bold;
    transition: all 0.3s ease;
}

.nav-btn-iscrizione:hover {
    background-color: var(--azzurro) !important;
    color: var(--navy) !important;
    transform: scale(1.05);
}

/* ==========================================================================
   3. HERO SECTIONS (Le testate delle pagine)
   ========================================================================== */
.hero-main {
    height: 100vh;
    min-height: 600px;
    background: linear-gradient(rgba(0,29,61,0.7), rgba(0,29,61,0.5)), 
                url('../img/hero-bg.jpg') no-repeat center center;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

.hero-page, .hero-iscrizione {
    height: 45vh;
    min-height: 350px;
    background: linear-gradient(rgba(0,29,61,0.8), rgba(0,29,61,0.8)), 
                url('../img/hero-bg.jpg') no-repeat center center;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 6px solid var(--azzurro);
    color: white;
    text-align: center;
}

/* ==========================================================================
   4. COMPONENTI COMUNI (Sezioni, Divisori, Card)
   ========================================================================== */
section { padding: 80px 0; }

.divider { 
    width: 60px; 
    height: 5px; 
    background: var(--azzurro); 
    margin: 20px 0; 
}

.bg-navy { background-color: var(--navy); color: white; }

.card-girone {
    transition: transform 0.3s ease;
    border-radius: 20px;
    overflow: hidden;
}
.card-girone:hover { transform: scale(1.02); }

/* ==========================================================================
   5. BOTTONI
   ========================================================================== */
/* Bottone Azzurro Standard */
.btn-info { 
    background-color: var(--azzurro); 
    border: none; 
    color: white; 
    border-radius: 8px; 
    font-weight: 800; 
    padding: 12px 30px;
}
.btn-info:hover { background-color: #0096b4; color: white; }

/* Bottone Download Documenti */
.doc-card { 
    transition: transform 0.3s ease; 
    border-radius: 12px;
}
.doc-card:hover { transform: translateY(-5px); }

/* ==========================================================================
   6. TABS CALENDARIO (I Match)
   ========================================================================== */
/* Bottoni Match - NERI/NAVY di base */
.nav-pills .nav-link { 
    color: #ffffff !important; 
    background-color: var(--navy) !important; 
    border: 2px solid var(--navy) !important; 
    margin: 0 5px; 
    transition: all 0.3s ease;
    font-weight: 700;
    border-radius: 10px;
    padding: 10px 25px;
}

/* Bottoni Match - AZZURRI quando attivi o passandoci sopra */
.nav-pills .nav-link.active, 
.nav-pills .nav-link:hover { 
    background-color: var(--azzurro) !important; 
    border-color: var(--azzurro) !important;
    color: var(--navy) !important; /* Testo scuro sull'azzurro per leggibilità */
    transform: translateY(-2px);
}

/* Tabella Match */
.table thead { background-color: var(--navy); color: white; }
.table-hover tbody tr:hover { background-color: rgba(0, 180, 216, 0.05); }

/* ==========================================================================
   7. MODULO ISCRIZIONE & GOOGLE FORM
   ========================================================================== */
.form-container {
    position: relative;
    overflow: hidden;
    width: 100%;
    padding-top: 120%; /* Altezza proporzionale del form */
}

.form-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    border: none;
}

/* ==========================================================================
   8. FOOTER
   ========================================================================== */
footer {
    background: var(--navy);
    color: white;
    padding: 60px 0 30px 0;
    border-top: 5px solid var(--azzurro);
}

footer a { transition: color 0.3s ease; }
footer a:hover { color: var(--azzurro); }

/* ==========================================================================
   9. RESPONSIVE
   ========================================================================== */
@media (max-width: 991px) {
    .nav-btn-iscrizione {
        margin-left: 0;
        margin-top: 10px;
        display: inline-block;
    }
}

@media (max-width: 768px) {
    .hero-main { height: 80vh; }
    .hero-page, .hero-iscrizione { min-height: 300px; }
    .display-1 { font-size: 3rem; }
    .display-2 { font-size: 2.5rem; }
    section { padding: 50px 0; }
}