/* ===================================================================================
   STYLE_MOBILE.CSS – VERSIONE COMPLETAMENTE RIPULITA E DOCUMENTATA
   Tutte le regole mobile consolidate dentro un unico @media max-width: 768px
   =================================================================================== */

@media (max-width: 768px) {


/* ===================================================================================
   1) HEADER MOBILE – LOGO E HAMBURGER SU RIGA UNICA (COMPATTO)
   =================================================================================== */

.site-header-flex {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: space-between !important;
    align-items: center !important;
    
    /* MODIFICA: align-content serve a "impacchettare" le righe verso l'alto */
    align-content: flex-start !important; 
    
    width: 100% !important;
    
    /* MODIFICA: Riduco il padding verticale a 2px */
    padding: 2px 10px !important; 
    box-sizing: border-box !important;
    gap: 0 !important;
}

/* --- ELEMENTO 1: LOGO --- */
.logo-box {
    display: block !important;
    flex: 0 1 auto !important;
    width: auto !important;
    max-width: 70% !important;
    order: 1 !important;
	margin-left: 40px !important;  /* Spinge il logo verso destra */
    
    /* MODIFICA: Rimuovo qualsiasi margine inferiore del logo */
    margin-bottom: 0 !important; 
    padding-bottom: 0 !important;
}

.logo-box img.logo {
    width: 120px !important;
    height: auto !important;
    display: block !important;
    /* Rimuove lo spazio fantasma sotto le immagini inline */
    vertical-align: bottom !important; 
}

/* --- ELEMENTO 2: HAMBURGER MENU --- */
.menu-toggle {
    display: block !important;
    flex: 0 0 auto !important;
    width: auto !important;
    font-size: 34px !important;
    background: none !important;
    border: none !important;
    color: #0c4176 !important;
    margin: 0 !important;
    padding: 0 5px !important;
    order: 2 !important;
    line-height: 1 !important; /* Riduce l'altezza della riga del simbolo */
	margin-right: 60px !important; /* Spinge il menù verso sinistra */
}

/* ===================================================================================
   2) HAMBURGER MENU + NAVIGAZIONE MOBILE
   =================================================================================== */

/* ----------------------------------------------------------------------------
   Pulsante hamburger sempre visibile
---------------------------------------------------------------------------- */
.menu-toggle {
    display: block !important;
    font-size: 30px;
    padding: 6px 10px;
    cursor: pointer;
    background: none;
    border: none;
    color: #0c4176;
    margin-left: auto !important;
    z-index: 9999;
}

/* ----------------------------------------------------------------------------
   Menu principale nascosto finché .open non è attivato
---------------------------------------------------------------------------- */
.main-nav {
    display: none !important;
    flex-direction: column;
    width: 100%;
    background-color: green;
}

.main-nav.open {
    display: flex !important;
}

/* ----------------------------------------------------------------------------
   Voci menu mobile
---------------------------------------------------------------------------- */
.main-nav ul {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 0;
    margin: 0;
}

.main-nav li {
    width: 100%;
    text-align: center;
    font-size: 0.70em;
}

.main-nav a {
    display: block;
    padding: 12px;
    border-bottom: 1px solid #006600;
    font-size: 0.9em;
}

.dropdown .dropdown-content { display: none; }
.dropdown a.open + .dropdown-content { display: block !important; }


/* ===================================================================================
   3) HEADER TOOLS / RICERCA / ICONE SOCIAL
   =================================================================================== */


.header-tools {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    flex-basis: 100% !important;
    
    /* MODIFICA FONDAMENTALE: Da 15px a 2px per avvicinare la ricerca al logo */
    margin-top: 10px !important; 
    
    gap: 10px !important; /* Spazio tra ricerca e social */
    order: 3 !important;
}

/* --- RICERCA --- */
.header-search {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    gap: 5px !important; /* Ridotto leggermente lo spazio tra input e bottone */
}

.header-search-input {
    width: 100% !important;
    height: 40px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

.header-search-btn {
    width: 100% !important;
    height: 40px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    display: block !important;
}

/* --- SOCIAL --- */
.header-social {
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
    gap: 20px !important;
    
    /* Margine inferiore per staccare dal contenuto successivo */
    margin-bottom: 10px !important; 
}

.header-icon {
    width: 36px !important;
    height: 36px !important;
}


/* ===================================================================================
   4) DISATTIVA HEADER FISSO SU MOBILE
   =================================================================================== */
.fixed-header-container {
    position: static !important;
    box-shadow: none !important;
    margin-bottom: 5px !important;
}

body.has-fixed-header {
    padding-top: 0 !important;
}


/* ===================================================================================
   5) FORM / INPUT / CHECKBOX MOBILE
   =================================================================================== */

.form-label,
input[type="text"],
button,
select {
    width: 100%;
    padding: 6px;
    margin: 5px 0;
    font-size: 0.95em;
}

.form-label { font-size: 0.9em; }

input[type="checkbox"] {
    transform: scale(1.2);
    margin-right: 6px;
}

label {
    font-size: 0.95em;
}

/* ----------------------- Ricerca Home ----------------------- */

.form-home-search {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    align-items: stretch !important;
    padding: 0 10px;
    margin-top: 10px;
}

.form-home-search input[type="text"],
.form-home-search button {
    width: 100%;
}

.checkbox-row {
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

.checkbox-row label {
    flex: 1 1 50%;
    display: flex;
    align-items: center;
    white-space: nowrap;
}


/* ===================================================================================
   6) FOTO INIZIALI (2 per riga) + LAYOUT MAPPA/FOTO (IMPILATI)
   =================================================================================== */

.foto-iniziali {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 10px;
    padding: 6px;
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.foto-iniziali .foto {
    width: calc(50% - 5px);
}

/* --- REGOLE SPECIFICHE PER IL BLOCCO MAPPA + CAROSELLO --- */
/* Usiamo gli ID per vincere la specificità del desktop */

#blocco-home-iniziale {
    display: flex !important;
    flex-direction: column !important; /* Mette gli elementi uno sotto l'altro */
    height: auto !important;           /* L'altezza si adatta al contenuto */
    gap: 20px !important;              /* Spazio tra Mappa e Foto */
    margin: 0 5px 2px 5px !important;
}

/* Resetta le larghezze dei due contenitori figli (Mappa e Foto) */
#map-container,
#photo-container {
    width: 100% !important;      /* Occupa tutto lo spazio orizzontale */
    max-width: 100% !important;
    flex-basis: auto !important; /* Ignora il 50% del desktop */
    flex-grow: 0 !important;
    height: auto !important;     /* Resetta l'altezza fissa del desktop */
    border: none !important;     /* Toglie bordi se danno fastidio su mobile */
}

/* --- MAPPA (Sotto) --- */
/* Definiamo un'altezza fissa per la mappa su mobile per evitare che sparisca */
#map-container .map-embed-large {
    width: 100% !important;
    height: 300px !important;    /* Altezza comoda per il dito su mobile */
    min-height: 300px !important;
}

/* --- CAROSELLO FOTO (Sopra) --- */
#photo-container {
    /* Opzionale: se vuoi dare una dimensione fissa anche alle foto */
    min-height: 180px; 
}

#photo-container .slideshow-container,
#photo-container .mySlides img {
    width: 100% !important;
    height: auto !important;     /* Mantiene le proporzioni della foto */
    display: block;
    object-fit: cover;           /* Assicura che la foto riempia bene lo spazio */
		
}

/* --- CAROSELLO FOTO (Sopra) --- */
#photo-container {
    display: block !important;
    width: 180% !important;
    /* Diamo un'altezza fissa per evitare che collassi o diventi infinito */
    height: 100px !important; 
    position: relative !important;
    overflow: hidden !important; /* Taglia tutto ciò che esce dai bordi */
}

#photo-container .slideshow-container {
    width: 100% !important;
    height: 100% !important;
    position: relative !important;
}

#photo-container .mySlides {
    /* Fondamentale: Absolute fa sì che le foto stiano una SOPRA l'altra e non in fila verticale */
    position: absolute !important; 
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

#photo-container .mySlides img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* Riempie il riquadro senza deformare */
    display: block !important;
}

/* Regole per l'etichetta sopra la foto */
#photo-container .etichetta {
    display: block !important;
    position: absolute !important;
    bottom: 0px !important;       /* Attaccata al bordo inferiore */
    left: 0px !important;
    width: 100% !important;       /* Occupa tutta la larghezza */
    z-index: 10 !important;
    background-color: rgba(0,0,0,0.4); /* Sfondo semitrasparente per leggere meglio */
    color: #f6f300 !important;    /* Giallo */
    padding: 5px !important;
    text-align: center !important;
    font-size: 0.9em !important;
}


/* Stile per la didascalia sotto la mappa */
.didascalia-mappa {
    /* Posizionamento assoluto rispetto al contenitore <figure> genitore */
    position: absolute; 
    
    /* Spostamento in basso: 5 pixel dal fondo */
    bottom: 288px; 
	
	/* REGOLA CRUCIALE PER EVITARE CHE IL TESTO VADA A CAPO */
    white-space: nowrap;
    
    /* Centratura orizzontale */
    left: 12%;
    transform: translateX(-10%);
    
    /* Stili del testo: medio-piccolo e centrato */
    font-size: 0.7em; /* Rendi il testo medio-piccolo */
    color: red;     /* Colore del testo */
    background-color: rgba(255, 255, 255, 0.75); /* Sfondo semitrasparente per non coprire elementi */
    padding: 2px 8px; /* Spaziatura interna */
    border-radius: 4px; /* Angoli arrotondati */
    z-index: 1000; /* Assicura che sia sopra l'iframe */
    
    /* Assicurati che il contenitore genitore <figure> sia un riferimento di posizionamento */
    /* Questo è già presente nel markup: figure.foto-mappa-home */
}





/* ===================================================================================
   7) TRAVEL INDEX BAR
   =================================================================================== */

.travel-index-bar {
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.travel-index-bar .anchor-title {
    font-size: 1.5em;
    text-align: center;
}


/*   FIX SPAZIO BIANCO TRA MAPPA E INDICE ITINERARI   */

/* 1. Annulla lo spessore dell'ancora invisibile */
/* Su mobile l'header non è fisso, quindi non serve compensare l'altezza */
a.anchor-offset {
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    border: none !important;
}

/* 2. Rimuovi margini superflui dal contenitore della mappa */
#blocco-home-iniziale {
    margin-bottom: 0 !important; /* Azzera lo spazio sotto la mappa */
    padding-bottom: 0 !important;
}

/* 3. Riduci lo spazio sopra la barra del titolo */
.travel-index-bar {
    margin-top: -10px !important; /* Lascia solo un piccolo respiro (es. 10px) */
    padding-top: 0 !important;
}

/* 4. Opzionale: Riduci il margine del titolo stesso se necessario */
.travel-index-bar .anchor-title {
    margin-top: 0 !important;
    padding-top: 0 !important;
}


/* ===================================================================================
   8) TABELLE SCORRIBILI + COLONNE NASCOSTE
   =================================================================================== */

.scrollable-table-container {
    max-width: 100%;
    overflow-x: auto;
}

table {
    font-size: 0.9em;
}

/* Nascondi colonne non necessarie */
.col-anno,
.col-mese,
.col-mappa {
    display: none !important;
}

.col-codice {
    width: 80px;
    white-space: normal;
    text-align: left;
}

.col-titolo {
    width: 80px;
    white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* ===================================================================================
   9) WIDGET SX/DX E LAYOUT VIAGGIO MOBILE
   =================================================================================== */

.travel-layout {
    flex-direction: column;
}

.widget-sx,
.widget-dx,
.travel-content {
    width: 100%;
    max-height: none;
    margin-top: 15px;
}


/* ===================================================================================
   10) SLIDER MOBILE
   =================================================================================== */

.slider-container {
    width: 90vw;
    height: 220px;
}


/* ===================================================================================
   11) FIX MAPPE GOOGLE / LEAFLET (overflow a destra)
   =================================================================================== */

.foto-world {
    width: 100% !important;
    overflow-x: hidden !important;
}

.foto-world iframe,
.foto-world .map-embed {
    width: 100% !important;
    min-width: 100% !important;
    height: auto !important;
}

.foto-world .etichetta {
    width: 100%;
    text-align: center;
}


/* ===================================================================================
   12) CARD-STYLE LISTA VIAGGI (versione mobile)
   =================================================================================== */

.mobile-card-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 10px;
}

.viaggio-card {
    border: 1px solid #ccc;
    border-radius: 6px;
    padding: 10px;
    background: #fff;
    box-shadow: 1px 1px 6px rgba(0,0,0,0.1);
}

.card-titolo {
    font-size: 1.2em;
    font-weight: bold;
    color: #0C4176;
}

.card-sottotitolo,
   .viaggio-card iframe {
    display: none !important;
}
.card-info {
    font-size: 0.95em;
}

.card-foto img {
    width: 100%;
    border-radius: 4px;
    border: 1px solid #ccc;
}

.btn-card {
    background-color: #006600;
    color: white;
    padding: 8px 12px;
    border-radius: 4px;
    font-weight: bold;
}

.btn-card:hover {
    background-color: #004d00;
}


/* ===================================================================================
   13) HARDENING MOBILE: prevenzione overflow globale
   =================================================================================== */

body, html {
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
    width: 100% !important;
}

* {
    max-width: 100% !important;
    box-sizing: border-box;
}


/* ===================================================================================
   14) CORREZIONE SEZIONE VIAGGI NEL MONDO (MAPPA E FOTO)
   =================================================================================== */

/* Applica la larghezza completa (100%) al contenitore padre.
   Questo è cruciale se c'è un padding laterale nel contenitore esterno. */
.tabella-wrapper + #travel-world-anchor + .anchor-title-world + .foto-world {
    width: 100% !important;
    padding: 0 10px !important; /* Opzionale: aggiungi un piccolo padding laterale se necessario */
    box-sizing: border-box !important;
}

/* Regola per l'iframe della Mappa */
.foto-world .map-embed {
    /* Forziamo la larghezza al 100% per occupare tutto lo spazio disponibile */
    width: 100% !important; 
    /* Riduciamo l'altezza fissa per un display mobile (es. 400px, aggiustabile) */
    height: 400px !important; 
    /* Elimina il bordo se presente, per un look più pulito */
    border: none !important;
}

/* Regola per il contenitore delle foto/carosello (secondo .foto-world) */
/* Assumendo che il carosello sia nel secondo blocco .foto-world in home.php */
.foto-world:nth-of-type(2) {
    width: 100% !important;
    padding: 0 !important; /* Rimuove il padding se presente */
}

/* Regola per le etichette per assicurarsi che siano ben posizionate (opzionale) */
.etichetta-verde {
    /* Assicurati che l'etichetta non sia influenzata da width: 80% */
    width: auto !important;
    left: 10px !important;
    right: 10px !important;
    text-align: center !important;
    margin: 0 auto !important;
}



/* All'interno di style_mobile.css, sotto @media (max-width: 768px) */
.foto-world .map-embed {
    /* Il !important costringe il browser a dare priorità a questa regola */
    width: 100% !important; 
    height: 400px !important; 
}


}
/* ====== END MOBILE =============================================================== */