/* ==========================================================================
   1. IMPOSTAZIONI GLOBALI E COLORI BASE
   ========================================================================== */
html, body {
    overflow-x: hidden !important; /* Blocca lo scorrimento orizzontale su cellulare */
    width: 100% !important;
}

h1.tm-logo-font {
    color: #ffffff !important;
}

/* Colori e testi forzati */
#home .bg-black p,
#menu .tm-item-container p,
#contact .tm-item-container:last-of-type p {
    color: #ffffff !important;
}

.tm-text-yellow, 
.tm-text-gold, 
#home .tm-text-2xl {
    color: #e3a538 !important; /* Nuovo Oro IWS */
}

/* ==========================================================================
   2. BARRA DI NAVIGAZIONE
   ========================================================================== */
#tm-nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background-color: rgba(0, 0, 0, 0.4); 
    transition: background-color 0.3s ease;
}

#tm-nav .tm-container {
    max-width: 1600px;
    margin: 0 auto;
    padding: 20px 40px;
    display: flex;
    justify-content: flex-end; 
    align-items: center;
}

#tm-nav ul { list-style: none; margin: 0; padding: 0; }

#tm-nav a {
    text-decoration: none;
    font-size: 1.4rem;
    font-weight: 500;
    padding: 8px 16px;
    transition: all 0.3s ease;
}

/* ==========================================================================
   3. SEZIONE HOME / INTRO E PULSANTE
   ========================================================================== */
.parallax-window {
    position: relative;
    width: 100%;
    min-height: 100vh;
    display: flex;
    justify-content: center; 
    align-items: center;     
}

.tm-intro-width {
    width: 100%;
    max-width: 750px !important; /* BOX ALLARGATI (prima era 436px) */
    margin: 0 auto;
    padding: 100px 20px 40px 20px; 
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

.bg-black.bg-opacity-70 {
    background-color: rgba(29, 91, 152, 0.9) !important;
    border: 2px solid #e3a538 !important;
    border-radius: 20px !important;
    padding: 20px 40px !important; /* SPAZI SUPERIORI/INFERIORI RIDOTTI (era 30px) */
    margin-bottom: 20px;
    text-align: center;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.bg-black.bg-opacity-70:nth-of-type(2) { text-align: left; }

.text-center .inline-block {
    display: flex;
    justify-content: center; 
    width: 100%;
    margin-top: 10px; /* Dà un filo di respiro al bottone */
}

.text-center .inline-block a {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(29, 91, 152, 0.9);
    border: 2px solid #e3a538 !important; 
    padding: 12px 30px; 
    border-radius: 20px; 
    text-decoration: none;
    font-weight: bold; 
    font-size: 1rem; 
    transition: all 0.3s ease;
}

.text-center .inline-block a span,
.text-center .inline-block a i {
    color: #e3a538 !important; 
    transition: all 0.3s ease;
}

.text-center .inline-block a:hover {
    background-color: #e3a538 !important; 
    border-color: #e3a538 !important; 
}

.text-center .inline-block a:hover span,
.text-center .inline-block a:hover i {
    color: #1d5b98 !important; 
}

/* ==========================================================================
   4. SEZIONE MENU (Solo stili essenziali, la griglia la fa Tailwind in HTML)
   ========================================================================== */
#menu h2.bg-white {
    background-color: #544639 !important;
    color: #ffffff !important;
    padding: 24px 48px;
    font-size: 3.25rem;
    font-weight: 500;
    display: inline-block;
    border-radius: 6px;
}

#menu .tm-item-container h2 {
    font-size: 2.5rem !important;
    color: #e3a538 !important; /* Uniformato oro */
    line-height: 1.3 !important;
    border-bottom: 1px solid #e3a538 !important; /* Uniformato oro */
    padding-bottom: 15px !important;
    margin-bottom: 20px;
    text-align: center;
}

.tm-menu-item img, .tm-menu-item-2 img {
    width: 150px; 
    height: 220px;
    object-fit: cover;
    border-radius: 8px;
}

.tm-item-container .text-white {
    color: #ffffff !important;
    font-size: 1.1rem;
    font-weight: 300;
    line-height: 1.5;
}

/* ==========================================================================
   5. SEZIONI CHI SIAMO E DICONO DI NOI
   ========================================================================== */
#la-storia, #dicono-di-noi {
    width: 100%;
    min-height: 100vh !important; /* FORZA la sezione a coprire tutto lo schermo in altezza! */
    display: flex !important;
    align-items: center !important;
    padding-top: 100px;
    padding-bottom: 100px;
}

/* Riquadro bianco opaco per ENTRAMBE le sezioni */
#la-storia .bg-white.bg-opacity-80,
#dicono-di-noi .bg-white.bg-opacity-80 {
    background-color: rgba(255, 255, 255, 0.85) !important;
    padding: 48px;
    border-radius: 12px;
    margin-bottom: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

/* Colori dei titoli blu aziendale */
#la-storia h2.tm-text-green, #dicono-di-noi h2.tm-text-green {
    color: #1d5b98 !important; /* Blu IWS al posto del verde */
    font-size: 2.25rem;
    margin-bottom: 24px;
}

/* Colori dei link nel testo */
#la-storia p a, #dicono-di-noi p a { 
    color: #1d5b98 !important; /* Blu IWS */
    text-decoration: underline; 
    font-weight: 500; 
}

#la-storia p a:hover, #dicono-di-noi p a:hover { 
    color: #e3a538 !important; /* Diventa Oro IWS al passaggio del mouse */
}

/* Pulsante Contact per ENTRAMBE le sezioni */
#la-storia a.tm-bg-green, #dicono-di-noi a.tm-bg-green {
    display: inline-flex;
    align-items: center;
    background-color: rgba(29, 91, 152, 0.9) !important;
    color: #e3a538 !important;
    font-size: 1.25rem;
    padding: 12px 32px 16px 32px;
    border-radius: 6px;
    transition: background-color 0.3s ease;
}

#la-storia a.tm-bg-green:hover, #dicono-di-noi a.tm-bg-green:hover { 
    background-color: #164675 !important; /* Diventa blu più scuro al passaggio del mouse */
}

/* ==========================================================================
   6. SEZIONE CONTATTI E FORM
   ========================================================================== */
#contact label, #contatti label {
    color: #e3a538 !important; /* Uniformato oro */
    font-weight: 500;
}

#contatti .tm-container, #contact .tm-container {
    display: block !important; 
}

/* ==========================================================================
   7. REGOLE DESKTOP (PC e schermi grandi > 1024px)
   ========================================================================== */
@media (min-width: 1024px) {
    /* Navigazione */
    #tm-nav ul { display: flex; flex-direction: row; }
    #tm-nav li { margin-left: 24px; }
    #menu-toggle { display: none !important; }

    /* Home: Adatta allo schermo e riduci i margini enormi */
    #home.parallax-window { min-height: 100vh !important; } /* FONDAMENTALE: copre esattamente 1 monitor e non sborda (prima era 1100px) */
    
    #home .tm-intro-width {
        padding-top: 130px !important; /* DRASTICAMENTE RIDOTTO (prima era 250px) */
        padding-bottom: 100px !important; /* DRASTICAMENTE RIDOTTO (prima era 250px) */
        margin-top: auto !important;
        margin-bottom: auto !important;
    }

    /* Chi Siamo - Allargato e Centrato */
    #la-storia .tm-item-container {
        max-width: 1200px !important; /* Allargato a dismisura (era 550px) */
        margin: 0 auto !important;    /* Lo centra perfettamente nello schermo */
    }

    /* Dicono di Noi */
    #dicono-di-noi .bg-white.bg-opacity-80 { max-width: 1100px !important; }

    /* Contatti */
    #contact .tm-container > div:first-of-type,
    #contatti .tm-container > div:first-of-type {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: stretch !important;
        gap: 40px !important;
        width: 100% !important;
    }
    
    #contact .tm-item-container, #contatti .tm-item-container {
        width: 48% !important;
        max-width: 48% !important;
        flex: 0 0 48% !important;
        margin: 0 !important; 
    }
}

/* ==========================================================================
   8. REGOLE MOBILE (Smartphone e Tablet < 1023px)
   ========================================================================== */
@media (max-width: 1023px) {
    /* Menu a tendina ancorato al centro */
    body #tm-nav {
        width: 100% !important;
        left: 0 !important;
        right: 0 !important;
        background-color: rgba(0, 0, 0, 0.9) !important;
    }
    
    body #tm-nav .tm-container {
        width: 100% !important;
        display: flex !important;
        justify-content: center !important; 
        padding: 15px 0 !important;
    }

    #menu-toggle { margin: 0 auto !important; display: block !important; }
    #tm-nav ul.hidden { display: none !important; }

    body #tm-nav ul:not(.hidden) {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        position: fixed !important; 
        top: 70px !important; 
        left: 5% !important;  
        width: 90% !important; 
        box-sizing: border-box !important;
        background-color: rgba(0, 0, 0, 0.95) !important;
        padding: 20px 0 !important;
        border-radius: 8px !important;
        border: 1px solid rgba(204, 153, 102, 0.3) !important;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.9) !important;
        z-index: 9999 !important;
    }

    body #tm-nav li {
        margin: 0 0 15px 0 !important;
        width: 100% !important;
        text-align: center !important;
    }

    /* Chi siamo */
    #la-storia { padding-top: 96px; padding-bottom: 96px; }
    #la-storia .tm-item-container {
        max-width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important; 
        padding: 0 16px;
    }
    #la-storia .bg-white.bg-opacity-80 { padding: 32px 24px; }

    /* Dicono di noi */
    #dicono-di-noi .bg-white.bg-opacity-80 { padding: 32px 16px; border-radius: 8px; }

    /* Contatti */
    #contact .tm-container > div:first-of-type,
    #contatti .tm-container > div:first-of-type {
        display: flex !important;
        flex-direction: column !important;
        gap: 30px !important;
    }
    
    #contact .tm-item-container, #contatti .tm-item-container {
        width: 100% !important;
        max-width: 100% !important;
        flex: 1 1 100% !important;
        margin: 0 !important;
    }
}

/* ==========================================================================
   FIX UNIVERSALE: SFONDI A SCHERMO INTERO
   ========================================================================== */
.parallax-window {
    min-height: 100vh !important; /* Forza ogni sezione a coprire tutto lo schermo */
    display: flex;
    align-items: center; /* Centra verticalmente il contenuto */
    padding: 100px 0; /* Dà respiro in alto e in basso */
}

/* ==========================================================================
   GRIGLIA MENU INFALLIBILE (Senza dipendere da Tailwind)
   ========================================================================== */
.menu-grid-container {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 40px;
}

.menu-column {
    width: 48%;
    background-color: rgba(29, 91, 152, 0.9) !important;
    border-radius: 12px;
    padding: 40px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

/* Menu su Smartphone */
@media (max-width: 1023px) {
    .menu-grid-container {
        flex-direction: column !important;
    }
    .menu-column {
        width: 100% !important;
        margin-bottom: 30px;
        padding: 30px 20px;
    }
}

/* ==========================================================================
   FIX MODULO CONTATTI (Campi trasparenti e leggibili sul BLU SCURO)
   ========================================================================== */
#contatti form input, 
#contatti form textarea {
    background-color: transparent !important; 
    border: none !important;
    border-bottom: 2px solid #e3a538 !important; /* Linea d'oro elegante */
    color: #ffffff !important; /* TESTO BIANCO QUANDO L'UTENTE SCRIVE */
    box-shadow: none !important;
    border-radius: 0 !important;
    padding-left: 0 !important;
}

/* Colore del testo segnaposto (placeholder) */
#contatti form input::placeholder, 
#contatti form textarea::placeholder {
    color: #cccccc !important; /* Grigio chiaro per risaltare sul blu */
}

#contatti form input:focus, 
#contatti form textarea:focus {
    border-bottom: 2px solid #ffffff !important; /* La linea diventa BIANCA al clic */
    outline: none !important;
}

.custom-form-group {
    margin-bottom: 20px;
    text-align: left;
}

/* ==========================================================================
   FIX DEFINITIVO: BOX CONTATTI E NUOVO FORM
   ========================================================================== */

/* 1. Sfondo Bianco Blindato per i box contatti */
.contact-box-solid {
    background-color: rgba(255, 255, 255, 0.90) !important;
    padding: 40px !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15) !important;
}

/* 2. Stile dei campi del Form (come da tua foto) */
.custom-form-group {
    margin-bottom: 20px;
    text-align: left;
}

.custom-form-group label {
    display: block;
    color: #555555 !important;
    margin-bottom: 8px;
    font-size: 0.95rem;
    font-weight: 400;
}

.custom-form-group input, 
.custom-form-group textarea {
    width: 100% !important;
    background-color: #ffffff !important;
    border: 1px solid #cccccc !important;
    color: #333333 !important;
    padding: 12px !important;
    border-radius: 4px !important;
    box-sizing: border-box !important;
}

.custom-form-group input:focus, 
.custom-form-group textarea:focus {
    border-color: #1d5b98 !important; /* Diventa BLU quando ci scrivi */
    outline: none !important;
}

/* ==========================================================================
   FIX IMPAGINAZIONE CONTATTI: COLONNE, LINK E FOOTER
   ========================================================================== */

/* 1. Trasforma la sezione Contatti per incollare il footer in basso */
#contatti.parallax-window {
    padding: 0 !important; /* Rimuove il padding per far scendere il footer */
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
}

#contatti .contact-content-wrapper {
    flex-grow: 1; /* Occupa tutto lo spazio disponibile spingendo giù il footer */
    display: flex;
    align-items: center;
    width: 100%;
    padding: 100px 0; /* Dà respiro ai box */
}

/* 2. Allarga la griglia per separare i due box sulle due metà della foto */
#contatti .contact-grid {
    width: 100%;
    max-width: 1800px; /* Larghissimo per posizionare i box ai lati */
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    justify-content: space-around; /* Distribuisce uniformemente lo spazio */
    align-items: center;
    gap: 40px;
    padding: 0 20px;
}

#contatti .contact-box-solid {
    width: 100% !important;
    max-width: 500px !important; /* Blocca la larghezza dei box per non farli sbavare */
    margin: 0 !important;
}

/* 3. Colore dei link (Telefono ed Email) */
#contatti .contact-link {
    color: #1d5b98 !important; /* Blu IWS ben visibile sul bianco */
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: color 0.3s ease;
}
#contatti .contact-link:hover {
    color: #e3a538 !important; /* Diventa Oro IWS quando ci passi il mouse */
}

/* 4. Comportamento su Cellulare */
@media (max-width: 1023px) {
    #contatti .contact-grid {
        flex-direction: column !important; /* Incolonna i box */
    }
    #contatti .contact-box-solid {
        margin: 0 auto !important; /* Li centra sul telefono */
    }
}

/* ==========================================================================
   FIX MOBILE FINALE: ESPANSIONE LATERALE AL 100%
   ========================================================================== */
@media (max-width: 1023px) {
    
    /* Azzera completamente i margini base del browser */
    body, html {
        margin: 0 !important;
        padding: 0 !important;
        overflow-x: hidden !important;
        width: 100% !important;
    }

    /* Forza gli sfondi a toccare i bordi */
    .parallax-window {
        width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Annulla il "cuscino" px-6 che stringeva tutto ai lati */
    #menu > .w-full, #contatti > .w-full, .contact-content-wrapper {
        padding-left: 10px !important;
        padding-right: 10px !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* MENU: Spazi verticali */
    #menu { padding-top: 50px !important; }
    #menu > div > div:first-child { margin-bottom: 25px !important; }

    /* Titoli più larghi che sfiorano i bordi */
    #menu h2, #menu h3 {
        width: 96% !important; 
        max-width: 100% !important;
        font-size: 1.4rem !important; 
        padding: 10px !important;     
        box-sizing: border-box !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* MENU E CONTATTI: Box larghi 90% per staccarli bene dai bordi del telefono */
    #menu .menu-column, 
    #contatti .shadow-xl {
        width: 90% !important;
        max-width: 100% !important;
        padding: 30px 20px !important; 
        box-sizing: border-box !important;
        margin: 0 auto 35px auto !important; /* Li centra e li distanzia uno dall'altro in verticale */
    }
    
    #menu .menu-column > div {
        flex-direction: column !important; 
        align-items: center !important;
        text-align: center !important;
        gap: 15px !important; 
    }

    #contatti .contact-grid {
        padding: 0 !important;
        width: 100% !important;
        margin: 0 auto !important;
    }

    /* FIX RECENSIONI E SCORRIMENTO */
    iframe, div[class*="widget"], div[class*="review"], .elfsight-app {
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }
}

/* ==========================================================================
   PULSANTE WHATSAPP FLUTTUANTE
   ========================================================================== */
.whatsapp-float {
    position: fixed; 
    width: 60px; 
    height: 60px; 
    bottom: 20px; 
    right: 20px;
    background-color: #25d366; 
    color: #FFF !important; 
    border-radius: 50px;
    text-align: center; 
    font-size: 35px; 
    box-shadow: 2px 2px 10px rgba(0,0,0,0.3);
    z-index: 9999; 
    transition: transform 0.3s ease;
}

.whatsapp-float:hover { 
    transform: scale(1.1); 
    color: #FFF !important; 
}

.my-float { 
    margin-top: 13px; 
}