/* SPCRR Mobile Menu Override - Force 130% Transform
 * This file MUST be loaded after all other stylesheets
 * Place in: /themes/inkwell-spcrr/css/menu-override.css
 */

/* Initial closed state - 130% off screen */
#offCanvas:not(.is-open),
#offCanvas.is-closed,
#offCanvas.position-right:not(.is-open),
.off-canvas.position-right:not(.is-open),
div#offCanvas.off-canvas.position-right:not(.is-open) {
    transform: translateX(130%) !important;
    -webkit-transform: translateX(130%) !important;
    -moz-transform: translateX(130%) !important;
    -ms-transform: translateX(130%) !important;
    -o-transform: translateX(130%) !important;
    right: 0 !important;
    left: auto !important;
}

/* Open state - visible */
#offCanvas.is-open,
#offCanvas.position-right.is-open,
.off-canvas.position-right.is-open,
div#offCanvas.off-canvas.position-right.is-open {
    transform: translateX(0) !important;
    -webkit-transform: translateX(0) !important;
    -moz-transform: translateX(0) !important;
    -ms-transform: translateX(0) !important;
    -o-transform: translateX(0) !important;
    position: fixed !important;
    right: 0.5rem !important;
    left: auto !important;
    top: calc(72px + 0.5rem) !important;
    width: 200px !important;
    max-width: 200px !important;
}

/* Override any Foundation transitions */
.off-canvas.is-transition-push.position-right:not(.is-open) {
    transform: translateX(130%) !important;
}

/* Mobile menu background green */
@media screen and (max-width: 1299px) {
    #offCanvas {
        background-color: #2e613b !important;
    }
    
    #offCanvas ul.menu {
        background-color: #2e613b !important;
    }
    
    /* Primary menu items - normal spacing */
    #offCanvas > ul.menu > li > a,
    #offCanvas > .vertical.menu > li > a,
    #offCanvas > .menu > li > a {
        color: #ffffff !important;
        padding-top: 0.625rem !important;
        padding-bottom: 0.625rem !important;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
        font-weight: 500 !important;
        position: relative !important;
    }
    
    #offCanvas ul.menu li a:hover {
        background-color: rgba(255, 255, 255, 0.1) !important;
    }
    
    /* Add visual separator BEFORE primary items that follow submenus */
    #offCanvas ul.menu li.has-submenu + li:not(.submenu-item) > a::before,
    #offCanvas ul.menu ul.menu + li > a::before,
    #offCanvas .is-accordion-submenu + li > a::before {
        content: '' !important;
        display: block !important;
        position: absolute !important;
        top: -2px !important;
        left: 1rem !important;
        right: 1rem !important;
        height: 1px !important;
        background-color: rgba(255, 255, 255, 0.15) !important;
    }
    
    /* Submenu items - tighter spacing with indentation */
    #offCanvas ul.menu ul.menu li a,
    #offCanvas .menu.nested li a,
    #offCanvas .submenu li a,
    #offCanvas .is-accordion-submenu li a,
    #offCanvas ul.menu li.submenu-item a,
    #offCanvas .vertical.menu .vertical.menu a,
    #offCanvas .menu .is-dropdown-submenu-item a {
        padding-top: 0.375rem !important;
        padding-bottom: 0.375rem !important;
        padding-left: 2rem !important;
        padding-right: 1rem !important;
        font-weight: 400 !important;
        font-size: 0.9rem !important;
        color: rgba(255, 255, 255, 0.9) !important;
        position: relative !important;
    }
    
    /* Removed em-dash - just using indentation for hierarchy */
    
    /* Remove extra vertical spacing between menu levels */
    #offCanvas ul.menu ul.menu,
    #offCanvas .menu.nested,
    #offCanvas .submenu,
    #offCanvas .is-accordion-submenu {
        margin-top: 0 !important;
        margin-bottom: 0.25rem !important; /* Small gap after submenu group */
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
    
    /* First submenu item after primary - no extra top padding */
    #offCanvas ul.menu > li > ul.menu > li:first-child > a,
    #offCanvas .is-accordion-submenu > li:first-child > a,
    #offCanvas .menu.nested > li:first-child > a {
        padding-top: 0.25rem !important;
    }
    
    /* Last submenu item - add small bottom spacing */
    #offCanvas ul.menu > li > ul.menu > li:last-child,
    #offCanvas .is-accordion-submenu > li:last-child,
    #offCanvas .menu.nested > li:last-child {
        margin-bottom: 0.25rem !important;
    }
    
    /* Tighten up list item vertical spacing */
    #offCanvas ul.menu li {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
    
    /* Special handling for items with submenus */
    #offCanvas ul.menu li.has-submenu,
    #offCanvas ul.menu li.is-accordion-submenu-parent {
        margin-bottom: 0 !important;
    }
}

/* Ensure menu stays off-screen when closed */
body:not(.is-off-canvas-open) #offCanvas {
    transform: translateX(130%) !important;
}

/* Maximum specificity override */
html body div#offCanvas.off-canvas.position-right:not(.is-open) {
    transform: translateX(130%) !important;
}

/* Compact the overall menu container */
#offCanvas .menu,
#offCanvas .vertical.menu,
#offCanvas .accordion-menu {
    line-height: 1.3 !important;
}

/* Ensure Foundation dropdowns are treated as submenus in mobile */
@media screen and (max-width: 1299px) {
    #offCanvas .dropdown.menu .is-dropdown-submenu-item a {
        padding-left: 2rem !important;
    }
}