/* Why Join Us - Tab & Drawer */

.wju-widget {
    --wju-orange: #f96302;
    font-family: "Helvetica Neue LT Roman";
    position: relative;
    z-index: 99999999929;
}

/* Tab: offscreen until activated */
.wju-tab {
    position: fixed;
    right: -160px;
    top: clamp(165px, 19vh, 210px);
    z-index: 10000;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    background: var(--wju-orange);
    color: #fff;
    border: 0;
    border-radius: 0 6px 6px 0;
    padding: 16px 10px;
    font-size: 16px;
    font-weight: 400;
    /* font-family: "Helvetica Neue LT Bold"; */
    font-family: "Helvetica Neue LT Medium";
    cursor: pointer;
    visibility: hidden;
    transition: right .4s cubic-bezier(.2, .75, .2, 1), visibility 0s linear .4s, background .2s ease, color .2s ease;
}

.wju-widget.wju-tab-visible:not(.wju-open) .wju-tab {
    right: 0;
    visibility: visible;
    transition: right .4s cubic-bezier(.2, .75, .2, 1), visibility 0s, background .2s ease, color .2s ease;
}

.wju-tab:hover {
    background: #272727;
    color: #fff;
    text-decoration: none;
}

.wju-tab:focus-visible,
.wju-close:focus-visible,
.wju-panel a:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 3px;
}

/* Drawer: offscreen until activated */
.wju-panel {
    position: fixed;
    right: calc(-1 * (380px + 45px));
    top: 10px;
    width: min(380px, calc(100vw - 24px));
    max-height: calc(100dvh - 24px);
    overflow-y: auto;
    overscroll-behavior: contain;
    color: #fff;
    background: #262626 url('./why-join-us-tab.webp') center center/cover no-repeat;
    box-shadow: -12px 12px 30px rgba(0, 0, 0, .48), 0 0 8px rgba(0, 0, 0, .22);
    transform: none;
    visibility: hidden;
    transition: right .45s cubic-bezier(.2, .75, .2, 1), visibility 0s linear .45s;
    z-index: 9999;
}

.wju-widget.wju-open .wju-panel {
    right: 10px;
    visibility: visible;
    transition: right .45s cubic-bezier(.2, .75, .2, 1), visibility 0s;
}

.wju-content {
    padding: 42px 36px;
    text-align: left;
}

.wju-content h2 {
    font-size: 38px;
    line-height: 1.1;
    color: var(--wju-orange);
    margin: 0 0 3px 0;
    font-family: "Helvetica Neue LT Heavy Condensed";
    font-weight: 400;
    letter-spacing: -.5px;
}
.wju-content > p {
    font-size: 16px;
    line-height: 1.5;
    margin: 0 0 24px;
    font-family: "Helvetica Neue LT Roman";
}
.wju-content section {
    margin: 0 0 34px;
    padding-left: 52px;
}
.wju-content section:last-child {
    margin: 0;
}
.wju-content h3 {
    position: relative;
    font-size: 30px;
    line-height: 1.1;
    margin: 0 0 6px;
    font-family: "Helvetica Neue LT Heavy Condensed";
    color: #fff;
}
.wju-content h3 span {
    position: absolute;
    left: -52px;
}
.wju-content section p {
    font-size: 15px;
    line-height: 1.55;
    margin: 0 0 14px;
    font-family: "Helvetica Neue LT Roman";
}
.wju-content section a {
    color: #fff;
    text-decoration: none;
    text-underline-offset: 3px;
    font-size: 16px;
    font-family: "Helvetica Neue LT Medium";
    font-weight: 400;
    -webkit-transition: all .2s ease-out;
    -moz-transition: all .2s ease-out;
    transition: all .2s ease-out;
}
.wju-content section a:hover {
    color: var(--wju-orange);
}
.wju-content section a span.arrow {
    color: var(--wju-orange);
    margin-left: 5px;
    font-size: 12px;
    -webkit-transition: all .2s ease-out;
    -moz-transition: all .2s ease-out;
    transition: all .2s ease-out;
}
.wju-content section a:hover span.arrow {
    margin-left: 8px;
}
.wju-content section a span.line {
    border-bottom: 1px solid var(--wju-orange);
    padding: 0 0 2px 0;
    -webkit-transition: all .2s ease-out;
    -moz-transition: all .2s ease-out;
    transition: all .2s ease-out;
}
.wju-content section a:hover span.line {
    border-bottom: 1px solid #fff;
}
.wju-close {
    position: absolute;
    right: 20px;
    top: 20px;
    background: transparent;
    color: #fff;
    width: 22px;
    height: 22px;
    line-height: 15px;
    padding: 0;
    border-radius: 50%;
    font-size: 22px;
    cursor: pointer;
    border: 0 !important;
    z-index: 1;
    -webkit-transition: all .2s ease-out;
    -moz-transition: all .2s ease-out;
    transition: all .2s ease-out;
}
.wju-close:hover {
    color: var(--wju-orange);
}
@media (max-width: 600px) {
    .wju-tab {
        top: 15vh;
    }
    .wju-panel {
        top: 12px;
        max-height: calc(100dvh - 24px);
        width: min(360px, calc(100vw - 16px));
    }
    .wju-content {
        padding: 29px 23px 28px 26px;
    }
    .wju-content section {
        margin: 0 0 24px;
    }
}

/*@media (prefers-reduced-motion: reduce) {*/
/*    .wju-panel,*/
/*    .wju-widget.wju-open .wju-panel,*/
/*    .wju-tab,*/
/*    .wju-widget.wju-tab-visible:not(.wju-open) .wju-tab {*/
/*        transition: none;*/
/*    }*/
/*}*/