/**
 * Slideout (off-canvas) menu — GeneratePress #generate-slideout-menu
 * Clean white shop menu that slides in from the left (mobile + desktop).
 * Submenus work as accordions using GeneratePress' native toggle
 * (aria-expanded on the link, .toggled-on fallback on the sub-menu).
 */

@media only screen and (min-width: 320px) {
    :root {
        --slideout-bg: #ffffff;
        --gp-slideout-width: min(85vw, 360px);
        --slideout-link-clr: var(--font-clr);
        --slideout-accent-clr: var(--header-link-hover-clr);
        --slideout-border-clr: var(--grey);
        --slideout-subitem-bg: #fafafa;
        --slideout-padding-x: 24px;
        --slideout-top-offset: 64px;
    }

    /* Panel: white background overrides the dark .main-navigation default */
    #generate-slideout-menu.slideout-navigation {
        width: var(--gp-slideout-width);
        max-width: 100%;
        background-color: var(--slideout-bg);
        color: var(--slideout-link-clr);
        box-shadow: 4px 0 24px rgba(0, 0, 0, 0.12);
    }

    #generate-slideout-menu .inside-navigation {
        width: 100%;
        max-width: 100%;
        padding: 0;
        flex-direction: column;
        height: 100%;;
    }

    /* Close button */
    #generate-slideout-menu .slideout-exit {
        position: absolute;
        top: 12px;
        right: 12px;
        padding: 10px;
        background: transparent;
        text-align: right;
        color: var(--slideout-link-clr);
        transition: color var(--transition-speed) var(--transition-timing-function);
    }

    #generate-slideout-menu .slideout-exit:hover {
        background: transparent;
        color: var(--slideout-accent-clr);
    }

    #generate-slideout-menu .slideout-exit .gp-icon {
        font-size: 22px;
    }

    /* Menu wrapper leaves room for the close button and scrolls if long */
    #generate-slideout-menu .main-nav {
        margin-top: var(--slideout-top-offset);
        max-height: calc(100vh - var(--slideout-top-offset));
        overflow-y: auto;
    }

    #generate-slideout-menu .main-nav .slideout-menu {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    /* Top-level items */
    #generate-slideout-menu .main-nav .slideout-menu > li {
        margin: 0;
        border-bottom: 1px solid var(--slideout-border-clr);
    }

    #generate-slideout-menu .main-nav .slideout-menu > li > a {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        padding: 16px var(--slideout-padding-x);
        font-size: 18px;
        line-height: 1.3;
        color: var(--slideout-link-clr);
        text-decoration: none;
        transition: color var(--transition-speed) var(--transition-timing-function);
    }

    #generate-slideout-menu .main-nav .slideout-menu > li > a:hover,
    #generate-slideout-menu .main-nav .slideout-menu > li.current-menu-item > a {
        color: var(--slideout-accent-clr);
    }

    /* Dropdown toggle (caret). GP rotates the svg on .sfHover (offside.css);
       we just add a transition so that rotation animates smoothly. */
    #generate-slideout-menu .dropdown-menu-toggle {
        display: inline-flex;
        align-items: center;
        padding-left: 12px;
    }

    #generate-slideout-menu .dropdown-menu-toggle .gp-icon svg {
        transition: transform var(--transition-speed) var(--transition-timing-function);
    }

    /* Sub-menus: GP Premium controls these with display:none/block (offside.css),
       which can't animate. We override display so the items stay rendered and
       animate max-height/opacity instead. Selector specificity must beat
       "#generate-slideout-menu.main-navigation ul ul". */
    #generate-slideout-menu.main-navigation .main-nav ul ul.sub-menu {
        display: block;
        margin: 0;
        padding: 0;
        list-style: none;
        background-color: var(--slideout-subitem-bg);
        max-height: 0;
        opacity: 0;
        overflow: hidden;
        transition: max-height var(--transition-speed) var(--transition-timing-function),
                    opacity var(--transition-speed) var(--transition-timing-function);
    }

    #generate-slideout-menu.main-navigation .main-nav ul ul.sub-menu.toggled-on {
        max-height: 1000px;
        opacity: 1;
    }

    #generate-slideout-menu .sub-menu li {
        margin: 0;
    }

    #generate-slideout-menu .sub-menu li a {
        display: block;
        padding: 12px var(--slideout-padding-x) 12px calc(var(--slideout-padding-x) + 16px);
        font-size: 15px;
        line-height: 1.3;
        color: var(--slideout-link-clr);
        text-decoration: none;
        transition: color var(--transition-speed) var(--transition-timing-function);
    }

    #generate-slideout-menu .sub-menu li a:hover,
    #generate-slideout-menu .sub-menu li.current-menu-item > a {
        color: var(--slideout-accent-clr);
    }

    /* Backdrop behind the panel */
    .slideout-overlay {
        background-color: rgba(0, 0, 0, 0.45);
    }
    /*Icons*/
    #generate-slideout-menu .main-nav .slideout-menu > li.menu-item-with-icon svg{
        height:24px;
        width:auto;
        margin:0;
    }
    #generate-slideout-menu .main-nav .slideout-menu > li.menu-item-with-icon > a {
        justify-content: flex-start;
        gap: 10px;
    }
    /*Extral links*/
    .off-canvas-extra-links{
        margin-top:auto;
        margin-bottom:20px;
        align-self:flex-start;
        margin-left:var(--slideout-padding-x);
    }
    .off-canvas-extra-links ul{
        display:flex;
        
    }
}