/*
 * Plugin Name: Salone Nautico Events Manager
 * Description: Styles for Salone Nautico Event buttons.
 * Version: 1.2 (Updated for detailed screenshot styles)
 */

/* Variabili CSS per una facile personalizzazione (sovrascrivibili nel tema) */
:root {
    /* Colori generali */
    --sne-color-primary: #0073aa; /* Blu standard di WP, usalo per l'attivo */
    --sne-color-very-light-grey: #f5f5f5; /* Sfondo chiaro per la barra dei giorni */
    --sne-color-light-grey: #f0f0f0; /* Sfondo pulsanti normali */
    --sne-color-medium-grey: #808080; /* Testo dei giorni inattivi */
    --sne-color-dark-grey: #333333; /* Testo dei giorni attivi (quasi nero) */
    --sne-color-border-subtle: #dddddd; /* Bordo sottile per i pulsanti e wrapper */

    /* Pulsanti giorno */
    --sne-btn-bg-normal: var(--sne-color-light-grey);
    --sne-btn-text-normal: var(--sne-color-medium-grey);
    --sne-btn-border-normal: var(--sne-color-border-subtle);
    
    --sne-btn-bg-hover: #e5e5e5; /* Leggermente più scuro per hover */
    --sne-btn-text-hover: var(--sne-color-dark-grey);
    --sne-btn-border-hover: var(--sne-color-border-subtle);

    --sne-btn-bg-active: #ffffff; /* Bianco per il pulsante attivo */
    --sne-btn-text-active: var(--sne-color-dark-grey);
    --sne-btn-border-active: var(--sne-color-border-subtle);
    --sne-btn-active-bottom-border-color: #0073aa; /* Blu per il bordo inferiore attivo */
    --sne-btn-active-bottom-border-width: 2px; /* Spessore bordo inferiore attivo */

    --sne-btn-border-radius: 5px; /* Angoli arrotondati */
    --sne-btn-padding: 10px 15px; /* Padding interno */
    --sne-btn-font-size-label: 14px; /* Dimensione giorno settimana */
    --sne-btn-font-size-number: 22px; /* Dimensione numero giorno */
    --sne-btn-gap: 10px; /* Spaziatura tra i pulsanti */
    --sne-btn-min-width: 90px; /* Larghezza minima per tutti i pulsanti */
    --sne-btn-height: 80px; /* Altezza fissa per i pulsanti per allineamento */
}

/* Rende il datepicker originale di S&F invisibile ma funzionale */
/* Questo è fondamentale per non rompere S&F */





/* Stili per il wrapper dei pulsanti */
.sne-days-buttons-wrapper {
    display: flex;
    gap: var(--sne-btn-gap);
    flex-wrap: wrap; /* Permette ai pulsanti di andare a capo */
    justify-content: space-evenly; /* Allinea a sinistra */
    padding: 10px; /* Padding per la barra dei giorni */
    align-items: center; /* Allinea verticalmente i pulsanti se hanno altezze diverse */
 
}

/* Stili base per i pulsanti */
.sne-day-button {
    background-color: unset;
        border: 1px solid var(--sne-btn-border-normal);
        padding: var(--sne-btn-padding);
        cursor: pointer;
        text-decoration: none;
        color: var(--sne-btn-text-normal);
        transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s;
        white-space: nowrap;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        min-width: var(--sne-btn-min-width);
        height: var(--sne-btn-height);
}

/* Stili interni del pulsante */
.sne-day-button .sne-day-label {
    font-size: var(--sne-btn-font-size-label);
    font-weight: normal; /* Non grassetto di default */
    margin-bottom: 2px; /* Spazio tra giorno e numero */
    text-transform: capitalize; /* Prima lettera maiuscola, il resto minuscola */
}

.sne-day-button .sne-date-number {
    font-size: var(--sne-btn-font-size-number);
    font-weight: normal; /* Numero giorno normale di default */
    line-height: 1; /* Rimuovi spazio extra sotto il numero */
}


/* Stili al passaggio del mouse (hover) */
.sne-day-button:hover {
    background-color: var(--sne-btn-bg-hover);
    border-color: var(--sne-btn-border-hover);
    color: var(--sne-btn-text-hover);
    box-shadow: 0 2px 5px rgba(0,0,0,0.08); /* Ombra più pronunciata su hover */
}

/* Stili per il pulsante attivo/selezionato */
.sne-day-button.sne-active-day {
    background-color: #ffffffb8;
        color: #233260;
        border: 0px solid var(--sne-btn-border-active);
        border-bottom: var(--sne-btn-active-bottom-border-width) solid #233260;
        font-weight: normal;
}

.sne-day-button.sne-active-day .sne-day-label {
    font-weight: bold; /* Giorno settimana attivo in grassetto */
}

.sne-day-button.sne-active-day .sne-date-number {
    font-weight: bold; /* Numero giorno attivo in grassetto */
}

/* --- Stili per il Blocco Evento (Richiede configurazione Elementor/DCE) --- */
/* Le classi qui sotto sono esempi basati sul tuo screenshot. */
/* Dovrai applicarle o adattarle nel tuo template DCE di Elementor. */

/* Container del singolo evento */
.sne-event-item-wrapper {
    background-color: #fff; /* Sfondo bianco */
    /* border: 1px solid #eee; /* Rimuovi il bordo se non presente nello screenshot */
    padding: 20px;
    margin-bottom: 20px; /* Spazio tra gli eventi */
    border-radius: 5px;
    /* box-shadow: 0 1px 5px rgba(0,0,0,0.05); /* Rimuovi l'ombra se non presente nello screenshot */
}

/* Stile per la riga "VENERDÌ 20 | ORE 18:00 | FORUM" */
.sne-event-meta {
    font-size: 13px;
    color: #666; /* Colore grigio */
    text-transform: uppercase;
    margin-bottom: 10px;
    letter-spacing: 0.5px;
    font-weight: 500; /* Leggermente più spesso */
}

/* Stile per il titolo dell'evento */
.sne-event-title {
    font-size: 24px;
    font-weight: bold; /* Grassetto */
    color: #333; /* Quasi nero */
    margin-bottom: 10px;
}

/* Stile per la descrizione dell'evento */
.sne-event-description {
    font-size: 16px;
    color: #555;
    line-height: 1.6;
    margin-bottom: 15px;
}

/* Stile per il link "DETTAGLI EVENTO" */
.sne-event-details-link {
    font-size: 14px;
    color: #0073aa; /* Colore blu specifico */
    text-transform: uppercase;
    font-weight: bold;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}
.sne-event-details-link:hover {
    text-decoration: underline;
}
/* Stile per la freccia (se è un SVG o un'icona) */
.sne-event-details-link svg,
.sne-event-details-link .elementor-icon { /* Aggiunto supporto per Elementor icons */
    margin-left: 5px; /* Spazio tra testo e freccia */
    width: 16px;
    height: 16px;
    fill: currentColor; /* Usa lo stesso colore del testo */
}


/* Linea divisoria */
.sne-event-separator {
    border-bottom: 1px solid #eeeeee; /* Linea grigio chiaro */
    margin-top: 30px;
    margin-bottom: 30px;
}

/* Media Queries per la Responsività (opzionale, ma consigliato) */
@media (max-width: 768px) {
    .sne-days-buttons-wrapper {
        justify-content: center; /* Centra i pulsanti su schermi più piccoli */
        gap: 8px; /* Riduci il gap */
        padding: 8px;
    }
    .sne-day-button {
        min-width: 65px; /* Riduci la larghezza minima */
        height: 70px; /* Riduci l'altezza */
        padding: 8px 10px;
    }
    .sne-day-button .sne-day-label {
        font-size: 13px;
    }
    .sne-day-button .sne-date-number {
        font-size: 20px;
    }
}

@media (max-width: 480px) {
    .sne-days-buttons-wrapper {
        gap: 5px;
        padding: 5px;
    }
    .sne-day-button {
        min-width: 55px;
        height: 60px;
        padding: 5px 8px;
    }
    .sne-day-button .sne-day-label {
        font-size: 12px;
    }
    .sne-day-button .sne-date-number {
        font-size: 18px;
    }
    .sne-event-title {
        font-size: 20px;
    }
    .sne-event-description {
        font-size: 15px;
    }
}