/*
Theme Name: Arché 25
Template: hello-elementor
Author: Federico Barberis
Version: 1.0.1751279631
Updated: 2025-06-30 10:33:51

*/

html, body {
	overflow-x: hidden;
}
@media(min-width:1025px){
	main#content {
		margin-left: 80px; /* Imposta il margine iniziale del contenuto principale */
	}
	div[data-elementor-type="footer"]{
		margin-left: 80px;
	}
	div[data-elementor-type="single-post"]{
		margin-left: 80px;
	}
}

/* Assicurati che questi elementi siano pronti per le transizioni JS */
#side-navigation,
#menu-container,
#dark-overlay,
main#content,
div[data-elementor-type="single-post"]{
    transition: all 0.5s ease-in-out; /* Transizioni fluide per le proprietà cambiate da JS */
}

/* Stato iniziale esplicito per gli elementi nascosti */
#menu-container {
    margin-left: -400px;
    z-index: 0;
}

#dark-overlay {
    opacity: 0;
    visibility: hidden;
    background-color: rgba(0, 0, 0, 0.7);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99;
}

/* Impostiamo z-index per l'ordine di sovrapposizione */
#side-navigation {
    z-index: 100;
    width: 80px; /* Larghezza INIZIALE di side-navigation. NON deve avere :hover CSS qui. */
    /* Assicurati che la larghezza di #side-navigation sia impostata a 80px di default
       e che non ci siano altre regole CSS che la cambiano con l'hover. */
}

/* Rendi il #hamburger cliccabile */
#hamburger {
    cursor: pointer;
}

/* #trigger-bar non dovrebbe avere un proprio hover che influenza #menu-container o #side-navigation */
#trigger-bar {
    /* Potresti voler impostare una larghezza fissa per #trigger-bar qui
       se Elementor non la gestisce in modo che non si espanda troppo */
    /* width: 80px; */
}

/*//////////////////////////////////////*/
/* Stile iniziale per le immagini del blocco editor di WordPress */
/* Questo stile nasconde l'immagine quando non è nell'editor e non ha la classe .is-visible */
body:not(.elementor-editor-active) .wp-block-image img {
    clip-path: inset(1000px 1000px);
    transition: clip-path 1s ease-out; /* Durata e tipo di transizione */
}

/* Stile finale per l'elemento animato (immagini di WordPress) */
/* Questo stile mostra l'immagine quando è visibile, e ha la specificità necessaria */
body:not(.elementor-editor-active) .wp-block-image.is-visible img {
    clip-path: inset(0px 0px);
}