/**
 * Nav Toggle — frontend block styles.
 *
 * The hamburger icon and optional label.
 * Visibility is controlled by per-instance breakpoint media queries
 * emitted by the Snap Header render callback.
 *
 * @package Beplus\VisualMegaNav
 */

/* ---------- Toggle button ---------- */
.wp-block-beplus-visual-mega-nav-nav-toggle {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px;

	/* border: 1px solid var(--beplus-vmn-toggle-border,
		color-mix(in srgb, currentColor 14%, transparent));
	border-radius: var(--beplus-vmn-toggle-radius, 9999px); */
	border: none;
	border-radius: 0;
	background: transparent;
	color: inherit;
	cursor: pointer;
	font-family: inherit;
	font-size: inherit;
	line-height: 1;
}

.wp-block-beplus-visual-mega-nav-nav-toggle:hover {
	background: var(--beplus-vmn-toggle-hover-bg, color-mix(in srgb, currentColor 8%, transparent));
}

.wp-block-beplus-visual-mega-nav-nav-toggle:focus,
.wp-block-beplus-visual-mega-nav-nav-toggle:focus-visible {
	outline: none;
}

.wp-block-beplus-visual-mega-nav-nav-toggle[aria-expanded="true"] {

	/* background: var(--beplus-vmn-toggle-active-bg,
		color-mix(in srgb, currentColor 12%, transparent)); */
}

/* ---------- Icon ---------- */
.beplus-nav-toggle__icon {
	display: flex;
	flex-direction: column;
	gap: 4px;
	width: 24px;
	height: 24px;
	justify-content: center;
	align-items: center;
}

.beplus-nav-toggle__icon span {
	display: block;
	width: 20px;
	height: 2px;
	background: currentcolor;
	border-radius: 1px;
	transition: transform 0.2s ease, opacity 0.2s ease;
}

/* 2-line variant: thicker lines */
.beplus-nav-toggle__icon--lines-2 span {
	height: 3px;
}

.beplus-nav-toggle__icon--lines-2 span:last-child {
	display: none;
}

/* ---------- Label ---------- */
.beplus-nav-toggle__label {
	font-size: 0.875em;
	font-weight: 500;
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {

	.beplus-nav-toggle__icon span {
		transition: none;
	}
}