/*
 * The slide-out menu the bar's three lines open (seminar/_slide-menu), as the
 * Grand Conference template has it: the page behind blurs, a white panel comes
 * in from the right with the menu set large, the accounts under it, and a
 * round accent button to close.
 *
 * Loaded by layouts/seminar on every seminar page. It is the only menu on a
 * narrow screen too, so the theme's own mobile drawer is left shut.
 */

/* the theme's drawer and its icon give way to this one, at every width */
#mobile_nav_icon,
.mobile_menu_wrapper,
#close_mobile_menu { display: none !important; }

/* ---------- the three lines in the bar ---------- */

.wb-burger {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    vertical-align: middle;
}

.wb-burger span {
    display: block;
    width: 24px;
    height: 2px;
    margin: 0 auto;
    border-radius: 2px;
    background: #FFFFFF;
    transition: background-color 0.25s, transform 0.25s;
}

/* solid bar: dark lines, as the menu links go dark there */
.top_bar.wb-bar.is-solid .wb-burger span { background: #222222; }

.wb-burger:hover span { background: var(--wb-accent); }

/* ---------- the page behind ---------- */

.wb-slide-veil {
    position: fixed;
    inset: 0;
    z-index: 9998;
    background: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s, visibility 0.35s;
}

body.wb-slide-open .wb-slide-veil { opacity: 1; visibility: visible; }
body.wb-slide-open { overflow: hidden; }

/* ---------- the panel ---------- */

.wb-slide {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    width: min(420px, 88vw);
    height: 100%;
    padding: 90px 50px 40px;
    overflow-y: auto;
    background: #FFFFFF;
    box-shadow: -20px 0 60px rgba(0, 0, 0, 0.12);
    transform: translateX(100%);
    visibility: hidden;
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.4s;
}

body.wb-slide-open .wb-slide { transform: translateX(0); visibility: visible; }

.wb-slide-close {
    position: absolute;
    top: 28px;
    right: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--wb-accent);
    color: #FFFFFF;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.25s, transform 0.25s;
}

.wb-slide-close:hover { background: var(--wb-deep); transform: rotate(90deg); }

/* ---------- the links ---------- */

.wb-slide-nav { margin: 0; padding: 0; list-style: none; }

.wb-slide-nav > li { margin-bottom: 26px; }

.wb-slide-nav > li > a {
    color: #111111;
    font-family: 'Poppins', Arial, sans-serif;
    font-size: 30px;
    font-weight: 700;
    line-height: 1.2;
    transition: color 0.25s;
}

.wb-slide-nav > li > a:hover,
.wb-slide-nav > li.is-here > a { color: var(--wb-accent); }

.wb-slide-sub { margin: 14px 0 0; padding: 0 0 0 2px; list-style: none; }

.wb-slide-sub li { margin-bottom: 10px; }

.wb-slide-sub a {
    color: #777777;
    font-family: 'Work Sans', Arial, sans-serif;
    font-size: 16px;
}

.wb-slide-sub a:hover,
.wb-slide-sub li.is-here a { color: var(--wb-accent); }

/* ---------- the foot of the panel ---------- */

.wb-slide-foot { margin-top: auto; padding-top: 40px; }

.wb-slide-socials { display: flex; flex-wrap: wrap; gap: 22px; }

.wb-slide-socials a {
    color: #111111;
    font-size: 18px;
    transition: color 0.25s;
}

.wb-slide-socials a:hover { color: var(--wb-accent); }

.wb-slide-register {
    display: inline-block;
    margin-top: 28px;
}

/*
 * Below 1000px the bar's desktop rules (ibrothers.css) stop holding and the
 * theme's own script decided what the menu did — and it opened the drawer this
 * panel replaces. So the line is drawn here instead: the bar keeps the logo,
 * the Register button and the three lines, and this panel is the menu.
 *
 * This 999px and the 1000px of ibrothers.css's `@media (min-width: 1000px)`
 * are one pair: move one and the other has to move with it, or the band
 * between them shows neither the inline links nor a bar meant for them.
 */
@media (max-width: 999px) {
    .wb-bar #menu_wrapper #main_menu { display: none !important; }
}

@media (max-width: 767px) {
    .wb-slide { width: 100%; padding: 80px 30px 30px; }
    .wb-slide-close { right: 24px; }
    .wb-slide-nav > li > a { font-size: 25px; }
}