/**
Theme Name: Astra Child
Author: Brainstorm Force
Author URI: http://wpastra.com/about/
Description: Astra is the fastest, fully customizable & beautiful theme suitable for blogs, personal portfolios and business websites. It is very lightweight (less than 50KB on frontend) and offers unparalleled speed. Built with SEO in mind, Astra comes with schema.org code integrated so search engines will love your site. Astra offers plenty of sidebar options and widget areas giving you a full control for customizations. Furthermore, we have included special features and templates so feel free to choose any of your favorite page builder plugin to create pages flexibly. Some of the other features: # WooCommerce Ready # Responsive # Compatible with major plugins # Translation Ready # Extendible with premium addons # Regularly updated # Designed, Developed, Maintained & Supported by Brainstorm Force. Looking for a perfect base theme? Look no further. Astra is fast, fully customizable and beautiful theme!
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: astra-child
Template: astra
*/

/*[CHI SIAMO] Stili Generali per il contenitore "come possiamo aiutarti?" pagina "chi siamo" */
.cta-grid-container {
  font-family: sans-serif; /* O il font che preferisci */
  padding: 4rem 2rem; /* Spazio sopra/sotto e ai lati */
  background-color: #f8f9fa; /* Un colore di sfondo leggero */
}

.grid-title {
  text-align: center;
  font-size: 2.5rem;
  margin-bottom: 3rem;
  color: #143b74;
}

/* LA GRIGLIA! ✨ */
.cta-grid {
  display: grid;
  /* Qui avviene la magia della responsività automatica */
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem; /* Spazio tra le card */
  max-width: 1200px; /* Larghezza massima per la griglia */
  margin: 0 auto; /* Centra la griglia */
}

/* Lo stile delle singole CARD */
.cta-card {
  display: block;
  text-decoration: none;
  color: inherit;
  background-color: #ffffff;
  border-radius: 12px;
  overflow: hidden; /* Nasconde le parti dell'immagine che escono dai bordi arrotondati */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.cta-card:hover {
  transform: translateY(-8px); /* Solleva la card al passaggio del mouse */
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

/* Stile dell'IMMAGINE dentro la card */
.cta-card img {
  width: 100%;
  height: 220px;
  object-fit: cover; /* Importantissimo: adatta l'immagine senza distorcerla */
  display: block; /* Rimuove piccoli spazi indesiderati */
}

/* Stile del CONTENUTO TESTUALE */
.card-content {
  padding: 1.5rem;
}

.card-content h3 {
  margin-top: 0;
  font-size: 1.5rem;
  color: #EA7319; /* Il colore che hai usato nel flip-box */
}

.card-content p {
  font-size: 1rem;
  line-height: 1.6;
  color: #222222;
}

/* ==========================================================================
   transizione e altezza servizi
   ========================================================================== */

.transizione-media-testo {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
  border-radius: 5px; /* Il raggio che hai già impostato */
  overflow: hidden;    /* bordi immagini */
}

.transizione-media-testo.visibile {
  opacity: 1;
  transform: translateY(0);
}

/* Imposta un'altezza minima fissa per i blocchi */
@media (min-width: 601px) {
    .altezza-fissa {
        min-height: 390px; /* <-- CAMBIA QUESTO VALORE */
    }
}

/* ==========================================================================
   Blocco Banner Diagonale
   ========================================================================== */

/* 1. Contenitore principale del banner
   ========================================================================== */
.diagonal-banner {
    display: flex;
    width: 100%;
    min-height: 200px;
    height: 30vh;
    background-color: #ff6200;
    overflow: hidden;
}

/* 2. Sezioni interne del banner (testo e immagine)
   ========================================================================== */
.diagonal-banner__text-section,
.diagonal-banner__image-section {
    width: 50%;
}

/* 3. Stili per la sezione testuale del banner
   ========================================================================== */
.diagonal-banner__text-section {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2em;
    box-sizing: border-box;
    position: relative;
    z-index: 2; /* Assicura che il testo sia sopra l'immagine se si sovrappongono */
}

.diagonal-banner__title {
    font-family: 'Rubik', 'Arial Black', sans-serif;
    font-size: 58px;
    color: white;
    font-weight: 700;
    margin: 0;
    line-height: 1.1;
    text-align: center;
}

/* 4. Stili per la sezione immagine del banner
   ========================================================================== */
.diagonal-banner__image-section {
    position: relative;
    clip-path: polygon(10% 0, 100% 0, 100% 100%, 0 100%);
    overflow: hidden;
    /* !important per sovrascrivere stili del tema */
    padding: 0 !important;
    margin: 0 !important;
}

.diagonal-banner__image {
    /* Stile forzato per garantire che l'immagine copra la sezione */
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    padding: 0 !important;
    margin: 0 !important;
    max-width: none !important;
}


/* 5. Stili responsivi per il banner (vista mobile)
   ========================================================================== */
@media (max-width: 768px) {
    
    .diagonal-banner {
        flex-direction: column-reverse;
        height: auto;
    }

    .diagonal-banner__text-section,
    .diagonal-banner__image-section {
        width: 100%;
    }
    
    .diagonal-banner__text-section {
        padding: 3em 1.5em;
        background-color: #ff6200; /* Colore diverso per la vista mobile, se voluto */
    }

    .diagonal-banner__title {
        font-size: 3.5em; /* Dimensione del titolo ridotta per il mobile */
    }

    .diagonal-banner__image-section {
        clip-path: none; /* Rimuove il taglio diagonale */
        height: 300px;
        position: static; /* Ripristina il posizionamento di default */
    }

    .diagonal-banner__image {
        /* L'immagine torna al suo posizionamento normale in vista mobile */
        position: static !important;
    }
}



/* [HOME] PULSANTE "RICHIEDI SOPRALLUOGO GRATUITO"
   ========================================================================== */
   /* Regole per Mobile E Tablet (fino a 1100px) */
@media only screen and (max-width: 1100px) {
    
    /* 1. IL CONTENITORE (La scatola invisibile) */
    .btn-mobile-fix {
        position: absolute !important;
        
        /* Metodo di centratura più stabile: */
        left: 0 !important;
        width: 100% !important; /* Occupa tutto lo schermo orizzontalmente */
        display: flex !important; /* Usa Flexbox */
        justify-content: center !important; /* ...per centrare il figlio */
        
        /* Posizione verticale */
        bottom: -25px !important; 
        
        /* Pulizia */
        margin: 0 !important; 
        padding: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        border: none !important;
        z-index: 999 !important;
    }

    /* 2. IL PULSANTE VERO */
    .btn-mobile-fix .wp-block-button__link {
        /* IL FIX: "fit-content" costringe il pulsante ad abbracciare il testo */
        width: fit-content !important; 
        
        /* Assicuriamo che non sia troppo piccolo né troppo grande */
        min-width: 200px !important; 
        max-width: 85% !important; 
        
        /* Per sicurezza usiamo inline-block invece di block */
        display: inline-block !important;

        /* Estetica */
        margin: 0 !important; /* Rimuoviamo margini laterali auto perché ci pensa il flex padre */
        padding-top: 15px !important;
        padding-bottom: 15px !important;
        padding-left: 30px !important; /* Diamo aria ai lati del testo */
        padding-right: 30px !important;
        
        white-space: normal !important;
        line-height: 1.2 !important;
        font-size: 15px !important;
        text-align: center !important;
        
/* L'ultimo numero (0.5) è l'intensità del colore */
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2), 0 10px 10px -5px rgba(0, 0, 0, 0.1) !important;
}
}


/* [HOME] Icone di "I NOSTRI SERVIZI"
   ========================================================================== */
   /* Forza il contenitore ad allineare tutto IN ALTO */
.correzione-icona-inostriservizi .uagb-icon-list__wrapper {
    align-items: flex-start !important;
    display: flex !important; /* Assicura che la regola flex sia attiva */
}

/* Regola la posizione dell'icona per non farla stare troppo in alto */
.correzione-icona-inostriservizi .uagb-icon-list__source-wrap {
    margin-top: 8px !important; /* Numero positivo piccolo */
    align-self: flex-start !important; /* Sicurezza extra */
    margin-bottom: auto !important; /* Impedisce spinte dal basso */
}


/* [HOME] TESTIMONIANZE
   ========================================================================== */
   /* --- 1. STRUTTURA GENERALE --- */
   
.be-testimonials-section {
    background-color: #E3EFF7;
    padding: 60px 20px;
    margin-top: 40px;
    box-sizing: border-box;
}

.be-testimonials-section * {
    box-sizing: border-box;
}

.be-container {
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
}

.be-header {
    text-align: center;
    margin-bottom: 50px;
}

.be-header h2 {
    color: #143B74; 
    font-size: 36px;
    margin: 0 0 10px 0;
    font-weight: 700;
}

.be-header p {
    color: #666;
    font-size: 16px;
    margin: 0;
    opacity: 0.9;
}

/* --- 2. TRACK (Contenitore scorrevole) --- */
.be-track {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    width: 100%;
    align-items: stretch;
    overflow-x: auto;
    scroll-behavior: smooth;
    padding-bottom: 30px;
    padding-top: 10px;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.be-track::-webkit-scrollbar {
    display: none;
}

/* --- 3. CARD STYLE --- */
.be-card {
    background: white;
    padding: 40px 30px;
    border-radius: 8px;
    border: 1px solid #e0e0e0; 
    box-shadow: 0 10px 20px rgba(0,0,0,0.2); 
    border-bottom: 4px solid #143B74;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    scroll-snap-align: start;
    transition: transform 0.3s ease;
}

.be-card:hover {
    transform: translateY(-5px);
}

/* --- STILE DEL TESTO E NUOVE VIRGOLETTE --- */
.be-text {
	 font-family: 'Merriweather', serif;
    font-size: 18px;
    line-height: 1.6;
    color: #4a4a4a;
    margin-bottom: 30px;
    font-style: italic;
    flex-grow: 1;
	position: relative;
	padding-left: 25px;
}

/* NUOVO: Stile per lo SPAN delle virgolette */
.be-quote {
    font-family: Georgia, serif;
    font-size: 50px;
    color: #D3D3D3;
    line-height: 0;
}
/* VIRGOLETTE APERTURA */
.be-text .be-quote:first-child {
    position: absolute; 
    left: 0;            
    top: 20px;       
    margin: 0;        
}
/* VIRGOLETTE CHIUSURA */
.be-text .be-quote:last-child {
    position: relative;
    top: 22px; 
    margin-left: 0px;
}

/* --- 4. AUTORE --- */
.be-author {
    display: flex;
    align-items: center;
    gap: 15px;
    overflow: hidden; 
}

.be-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    flex-shrink: 0; 
    overflow: hidden; /* Assicura che nulla esca dal cerchio */
    background-color: #f0f0f0; /* Opzionale: un grigio chiaro di backup se l'immagine manca */
}
}

/* --- NUOVO: Stile per rendere tonda l'immagine nell'avatar --- */
.be-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Assicura che l'immagine riempia il cerchio senza deformarsi */
    border-radius: 50%; /* Rende l'immagine tonda */
    display: block; /* Rimuove eventuali spazi indesiderati sotto l'immagine */
}

.be-meta {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1; 
    min-width: 0; 
}

.be-meta strong {
    display: block;
    color: #2c3e50;
    font-size: 15px;
    white-space: nowrap; 
    overflow: hidden;
    text-overflow: ellipsis; 
}

.be-meta span {
    display: block;
    font-size: 13px;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    word-wrap: break-word;
}

/* Stile per le 5 Stelle */
.stelle-testimonianze {
    color: #FF6600; /* Sostituisci con il TUO codice Arancione esatto */
    font-size: 18px; /* Grandezza delle stelle */
    letter-spacing: 2px; /* Un po' di aria tra una stella e l'altra */
    margin-bottom: 12px; /* Spazio sotto le stelle prima del testo */
    line-height: 1; /* Evita spazi verticali strani */
}

/* Opzionale: Se vuoi che su Mobile siano un po' più piccole */
@media (max-width: 767px) {
    .stelle-testimonianze {
        font-size: 16px;
        margin-bottom: 10px;
    }
}







/*============================
   MEDIA QUERIES (MOBILE)
============================*/

@media (max-width: 1024px) {
    .be-track {
        display: flex;
        align-items: stretch;
        scroll-snap-type: x mandatory;
        gap: 20px;
        padding-right: 20px; 
        -webkit-overflow-scrolling: touch; 
    }

    .be-card {
        min-width: 85%; 
        max-width: 85%;
        height: auto;
        scroll-snap-align: center;
        transform: none; 
    }
}

@media (max-width: 768px) {
    .be-testimonials-section {
        margin-top: 40px;
        padding: 40px 0; 
    }
    
    .be-container {
        padding: 0;
    }
    
    .be-header {
        padding: 0 20px;
        margin-bottom: 30px;
    }

    .be-track {
        padding-left: 0; 
    }
            
    .be-card {
        padding: 25px 20px; 
    }

    /* --- GESTIONE VIRGOLETTE MOBILE --- */

    /* 1. VICINANZA DEL TESTO (La colonna di testo) */
    .be-text {
        font-size: 15px; 
        margin-bottom: 20px; 
        line-height: 1.5; 
        padding-left: 20px; 
    }

    /* 2. GRANDEZZA DELLE VIRGOLETTE */
    .be-quote {

        font-size: 40px; 
    }

    /* 3. POSIZIONE VIRGOLETTA DI APERTURA */
    .be-text .be-quote:first-child {
        top: 19px;    
        left: -2px; 
    }

    /* 4. POSIZIONE VIRGOLETTA DI CHIUSURA */
    .be-text .be-quote:last-child {
        top: 17px; 
	      margin-left: 0px;
    }
}

/* [PAGINAFORM PREVENTIVO]
   ========================================================================== */
   /* Questo sposta solo il widget del form senza muovere lo sfondo del contenitore */
.form-progetto-in-mente {
    margin-top: -70px !important; /* Regola l'altezza della sovrapposizione */
    background-color: #ffffff;    /* Forza il colore bianco del form */
    padding: 30px;                /* Crea spazio tra testo e bordi */
    border-radius: 12px;          /* Arrotonda gli angoli */
    
    /* OMBRA REFACTORING UI: Doppia ombra con luce zenitale */
    box-shadow: 
        0 10px 15px -3px rgba(0, 0, 0, 0.1), 
        0 4px 6px -2px rgba(0, 0, 0, 0.05); 

    position: relative;
    z-index: 99;
    max-width: 800px;             /* Opzionale: centra e limita la larghezza */
    margin-left: auto;
    margin-right: auto;
}

/* [ARTICOLO SINGOLO]  */

/* TITOLI ARTICOLO (DESKTOP) Applica grandezza font solo all'interno del contenuto dell'articolo singolo */
.single-post .entry-content h2 {
    font-size: 30px;
    font-weight: 700;
    margin-top: 2em; 
    margin-bottom: 0.5em;
}

.single-post .entry-content h3 {
    font-size: 24px;
    font-weight: 700;
    margin-top: 1.5em;
    margin-bottom: 0.5em;
}

/* REGOLAZIONI SOLO PER MOBILE (TITOLI) */
@media (max-width: 767px) {
    .single-post .entry-content h2 {
        font-size: 20px;
    }
    .single-post .entry-content h3 {
        font-size: 18px;
    }
}

/* 2. DESIGN DELLA TABELLA (COLORI E BORDI - UGUALI PER TUTTI) */
.tabella-articolo1 table {
    width: 100% !important;
    border-collapse: collapse !important;
}

/* Colori Header (Celeste e Blu) */
.tabella-articolo1 th {
    background-color: hsl(200, 100%, 95%) !important;
    color: #143B74 !important;
    font-weight: 700;
    border: 1px solid #143B74 !important;
    border-bottom: 2px solid #143B74 !important;
    padding: 12px 10px; /* Spazio comodo per Desktop */
}

/* Bordi e Spazio celle (Desktop) */
.tabella-articolo1 td {
    border: 1px solid #143B74 !important;
    padding: 12px 10px; /* Spazio comodo per Desktop */
    color: #333; /* Colore testo standard per desktop */
}

/* 3. ADATTAMENTO SOLO PER MOBILE (Sotto i 767px) */
@media (max-width: 767px) {
    /* Titoli più piccoli */
    .single-post .entry-content h2 { font-size: 20px; }
    .single-post .entry-content h3 { font-size: 18px; }

    /* QUI FACCIAMO DIVENTARE LA TABELLA PICCOLA (Solo Mobile) */
    .tabella-articolo1 td, 
    .tabella-articolo1 th {
        font-size: 11px !important; /* Diventa 11px solo qui */
        padding: 5px 3px !important; /* Si stringe solo qui */
        line-height: 1.2 !important;
        hyphens: none !important;  
        word-break: normal !important;     
        overflow-wrap: normal !important;  
        white-space: normal !important;    
    }
    
    .tabella-articolo1 table {
        table-layout: auto !important;
    }
}

/* Rimuove il nero e forza il blu su tutta la struttura dell'header */
.tabella-articolo1 thead, 
.tabella-articolo1 thead tr, 
.tabella-articolo1 thead th {
    border-color: #143B74 !important;
    border-bottom: 2px solid #143B74 !important;
    outline: none !important; /* Rimuove eventuali bordi esterni del tema */
}

/* Forza lo sfondo celeste e il testo blu su ogni cella dell'header */
.tabella-articolo1 th {
    background-color: hsl(200, 100%, 95%) !important;
    color: #143B74 !important;
    border: 1px solid #143B74 !important;
}

/* allineamento didascalia immagini */
figcaption {
  text-align: left !important;
  margin-left: 0;
}