/* Mobile hamburger: sit on the header, bars use the header text color.
   Separate file so the CDN picks up a new path. */

@media (max-width: 1024px) {
	.site-header button.menu-toggle,
	.site-header .mobile-menu-toggle .menu-toggle,
	.site-header .menu-toggle,
	.header-layout-center .mobile-menu-toggle-left .menu-toggle {
		background: transparent !important;
		background-color: transparent !important;
		border: 0 !important;
		border-color: transparent !important;
		box-shadow: none !important;
		color: var(--header-text-color, #fff) !important;
		padding: 8px !important;
		border-radius: 8px !important;
		min-width: 40px;
		min-height: 40px;
		display: flex !important;
		align-items: center;
		justify-content: center;
		opacity: 1 !important;
	}

	.site-header button.menu-toggle:hover,
	.site-header .mobile-menu-toggle .menu-toggle:hover,
	.site-header .menu-toggle:hover,
	.header-layout-center .mobile-menu-toggle-left .menu-toggle:hover {
		background: color-mix(in srgb, var(--header-text-color, #fff) 12%, transparent) !important;
		background-color: color-mix(in srgb, var(--header-text-color, #fff) 12%, transparent) !important;
		border-color: transparent !important;
		box-shadow: none !important;
		opacity: 1 !important;
	}

	.site-header .menu-toggle .menu-toggle-icon,
	.header-layout-center .mobile-menu-toggle-left .menu-toggle-icon {
		display: flex !important;
		flex-direction: column;
		justify-content: center;
		gap: 5px;
		width: 22px;
		height: 16px;
	}

	.site-header .menu-toggle .menu-toggle-icon span,
	.header-layout-center .mobile-menu-toggle-left .menu-toggle-icon span {
		display: block !important;
		width: 22px !important;
		height: 2px !important;
		background: var(--header-text-color, #fff) !important;
		background-color: var(--header-text-color, #fff) !important;
		border-radius: 2px !important;
		opacity: 1 !important;
	}
}