@import "common.css";
@import "multidoc.css";

#documenter .docs-sidebar ul.docs-menu .tocitem {
    padding: 0.3rem 0.5rem;
}

/*! do not display global search bar from MultiDocumenter in the nav menu */
#multi-page-nav .search {
    display: none!important;
}

/* Desktop behavior for Documenter header controlled by ct-header-classes */
@media screen and (min-width: 1056px) {
    #documenter .docs-main header.docs-navbar {
        transition: transform 0.35s ease-in-out !important;
        will-change: transform;
    }
    #documenter .docs-main header.docs-navbar.ct-header-visible {
        transform: translateY(0);
    }
    #documenter .docs-main header.docs-navbar.ct-header-hidden {
        transform: translateY(-100%);
    }
}

#multi-page-nav {
    background-color: #007fa2 !important;
    border-bottom: none !important;
}

nav.docs-sidebar {
    z-index: 1;
}

/* Sticky footer */
footer {
    display: flex !important;
    justify-content: center;
    color: #007fa2;
    margin-top: 0px;
    position: relative;
    z-index: 1;
}

* {
    margin: 0;
}

html, body {
    height: 100%;
}

#documenter {
    min-height: 100%;
    margin-bottom: -25px; /* equal to footer height */
}

#documenter:after {
    content: "";
    display: block;
}

.ct-footer {
    height: 25px; 
}

#documenter:after {
    height: 25px; 
}

/* SIDEBAR */
@media screen and (max-width: 1055px) {

    #documenter-article-toggle-button-sidebar {
        display: none;
    }

}

@media screen and (min-width: 1056px) {

    #documenter-article-toggle-button-sidebar {
        display: block; /* or inline-block, depending on your layout */
    }

    #documenter .docs-sidebar.hidden {
        left:-18rem!important;
    }

    #documenter .docs-main.sidebar-hidden {
        width:100%!important;
        max-width: 52rem!important;
        margin-left: 2rem!important;
        padding-right: 0rem!important;
    }
}

#documenter .docs-main header.docs-navbar .docs-sidebar-button {
    display: block!important;
}

/* Align Documenter header (burger) behavior with custom topbar on small screens */
@media screen and (max-width: 1055px) {
    /* When JS adds these classes, they override Headroom positioning */
    #documenter .docs-main header.docs-navbar.ct-header-visible {
        top: var(--navbar-height) !important;
    }
    #documenter .docs-main header.docs-navbar.ct-header-hidden {
        top: -100vh !important;
    }

    /* Staggered transitions: topbar first, then header (burger) */
    #multi-page-nav.smooth-show-hide {
        transition-property: transform !important;
        transition-duration: 0.25s !important; /* faster */
        transition-timing-function: ease-in-out !important;
        transition-delay: 0s !important; /* no delay for topbar */
        will-change: transform;
    }

    #documenter .docs-main header.docs-navbar {
        transition-property: top, box-shadow !important;
        transition-duration: 0.35s !important; /* slightly slower */
        transition-timing-function: ease-in-out !important;
        transition-delay: 0.08s !important; /* delay so it follows topbar */
        will-change: top;
    }
}

/* Fine-tune when the appearance originates from bottom of page */
@media screen and (max-width: 1055px) {
    html.ct-appear-bottom #multi-page-nav.smooth-show-hide {
        transition-duration: 0.30s !important; /* slightly longer */
        transition-delay: 0s !important;       /* keep topbar immediate */
    }

    html.ct-appear-bottom #documenter .docs-main header.docs-navbar {
        transition-duration: 0.50s !important; /* slightly longer */
        transition-delay: 0.0s !important;    /* less pronounced delay */
    }
}