/* mobile menu styles */

.mobile-menu-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.95);
    background-color: var(--color-bg);
    z-index: 9999;
    /*display: none;*/
    padding: 2ch 4ch;
    display: flex;
    justify-content: center;
    flex-flow: column;
    align-items: center;
    display: none;
}

.mobile-menu {
    width: 85vw;
}

/* base styles for the menu */
.mobile-menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* two-column layout for items with children */
.mobile-menu > .menu-item-has-children {
    display: flex;
    align-items: flex-start; /* top align link and sub-menu */
    gap: 1rem; /* space between left and right column */
    margin-bottom: 1rem; /* spacing between rows of parent items */
}

/* left column: parent link */
.mobile-menu > .menu-item-has-children > a {
    /*flex: 0 0 35%; /* fixed-ish width column on the left */
    text-decoration: none;
    font-weight: 600;
    width: 50%;
}

/* right column: sub menu list */
.mobile-menu > .menu-item-has-children > .sub-menu {
    /*flex: 1 1 auto;*/
    list-style: none;
    margin: 0;
    padding: 0;
}

/* styling for sub-menu items */

.mobile-menu > .menu-item-has-children > .sub-menu > li > a {
    text-decoration: none;
    display: block;
    width: 100%;
}

/* top-level items without children (like "Start") stay full width above/below */
.mobile-menu > li:not(.menu-item-has-children) {
    margin: 0 0 0.75rem;
    flex: 0 0 45%; /* fixed-ish width column on the left */
    font-weight: bold;
}

.mobile-nav a {
    color: var(--color-text);
    text-decoration: none;
    font-size: 75%;
    width: 100%;
    display: inline-block;
}

.mobile-menu li.menu-item:not(.sub-menu li) {
    padding-top: 2ch;
}

.mobile-nav li {
    align-items: center;
    padding: 0;
    margin: 0;
    display: flex;
}

.mobile-menu {
    display: flex;
    justify-content: center;
    flex-flow: column;
}

nav.mobile-nav {
    height: 100%;
    display: inline;
}

.mobile-menu-close {
    width: 100%;
    text-align: right;
    font-size: 75%;
}