/* Desktop Layout Stylesheet - Overrides mobile-first design for larger screens */

/* Hide symbol bar and bottom nav when menu is visible */
.menu:not(.hidden) {
    /* When menu is visible, hide other UI elements */
}

.menu:not(.hidden) + * #symbol-bar,
.menu:not(.hidden) + * .bottom-nav,
#wrapper:has(.menu:not(.hidden)) #symbol-bar,
#wrapper:has(.menu:not(.hidden)) .bottom-nav {
    display: none !important;
}

/* Medium desktop layout - applies to screens 1024px and wider */
@media (min-width: 1024px) and (min-height: 500px) {
    #symbol-bar {
        flex-direction: column;
        width: max-content;
        position: fixed !important;
        max-height: 260px;
        left: calc(50% + 220px);
        /* transform: translatex(-50%); */
        justify-content: flex-start;
        align-items: center;
        margin: 0px;

    }

    .bottom-nav {
        flex-direction: column;
        width: min-content;
        position: fixed !important;
        height: min-content;
        left: unset;
        right: unset;
        top: unset;
        bottom: unset;
        right: calc(50% + 250px);
        transform: translatex(50%);
    }

}