/* FSR navigation-rail. */

#md-fsr-theme-nav.md-fsr-rail-nav {
    position: fixed;
    top: 118px;
    left: 12px;
    z-index: 10020;
}

#md-fsr-theme-nav.md-fsr-rail-nav summary {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 52px;
    min-height: 148px;
    padding: 13px 6px;
    border: 2px solid var(--md-fsr-accent,#bcd99f);
    border-radius: 8px;
    background: var(--md-fsr-foot-bg,#132b21);
    color: var(--md-fsr-foot-text,#fff);
    font: 800 11px/1.2 system-ui,sans-serif;
    letter-spacing: .12em;
    text-transform: uppercase;
    writing-mode: vertical-rl;
    list-style: none;
    box-shadow: 0 10px 32px rgba(0,0,0,.2);
}

#md-fsr-theme-nav.md-fsr-rail-nav summary::-webkit-details-marker {
    display: none;
}

#md-fsr-theme-nav.md-fsr-rail-nav .md-fsr-next-panel {
    position: fixed;
    top: 118px;
    left: 75px;
    width: min(390px,calc(100vw - 88px));
    max-height: calc(100dvh - 130px);
    overflow-y: auto;
    padding: 30px;
    border-left: 5px solid var(--md-fsr-accent,#bcd99f);
    background: var(--md-fsr-foot-bg,#132b21);
    color: var(--md-fsr-foot-text,#fff);
    box-shadow: 0 24px 58px rgba(0,0,0,.24);
}

#md-fsr-theme-nav.md-fsr-rail-nav .md-fsr-next-links {
    grid-template-columns: minmax(0,1fr);
}

@media (max-width: 760px) {
#md-fsr-theme-nav.md-fsr-rail-nav {
        position: relative;
        top: auto;
        left: auto;
        margin-left: auto;
    }

#md-fsr-theme-nav.md-fsr-rail-nav summary {
        width: auto;
        min-height: 46px;
        flex-direction: row;
        writing-mode: horizontal-tb;
        padding: 10px 14px;
        gap: 8px;
    }

#md-fsr-theme-nav.md-fsr-rail-nav .md-fsr-next-panel {
        position: absolute;
        top: calc(100% + 12px);
        right: 0;
        left: auto;
        width: min(390px,calc(100vw - 28px));
        max-height: 70vh;
        padding: 20px;
    }
}

@media (hover: hover) {
#md-fsr-theme-nav.md-fsr-rail-nav summary:hover {
        transform: translateX(4px);
        box-shadow: 0 13px 34px rgba(0,0,0,.27);
    }
}

#md-fsr-theme-nav.md-fsr-rail-nav
details[open] > summary {
    border-color: var(--md-fsr-head-text,#fff);
}

#md-fsr-theme-nav.md-fsr-rail-nav
.md-fsr-next-links a {
    transition:
        color .25s ease,
        padding-left .25s ease,
        background-color .25s ease;
}

@media (hover: hover) {
#md-fsr-theme-nav.md-fsr-rail-nav
    .md-fsr-next-links a:hover {
        padding-left: 14px;
        background-color: color-mix(
            in srgb,
            var(--md-fsr-accent, #d4ff31) 12%,
            transparent
        );
        box-shadow: inset 3px 0 0
            var(--md-fsr-accent, #d4ff31);
    }
}


/* Rail: keep the site header visible while navigation is open */

body.md-fsr-layout-rail.md-fsr-next-locked {
    overflow: visible !important;
}

body.md-fsr-layout-rail.md-fsr-next-locked .site-header {
    position: sticky !important;
    top: var(--wp-admin--admin-bar--height, 0px) !important;
    z-index: 10030 !important;
}