/**
 * Custom Burger Menu Icon Styles
 * Giperplan Burger Icon Plugin
 */

/* Hide default SVG icon only for burger (open button) */
.wp-block-navigation__responsive-container-open svg {
    display: none;
}

/* Style for open button (burger icon) */
.wp-block-navigation__responsive-container-open {
    position: relative;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 500px) {
    .wp-block-navigation__responsive-container-open {
        width: 36px;
        height: 36px;
    }
}

/* Create burger icon with pseudo-element */
.wp-block-navigation__responsive-container-open::before {
    content: '';
    display: block;
    width: 43px;
    height: 43px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><line stroke="currentColor" stroke-width="2" stroke-miterlimit="10" x1="0" y1="21" x2="6" y2="21"/><line stroke="currentColor" stroke-width="2" stroke-miterlimit="10" x1="16" y1="21" x2="64" y2="21"/><line stroke="currentColor" stroke-width="2" stroke-miterlimit="10" x1="0" y1="33" x2="6" y2="33"/><line stroke="currentColor" stroke-width="2" stroke-miterlimit="10" x1="16" y1="33" x2="64" y2="33"/><line stroke="currentColor" stroke-width="2" stroke-miterlimit="10" x1="0" y1="45" x2="6" y2="45"/><line stroke="currentColor" stroke-width="2" stroke-miterlimit="10" x1="16" y1="45" x2="64" y2="45"/></svg>');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* Leave close button with default WordPress style */

/* Optional: Animation on hover */
.wp-block-navigation__responsive-container-open:hover::before {
    opacity: 0.7;
    transition: opacity 0.3s ease;
}