/**
 * Burger icon — Flyout Menu Awesome Style 2 animation.
 * Open state driven by .bm-trigger.is-active / .bm-root.is-open (and #toggle:checked).
 */

#toggle.invisible {
	position: absolute;
	opacity: 0;
	pointer-events: none;
	width: 0;
	height: 0;
}

.burger-menu {
	--ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
	--line-width: 1.75rem;
	--line-height: 0.12rem;
	--line-bg: var(--bm-btn-color, #ffffff);
	--line-radius: 10px;
	--line-gap: 0.3rem;
	--line-transition-time: 0.3s;
	position: relative;
	width: var(--line-width);
	height: calc((var(--line-gap) + var(--line-height)) * 2);
	cursor: pointer;
	outline: none;
	-webkit-tap-highlight-color: transparent;
	margin: 0;
	display: inline-block;
	vertical-align: middle;
	flex-shrink: 0;
}

.burger-menu-lines {
	width: 100%;
	height: 100%;
	display: grid;
	grid-auto-flow: row;
	gap: var(--line-gap);
	transition: var(--line-transition-time);
}

.burger-menu-lines .line {
	position: relative;
	width: var(--line-width);
	height: var(--line-height);
}

.burger-menu-lines .line::before,
.burger-menu-lines .line::after {
	position: absolute;
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	background: var(--bm-burger-line, var(--bm-btn-color, #ffffff));
	border-radius: var(--line-radius);
	transition: 1.1s var(--ease-out-expo), background 0.25s ease;
}

.burger-menu-lines .line::before {
	transform: scaleX(0);
	transform-origin: left;
}

.burger-menu-lines .line::after {
	transform-origin: right;
	transition-delay: 0.25s;
}

.burger-menu-lines .line:nth-child(1)::before { transition-delay: 0s; }
.burger-menu-lines .line:nth-child(1)::after { transition-delay: 0.25s; }
.burger-menu-lines .line:nth-child(2)::before { transition-delay: 0.1s; }
.burger-menu-lines .line:nth-child(2)::after { transition-delay: 0.35s; }
.burger-menu-lines .line:nth-child(3)::before { transition-delay: 0.2s; }
.burger-menu-lines .line:nth-child(3)::after { transition-delay: 0.45s; }

/* Hover wipe animation (icon hover color optional via --bm-burger-line-hover) */
.bm-icon-hover-on.btn-activate-flyout-tgt:hover .burger-menu-lines .line::before,
.bm-icon-hover-on.btn-activate-flyout-tgt:hover .burger-menu-lines .line::after {
	background: var(--bm-burger-line-hover, var(--bm-btn-hover, #d48c2c));
}

.bm-icon-hover-on.btn-activate-flyout-tgt:hover .line::before,
.btn-activate-flyout-tgt:hover .line::before {
	transform: scaleX(1);
	transition-delay: 0.25s;
}

.btn-activate-flyout-tgt:hover .line::after {
	transform: scaleX(0);
	transition-delay: 0s;
}

.btn-activate-flyout-tgt:hover .line:nth-child(1)::before { transition-delay: 0.25s; }
.btn-activate-flyout-tgt:hover .line:nth-child(1)::after { transition-delay: 0s; }
.btn-activate-flyout-tgt:hover .line:nth-child(2)::before { transition-delay: 0.35s; }
.btn-activate-flyout-tgt:hover .line:nth-child(2)::after { transition-delay: 0.1s; }
.btn-activate-flyout-tgt:hover .line:nth-child(3)::before { transition-delay: 0.45s; }
.btn-activate-flyout-tgt:hover .line:nth-child(3)::after { transition-delay: 0.2s; }

.burger-menu-close-icon {
	--close-icon-cross-width: 1.75rem;
	--close-icon-cross-height: 0.1rem;
	--close-icon-cross-color: var(--bm-burger-line, var(--bm-btn-color, #ffffff));
	--close-icon-cross-radius: 10px;
	--close-icon-cross-transition-time: 0.3s;
	--close-icon-cross-transition-delay: 0.1s;
	position: absolute;
	top: 50%;
	left: 50%;
	display: block;
	width: var(--close-icon-cross-width);
	height: var(--close-icon-cross-width);
	cursor: pointer;
	transform: translate(-50%, -50%) scale(0) rotate(-90deg);
	pointer-events: none;
	transition: var(--close-icon-cross-transition-time) var(--close-icon-cross-transition-delay);
}

.burger-menu-close-icon::before,
.burger-menu-close-icon::after {
	position: absolute;
	content: "";
	top: 50%;
	left: 50%;
	background: var(--close-icon-cross-color);
	border-radius: var(--close-icon-cross-radius);
	transform: translate(-50%, -50%) rotate(45deg);
	transition: background 0.25s ease;
}

.burger-menu-close-icon::before {
	width: 100%;
	height: var(--close-icon-cross-height);
}

.burger-menu-close-icon::after {
	width: var(--close-icon-cross-height);
	height: 100%;
}

/* Open: hide lines, show X (checkbox or class) */
#toggle:checked ~ .burger-menu .burger-menu-lines,
.bm-trigger.is-active .burger-menu-lines,
.bm-root.is-open .bm-trigger .burger-menu-lines {
	transform: scale(0) rotate(90deg);
}

#toggle:checked ~ .burger-menu .burger-menu-close-icon,
.bm-trigger.is-active .burger-menu-close-icon,
.bm-root.is-open .bm-trigger .burger-menu-close-icon {
	transform: translate(-50%, -50%) scale(1) rotate(0);
	pointer-events: auto;
}

.bm-trigger.is-active .burger-menu-close-icon:hover,
.bm-root.is-open .bm-trigger .burger-menu-close-icon:hover {
	transform: translate(-50%, -50%) scale(1) rotate(180deg);
}

.bm-icon-hover-on.bm-trigger.is-active:hover .burger-menu-close-icon::before,
.bm-icon-hover-on.bm-trigger.is-active:hover .burger-menu-close-icon::after {
	background: var(--bm-burger-line-hover, var(--bm-btn-hover, #d48c2c));
}

/* Style 1 — simpler 3 bars (no wipe) */
.bm-trigger.style-1 .burger-menu {
	width: 22px;
	height: 16px;
}

.bm-trigger.style-1 .burger-menu-lines {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 0;
}

.bm-trigger.style-1 .burger-menu-lines .line {
	width: 22px;
	height: 2px;
	background: var(--bm-burger-line, var(--bm-btn-color, #fff));
	border-radius: 1px;
}

.bm-trigger.style-1 .burger-menu-lines .line::before,
.bm-trigger.style-1 .burger-menu-lines .line::after {
	display: none;
}

.bm-trigger.style-1:hover .burger-menu-lines .line {
	background: var(--bm-burger-line, var(--bm-btn-color, #fff));
}

.bm-icon-hover-on.bm-trigger.style-1:hover .burger-menu-lines .line {
	background: var(--bm-burger-line-hover, var(--bm-btn-hover, #d48c2c));
}