/* ================================================
   Greenclay Hamburger Menu Component
   gc.hamburger.css

   Animated hamburger-to-X menu icon for mobile navigation.
   Customize with CSS variables on the element.
   ================================================ */

.hamburger-menu {
    /* Customizable properties */
    --hm-bar-width: 25px;
    --hm-bar-height: 2px;
    --hm-bar-gap: 6px;
    --hm-bar-color: #fff;
    --hm-transition: 0.3s ease;

    display: none;
    flex-direction: column;
    gap: var(--hm-bar-gap);
    cursor: pointer;
    padding: 10px;
}

.hamburger-menu span {
    width: var(--hm-bar-width);
    height: var(--hm-bar-height);
    background-color: var(--hm-bar-color);
    transition: all var(--hm-transition);
    transform-origin: center;
}

.hamburger-menu.active span:nth-child(1) {
    transform: translateY(calc(var(--hm-bar-height) + var(--hm-bar-gap))) rotate(45deg);
}

.hamburger-menu.active span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}

.hamburger-menu.active span:nth-child(3) {
    transform: translateY(calc(-1 * (var(--hm-bar-height) + var(--hm-bar-gap)))) rotate(-45deg);
}