/**
 * Off-canvas menu: GeneratePress #generate-slideout-menu in overlay mode.
 * A white panel that slides in from the left on every screen size; submenus
 * open as accordions using GP's native toggle (aria-expanded on the link,
 * .toggled-on on the sub-menu).
 * Colors: --slideout-* in colors.css. Sizes below.
 */

:root {
    --gp-slideout-width: min(85vw, 360px);
    --slideout-padding-x: 24px;
    --slideout-top-offset: 64px;
}

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

/* Every link in the panel, including widgets such as .off-canvas-extra-links.
   The Customizer's off-canvas colors stay empty; GP then falls back to the
   main navigation text color for these. */
#generate-slideout-menu a {
    color: var(--slideout-link-clr);
}

#generate-slideout-menu a:hover {
    color: var(--slideout-accent-clr);
}

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

/* GP overlay mode centers the items; this menu is left aligned. */
#generate-slideout-menu.do-overlay .slideout-menu li,
#generate-slideout-menu.do-overlay .inside-navigation {
    text-align: left;
}

/* 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; only animate it. */
#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 toggles display, which cannot animate. Keep them
   rendered and animate max-height/opacity instead. 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-clr);
    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);
}

/* GP turns the header's menu toggle into a close icon while the panel is
   open. The panel has its own close button (and Esc or a click on the
   backdrop closes it), so the second close icon is hidden. */
.slide-opened .menu-toggle {
    visibility: hidden;
}

/* Backdrop behind the panel */
.slideout-overlay {
    background-color: rgba(0, 0, 0, 0.45);
}

/* Menu items with an inline svg icon (class menu-item-with-icon on the li) */
#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;
}

/* Extra links pinned to the bottom of the panel */
.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;
}