/*
Theme Name: Astra Child
Template: astra
Version: 1.0
*/

/* Titoli servizi */
.servizio-titolo{
    display:inline-block;
    color:#eb241d;
    font-weight:bold;
    font-size:18px;
}

/* Spazio sopra ai titoli successivi */
.servizio-titolo.spazio-top{
    margin-top:30px;
}

/* MOBILE */
@media (max-width: 768px){
    .servizio-titolo{
        font-size:22px;
    }
}

/* ==============================
   FONT GLOBALE PIÙ GRANDE SU MOBILE
   ============================== */
@media (max-width: 768px){
    body{
        font-size:18px; /* base mobile (desktop Astra ~16px) */
        line-height:1.6;
    }

    p,
    li,
    a{
        font-size:1em; /* ereditano dal body */
    }
}
/* =========================================
   ASTRA – LOGO MOBILE: dimensione coerente + sblocco width (Astra)
   ========================================= */
@media (max-width: 768px){

    /* Sblocca contenitori/logo wrapper */
    .ast-header-break-point .site-branding,
    .ast-header-break-point .ast-site-identity,
    .ast-header-break-point .site-logo-img,
    .ast-header-break-point header .custom-logo-link,
    .ast-header-break-point header .custom-mobile-logo-link{
        max-height:none!important;
        max-width:none!important;
        width:auto!important;
        height:auto!important;
        overflow:visible!important;
    }

    /* Logo vero e proprio (forza anche la width) */
    .ast-header-break-point header .custom-logo-link img,
    .ast-header-break-point header .custom-mobile-logo-link img,
    .ast-header-break-point header img.custom-logo{
        /* Meglio usare max-height per non "stirare" / sgranare il logo */
        max-height:auto!important;    /* QUI regoli la dimensione */
        height:auto!important;
        min-width:260px!important;
        max-width:360px!important;           /* batte eventuale width:96px */
        object-fit:contain;
    }

    /* Un po’ di respiro verticale all’header */
    .ast-header-break-point .main-header-bar{
        padding-top:6px!important;
        padding-bottom:6px!important;
    }

    /* HAMBURGER MOBILE: sfondo personalizzato */
    .ast-header-break-point .ast-mobile-menu-trigger,
    .ast-header-break-point .menu-toggle{
        background-color: #E30613!important; /* <-- sostituisci qui con il tuo rosso */
        border-radius:6px;
        padding:10px 12px;
    }

    /* Icona hamburger (linee) */
    .ast-header-break-point .ast-mobile-menu-trigger svg,
    .ast-header-break-point .menu-toggle svg{
        fill:#ffffff!important;
    }
    /* =========================================
       ASTRA – MOBILE MENU: effetto dissolvenza (sub-menu)
       ========================================= */

    /* Stato chiuso: sub-menu invisibile */
    .ast-header-break-point .main-header-menu .sub-menu{
        opacity:0;
        max-height:0;
        overflow:hidden;
        transition: opacity .25s ease, max-height .75s ease;
        will-change: opacity, max-height;
    }

    /* Stato aperto: Astra usa classi diverse a seconda della versione.
       Copriamo i casi più comuni: .focus / .ast-submenu-expanded / aria-expanded="true" */
    .ast-header-break-point .main-header-menu li.focus > .sub-menu,
    .ast-header-break-point .main-header-menu li.ast-submenu-expanded > .sub-menu,
    .ast-header-break-point .main-header-menu button[aria-expanded="true"] + .sub-menu{
        opacity:1;
        max-height:800px; /* abbastanza alto per contenere le voci */
    }

    /* Menu mobile: assicurati che le voci siano visibili (testo scuro su sfondo chiaro) */
    .ast-header-break-point .main-header-menu,
    .ast-header-break-point .main-header-menu a{
        color:#111111!important;
    }

    .ast-header-break-point .main-header-menu a{
        display:block;
        padding:12px 16px;
    }

    /* Sfondo del pannello menu mobile */
    .ast-header-break-point .main-header-menu{
        background-color:#ffffff!important;
    }
}



.elementor-widget-button .elementor-button {
    border-style: solid;
    text-decoration: none;
    border-top-width: 0px;
    border-right-width: 0px;
    border-left-width: 0px;
    border-bottom-width: 0px;
    margin-top: 127px;
}

/* =========================================
   ELEMENTOR: a capo "chiavi in mano" solo su mobile
   Uso: nel widget Titolo aggiungi uno span: <span class="mobile-break">chiavi in mano</span>
   (consigliato) aggiungi anche al widget la classe: wip-break-chiavi
   ========================================= */
.wip-break-chiavi .mobile-break{
    display:inline; /* desktop: resta sulla stessa riga */
}

@media (max-width: 768px){
    .wip-break-chiavi .mobile-break{
        display:block; /* mobile: va a capo */
    }
}