:root{
--size: 40px; /* button square size */
--bar-height: 3px; /* thickness of lines */
--bar-gap: 8px; /* spacing between bars */
--color: white; /* color of the bars */
--duration: 300ms; /* animation duration */
--easing: cubic-bezier(.2,.9,.3,1);
}

.hamburger {
position: relative;
--w: var(--size);
--h: var(--size);
width: var(--w);
height: var(--h);
display:inline-grid;
place-items:center;
background:transparent !important;
border:0;
padding:0.25rem;
cursor:pointer;
-webkit-tap-highlight-color: transparent;
}

/* .hamburger:focus{
outline: 3px solid #bde4ff;
outline-offset: 0px;
border-radius:8px;
} */


/* Wrapper for the 3 bars (we use <span>s) */
.hamburger__box{
position:relative;
width: calc(var(--w) - 1rem);
height: calc(var(--h) - 1rem);
display:block;
box-sizing:border-box;
}


.hamburger__bar{
position:absolute;
left:0;
right:0;
height: var(--bar-height);
background: var(--color);
border-radius: 999px;
transform-origin: center;
transition: transform var(--duration) var(--easing),
opacity var(--duration) var(--easing),
top var(--duration) var(--easing),
bottom var(--duration) var(--easing);
will-change: transform, opacity, top, bottom;
}


/* place the three bars */
.hamburger__bar--top{ top: calc(50% - var(--bar-gap)); }
.hamburger__bar--mid{ top: 50%; transform: translateY(-50%); }
.hamburger__bar--bot{ top: calc(50% + var(--bar-gap)); }


/* When toggled, apply transforms to morph into an X */
.hamburger[aria-expanded="true"] .hamburger__bar--top{
top: 50%; /* move to center */
transform: translateY(-50%) rotate(45deg);
}
.hamburger[aria-expanded="true"] .hamburger__bar--mid{
opacity: 0; /* fade out middle bar */
transform: translateX(-10px) scaleX(0.6);
}
.hamburger[aria-expanded="true"] .hamburger__bar--bot{
top: 50%;
transform: translateY(-50%) rotate(-45deg);
}


/* Respect user preference for reduced motion */
@media (prefers-reduced-motion: reduce){
.hamburger__bar{ transition: none; }
}


/* Optional: make the button larger on hover for clarity */
.hamburger:hover .hamburger__bar{ transform-origin:center; }


/* Small responsive tweak */
@media (max-width:420px){
:root{ --size:36px; --bar-gap:7px; }
}