/* ==========================================================================
   1. DIMENSIONI DEL LOGO
   ========================================================================== */
header img, 
.site-branding img, 
.custom-logo-link img,
a.custom-logo-link {
	max-width: none !important;
	max-height: none !important;
	width:300px !important;
	height: auto !important;
}

/* ==========================================================================
   2. IMMAGINE DI INTESTAZIONE (A tutta larghezza e SOLO in Home Page)
   ========================================================================== */
.header-image, 
.header-image img,
.custom-header,
.custom-header img {
	width: 100vw !important;
	max-width: 100vw !important;
	position: relative !important;
	left: 50% !important;
	right: 50% !important;
	margin-left: -50vw !important;
	margin-right: -50vw !important;
	height: auto !important;
}

/* Nasconde l'immagine d'intestazione su tutto il sito */
.header-image, 
.custom-header {
	display: none !important;
}

/* La mostra ESCLUSIVAMENTE in Home Page */
.home .header-image, 
.home .custom-header {
	display: block !important;
}

/* ==========================================================================
   3. STRUTTURA DELL'HEADER (Senza linee divisorie)
   ========================================================================== */
#masthead,
.site-header {
	width: 100vw !important;
	position: relative !important;
	left: 50% !important;
	right: 50% !important;
	margin-left: -50vw !important;
	margin-right: -50vw !important;
	max-width: 100vw !important;
	padding: 15px 30px !important;
	border-bottom: none !important;
	box-shadow: none !important;
	box-sizing: border-box !important;
}

.site-header-main,
#masthead .site-branding-wrapper,
#masthead .header-main {
	display: flex !important;
	flex-direction: row !important;
	justify-content: space-between !important;
	align-items: center !important;
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
	border-bottom: none !important;
}

.site-branding {
	margin: 0 !important;
	padding: 0 !important;
	float: left !important;
}

.main-navigation {
	margin: 0 0 0 auto !important;
	padding: 0 !important;
	float: right !important;
}

/* ==========================================================================
   4. REGOLAZIONE MENU: MOBILE VS DESKTOP
   ========================================================================== */
/* A) VISTA MOBILE (Smartphone sotto i 768px): Menu a comparsa */
@media (max-width: 767px) {
	.main-navigation ul {
		display: none;
	}
	
	.menu-toggle,
			    .main-navigation.toggled ul {
		display: block !important;
	}
	
	#masthead,
			    .site-header {
		width: 100% !important;
		left: 0 !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		padding: 15px !important;
	}
}

/* B) VISTA DESKTOP E TABLET (Da 768px in su): Menu esteso su una riga */
@media (min-width: 768px) {
	.main-navigation ul {
		display: flex !important;
		flex-direction: row !important;
		justify-content: flex-end !important;
		align-items: center !important;
		list-style: none !important;
		margin: 0 !important;
		padding: 0 !important;
		flex-wrap: nowrap !important;
	}
	
	.main-navigation li {
		margin: 0 0 0 25px !important;
		padding: 0 !important;
		display: inline-block !important;
		white-space: nowrap !important;
	}
	
	.main-navigation a {
		font-weight: 700 !important;
		font-size: 15px !important;
		text-transform: uppercase !important;
		letter-spacing: 1px !important;
		text-decoration: none !important;
		line-height: 1 !important;
		white-space: nowrap !important;
		word-break: normal !important;
	}
	
	.main-navigation a:hover {
		opacity: .7 !important;
	}
}

/* STILE MANIFESTO HOME PAGE (Stile MUBA) */
.intro-manifesto {
	max-width: 900px !important;
/* Mantiene la frase entro una larghezza elegante e ben leggibile */
	margin: 60px auto 70px !important;
/* Ampio spazio sopra (dall'immagine) e sotto */
	padding: 0 25px !important;
/* Respiro laterale per schermi piccoli */
/* Tipografia */
	font-size: 24px !important;
/* Dimensione importante ed impattante */
	line-height: 1.6 !important;
/* Interlinea spaziosa */
	font-weight: 300 !important;
/* Carattere leggero/elegante (oppure 400/600 per più rilievo) */
	text-align: center !important;
/* Centratura sobria ed essenziale */
	color: #111111 !important;
/* Nero quasi puro per forte contrasto */
	letter-spacing: .5px !important;
}

/* Adattamento per Smartphone */
@media (max-width: 767px) {
	.intro-manifesto {
		font-size: 18px !important;
		margin: 35px auto 45px !important;
		line-height: 1.5 !important;
	}
}

/* FORZATURA LARGHEZZA AMPIA PER I BLOCCHI CON CLASSE .blocco-ampio */
.entry-content .blocco-ampio {
	max-width: 1200px !important;
	width: 100% !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

/* Fa in modo che su schermi grandi occupi bene lo spazio senza margini eccessivi */
@media (min-width: 1024px) {
	.entry-content .blocco-ampio {
		width: 95% !important;
		max-width: 1300px !important;
	}
}
/* POSIZIONAMENTO LINEA ALL'ALTEZZA DELL'IMMAGINE IN HOME */
body:not(.home) #masthead,
body:not(.home) .site-header {
    border-bottom: 1px solid #333333 !important; /* Linea divisoria */
    padding-bottom: 50px !important;            /* Mantiene lo stesso padding della Home */
    margin-bottom: 60px !important;             /* Crea lo spazio tra la linea e i contenuti sottostanti */
}
/* EFFETTO HOVER: Schiarimento al passaggio del mouse */
.entry-content a img,
.wp-block-image a img {
    transition: opacity 0.3s ease !important; /* Rende il movimento morbido e graduale */
}

.entry-content a img:hover,
.wp-block-image a img:hover {
    opacity: 0.8 !important; /* Diminuisce l'opacità rendendola più chiara/luminosa */
    cursor: pointer;
}
/* FORZATURA CENTRAGGIO ASSOLUTO PER SKETCH */

/* 1. Contenitore principale ben centrato */
#page,
.site {
    max-width: 90vw !important;
    width: 90vw !important;
    margin-left: auto !important;
    margin-right: auto !important;
    position: relative !important;
    left: 0 !important;
    right: 0 !important;
}

/* 2. Azzeramento completo degli offset asimmetrici di Sketch */
.site-content,
#primary,
#content,
.site-main,
article,
.entry-content {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    left: 0 !important;
    float: none !important;
    clear: both !important;
}

/* 3. Allineamento centrato degli elementi figli nel corpo */
.entry-content > * {
    margin-left: auto !important;
    margin-right: auto !important;
}
/* LINEA DIVISORIA VISIBILE A TUTTA LARGHEZZA TRA MENU E INTESTAZIONE */
#masthead,
.site-header {
    position: relative !important;
    padding-bottom: 25px !important; /* Spazio tra il menu e la linea */
    margin-bottom: 35px !important;  /* Spazio tra la linea e lo slider */
}
/* GRIGLIA A 3 COLONNE IN STILE MUBA */
.wp-block-columns {
    gap: 20px !important; /* Spazio elegante tra un'immagine e l'altra */
}

.wp-block-column img {
    width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
}
/* ALLINEAMENTO FINALE E DEFINITIVO LOGO / MENU MOBILE */
@media screen and (max-width: 768px) {
    
    /* 1. Forza l'header a comportarsi come una barra pulita */
    .site-header .site-branding-wrapper,
    #masthead .site-branding,
    .site-header-main,
    .site-header {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        align-content: center !important;
        width: 100% !important;
        box-sizing: border-box !important;
        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }

 /* POSIZIONAMENTO LOGO E MENU SU DUE RIGHE (CENTRATE) */
@media screen and (max-width: 768px) {
    
    /* 1. Incolonna il logo e il pulsante menu al centro */
    .site-header .site-branding-wrapper,
    #masthead .site-branding,
    .site-header-main,
    .site-header {
        display: flex !important;
        flex-direction: column !important; /* Dispone gli elementi dall'alto verso il basso */
        align-items: center !important;     /* Centra tutto orizzontalmente */
        justify-content: center !important;
        width: 100% !important;
        padding-top: 15px !important;
        padding-bottom: 10px !important;
    }

    /* 2. Logo centrato in alto */
    .site-logo,
    .custom-logo,
    .site-branding img,
    .site-title,
    .site-title a {
        max-width: 260px !important; /* Ampio e ben visibile */
        width: auto !important;
        height: auto !important;
        margin: 0 auto 15px auto !important; /* Spazio di 15px sotto il logo prima delle linee */
        display: block !important;
        text-align: center !important;
    }

    /* 3. Pulsante menu sotto il logo */
    .menu-toggle {
        display: block !important;
        float: none !important;
        margin: 0 auto !important;
        position: relative !important;
        width: 30px !important;
        height: 24px !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        font-size: 0 !important;
        cursor: pointer !important;
    }

    /* 4. Le 2 linee orizzontali ben distanziate */
    .menu-toggle::before,
    .menu-toggle::after {
        content: "" !important;
        position: absolute !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        width: 26px !important;         /* Lunghezza delle linee */
        height: 2px !important;          /* Spessore delle linee */
        background-color: #000000 !important;
        transition: all 0.3s ease !important;
    }

    /* Linea superiore */
    .menu-toggle::before {
        top: 4px !important;
    }

    /* Linea inferiore */
    .menu-toggle::after {
        bottom: 4px !important;
    }

    /* Allineamento della tendina quando si apre */
    .main-navigation {
        text-align: center !important;
        width: 100% !important;
    }
}
	/* AZZERAMENTO DEFINITIVO SPAZIO TRA MENU MOBILE E HEADER/CONTENUTO */
@media screen and (max-width: 768px) {

    /* 1. Annulla margini e padding dell'header */
    #masthead,
    .site-header {
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
    }

    /* 2. Annulla i margini della linea divisoria ::after se presente */
    #masthead::after,
    .site-header::after {
        bottom: 0 !important;
    }

    /* 3. Compatta il contenitore delle linee */
    .menu-toggle {
        margin-bottom: 0 !important;
    }

    .main-navigation {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }

    /* 4. Rimuove lo spazio superiore dell'immagine/slider subito sotto */
    .header-image,
    .site-header-image,
    .hero-wrapper,
    #content,
    .site-content {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
}

    /* 2. Assicura che l'immagine rispetti il rientro */
    .site-logo-link,
    .custom-logo-link,
    .site-branding img {
        position: relative !important;
        left: 0 !important;
    }
}
/* LINEA VERTICALE DESKTOP - METODO CONTENITORE */
@media screen and (min-width: 769px) {

    /* 1. Forza l'header ad affiancare i due blocchi principali */
    #masthead .site-branding-wrapper,
    .site-header-main {
        display: flex !important;
        align-items: center !important;
    }

    /* 2. Applica la linea verticale sul lato destro della zona logo */
    .site-branding {
        border-right: 1px solid #000000 !important; /* La linea vera e propria */
        padding-right: 25px !important;            /* Spazio tra logo e linea */
        margin-right: 25px !important;             /* Spazio tra linea e menu */
        float: left !important;
    }
}
/* SOTTOLINEATURA PERFETTAMENTE CENTRATA SOTTO LE VOCI DEL MENU */
@media screen and (min-width: 769px) {

    .main-navigation a {
        position: relative !important;
        padding-bottom: 8px !important; /* Aumenta lo spazio sotto il testo */
    }

    .main-navigation a::after {
        content: "" !important;
        position: absolute !important;
        bottom: 2px !important;              /* Solleva leggermente la linea dal bordo inferiore */
        left: 0 !important;
        width: 100% !important;
        height: 1px !important;              /* Spessore finissimo di 1px */
        background-color: #000000 !important;
        opacity: 0 !important;
        transition: all 0.3s ease !important;
    }

    /* Effetto al passaggio del mouse o pagina attiva */
    .main-navigation a:hover::after,
    .main-navigation .current-menu-item > a::after {
        opacity: 1 !important;
        height: 1.5px !important;
    }
}