/*
Theme Name: Maida Child
Theme URI: https://medicinaesteticacarrara.it
Description: A child theme of Maida Theme
Author: Danae Project
Author URI: https://danaeproject.com
Version: 1.0.2
Text Domain: mediclinic
Template: maida
*/

.mkdf-page-header {
    background-color: rgba(255, 255, 255);
}


.mkdf-content {
    padding-bottom: 50px !important;
}

.mkdf-page-header .mkdf-menu-area .mkdf-logo-wrapper a {
    max-height: 65px !important;
}

/** Landing page main menu hide**/
.page-id-7262 .mkdf-main-menu {
    display: none;
}

@media only screen and (min-width: 1280px) {
    .page-id-7262 .mkdf-page-header .mkdf-vertical-align-containers {
        padding: 0 84px;
    }
}

@media only screen and (min-width: 1450px) {
    .page-id-7262 .mkdf-page-header .mkdf-vertical-align-containers {
        padding: 0 125px;
    }
}

/**
 * Firefox specific rule for fixing Poppins rendering in firefox
 */
@-moz-document url-prefix() {

    blockquote,
    footer .widget.widget_tag_cloud a,
    .mkdf-side-menu .widget.widget_tag_cloud a,
    .wpb_widgetised_column .widget.widget_tag_cloud a,
    aside.mkdf-sidebar .widget.widget_tag_cloud a,
    .mkdf-main-menu>ul>li>a {
        font-weight: lighter !important;
    }
}

.mkdf-vertical-align-containers .mkdf-position-center:before,
.mkdf-vertical-align-containers .mkdf-position-left:before,
.mkdf-vertical-align-containers .mkdf-position-right:before {
    margin-right: 0;
}

@media (max-width: 1024px) {

    .mkdf-add-bottom-border-on-1024 {

        border-bottom: 1px solid #ededed
    }

}



@media only screen and (max-width: 768px) {

    .mkdf-add-bottom-border-on-768 {

        border-bottom: 1px solid #ededed
    }



    .mkdf-title .mkdf-page-title {
        font-size: 30px;
        line-height: 1.2;

    }


    .ag-hero__media {
        display: none;
    }


    /* Azzera lo spazio vuoto in cima al contenuto su mobile.
       Il padding lo genera il parent in
       assets/custom-styles/general-custom-styles-responsive.php, dall'opzione
       di tema 'content_top_padding_mobile', su questi stessi due selettori e
       gia' con !important: da qui l'!important anche qui, altrimenti a parita'
       di specificita' non ci sarebbe partita.
       Questa regola esisteva anche in Aspetto > Personalizza > CSS aggiuntivo.
       Il CSS di Personalizza vive nelle opzioni del tema, non e' versionato e
       sparirebbe in una migrazione: la copia buona e' questa. */
    .mkdf-content .mkdf-content-inner>.mkdf-container>.mkdf-container-inner,
    .mkdf-content .mkdf-content-inner>.mkdf-full-width>.mkdf-full-width-inner {
        padding-top: 0px !important;
    }
}

.mkdf-accordion-holder.mkdf-ac-boxed .mkdf-title-holder.ui-state-active,
.mkdf-accordion-holder.mkdf-ac-boxed .mkdf-title-holder.ui-state-hover {
    background-color: #60ABB3 !important;
}

.mkdf-accordion-holder .mkdf-title-holder.ui-state-active .mkdf-accordion-mark,
.mkdf-accordion-holder .mkdf-title-holder.ui-state-hover .mkdf-accordion-mark {
    background-color: #77cfdd !important;

}

.mkdf-sticky-header .mkdf-sticky-holder .mkdf-logo-wrapper a {
    max-height: 60px !important;
}

/* Overlay scuro per leggere meglio il testo bianco sulle row parallax */
.mkdf-row-grid-section-wrapper.mkdf-parallax-row-holder[data-parallax-bg-image] {
    position: relative;
    z-index: 1;
}

.mkdf-row-grid-section-wrapper.mkdf-parallax-row-holder[data-parallax-bg-image]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4) !important;
    z-index: 1;
}

/* Assicurati che il container interno con il testo sia sopra l'overlay */
.mkdf-row-grid-section-wrapper.mkdf-parallax-row-holder[data-parallax-bg-image]>div,
.mkdf-row-grid-section-wrapper.mkdf-parallax-row-holder[data-parallax-bg-image] .mkdf-row-grid-section {
    position: relative;
    z-index: 2 !important;
}

/* Ridimensionamento immagini icon box */
.mkdf-icon-box-holder .mkdf-custom-icon img {
    width: 250px !important;
    height: 250px !important;
    object-fit: cover;
    margin: 0 auto;
}

.vc_custom_padding_20px {
    padding: 20px !important;
    background-color: #f9f9f9 !important;
    border-radius: 5px !important;
}

/* Global title area overrides */
.mkdf-title,
.mkdf-title.mkdf-has-parallax-background {
    background-size: cover !important;
    background-position: center center !important;
    background-attachment: scroll !important;
    /* Disabilita l'effetto parallax che causa lo zoom */
    margin-bottom: 50px !important;
    text-align: center !important;
    /* Centra titolo e breadcrumb */
}


/* Sopra 1024px lo sfondo del banner e' l'immagine CSS di .mkdf-title, quindi
   l'<img> in flusso che il tema stampa dentro .mkdf-title-image sarebbe un
   doppione: la' resta nascosto.
   Sotto 1024px invece NON va nascosto. Il parent (modules-responsive.css)
   azzera sfondo e altezza di .mkdf-title.mkdf-has-background e posiziona
   .mkdf-title-holder in absolute: l'altezza del banner viene proprio da
   quell'<img>. Nasconderlo anche li' faceva collassare il banner a zero e
   lasciava il titolo sospeso sopra il contenuto. */
@media only screen and (min-width: 1025px) {

    .mkdf-title .mkdf-title-image,
    .mkdf-title .mkdf-title-image img,
    .mkdf-title-image img {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
    }
}

/* Miglioramento leggibilità testo su banner */
.mkdf-title .mkdf-page-title,
.mkdf-title .mkdf-breadcrumbs,
.mkdf-title .mkdf-breadcrumbs a,
.mkdf-title .mkdf-breadcrumbs span {
    text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5) !important;
}

/* Velatura scura tra immagine e testo: il titolo del banner e' bianco e
   l'immagine e' chiara. Gradiente verticale scuro solo nella fascia centrale,
   dove il tema centra verticalmente titolo e breadcrumb, e trasparente ai
   bordi, cosi' l'immagine resta pulita sopra e sotto.
   Pseudo-elemento sul contenitore, non un div nuovo: il markup e' del parent.
   Copre .mkdf-title, che contiene sia lo sfondo CSS desktop sia l'<img> in
   flusso mobile, quindi vale per entrambi. */
.mkdf-title.mkdf-has-background::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: linear-gradient(to bottom,
            rgba(0, 0, 0, 0) 0%,
            rgba(0, 0, 0, 0.38) 35%,
            rgba(0, 0, 0, 0.38) 65%,
            rgba(0, 0, 0, 0) 100%);
    pointer-events: none;
    z-index: 1;
}

/* Titolo e breadcrumb sopra la velatura. .mkdf-title-holder e' gia'
   posizionato dal parent (relative sopra 1024px, absolute sotto), quindi
   basta lo z-index. Il selettore e' ancorato a .mkdf-title per non toccare
   l'omonimo .mkdf-title-holder dell'accordion. */
.mkdf-title .mkdf-title-holder {
    z-index: 2;
}






/* Colore icone e titoli accordion soluzioni */
.single-soluzioni .vc_tta-color-grey.vc_tta-style-classic .vc_tta-panel-title>a {
    color: #60abb3 !important;
}

.single-soluzioni .vc_tta-panel-title .vc_tta-icon {
    color: #60abb3 !important;
}

.single-soluzioni .vc_tta-controls-icon::before,
.single-soluzioni .vc_tta-controls-icon::after {
    border-color: #60abb3 !important;
}

/* Affinamento layout accordion soluzioni */
.single-soluzioni .vc_tta-container {
    margin: 0 -5px !important;
    /* Compensa eventuale gap della riga per allinearsi ai box sopra */
}

.single-soluzioni .vc_tta-panel-body {
    padding: 30px !important;
    /* Più spazio interno come richiesto */
}

.single-soluzioni .vc_tta-panel-heading {
    margin-bottom: 2px !important;
}

/* WPBakery impone .vc_tta.vc_general .vc_tta-panel-title { line-height: 1 },
   che batte le regole line-height del tema per h4. Con il titolo su una riga
   non si vede; quando va a capo (su mobile "Per saperne di piu'
   (Approfondimento Scientifico)" arriva a tre righe) le righe si sovrappongono
   e sbordano dal contenitore.
   Specificita': WPBakery ha tre classi (0,3,0), questo selettore ne ha quattro
   (0,4,0) e vince senza !important. Il valore si propaga per ereditarieta' al
   link interno, che non dichiara un line-height proprio.
   Nessuna media query: il titolo puo' andare a capo anche tra 768 e 1024px,
   dove la colonna dell'accordion e' gia' stretta. */
.single-soluzioni .vc_tta.vc_general .vc_tta-panel-title,
.single-obiettivi .vc_tta.vc_general .vc_tta-panel-title {
    line-height: 1.4;
}

/* Sotto 767px il titolo dell'accordion va su tre righe e l'icona
   fas fa-book-medical affolla il blocco senza aggiungere informazione:
   nascosta l'icona, e recuperato lo spazio che WPBakery le riservava.
   Il padding-left del link scende da 46px a 30px, non a zero: serve ancora al
   controls-icon "+", posizionato in assoluto a sinistra, che deve restare
   visibile e non finire sotto il testo.
   Azzerato anche il margin-left: 14px che WPBakery mette su .vc_tta-title-text
   come stacco dall'icona: senza icona e' solo un rientro spurio.
   Specificita': i selettori ricalcano quelli di WPBakery con .single-* in
   testa, quindi vincono di una classe. Nessun !important. */
@media only screen and (max-width: 767px) {

    .single-soluzioni .vc_tta.vc_general .vc_tta-panel-title .vc_tta-icon,
    .single-obiettivi .vc_tta.vc_general .vc_tta-panel-title .vc_tta-icon {
        display: none;
    }

    .single-soluzioni .vc_tta.vc_tta-accordion .vc_tta-controls-icon-position-left.vc_tta-panel-title>a,
    .single-obiettivi .vc_tta.vc_tta-accordion .vc_tta-controls-icon-position-left.vc_tta-panel-title>a {
        padding-left: 40px;
    }

    .single-soluzioni .vc_tta.vc_tta-accordion .vc_tta-controls-icon-position-left.vc_tta-panel-title>a .vc_tta-title-text,
    .single-obiettivi .vc_tta.vc_tta-accordion .vc_tta-controls-icon-position-left.vc_tta-panel-title>a .vc_tta-title-text {
        margin-left: 0;
    }
}

/* Fix allineamento e spaziature accordion soluzioni */
.ag-accordion-row {
    margin-top: 10px !important;
    margin-bottom: 20px !important;
}

.ag-accordion-row .vc_column-inner {
    padding-left: 5px !important;
    padding-right: 5px !important;
}

.ag-accordion-row .vc_tta-container {
    margin: 0 !important;
    /* Rimosso il compenso manuale precedente */
}

/* I bottoni .ag-btn sono definiti nel blocco <style> dei template, dove hanno
   padding: 14px 22px e border: 2px solid transparent ma nessun box-sizing,
   quindi restano content-box. Nei quattro punti in cui ricevono width: 100%
   (.ag-hero__cta .ag-btn e .ag-closing__cta .ag-btn, sotto 767px, in
   single-soluzioni.php e single-obiettivi.php) la larghezza reale diventa
   100% + 44px di padding + 4px di bordo, e il bottone sborda dal contenitore.
   La dichiarazione sta sul selettore .ag-btn e non sui singoli punti che
   applicano width: 100%, cosi' li copre tutti e quattro e copre anche
   eventuali punti futuri. Niente !important: nessun'altra regola dichiara
   box-sizing su .ag-btn, quindi non c'e' nessun conflitto da vincere. */
.ag-btn {
    box-sizing: border-box;
}

/* Utility class per allineare a destra (es. bottoni) */
.ag-btn-align-right {
    display: table !important;
    margin-left: auto !important;
    margin-right: 0 !important;
}

.ag-text-right {
    text-align: right !important;
}

/* Utility per azzerare il margin top */
.ag-mt-0 {
    margin-top: 0 !important;
}