/* --- Reset di Base e Stili Globali --- */
body {
    font-family: 'Verdana', sans-serif; /* O un font simile a quello che preferisci/usavi */
    margin: 0;
    /* ATTENZIONE: Il valore di padding-top (es. 130px) deve corrispondere
       all'altezza REALE del tuo #main-fixed-header quando è fisso.
       Misurala con gli strumenti per sviluppatori e aggiustala! */
    padding-top: 160px; /* ESEMPIO - DEVI VERIFICARE E AGGIUSTARE QUESTO VALORE! */
    background-color: #f4f4f4; /* Un grigio chiaro per lo sfondo generale */
    color: #333;
    line-height: 1.6;
}

a {
    color: #007bff; /* Blu standard per i link, da Bootstrap */
    text-decoration: none;
}

a:hover {
    color: #0056b3;
    text-decoration: underline;
}

img {
    max-width: 100%;
    height: auto; /* Per immagini responsive */
}

.container {
    width: 90%;
    max-width: 1100px; /* Larghezza massima per il contenuto principale */
    margin: 0 auto; /* Centra il container */
    padding: 20px 0;
}

/* --- Header --- */
#main-fixed-header {
    position: fixed; /* Rende l'header fisso */
    top: 0;          /* Lo attacca al bordo superiore */
    left: 0;         /* Lo attacca al bordo sinistro */
    width: 100%;     /* Occupa tutta la larghezza */
    z-index: 1000;   /* Assicura che stia sopra gli altri contenuti */

    background-color: #f8f9fa; /* Grigio chiaro, simile a Bootstrap navbar-light */
    padding: 10px 0;
    border-bottom: 1px solid #e7e7e7;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Opzionale: aggiunge una leggera ombra */
}

.top-header-content {
    width: 95%;
    max-width: 1200px; /* Leggermente più largo per l'header */
    margin: 0 auto;
}

.header-main-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap; /* Permette agli elementi di andare a capo su schermi piccoli */
}

.header-left-column,
.header-center-column,
.header-right-column {
    padding: 5px 10px;
    display: flex;
    align-items: center;
}

.header-center-column {
    justify-content: center;
    flex-grow: 1; /* Permette alla colonna centrale di prendere più spazio */
}

.logo-link {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: inherit;
}

.logo-image-container img {
    max-height: 60px; /* Altezza massima del logo */
    margin-right: 10px;
}

.association-details-inline {
    display: flex;
    flex-direction: column;
    font-size: 0.9em;
    font-weight: bold;
}
.association-details-inline .association-text {
    line-height: 1.2;
}


.contact-section p {
    margin: 2px 0;
    font-size: 0.85em;
}
.contact-section .contact-label {
    font-weight: bold;
}
.contact-section .whatsapp-info a {
    font-weight: bold;
    color: #25D366; /* Colore WhatsApp */
}
.contact-section .whatsapp-info a:hover {
    color: #128C7E;
}

.header-secondary-info {
    font-size: 0.75em;
    color: #555;
    text-align: center;
    padding-top: 10px;
    border-top: 1px solid #eee;
    margin-top: 10px;
}
.header-secondary-info p {
    margin: 2px 5px;
    display: inline-block; /* Mette le info su una riga se c'è spazio */
}

/* --- Navigazione --- */
.main-nav .nav-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
}

.main-nav .nav-list li {
    margin-left: 15px;
}

.main-nav .nav-link {
    font-weight: bold;
    font-size: 0.9em;
    color: #333;
    padding: 5px 0;
    transition: color 0.3s ease;
}

.main-nav .nav-link:hover,
.main-nav .nav-link.active {
    color: #007bff; /* Blu per hover e link attivo */
    text-decoration: none;
    border-bottom: 2px solid #007bff;
}

/* Stili per il bottone del menu mobile (hamburger) */
.mobile-menu-button {
    display: none; /* Nascosto di default, mostrato con media query */
    font-size: 24px; /* Dimensione dell'icona hamburger */
    background: none;
    border: none;
    color: #333;
    cursor: pointer;
    padding: 5px 10px; /* Un po' di padding per renderlo più cliccabile */
}


/* --- Main Content & Cards --- */
#prenotazioni-online {
    margin-bottom: 30px;
}

.iframe-container {
    width: 100%;
    border: 1px solid #ddd;
    border-radius: 5px;
    margin-bottom: 20px;
    /* overflow: auto; */
}

.iframe-container iframe {
    display: block;
    width: 100%;
    min-height: 550px;
    height: 650px;
    border: none;
}

@media (min-width: 768px) {
    .iframe-container iframe {
        height: 700px;
    }
}

@media (min-width: 992px) {
    .iframe-container iframe {
        height: 750px;
    }
}


.card {
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.card h2 {
    margin-top: 0;
    color: #0056b3; /* Un blu più scuro per i titoli delle card */
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
    margin-bottom: 15px;
}

.card ul {
    list-style: none;
    padding-left: 0;
}
.card ul li a {
    display: block;
    padding: 5px 0;
}

.card-group {
    display: flex;
    flex-wrap: wrap;
    gap: 20px; /* Spazio tra le card nel gruppo */
}

.card-group .card {
    flex: 1 1 300px; /* Permette alle card di crescere e restringersi, con una base di 300px */
    min-width: 280px; /* Larghezza minima prima di andare a capo */
}


.button, input[type="submit"], input[type="button"] { /* Stile base per i bottoni */
    display: inline-block;
    background-color: #007bff;
    color: white;
    padding: 10px 15px;
    border: none;
    border-radius: 4px;
    text-align: center;
    font-size: 1em;
    cursor: pointer;
    transition: background-color 0.3s ease;
    margin: 5px 5px 5px 0; /* Spaziatura tra i bottoni */
}

.button:hover, input[type="submit"]:hover, input[type="button"]:hover {
    background-color: #0056b3;
    color: white;
    text-decoration: none;
}

/* Specifiche per i bottoni, se vuoi colori diversi */
.button-etica { background-color: #28a745; } /* Verde */
.button-etica:hover { background-color: #1e7e34; }
.button-modello { background-color: #17a2b8; } /* Ciano */
.button-modello:hover { background-color: #117a8b; }
.button-prezzi { background-color: #ffc107; color: #212529; } /* Giallo */
.button-prezzi:hover { background-color: #e0a800; }
.button-estate { background-color: #fd7e14; } /* Arancione */
.button-estate:hover { background-color: #c66511; }
.button-scuola { background-color: #6f42c1; } /* Viola */
.button-scuola:hover { background-color: #59359a; }

.program-links, .button-group {
    display: flex;
    flex-wrap: wrap; /* I bottoni vanno a capo se non c'è spazio */
}

.tessera-info {
    margin-bottom: 20px;
}
.tessera-info h3 {
    color: #dc3545; /* Rosso per evidenziare */
}
.highlight {
    color: #dc3545;
    font-weight: bold;
}

.responsive-img {
    display: block; /* Per centrare con margin auto, se necessario */
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 15px;
}

/* --- Footer --- */
footer {
    background-color: #343a40; /* Grigio scuro, da Bootstrap */
    color: #f8f9fa; /* Testo chiaro */
    text-align: center;
    padding: 20px;
    margin-top: 30px;
    font-size: 0.9em;
}

footer p {
    margin: 5px 0;
}

footer a {
    color: #00aced; /* Un azzurro per i link nel footer */
}
footer a:hover {
    color: #fff;
}


/* --- NUOVE REGOLE PER LA SEZIONE "Torneo FITP Tennis 2025" --- */

.tournament-highlight-card {
    position: relative; /* Necessario per posizionare sfondi/pseudo-elementi */
    overflow: hidden; /* Nasconde ciò che esce dai bordi arrotondati */
    padding: 30px; /* Aumenta il padding interno per più spazio */
    text-align: center; /* Centra il contenuto */
    background-color: #fff; /* Sfondo di base bianco */
    border: 2px solid #0056b3; /* Bordo più spesso e colorato */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25), 0 0 0 5px rgba(0, 86, 179, 0.2); /* Ombra più pronunciata con un tocco di colore */
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out; /* Animazione per il passaggio del mouse */
}

.tournament-highlight-card:hover {
    transform: translateY(-5px); /* Leggero sollevamento al passaggio del mouse */
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35), 0 0 0 8px rgba(0, 86, 179, 0.3); /* Ombra ancora più pronunciata */
}

.tournament-highlight-card h2 {
    font-size: 2.2em; /* Titolo più grande */
    color: #0056b3; /* Colore blu scuro */
    margin-bottom: 25px; /* Più spazio sotto il titolo */
    padding-bottom: 15px; /* Più padding sotto il titolo */
    border-bottom: 3px solid #007bff; /* Bordo sotto il titolo più spesso */
    position: relative;
    display: inline-block; /* Per centrare il bordo sotto il testo */
    text-transform: uppercase; /* Rende il testo del titolo in maiuscolo */
    letter-spacing: 1.5px; /* Spaziatura tra le lettere */
}

/* Opzione 1: Sfondo Gradiente (Decommenta per usare, commenta l'opzione 2 se presente) */
.tournament-highlight-card {
    background: linear-gradient(135deg, #e0f2f7 0%, #c1e4ee 100%); /* Gradiente dal blu chiaro al celeste */
}

/* Opzione 2: Sfondo Immagine (Decommenta per usare, commenta l'opzione 1 se presente) */
/* .tournament-highlight-card {
    background: url('../Immagini/tennis_court_bg.jpg') no-repeat center center / cover;
    color: #333; /* Assicurati che il testo sia leggibile sull'immagine */
    /* text-shadow: 1px 1px 2px rgba(255,255,255,0.8); /* Ombra per il testo se lo sfondo è scuro */
/* } */

/* Stile per il bottone all'interno di questa sezione */
.tournament-highlight-card .button {
    background-color: #007bff; /* Blu più vivido per il bottone */
    padding: 15px 30px; /* Bottone più grande */
    font-size: 1.1em; /* Testo bottone più grande */
    font-weight: bold;
    border-radius: 50px; /* Bordi arrotondati per un look moderno */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Ombra per il bottone */
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
}

.tournament-highlight-card .button:hover {
    background-color: #0056b3; /* Blu più scuro all'hover */
    transform: translateY(-2px) scale(1.02); /* Leggero sollevamento e ingrandimento */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}

/* Icona stilistica per il titolo (opzionale, usa Font Awesome se lo hai) */
/* Se usi Font Awesome 3.0.2 e vuoi un'icona:
   Assicurati che la libreria di Font Awesome sia inclusa correttamente nel tuo HTML.
   Questa parte CSS NON aggiunge l'icona; deve essere nell'HTML o aggiunta con JS.
   Per aggiungere un'icona Font Awesome davanti al titolo:
   Modifica l'HTML del tuo h2 così:
   <h2><i class="icon-trophy"></i> Torneo FITP Tennis 2025</h2>
   E poi puoi stilizzare l'icona nel CSS così:
*/
/* .tournament-highlight-card h2 .icon-trophy {
    margin-right: 10px;
    color: #f0ad4e; /* Colore giallo/oro per l'icona trofeo */
    /* font-size: 1.2em; /* Leggermente più grande del testo del titolo */
/* } */

/* --- Stili Responsivi (Media Queries) --- */
@media (max-width: 992px) {
    /* Se l'header diventa troppo alto su schermi medi a causa del wrap,
       potresti aver bisogno di aggiustare il padding-top del body qui */
    body { padding-top: 180px; } /* ESEMPIO - DEVI VERIFICARE E AGGIUSTARE QUESTO VALORE! */

    .header-main-row {
        flex-direction: column;
        align-items: center; /* Centra tutto quando l'header va in colonna */
    }
    .header-left-column, .header-right-column {
        width: 100%;
        justify-content: center;
        text-align: center;
    }
    .header-center-column {
        order: -1; /* Mette il logo in cima quando l'header è in colonna */
        margin-bottom: 10px;
    }
    .main-nav {
        width: 100%;
        margin-top: 10px;
    }
    .main-nav .nav-list {
        flex-direction: column;
        align-items: center;
    }
    .main-nav .nav-list li {
        margin-left: 0;
        margin-bottom: 5px;
        width: 100%;
        text-align: center;
    }
    .main-nav .nav-link {
        display: block;
        padding: 8px;
        border-bottom: none;
    }
    .main-nav .nav-link.active, .main-nav .nav-link:hover {
        background-color: #e9ecef; /* Sfondo per link attivi/hover nel menu mobile */
        border-bottom: none;
    }
}

@media (max-width: 768px) {
    /* Se l'header diventa ancora più alto su schermi piccoli,
       potresti aver bisogno di aggiustare il padding-top del body qui */
    body { padding-top: 220px; } /* ESEMPIO - DEVI VERIFICARE E AGGIUSTARE QUESTO VALORE! */

    .container {
        width: 95%;
    }

    /* Gestione Menu Mobile */
    .main-nav {
        display: none; /* Nascondi il menu di navigazione */
        width: 100%;
    }
    .main-nav.nav-open { /* Classe che aggiungeremo con JS */
        display: block;
        background-color: #f8f9fa;
        /* z-index: 999; // L'header ha già z-index: 1000, quindi il menu deve essere sotto o l'header sopra
                        ma dato che il menu è figlio dell'header, questo z-index è relativo.
                        L'importante è che l'header stia sopra il contenuto della pagina. */
        padding: 10px 0;
        border-top: 1px solid #e7e7e7;
        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        margin-top: 5px;
    }
    .mobile-menu-button {
        display: block; /* Mostra il bottone hamburger */
    }
    .header-right-column {
        justify-content: flex-end;
        min-height: 40px;
    }

    .header-secondary-info p {
        display: block; /* Ogni info su una riga su schermi piccoli */
        margin-bottom: 3px;
    }

    .card-group {
        flex-direction: column; /* Le card si impilano */
    }
    .card-group .card {
        width: 100%; /* Piena larghezza quando impilate */
    }

    .iframe-container iframe {
        min-height: 500px;
    }

    /* Media queries specifiche per la card del torneo */
    .tournament-highlight-card {
        padding: 20px;
        border: 1px solid #0056b3;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15), 0 0 0 3px rgba(0, 86, 179, 0.1);
    }

    .tournament-highlight-card h2 {
        font-size: 1.8em;
        margin-bottom: 20px;
        padding-bottom: 10px;
    }

    .tournament-highlight-card .button {
        padding: 12px 25px;
        font-size: 1em;
    }
}

@media (max-width: 480px) {
    .tournament-highlight-card h2 {
        font-size: 1.5em;
    }
    .tournament-highlight-card .button {
        width: 100%; /* Bottone a piena larghezza su mobile stretto */
        margin-left: 0;
        margin-right: 0;
    }
}