/**
 * Recruitment pop-up — floating "Unemployed and talented?" card.
 *
 * Port of react-src/components/pop-up (ModalContainer/Wrapper/Text/Button).
 * Desktop-only, fixed bottom-right, slides in from the right on load.
 * (react-src had a `background: red` on the container that peeked behind the
 * card edges — dropped here, it read as a stray red border.)
 *
 * Rendered via wp_footer (inc/setup.php) outside #swup-main; enqueued
 * globally so Swup soft-nav onto the target page keeps it styled. The card
 * (not the container) carries the drag transform so it never fights the
 * container's slide-in keyframe. Close + snap-back drag live in
 * assets/js/recruit-popup.js.
 */

/* Mobile: react-src hides the pop-up entirely (`display: none`). */
.recruit-popup {
    display: none;
}

@media (min-width: 769px) {
    .recruit-popup {
        display: block;
        position: fixed;
        right: 10vw;
        bottom: 10vw;
        width: 22vw;
        z-index: 60;
        text-align: center;
        /* Draggable card: keep the text from highlighting mid-tug. */
        -webkit-user-select: none;
        user-select: none;
        /* Slide in from off-screen right after a beat, mirroring the
           framer-motion spring (delay 1.4s). `both` keeps the card parked
           off-screen until the delay elapses (no first-paint flash). */
        animation: recruit-popup-in 0.8s cubic-bezier(0.16, 1.1, 0.3, 1) 1.4s both;
    }
}

.recruit-popup__card {
    position: relative;
    background: #fff;
    border: 4px solid #000;
    border-bottom: none;
    padding: 5vw 1vw 7.3vw;
    text-transform: uppercase;
    /* Spring-back used when a drag is released (JS clears the inline
       transform; this transition animates the return). */
    transition: transform 0.45s cubic-bezier(0.26, 1.04, 0.54, 1);
    touch-action: none; /* let the drag handler own pointer gestures */
}

.recruit-popup__text {
    margin: 0;
    font-size: 2.1vw;
    line-height: 2.3vw;
    font-weight: 500;
}

.recruit-popup__close {
    position: absolute;
    top: 0.8vw;
    right: 0.8vw;
    width: 2vw;
    height: 2vw;
    padding: 0;
    border: 0;
    background: none;
    color: #000;
    cursor: pointer;
}

.recruit-popup__close svg {
    display: block;
    width: 100%;
    height: 100%;
}

.recruit-popup__button {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    background: #000;
    color: #fff;
    font-size: 1.2vw;
    line-height: 3vw;
    text-decoration: none;
    cursor: pointer;
}

@keyframes recruit-popup-in {
    from { transform: translateX(33vw); }
    to   { transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
    .recruit-popup {
        animation: none;
    }
    .recruit-popup__card {
        transition: none;
    }
}