/**
 * SURGICAL MOBILE MENU POSITIONING FIX
 * 
 * This file contains the absolute minimal fix for the mobile menu positioning issue.
 * The nuclear mobile menu CSS is being overridden by other stylesheets, so this
 * provides a more targeted surgical fix using transforms.
 */

/* Force the mobile menu to the correct position on mobile devices */
@media (max-width: 768px) {
    /* SURGICAL FIX: Use transform to position menu correctly */
    .nav__menu {
        /* Base positioning from left edge */
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: auto !important;
        width: 280px !important;
        max-width: 280px !important;
        height: 100vh !important;
        z-index: 1005 !important;
        
        /* Hide by default - slide off right edge */
        transform: translateX(100vw) !important;
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }
    
    /* Show state - slide to correct position (right edge) */
    #nuclear-menu-toggle:checked ~ * .nav__menu,
    #nuclear-menu-toggle:checked ~ .mobile-menu-overlay ~ * .nav__menu,
    #nuclear-menu-toggle:checked ~ .mobile-menu-overlay ~ header .nav__menu,
    #nuclear-menu-toggle:checked ~ header .nav__menu,
    .nav__menu.active,
    .nav__menu.open,
    .nav__menu.is-open {
        /* Position exactly 95px from left = right edge in 375px viewport */
        transform: translateX(calc(100vw - 280px)) !important;
    }
}