/*
Theme Name: Hazel Child
Description: Child theme per Hazel
Template: hazel
Version: 1.0
*/

@import url("../hazel/style.css");

/* Fix margine header Hazel 5.0.1 con child */
header.style5 .menu_style5_bearer > ul.navbar-nav {
    margin-top: 35px !important;
}
/* Fix specifico per Tablet (da 768px a 1024px) */
@media only screen and (max-width: 1367px) {
    header.style5 .menu_style5_bearer > ul.navbar-nav {
        margin-top: 35px !important; 
    }
}
/*-------------------------------------------------------------
/* --- AIRTABLE CROPPER START --- */

/* 1. Il Contenitore Maschera */
.airtable-crop-wrapper {
    position: relative !important;
    overflow: hidden !important;   /* Taglia le parti in eccesso */
    width: 100% !important;
    display: block !important;
    
    /* Altezza di DEFAULT della finestra visibile. 
       Nota: Potrai sovrascriverla inline nel singolo div se la tabella è più corta/lunga */
    height: 600px; 
    
    border-radius: 8px; /* Opzionale: arrotonda gli angoli per stile */
    box-shadow: 0 4px 6px rgba(0,0,0,0.05); /* Opzionale: ombra leggera */
}

/* 2. L'iframe Airtable posizionato e allungato */
.airtable-crop-wrapper iframe {
    position: absolute !important;
    left: 0 !important;
	top: 0 !important;
    width: 100% !important;
    height: calc(100% + 0px) !important;
    margin: 0 !important;
    border: none !important;
    background: transparent !important; /* Evita sfondi bianchi durante il caricamento */
}
.footer-cover {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 25px; /* Altezza del footer di Airtable */
    background: white;
    z-index: 999;
    pointer-events: none; /* Non blocca i click */
}
/* --- AIRTABLE CROPPER END --- */
/*--------------------------------------------------------------------------
/* --- RIMUOVE I BULLET POINT DALLA SEZOINE METRICHE CHE TRACCERO' E SPOSTA IL TESTO A SINISTRA*/
body .no-bullets ul {
    list-style: none;
    padding-left: 0;
    margin: 0;
}
/* 2. Azzera la singola riga (LI) - Questa è la parte che ti serve */
body .no-bullets li, 
body .no-bullets ul li {
    list-style: none !important;
    
    /* Forza il testo a sinistra */
    margin-left: 0 !important;
    padding-left: 0 !important;
    text-indent: 0 !important; /* Per sicurezza */
    
    /* Le tue spaziature verticali */
    line-height: 1 !important; /* prova 1.1–1.3 */
    margin-bottom: 2px !important; /* prova 0–4px */
}
.no-bullets ul li:last-child{
  margin-bottom: 0;
}
/* --- FINE SEZIONE BULLET POINT ---*/
/*-----------------------------------------------------------
/* Classe personalizzata per link sottolineati nel box DETTAGLI SFIDE*/
.link-sottolineato a, 
a.link-sottolineato {
    text-decoration: underline !important;
    text-decoration-color: #000000 !important; /* Nero base */
    text-decoration-thickness: 1px !important;
    text-underline-offset: 3px !important;      /* Un po' di aria sotto le lettere */
    transition: text-decoration-color 0.3s ease, color 0.3s ease;
    color: inherit; /* Mantiene il colore del testo originale se non specificato */
}

/* Effetto Hover */
.link-sottolineato a:hover,
a.link-sottolineato:hover {
    text-decoration-color: #808080 !important; /* Grigio 50% */
    color: #666666 !important;                 /* Testo diventa grigio scuro */
}
/*-----FINE------*/
/*------------------------------------------------------*/
/*-----DISCLAMER BANNER ------------------*/
.disclaimer-top {
    font-size: 11px !important;       /* Molto piccolo */
    color: #999999 !important;   /* Grigio chiaro, non attira l'attenzione */
    text-transform: uppercase;        /* Sembra un'etichetta tecnica */
    letter-spacing: 0.5px;
    display: block;
    font-family: sans-serif;          /* Font neutro */
}
.disclaimer-top a, 
a.disclaimer-top {
    color: #777777 !important;
    text-decoration: underline !important;
    text-decoration-color: #000000 !important; /* Nero base */
    text-decoration-thickness: 1px !important;
    text-underline-offset: 3px !important;      /* Un po' di aria sotto le lettere */
    transition: text-decoration-color 0.3s ease, color 0.3s ease;
    color: inherit; /* Mantiene il colore del testo originale se non specificato */
}
/* Effetto Hover */
.disclaimer-top a:hover,
a.disclaimer-top:hover {
    text-decoration-color: #808080 !important; /* Grigio 50% */
    color: #000000 !important;   
}
/* Stile per la riga disclaimer importata */
.row-disclaimer-style {
    background-color: #eaeaea !important;
    border: 1px solid #000000 !important; /* Bordo nero 1px ovunque */
    padding-top: 7px !important;
    padding-right: 5px !important;
    padding-left: 5px !important;
    /* Opzionale: se serve anche il bordo inferiore specifico, è già incluso in 'border' */
} 
/*-----FINE------*/
/*------------------------------------------------------*/
/*-----ICONE SOCIAL NERE NEL FOOTER ------------------*/
#secondary_footer .social-icons-fa a i{
    position: relative;
    /* line-height: 54px; */
    color: #000;
}
/*-----FINE------*/
/*------------------------------------------------------*/
/* --- STILE TABELLA AIRTABLE --- */

/* --- STRUTTURA CONTENITORE --- */
.at-wrapper {
    margin: 20px 0;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    /* MODIFICA INDISPENSABILE: overflow-x deve essere auto per lo scroll */
    overflow-x: auto !important; 
    -webkit-overflow-scrolling: touch;
}
/* --- TABELLA --- */
.at-table {
    /* MODIFICA INDISPENSABILE: width auto e layout auto per permettere 
       ai tuoi min-width manuali di espandere la tabella */
    width: auto !important;
    min-width: 100%;
    table-layout: fixed !important; /* Obbligatorio per imporre larghezze fisse */
    border-collapse: collapse;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 14px;
    background-color: #fff;
}
/* --- INTESTAZIONE --- */
.at-table th {
    background-color: #f5f5f5 !important; 
    color: #666;
    font-weight: 600;
    text-align: left;
    padding: 6px 5px;
    border-bottom: 2px solid #e0e0e0;
    border-right: 1px solid #e0e0e0;
    vertical-align: middle; /* Migliora l'allineamento con le celle che si espandono */
	overflow: hidden;
    text-overflow: ellipsis;
	white-space: nowrap;
}
/* --- CELLE GENERALI --- */
.at-table td {
    padding: 6px;
    border-bottom: 1px solid #f0f0f0;
    border-right: 1px solid #f0f0f0;
    vertical-align: top;
    line-height: 1.5;
    background-color: #ffffff !important;
	white-space: normal !important;
}

.at-table tr:hover {
    background-color: #f9f9f9 !important;
}

/* --- GESTIONE NOTE MONORIGA AD ESPANSIONE --- */

.at-table td.col-note, /*inserisco tutti i campi de devono comportarsi come le NOTE anche più sotto*/
.at-table td.col-routine {
    max-width: 300px !important;
    min-width: 200px !important;
    /*height: 1.5em;*/
    max-height: 1.5em !important; /* Sicurezza extra per monoriga */
    line-height: 1.5em !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    padding: 6px;
    cursor: default;
    transition: all 0.2s ease-in-out;
}

.at-table td.col-note:hover, /*inserisco tutti i campi de devono comportarsi come le NOTE anche più sopra*/
.at-table td.col-routine:hover {
    height: auto !important;
    max-height: 500px !important; /* Limite massimo per non coprire tutta la pagina */
    white-space: normal !important;
    background-color: #ffffff !important;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
    z-index: 999;
    position: relative;
}

/* Pulizia elementi interni (es. paragrafi generati da WP) */
.at-table td.col-note * {
    margin: 0 !important;
    padding: 0 !important;
    display: inline; /* Forza i tag interni a non andare a capo */
}

/* --- OTTIMIZZAZIONE MOBILE (sotto i 768px) --- */
@media screen and (max-width: 768px) {

    /* 1. Rendiamo il contenitore capace di scorrere se le colonne si allargano */
    .at-wrapper {
        overflow-x: auto !important;
        display: block;
    }

    /* 2. Regola per le celle (escluse le note) */
    .at-table td:not(.col-note):not(.col-routine) {
        white-space: normal !important; /* Permette il ritorno a capo */
        vertical-align: middle;
        line-height: 1.3;
    }

    /* 3. Evitiamo che la tabella si comprima */
    .at-table {
        min-width: 700px;
 		table-layout: fixed !important;
		width: auto !important;
    }
  
	/* Nasconde le emoji solo nelle intestazioni della tabella */
    .at-table th .at-emoji {
        display: none !important;
    }
    
    /* Opzionale: riduce il padding delle intestazioni per guadagnare ancora più spazio */
    .at-table th {
        padding: 8px 4px !important;
        font-size: 12px !important;
		white-space: normal !important;
    }
}
/*-----FINE------*/
/*------------------------------------------------------*/

/* --- GESTIONE SCROLL HINT PER SCORRERE TABELLE SU MOBILE --- */

/* 1. Reset Desktop: Nasconde sopra i 1024px */
@media screen and (min-width: 1025px) {
    #scrollOverlay {
        display: none !important;
    }
}

/* 2. Versione Mobile e Tablet: Freccia fluttuante */
@media screen and (max-width: 1024px) {
    
    /* Forza il contenitore a essere la base per il posizionamento della freccia */
    .at-wrapper {
        position: relative !important;
    }

    #scrollOverlay {
    display: none; /* RIMOSSO 'flex !important' qui: lo script lo attiverà solo se serve */
    position: absolute !important;
    top: 80px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 9999;
    pointer-events: none;
    
    /* Questo blocco 'zero' è fondamentale per eliminare la cella vuota */
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    
    opacity: 0; /* Parte da zero e sfuma verso l'alto con lo script */
    transition: opacity 0.8s ease, visibility 0.8s ease;
}

    #scrollOverlay .scroll-icon {
        display: inline-block !important;
        font-size: 35px;
        filter: drop-shadow(0px 2px 2px rgba(0,0,0,0.3));
        animation: moveSide 1.5s infinite ease-in-out;
    }
/* Questa classe la aggiungiamo via JS solo se la tabella scorre */
    #scrollOverlay.is-needed {
        display: flex !important;
        opacity: 1;
    }
    #scrollOverlay.hidden {
        opacity: 0 !important;
        visibility: hidden !important;
    }
}

/* 3. Animazione Unica */
@keyframes moveSide {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(15px); }
}
/*-----FINE------*/

/*------------------------------------------------------*/

/* --- GESTIONE TOOLTIPS --- */
.termine-tecnico {
    border-bottom: 2px dashed #3498db; /* Sottolineatura tratteggiata */
    cursor: help;
    color: inherit;
    text-decoration: none;
    transition: color 0.2s;
}

.termine-tecnico:hover {
    color: #3498db; /* Cambia colore al passaggio */
}
/*-----FINE------*/

/* ----Forza un ritorno a capo e crea uno spazio verticale */
.forza-capo {
    display: block;
    content: "";
    margin-top: 1.5em; /* Regola l'altezza dello spazio come preferisci */
    clear: both;
    width: 100%;
    height: 1px; /* Necessario per alcuni browser per renderizzare il blocco */
    visibility: hidden;
}

/* Variante per ritorno a capo semplice senza spazio extra */
.line-break {
    display: block;
    width: 100%;
    content: "";
}
/* <span class="forza-capo"></span>
/*-----FINE------*/
/*------------------------------------------------------*/