/* 
Hamburger icon styling
Added extra CSS class in site editor to specify element and bypass WP updates
*/

 
.hamburger-menu .wp-block-navigation__responsive-container-open {
    padding: 12px !important;
}
/* SVG inside icon */
.hamburger-menu .wp-block-navigation__responsive-container-open svg {
    width: 32px !important;   /* pas aan naar wens */
    height: 32px !important;
    stroke: white 2px !important; /* icoonlijnkleur */
}

/* Overlay menu opened */
.hamburger-menu .wp-block-navigation__responsive-container.is-menu-open {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 50vw !important;   /* halve breedte */
    height: 100vh !important;
    background: rgba(25, 38, 34, 0.9) !important; /* jouw achtergrondkleur */
    transform: translateX(-100%) !important; /* buiten beeld */
    transition: transform 0.3s ease-out !important;
    z-index: 99999 !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 4rem 2rem !important;
	overflow-y:hidden;
	
	@media (max-width:768px) {
		width:100vw !important;
	}
} 


/* When menu overlay is open */
.hamburger-menu .wp-block-navigation__responsive-container.is-menu-open {
    transform: translateX(0) !important; /* komt naar binnen */
}


.hamburger-menu 
.wp-block-navigation__responsive-container 
.wp-block-navigation__responsive-container-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
}