/**
 * Menu Trigger Block Styles
 */

/* Base button styles */
.westrangedental-menu-trigger {
	background: transparent;
	border: none;
	cursor: pointer;
	padding: 8px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: opacity 0.2s ease;
	position: relative;
	z-index: 101;
}

.westrangedental-menu-trigger:hover {
	opacity: 0.7;
}

.westrangedental-menu-trigger:focus {
	outline: none;
}

.westrangedental-menu-trigger svg {
	display: block;
	overflow: visible;
}

/* Animate individual lines */
.westrangedental-menu-trigger svg line {
	transition: all 0.3s ease;
	transform-origin: 50% 50%;
}

/* Set specific transform origins for each line based on SVG coordinates */
.westrangedental-menu-trigger svg line:nth-child(1) {
	transform-origin: 13.5px 0.5px;
}

.westrangedental-menu-trigger svg line:nth-child(2) {
	transform-origin: 13.5px 10.5px;
}

.westrangedental-menu-trigger svg line:nth-child(3) {
	transform-origin: 13.5px 19.5px;
}

/* Alignment classes */
.westrangedental-menu-trigger.alignleft {
	margin-right: auto;
}

.westrangedental-menu-trigger.aligncenter {
	margin-left: auto;
	margin-right: auto;
}

.westrangedental-menu-trigger.alignright {
	margin-left: auto;
}

/* Editor specific styles */
.wp-block-westrangedental-menu-trigger {
	/* No specific editor styles needed */
}

/* Make menu trigger 40x40px on mobile */
@media (max-width: 767px) {
	/* .westrangedental-menu-trigger {
		width: 40px;
		height: 40px;
		flex-shrink: 0;
	}
	
	.westrangedental-menu-trigger svg {
		width: 100%;
		height: 100%;
		max-width: 32px;
		max-height: 24px;
	} */
}

/* Accessibility - Hide button when menu is not needed (desktop) */
@media (min-width: 782px) {
	.westrangedental-menu-trigger {
		/* Keep visible by default - you can adjust this if needed */
	}
}

/* Animate lines into X when menu is active */
body.menu-active .westrangedental-menu-trigger svg line {
	stroke: var(--wp--preset--color--contrast);
}

body.menu-active .westrangedental-menu-trigger svg line:nth-child(1) {
	transform: translateY(10px) rotate(45deg);
}

body.menu-active .westrangedental-menu-trigger svg line:nth-child(2) {
	opacity: 0;
}

body.menu-active .westrangedental-menu-trigger svg line:nth-child(3) {
	transform: translateY(-10px) rotate(-45deg);
}

/* Example styles for when menu is active - customize as needed */
body.menu-active {
	/* You can add overflow hidden or other styles here */
	/* overflow: hidden; */
}