/* Pure CSS Mobile Menu without JavaScript */
.menu-toggle {
    position: relative;
    z-index: 1001;
}

.menu-toggle span {
    position: relative;
}

/* The menu button acts as a checkbox */
.menu-toggle:before {
    content: "";
    position: absolute;
    top: -15px;
    left: -15px;
    right: -15px;
    bottom: -15px;
    cursor: pointer;
    z-index: 1000;
}

/* When the query parameter ?menu=open is present, show the menu */
body:has(.nav-links.active) .menu-toggle span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}

body:has(.nav-links.active) .menu-toggle span:nth-child(2) {
    opacity: 0;
}

body:has(.nav-links.active) .menu-toggle span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

.mobile-menu-links {
    position: absolute;
}

/* Create the appearance of the menu toggle behavior without JS */
#menu-open-link, #menu-close-link {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

/* Use CSS to make the menu links respond to toggle clicks through PHP URL parameters */
@media (max-width: 768px) {
    .menu-toggle:before {
        content: "";
    }
}