/* =============================================================
   REGOLE GENERALI
   ============================================================= */

body {

  margin: 0;
  font-family: Arial, sans-serif;

  overflow-x: hidden;
}

 
/* =============================================================
   HEADER LAYOUT FLEX: logo a sinistra, testo a destra
   (CONFIGURAZIONE FINALE BILANCIATA)
   ============================================================= */
   
/* -------------------------------------------------------------------------------- */
/* CLASSE: .site-header-flex */
/* Utilizzata in: header.php */
/* -------------------------------------------------------------------------------- */


.site-header-flex {
  display: flex;
  align-items: center;
  
  /* MODIFICA: Spinge il Logo (SX) e gli Strumenti (DX) ai lati */
  justify-content: space-between; 
  
  /* Mantieni un po' di spazio tra gli elementi interni, se necessario */
  gap: 20px; 
  
  /* Aggiungi padding laterale per staccare dal bordo del browser */
  padding: 16px 5% ; 
  
  /* MODIFICA: Impedisce agli elementi di andare a capo */
  flex-wrap: nowrap !important;
  
  width: 100%;
  box-sizing: border-box;  
  
}


/* -------------------------------------------------------------------------------- */
/* CLASSE: .logo-box */
/* Utilizzata in: header.php */
/* -------------------------------------------------------------------------------- */

.logo-box {

  flex: 0 0 auto;
  
  /* MODIFICA FONDAMENTALE 1: Spinge il logo lontano dal bordo sinistro */
  margin-left: 60px;
}

.logo-box img.logo {

  width: 350px;
  height: auto;
}

/* -------------------------------------------------------------------------------- */
/* CLASSE: .title-box */
/* Utilizzata in: header.php */
/* -------------------------------------------------------------------------------- */

.title-box {

  text-align: left;
  flex: 0 0 auto;
}

/* -------------------------------------------------------------------------------- */
/* CLASSE: .site-title-group */
/* Utilizzata in: header.php */
/* -------------------------------------------------------------------------------- */

.site-title-group {

  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* -------------------------------------------------------------------------------- */
/* CLASSE: .site-title */
/* Utilizzata in: header.php */
/* -------------------------------------------------------------------------------- */

.site-title {

  margin: 10px 0 10px 0;
  font-size: 5.0em;
  font-weight: bold;
}

/* -------------------------------------------------------------------------------- */
/* HEADER FISSO (compreso logo + menu)                                             */
/* Si applica a .site-header-flex e .main-nav                                      */
/* -------------------------------------------------------------------------------- */

.fixed-header-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 999;                 /* resta sopra tutto */
  background-color: white;     /* sfondo bianco sotto logo/menu */
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);  /* leggero effetto di profondità */
}
/* Spazio extra sotto l’header per evitare che il contenuto venga coperto */

body.has-fixed-header {
  padding-top: 190px;   /* altezza stimata di header + menu (regolabile) */
}

/* =============================================================
   NAVIGAZIONE PRINCIPALE (MENÙ)
   ============================================================= */

/* -------------------------------------------------------------------------------- */
/* CLASSE: .main-nav */
/* Utilizzata in: header.php */
/* -------------------------------------------------------------------------------- */

.main-nav {

  background-color: green;
  text-align: center;
}

.main-nav ul {

  list-style: none;
  padding: 0;
  margin: 0;
}

.main-nav li {

  display: inline-block;
  position: relative;  
  font-family: 'Comic Sans MS';  
  font-size: 1.2em;
}

.main-nav a {

  display: inline-block;
  padding: 12px 40px;
  color: white;
  text-decoration: none;
  font-weight: bold;
}

.main-nav a:hover {

  color: blue;
  border-radius: 5px;
}

.main-nav a.active {

  color: yellow;
  border-radius: 5px;
}
  
.menu-toggle {
  display: none;
}

.mobile-separator-line {
  display: none;
}


/* =============================================================
   NAVIGAZIONE MENÙ DROPDOWN
   ============================================================= */

/* -------------------------------------------------------------------------------- */
/* CLASSE: .dropdown-content */
/* Utilizzata in: header.php */
/* -------------------------------------------------------------------------------- */


.dropdown-content {

  display: none;
  position: absolute;
  background-color: white;
  min-width: 160px;
  box-shadow: 0px 8px 16px rgba(0,0,0,0.2);
  z-index: 1;
  text-align: left;
  border: 1px solid #ccc;
}

.dropdown-content li {

  display: block;
}

.dropdown-content a {

  color: #800000;
  padding: 10px;
  text-decoration: none;
  display: block;
}

.dropdown:hover .dropdown-content {

  display: block;
}

/* =============================================================
   FOTO INIZIALI ('n' IMMAGINI )
   ============================================================= */

/* -------------------------------------------------------------------------------- */
/* CLASSE: .foto-iniziali */
/* Utilizzata in: home.php */
/* -------------------------------------------------------------------------------- */

.foto-iniziali {

  display: flex;

  justify-content: center; /* centra le immagini nel contenitore oppure space-between; */

  gap: 0px; /* spaziatura orizzontale tra le immagini */
 
  margin: 0px 5px 5px 5px;

}

.foto-iniziali .foto {
	
  border: 2px solid #ccc;

  padding: 0px;
  margin: 0px;
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;         /* ← lascia che si adatti al contenuto */
  max-width: none;         
  position: relative;  
}

.foto-iniziali img {

  width: 100%;
  height: auto;
  display: block;
}

/* -------------------------------------------------------------------------------- */
/* NUOVO LAYOUT RICHIESTO: MAPPA (SX) + 1 FOTO (DX) */
/* -------------------------------------------------------------------------------- */

.foto-mappa-iniziale {
  display: flex;
  justify-content: space-between; /* Spazio tra i due elementi */
  align-items: stretch;           /* Assicura che i riquadri abbiano la stessa altezza */
  gap: 10px;                      /* Spaziatura orizzontale tra la mappa e la foto */
  margin: 0px 5px 5px 5px;
  height: 400px;                  /* Altezza fissa su desktop per la sezione (regolabile) */
}

.foto-mappa-iniziale .foto-mappa-home, /* Riquadro Mappa (Sinistra) */
.foto-mappa-iniziale .foto-singola-home { /* Riquadro Foto (Destra) */
  border: 2px solid #ccc;
  padding: 0px;
  margin: 0px;
  flex-grow: 1; 
  flex-shrink: 1;
  flex-basis: 50%; /* Ognuno occupa il 50% della larghezza */
  max-width: none;
  position: relative;
  overflow: hidden; 
}

/* Regola specifica per l'iframe della mappa (deve riempire il suo contenitore) */
.foto-mappa-iniziale .foto-mappa-home .map-embed-large {
  width: 100%;
  height: 125%;
  min-height: 100%; /* Forza l'altezza sull'altezza del riquadro genitore */
  display: block;
  border: none;
}

/* Regola per l'immagine singola (deve riempire il suo contenitore) */
.foto-mappa-iniziale .foto-singola-home img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover; /* Ritaglia l'immagine per coprire l'intero riquadro */
}


/* 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: 5px; 
    
    /* Centratura orizzontale */
    left: 50%;
    transform: translateX(-50%);
    
    /* Stili del testo: medio-piccolo e centrato */
    font-size: 0.8em; /* 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 */
}






/* =============================================================
   Etichette sulle immagini
   ============================================================= */

/* -------------------------------------------------------------------------------- */
/* CLASSE: .etichetta */
/* Utilizzata in: home.php */
/* -------------------------------------------------------------------------------- */

.etichetta {

  position: absolute;
  bottom: 1px;
  left: 1px;
  padding: 1px 1px;
  font-weight: bold;
  color: white;
}

/* -------------------------------------------------------------------------------- */
/* CLASSE: .etichetta-gialla */
/* Utilizzata in: home.php */
/* -------------------------------------------------------------------------------- */

.etichetta-gialla { color: #f6f300; 

font-family: 'Comic Sans MS', cursive, sans-serif;  /* font Comic Sans */

} 

/* -------------------------------------------------------------------------------- */
/* CLASSE: .etichetta-verde */
/* Utilizzata in: home.php */
/* -------------------------------------------------------------------------------- */

.etichetta-verde  { color: green; }

/* -------------------------------------------------------------------------------- */
/* CLASSE: .etichetta-rossa */
/* Utilizzata in: home.php */
/* -------------------------------------------------------------------------------- */

.etichetta-rossa  { color: #f40909; }

.etichetta.center {

  text-align: center;
  display: block;
  margin: 10px auto;  
}

/* -------------------------------------------------------------------------------- */
/* CLASSE: .foto-world */
/* Utilizzata in: home.php */
/* -------------------------------------------------------------------------------- */


.foto-world {

  display: flex;
  justify-content: space-around;
  margin: 20px 20px 0px 20px;;
  flex: 1;
  max-width: 98%;
  position: relative;
}

.foto-world img {

  width: 100%;
  height: auto;
  display: block;
}


/* ---------------------------------------------------------------------------
   BLOCCO FOTO-WORLD (DESKTOP) – AUMENTO ALTEZZA MAPPE IN FONDO PAGINA
   - agisce SOLO sulle mappe dentro i contenitori .foto-world
   - raddoppia l’altezza visiva rispetto alla situazione attuale
--------------------------------------------------------------------------- */

.foto-world {
  /* PRIMA: nessuna altezza fissa, dipende dal contenuto */
  /* ORA: più spazio verticale per ospitare bene le mappe */
  min-height: 1100px;                 /* <-- aumenta (puoi portare a 1000/1100) */
  align-items: stretch;
}

.foto-world .map-embed,
.foto-world .map-embed-large {
  width: 100% !important;
  height: 900px !important;          /* <-- raddoppio (prima era ~350–500) */
  min-height: 900px !important;
  border: 0 !important;
  display: block !important;
}


/* -------------------------------------------------------------------------------- */
/* CLASSE: .travel-index-bar                                                        */
/* Utilizzata in: home.php per Travel Index + checkbox a sinistra                   */
/* -------------------------------------------------------------------------------- */

.travel-index-bar {
  display: flex;
  align-items: center;
  justify-content: center;;
  flex-wrap: wrap;
  gap: clamp(12px, 4vw, 56px);         /* ← sostituisce 500px */
  margin: 35px 16px 20px 16px;         /* ← elimina margin-left:400px */
}

/* ------------------------------------------------------------- */
/* Tablet                                                       */
/* ------------------------------------------------------------- */

@media (min-width: 768px) {
  .travel-index-bar {
    gap: clamp(16px, 3vw, 48px);       /* ~24–48px */
    margin-inline: 24px;               /* margini laterali simmetrici */
  }
}


.travel-index-bar .anchor-title {
  font-size: 1.8em;
  font-weight: bold;
  color: green;
}

/* =================================================================================*/
/* TABELLA VIAGGI CON SCROLL */
/* -------------------------------------------------------------------------------- */
/* CLASSE: .tabella-wrapper */
/* Utilizzata in: home.php */
/* -------------------------------------------------------------------------------- */

.tabella-wrapper {

  padding: 20px;
}

/* -------------------------------------------------------------------------------- */
/* CLASSE: .scrollable-table-container */
/* Utilizzata in: elenco_viaggi.php */
/* -------------------------------------------------------------------------------- */

.scrollable-table-container {

  max-height: 800px;
  overflow-y: auto;
}

table {

  width: 100%;
  border-collapse: collapse;
}

thead {

  background: #003366;
  color: white;
}

td, th {

  border: 1px solid #ccc;
  padding: 8px;
}

tr:nth-child(even) {
  background: #f0f8ff;
}

/* -------------------------------------------------------------------------------- */
/* CLASSE: .anchor-title-world */
/* Utilizzata in: home.php per Travel World ancorato */
/* -------------------------------------------------------------------------------- */

.anchor-title-world {
  margin: 40px auto 20px auto;
  text-align: center;
  color: green;
  font-size: 2em;
}

/* -------------------------------------------------------------------------------- */
/* CLASSE: .form-label */
/* Utilizzata in: ricerca_viaggi.php */
/* -------------------------------------------------------------------------------- */

.form-label {
  font-weight: bold;
  margin-top: 15px;
  display: block;
  border: 1px solid green; 
  padding: 4px; 
  }

/* =============================================================
   FOOTER SITO
   ============================================================= */

/* -------------------------------------------------------------------------------- */
/* CLASSE: .site-footer */
/* Utilizzata in: footer.php */
/* -------------------------------------------------------------------------------- */

.site-footer {

  text-align: center;
  padding: 15px;
  background: #eee;
  font-size: 0.9em;
}
  
/* =========================================================================================
   LAYOUT TRAVEL A 3 COLONNE CON ADATTAMENTO RESPONSIVE E SCROLL
   ========================================================================================= */

.travel-layout {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  justify-content: space-between;
  gap: 20px;
  margin: 20px;
}

   /* ----------------------------------------
     Corpo centrale con contenuto multimediale
     ---------------------------------------- */

.travel-content {
  flex: 1 1 60%;
  min-height: 100%;
}

/* ==============================================================================================================================================================
   STILE PER WIDGET LATERALI (sintesi e dettaglio)
   ============================================================================================================================================================ */ 

.widget-sx, .widget-dx {
  flex: 0 0 20%;
  max-height: 100%;
  overflow-y: auto;
  background: #f7f7f7;
  border: 1px solid #ccc;
  border-radius: 6px;
  padding: 10px;
  font-size: 0.95em;
  line-height: 1.4em;
  box-sizing: border-box;
  text-align: center;
}

/* ----------------------------------------
   Altezza minima sincronizzata al contenuto
---------------------------------------- */

.travel-layout > .widget-sx,
.travel-layout > .widget-dx,
.travel-layout > .travel-content {
  display: flex;
  flex-direction: column;
}

/* -------------------------------------------------------------------------------- */
/* OFFSET ANCORAGGIO FISSO PER SCROLL CON HEADER FISSO                             */
/* Utilizza: <a id="..." class="anchor-offset"></a>                                */
/* -------------------------------------------------------------------------------- */

.anchor-offset {
  display: block;
  position: relative;
  top: -210px;       /* Compensazione per l'header fisso */
  visibility: hidden;
  height: 0;
}

/* ==============================================================================
   STILE PER LOGIN - CENTRATO E GRAFICA MIGLIORATA
   ============================================================================== */

.login-container {
  max-width: 320px;
  margin: 0 auto;               /* centra orizzontalmente */
  padding: 40px 30px 30px 30px; /* padding interno al contenitore */
  background-color: #f9f9f9;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
  /* nuova posizione verticale */
  position: relative;
  top: 350px;                   /* distanza dall'alto (regolabile) */
}

.login-container h2 {
  text-align: center;
  margin-bottom: 20px;
  color: #333;
}

.login-form {
  display: flex;
  flex-direction: column;
}

.login-form label {
  margin: 10px 0 5px;
  font-weight: bold;
}

.login-form input {
  padding: 8px;
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.login-form button {
  margin-top: 20px;
  padding: 10px;
  background-color: #006600;
  color: white;
  border: none;
  border-radius: 4px;
  font-weight: bold;
  cursor: pointer;
}

.login-form button:hover {
  background-color: #004d00;
}

.login-errore {
  text-align: center;
  color: red;
  margin-bottom: 10px;
}

/* ========================================================================= */
/* MESSAGGI DI SISTEMA (esito operazioni: successi, errori, avvisi)          */
/* ========================================================================= */

.alert {
    padding: 10px;
    border-radius: 5px;
    margin-top: 10px;
    margin-bottom: 10px;
    font-weight: bold;
}
.alert-danger {
    background-color: #ffe0e0;
    color: #a00;
    border: 1px solid #a00;
}
.alert-success {
    background-color: #e0ffe0;
    color: #0a0;
    border: 1px solid #0a0;
}

/* ========================================================================= */
/* STILE ETICHETTE NOME UTENTE (es. header, gestione viaggi)                */
/* ========================================================================= */

.lbl-utente {
    font-size: 1.1em;
    font-weight: bold;
}

.desc-utente {
    font-size: 1.2em;
    color: blue;
    margin-left: 5px;
}

/* ========================================================================= */
/* INPUT MODERNI PER CAMPI DI TESTO BREVE        -   Insert_Des_Viaggi       */
/* ========================================================================= */

.input-codice,
.input-km,
.input-data,
.input-nrr {
    padding: 6px 10px;
    border: 1px solid #ccc;
    border-radius: 0;
    width: 100%;
    font-size: 0.80em;                      /* ← usa il punto, non la virgola */
    font-family: inherit;                   /* ← forza stesso font */
    background-color: #f9f9f9;
    box-sizing: border-box;
    transition: border-color 0.2s ease-in-out;
    line-height: normal;                    /* ← evita salti di altezza */
    appearance: none;                       /* ← resetta stile browser */
}

/* Focus coerente */
.input-codice:focus,
.input-km:focus,
.input-data:focus,
.input-nrr:focus {
    border-color: #66afe9;
    outline: none;
    background-color: #fff;
}

/* ============================================================================
   STILE PER SELECT (MENU A TENDINA) CON FRECCETTA VISIBILE
============================================================================ */

.input-tendina {
    padding: 6px 10px;
    border: 1px solid #ccc;
    border-radius: 0;
    width: 100%;
    font-size: 0.80em;
    font-family: inherit;
    background-color: #f9f9f9;
    box-sizing: border-box;
    transition: border-color 0.2s ease-in-out;
    line-height: normal;

    /* mostra la freccetta */
    appearance: auto;         /* ← ripristina la freccetta nativa */
    -webkit-appearance: auto;
    -moz-appearance: auto;
}

/* ========================================================================= */
/* Toglie le freccette al campo Km (input type="number")                    */
/* ========================================================================= */

.input-km::-webkit-outer-spin-button,
.input-km::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.input-km {
  -moz-appearance: textfield;
}

/* ========================================================================= */
/* STILE PULSANTI AZIONI SALVA / ELIMINA                                     */
/* ========================================================================= */

.btn-salva {
    background-color: #007bff;
    color: white;
    border: none;
    padding: 5px 10px;
    border-radius: 5px;
    font-weight: bold;
    cursor: pointer;
    margin-bottom: 4px;
}

.btn-elimina {
    background-color: #dc3545;
    color: white;
    border: none;
    padding: 5px 10px;
    border-radius: 5px;
    font-weight: bold;
    cursor: pointer;
}

.btn-salva:hover {
    background-color: #0056b3;
}

.btn-elimina:hover {
    background-color: #a71d2a;
}

/* ========================================================================= */
/* STILE PULSANTI DI RICERCA E CHECKBOX VIAGGI                               */
/* ========================================================================= */

.form-home-search {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 40px;
  margin-top: 25px;
}

.checkbox-row {
  display: flex;
  justify-content: flex-start;
  gap: 20px;
}

.checkbox-row label {
  display: flex;
  align-items: center;
  white-space: nowrap;
  font-size: 1em;
}

/* ============================================================================= */
/* LARGHEZZE COLONNE TABELLA ELENCO VIAGGI                                      */
/* ============================================================================= */

/* ----------------------------- */
/* Colonna ANNO / MESE           */
/* ----------------------------- */

.col-anno,
.col-mese {
  width: 40px;
  min-width: 30px;
  text-align: center;
  display: none;
}

/* ----------------------------- */
/* Colonna CODICE VIAGGIO        */
/* ----------------------------- */

.col-codice {
  width: 100px;
  min-width: 90px;
  white-space: nowrap;  
 }

/* ----------------------------- */
/* Colonna TITOLO VIAGGIO        */
/* ----------------------------- */

.col-titolo {
  width: 320px;
  min-width: 250px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
 }
  

/* -------------------------------------------------------------
   [A] DESCRIZIONE ROSSA CLICCABILE - CENTRATA ORIZZ. E VERT.
   ------------------------------------------------------------- */
   
.scrollable-table-container td.col-titolo {
  display: flex;                   /* abilita centratura 2D */
  justify-content: center;         /* centra orizzontalmente */
  align-items: center;             /* centra verticalmente */
  text-align: center;              /* sicurezza per testo a capo */
  height: 100%;                    /* allinea verticalmente dentro la cella */
  font-weight: bold;

  white-space: normal !important;
  overflow-wrap: anywhere;
  word-break: break-word;
  }


/* -------------------------------------------------------------
   [B] MAPPA PIÙ GRANDE (leggibile) + RITOCCHI
   ------------------------------------------------------------- */
   
.scrollable-table-container td.col-mappa iframe,
.scrollable-table-container td.col-mappa .leaflet-container {
  width: 100% !important;
  height: 200px !important;        /* ↑ da 120px a 200px */
  border: 0;
  border-radius: 6px;
}

/* -------------------------------------------------------------
   [C] FOTO ALLINEATE (stessa larghezza/altezza)
   - Altezza uniforme con ritaglio (object-fit: cover)
   ------------------------------------------------------------- */
   

.scrollable-table-container td.col-foto img:hover {
  transform: scale(1.05);          /* piccolo effetto hover */
}


/* -------------------------------------------------------------
   [PATCH 2] MAPPA: larghezza FISSA indipendente dal titolo
   (il titolo si adatta andando a capo)
   ------------------------------------------------------------- */
   
.scrollable-table-container td.col-mappa {
  width: 400px !important;               /* fissa l'orizzontale della mappa */
}

/* -------------------------------------------------------------
FORZA la sottolineatura del titolo viaggio (classe .desc-link)
------------------------------------------------------------- */

.scrollable-table-container td.col-titolo a.desc-link {
  color: #800000 !important;
  font-weight: 700;
  font-size: 1.05em;
  text-decoration-line: underline !important;
  text-decoration-color: #800000 !important;
  text-underline-offset: 4px;
  text-decoration-thickness: 1.5px;
  display: inline-block;
  line-height: 1.3em;
}
.scrollable-table-container td.col-titolo a.desc-link:hover,
.scrollable-table-container td.col-titolo a.desc-link:focus {
  color: #b30000;
  text-decoration-thickness: 2px;}


/* --------------------------------------------------------------------------
   MOBILE: riordino colonne Travel (≤ 767px)
   - Obiettivo: mostrare PRIMA il contenuto (foto+mappa), POI il widget di sinistra,
     e infine il widget di destra.
   - Non richiede modifiche HTML; usa Flexbox 'order'.
-------------------------------------------------------------------------- */

@media (max-width: 767px) {

  /* ----------------------------------------------------------------------
     Il container diventa una colonna: i figli vengono impilati verticalmente
  ---------------------------------------------------------------------- */
  
  .travel-layout {
    display: flex;            /* (già flex su desktop, qui esplicito per sicurezza) */
    flex-direction: column;   /* impila i figli nello stacking verticale */
    gap: 16px;                /* spazio tra blocchi (regolabile) */
  }

  /* ----------------------------------------------------------------------
     Ordine desiderato: 1) contenuto (foto+mappa), 2) widget-sx, 3) widget-dx
  ---------------------------------------------------------------------- */
  
  .travel-content { order: 1; }

  .widget-sx { order: 2; }

  .widget-dx { order: 3; }

  /* ----------------------------------------------------------------------
     Ogni blocco occupa tutta la larghezza in mobile.
     Override di eventuali flex-basis/width fissi del desktop (es. 20%/60%).
  ---------------------------------------------------------------------- */
  .travel-content,
  .widget-sx,
  .widget-dx {
    flex: 1 1 100%;
    width: 100%;
  }

  /* ----------------------------------------------------------------------
     Se i widget avevano scroll verticale (overflow-y:auto) e altezze vincolate,
     in mobile di solito è più comodo disabilitarli per evitare doppi scroll.
     Se vuoi mantenere lo scroll, rimuovi queste due righe.
  ---------------------------------------------------------------------- */
  .widget-sx,
  .widget-dx {
    max-height: none;
    overflow-y: visible;
  }
}


/* ========================================================================= */
/* Modifiche per rendere a due colonna il layout dell'elenco viaggi          */
/* ========================================================================= */

/* -------------------------------------------------------------
   ELENCO VIAGGI → 2 COLONNE SOLO DESKTOP (FIX)  
   - Nessuna modifica a td/th → preserva titolo, foto, mappa
   - Nasconde il primo <tr> usato come intestazione
   ------------------------------------------------------------- */

/* =============================================================
   DESKTOP (≥1200px) — blocco unificato (merge di tutti i precedenti)
   ============================================================= */

@media (min-width: 1200px) {

  /* === Barra Travel Index === */
  .travel-index-bar {
    gap: clamp(24px, 2vw, 56px);    /* ~40–56px max */
    margin-inline: 40px;
  }

  /* === Elenco viaggi a 2 colonne (desktop) === */
  /* Nascondi la riga di intestazione (primo TR della tabella) */
  .scrollable-table-container table > tbody > tr:first-child,
  .scrollable-table-container table > tr:first-child {
    display: none;
  }

  /* Nascondi la colonna "codice/titolo blu" su desktop */
  .scrollable-table-container td.col-codice {
    display: none;
  }

  /* Trasforma il body in layout a 2 colonne (card affiancate) */
  .scrollable-table-container table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
  }
  .scrollable-table-container table > tbody {
    display: flex;
    flex-wrap: wrap;               /* consente 2 colonne */
    gap: 20px;                     /* spazio tra card */
  }
  .scrollable-table-container table > tbody > tr {
    display: table;                /* preserva resa interna dei td */
    width: calc(50% - 10px);       /* 2 colonne */
    box-sizing: border-box;
    margin: 0;                     /* lo spazio è gestito da gap */
    border: 1px solid #ccc;
    border-radius: 8px;
    background: #f9fff9;
    overflow: hidden;
  }

  /* Ritocchi interni alle celle (no cambi di display → preserva contenuti) */
  .scrollable-table-container table > tbody > tr > td {
    padding: 8px 10px;             /* respiro visivo */
    vertical-align: top;
    border: none;                   /* rimuove griglia interna */
  }

  /* In modalità card, evita larghezze forzate pregresse delle colonne */
  .scrollable-table-container .col-anno,
  .scrollable-table-container .col-mese,
  .scrollable-table-container .col-codice,
  .scrollable-table-container .col-titolo {
    width: auto !important;
    min-width: 0 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }
}
   


/* Consolidato: [C]+[PATCH3] td.col-foto */

.scrollable-table-container td.col-foto {
  width: 260px !important;
}

/* Consolidato: [C]+[PATCH3] td.col-foto img */

.scrollable-table-container td.col-foto img {
  display: block;
  width: 100%;
  /* usa tutta la cella */
  height: 160px;
  /* altezza uniforme tra card */
  object-fit: cover;
  /* taglia mantenendo il focus */
  border: 1px solid #333;
  border-radius: 6px;
  transition: transform 0.3s;

}


/* ====================================================================== */
/* MAPPE JSON - riduzione altezza iframe e spazio sottostante (home)      */
/* ====================================================================== */

.map-embed {
  height: clamp(350px, 55vh, 500px) !important;  /* altezza adattiva e più compatta */
  width: 100%;
  display: block;
  border: 0;
  margin: 0 auto 6px auto !important;           /* piccolo margine inferiore */
}

/* ------------------------------------------------------ */
/* Immagine titolo in header                              */
/* ------------------------------------------------------ */
.title-image {
    display: block;
    max-height: 100px;
    width: auto;
    border-radius: 8px;
    object-fit: cover;
}


/* ========================================================== */
/* HEADER - NUOVA BARRA FUNZIONI (Ricerca + Social)           */
/* (CONFIGURATO PER SEPARARE GLI ELEMENTI INTERNI)            */
/* ========================================================== */

.header-tools {
    display: flex;
    align-items: center;
    
    /* MODIFICA FONDAMENTALE: Separa la Ricerca (SX) dalle Icone Social (DX) */
    justify-content: space-between; 
    
    flex-grow: 0; 
    margin-left: 0; 
    
    /* Ridimensiona il blocco a una dimensione fissa o auto */
    width: 58%; /* Limita l'ampiezza del contenitore strumenti per un effetto "centrato" */
    
    /* Riporta il gap tra ricerca e social, se necessario */
    gap: 10px; 
    
    flex-wrap: wrap;
}


/* ----------------------------- */
/* RICERCA VIAGGI IN HEADER      */
/* ----------------------------- */

.header-search {
    display: flex;
    align-items: center;
    gap: 12px;
}

.header-search-input {
    padding: 6px 10px;
    border: 1px solid #666;
    border-radius: 4px;
    width: 260px;
    font-size: 0.95em;
}

.header-search-btn {
    padding: 6px 12px;
    background: #006600;
    color: white;
    border: none;
    border-radius: 4px;
    font-weight: bold;
    cursor: pointer;
}

.header-search-btn:hover {
    background: #004d00;
}

/* ----------------------------- */
/* ICONE SOCIAL                  */
/* ----------------------------- */

.header-social {
    display: flex;
    align-items: center;
    gap: 12px;
}

.header-icon {
    width: 36px;
    height: 36px;
    object-fit: contain;
    cursor: pointer;
    transition: transform 0.2s;
}

.header-icon:hover {
    transform: scale(1.15);
}


/* -------------------------------------------------------------------------------- */
/* CORREZIONE FINALE E DEFINITIVA: LAYOUT MAPPA (SX) + 1 FOTO (DX) (50%/50% SAME HEIGHT)  */
/* USA ID PER FORZARE LA SPECIFICITÀ MASSIMA                                        */
/* -------------------------------------------------------------------------------- */

/* 1. Contenitore principale: attiva Flexbox e fissa l'altezza (Desktop) */
#blocco-home-iniziale {
  display: flex !important; /* Forza Flexbox */
  justify-content: space-between;
  align-items: stretch; /* Cruciale: assicura che i figli abbiano la stessa altezza */
  gap: 10px;
  margin: 0px 5px 5px 5px;
  height: 500px !important; /* Altezza Fissa del contenitore padre (NECESSARIA) */
  width: auto;
}

/* 2. Riquadri Mappa e Foto: 50% di larghezza e 100% di altezza (Desktop) */
#map-container,
#photo-container { 
  border: 2px solid #ccc;
  padding: 0px;
  margin: 0px;
  flex-grow: 1; 
  flex-shrink: 1;
  flex-basis: 50% !important;   /* Usa metà dello spazio disponibile */
  max-width: 50% !important;    /* Impedisce di espandersi oltre il 50% */
  position: relative;
  overflow: hidden; /* Cruciale per nascondere le slide non attive */
  height: 100% !important;      /* Cruciale: Riempie l'altezza del genitore (400px) */
}

/* 3. Contenuto interno Mappa: riempie completamente il suo riquadro */
#map-container .map-embed-large {
  width: 100% !important;
  /* SOLUZIONE VINCENTE DELL'UTENTE */
  height: 125% !important; 
  min-height: 100% !important; 
  /* ------------------------------ */
  display: block;
  border: none;
}

/* 4. Contenitore Slideshow */
#photo-container .slideshow-container {
  width: 100%;
  height: 100%;
  position: relative;
}

/* 5. Singola slide del carosello */
#photo-container .mySlides {
  width: 100%;
  height: 100%;
  position: absolute; /* Permette il posizionamento e la transizione */
  top: 0;
  left: 0;
  
  /* NUOVE REGOLE PER LA DISSOLVENZA LENTA */
  opacity: 0; /* Invisibile per default */
  visibility: hidden; /* Nascosto per non interferire con l'area di click */
  z-index: 1; /* Livello di base */
  
  /* Imposta la transizione: 2 secondi per l'opacità e la visibilità */
  transition: opacity 2.0s ease-in-out, visibility 2.0s linear; 
}

/* 6. Slide Attiva: diventa visibile e in primo piano */
#photo-container .mySlides.active-slide {
  opacity: 1; /* Visibile */
  visibility: visible; /* Ri-abilita l'elemento */
  z-index: 2; /* In primo piano per coprire le altre slide */
}


/* 7. La prima slide deve essere visibile all'inizio se il JS fallisce */
#photo-container .mySlides.active-slide {
  display: block;
}

/* Aggiungi una semplice dissolvenza (fade) per una transizione più fluida */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

}


/* ==========================================================
   FRECCE CAROSELLO – NAVIGAZIONE MANUALE
   ========================================================== */
   
   
.slideshow-container {
    position: relative; /* IMPORTANTE: serve per posizionare le frecce */
    overflow: hidden;
}

/* Contenitore delle frecce */
.carousel-arrows {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    transform: translateY(-50%);
    display: flex;
    justify-content: space-between;
    padding: 10 1px;
    z-index: 9999;      /* GARANTISCE CHE LE FRECCE SIANO VISIBILI */
    pointer-events: none;
}

/* Stile delle frecce */
.carousel-arrows .arrow {
    font-size: 20px;
    font-weight: bold;
    color: white;
    text-shadow: 0px 0px 10px rgba(0,0,0,0.8);
    cursor: pointer;
    pointer-events: auto; /* le frecce possono essere cliccate */
    user-select: none;
}

/* Hover */
.carousel-arrows .arrow:hover {
    color: #ffeb3b;
}

/* MOBILE: frecce più piccole */
@media (max-width: 768px) {
    .carousel-arrows .arrow {
        font-size: 20px;
        padding: 0 10px;
    }
}