/**
 * Event Popup
 *
 * Responsive Figma-inspired promotional event popup.
 */


/* =========================================================
   Site Color Variables
   ========================================================= */

/*
 * FOFS is the default theme.
 *
 * The JavaScript should add:
 *
 *     event-popup-fofs
 *
 * or:
 *
 *     event-popup-foa
 *
 * to #event-popup.
 */

#event-popup {
    --ep-background: #ffffff;

    --ep-heading: #09274b;

    --ep-date-time: #3d5bec;

    --ep-date-label: #360065;

    --ep-button: #09274b;

    --ep-button-hover: #0d6efd;

    --ep-button-stroke: #360065;

    --ep-button-text: #ffffff;

    --ep-arrow: #33ff94;

    --ep-icon-stroke: #170430;

    --ep-frame: #a6a6a6;
}


/*
 * FOA theme.
 *
 * Only the colors that differ from FOFS
 * need to be overridden here.
 */
#event-popup.event-popup-foa {

    --ep-heading: #194f57;

    --ep-button: #18464d;

    --ep-button-hover: #0d6efd;
}


/* =========================================================
   Main Popup
   ========================================================= */

#event-popup {
    position: fixed;

    right: clamp(16px, 1.7vw, 24px);
    bottom: clamp(16px, 1.7vw, 24px);

    /*
     * Responsive desktop width.
     *
     * Smaller laptop screens get a smaller popup,
     * while larger monitors can still reach 560px.
     */
    width: clamp(440px, 28vw, 560px);

    max-width: calc(100vw - 32px);

    box-sizing: border-box;

    /*
     * Responsive padding.
     */
    padding:
        clamp(32px, 2.2vw, 42px)
        clamp(190px, 12.5vw, 250px)
        clamp(32px, 2.2vw, 42px)
        clamp(28px, 2vw, 36px);

    background-color: var(--ep-background);

    /*
     * Background artwork from the WordPress
     * Background Image field.
     */
    background-repeat: no-repeat;
    background-position: right center;
    background-size: 43% 100%;

    color: var(--ep-heading);

    border-radius: clamp(16px, 1.5vw, 24px);

    box-shadow:
        0 8px 30px rgba(0, 0, 0, 0.20),
        0 2px 10px rgba(0, 0, 0, 0.10);

    z-index: 99999;

    cursor: pointer;

    font-family:
        'Montserrat',
        Arial,
        sans-serif;

    overflow: hidden;

    /*
     * Rise gradually from the bottom.
     */
    animation:
        event-popup-rise
        1.2s
        ease-out
        forwards;
}


/* =========================================================
   Entrance Animation
   ========================================================= */

@keyframes event-popup-rise {

    from {
        opacity: 0;
        transform: translateY(100%);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* =========================================================
   Closing Animation
   ========================================================= */

#event-popup.event-popup-closing {
    animation:
        event-popup-close
        0.25s
        ease-in
        forwards;
}


@keyframes event-popup-close {

    from {
        opacity: 1;
        transform: translateY(0);
    }

    to {
        opacity: 0;
        transform: translateY(20px);
    }
}


/* =========================================================
   Close Button
   ========================================================= */

#event-popup-close {
    position: absolute;

    top: clamp(10px, 1vw, 14px);
    right: clamp(12px, 1.2vw, 17px);

    width: clamp(32px, 2.5vw, 36px);
    height: clamp(32px, 2.5vw, 36px);

    padding: 0;
    margin: 0;

    background: transparent;

    border: 0;

    color: var(--ep-icon-stroke);

    font-family: Arial, sans-serif;

    font-size: clamp(32px, 2.6vw, 38px);
    font-weight: 300;

    line-height: 32px;

    text-align: center;

    cursor: pointer;

    z-index: 10;

    transition:
        opacity 0.2s ease,
        transform 0.2s ease;
}


#event-popup-close:hover {
    opacity: 0.75;

    transform: scale(1.05);
}


#event-popup-close:focus {
    outline: none;
}


#event-popup-close:focus-visible {
    outline:
        2px solid var(--ep-date-time);

    outline-offset:
        3px;

    border-radius:
        4px;
}


/* =========================================================
   Logo
   ========================================================= */

.ep-logo {
    display: flex;

    align-items: flex-start;

    margin:
        0 0 clamp(32px, 3vw, 45px);

    position: relative;

    z-index: 2;
}


.ep-logo img {
    display: block;

    width: auto;

    max-width: 100%;

    height: auto;

    /*
     * Logo scales with viewport.
     */
    max-height:
        clamp(52px, 3.3vw, 65px);

    object-fit: contain;

    object-position: left center;
}


/* =========================================================
   Body
   ========================================================= */

.ep-body {
    position: relative;

    z-index: 2;
}


/* =========================================================
   Event Title
   ========================================================= */

.ep-title {
    margin:
        0 0 clamp(22px, 2vw, 28px);

    padding: 0;

    color: var(--ep-heading);

    /*
     * Responsive typography.
     */
    font-size:
        clamp(21px, 1.25vw, 25px);

    font-weight: 600;

    line-height: 1.3;

    letter-spacing: -0.3px;
}


/* =========================================================
   Event Date
   ========================================================= */

.ep-date {
    margin:
        0 0 3px;

    padding: 0;

    color: var(--ep-date-time);

    font-size:
        clamp(14px, 0.8vw, 16px);

    font-weight: 600;

    line-height: 1.3;

    text-transform: uppercase;

    letter-spacing: 0;
}


/* =========================================================
   Event Time
   ========================================================= */

.ep-time {
    margin: 0;

    padding: 0;

    color: var(--ep-date-time);

    font-size:
        clamp(14px, 0.8vw, 16px);

    font-weight: 600;

    line-height: 1.3;

    text-transform: uppercase;

    letter-spacing: 0;
}


/* =========================================================
   CTA Button
   ========================================================= */

.ep-cta {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap:
        clamp(12px, 0.9vw, 15px);

    margin-top:
        clamp(22px, 2vw, 28px);

    min-width:
        clamp(170px, 10.5vw, 190px);

    min-height:
        clamp(50px, 3.1vw, 56px);

    padding:
        0 clamp(18px, 1.4vw, 22px);

    box-sizing: border-box;

    background-color: var(--ep-button);

    color: var(--ep-button-text);

    /*
     * Figma specifies a deep-purple stroke.
     */
    border:
        1px solid var(--ep-button-stroke);

    border-radius: 999px;

    font-size:
        clamp(14px, 0.8vw, 16px);

    font-weight: 500;

    line-height: 1;

    text-decoration: none;

    transition:
        background-color 0.2s ease;
}


.ep-cta:hover {
    background-color: var(--ep-button-hover);

    color: var(--ep-button-text);

    text-decoration: none;
}


.ep-cta:focus {
    color: var(--ep-button-text);

    text-decoration: none;
}


.ep-cta:focus-visible {
    outline:
        3px solid var(--ep-date-time);

    outline-offset:
        4px;
}


/* =========================================================
   CTA Text
   ========================================================= */

.ep-cta-text {
    display: inline-block;
}


/* =========================================================
   CTA Arrow
   ========================================================= */

.ep-cta-arrow {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    width: 24px;
    height: 24px;

    color: var(--ep-arrow);

    font-family: Arial, sans-serif;

    font-size:
        clamp(25px, 2vw, 29px);

    font-weight: 400;

    line-height: 24px;

    /*
     * Compensate for the visual baseline
     * of the arrow glyph.
     */
    transform:
        translateY(-1px);

}


/* =========================================================
   Background Image
   ========================================================= */

#event-popup:not(.event-popup-has-background) {
    background-image: none;
}


/* =========================================================
   Smaller Desktop / Large Laptop
   ========================================================= */

/*
 * This specifically handles laptops where the viewport
 * is smaller than a typical 27" monitor.
 */
@media (max-width: 1200px) and (min-width: 901px) {

    #event-popup {

        /*
         * Prevent the popup from becoming too dominant
         * on smaller laptop viewports.
         */
        width:
            clamp(420px, 42vw, 500px);

        padding:
            32px
            clamp(175px, 18vw, 215px)
            32px
            30px;

        background-size:
            42% 100%;
    }


    .ep-logo {
        margin-bottom:
            34px;
    }


    .ep-logo img {
        max-height:
            56px;
    }


    .ep-title {
        font-size:
            22px;

        margin-bottom:
            22px;
    }


    .ep-date,
    .ep-time {
        font-size:
            14px;
    }


    .ep-cta {
        min-height:
            52px;

        min-width:
            175px;

        font-size:
            14px;
    }
}


/* =========================================================
   Tablet
   ========================================================= */

@media (max-width: 900px) {

    #event-popup {

        width:
            min(500px, calc(100vw - 32px));

        padding:
            36px
            215px
            36px
            30px;

        background-size:
            42% 100%;
    }


    .ep-logo {
        margin-bottom:
            38px;
    }


    .ep-logo img {
        max-height:
            58px;
    }


    .ep-title {
        font-size:
            23px;

        margin-bottom:
            24px;
    }


    .ep-date,
    .ep-time {
        font-size:
            15px;
    }


    .ep-cta {
        min-height:
            52px;

        min-width:
            175px;

        font-size:
            15px;
    }
}


/* =========================================================
   Mobile
   ========================================================= */

@media (max-width: 600px) {

    #event-popup {

        right: 12px;
        bottom: 12px;

        width:
            calc(100vw - 24px);

        max-width:
            calc(100vw - 24px);

        padding:
            35px 28px 28px;

        /*
         * Remove the background artwork on mobile.
         *
         * The background image is applied through
         * JavaScript as an inline style, so !important
         * is required to override it.
         */
        background-image:
            none !important;

        border-radius:
            20px;
    }


    #event-popup-close {

        top:
            12px;

        right:
            12px;

        width:
            34px;

        height:
            34px;

        font-size:
            36px;

        line-height:
            30px;
    }


    .ep-logo {

        margin-bottom:
            42px;

        padding-right:
            60px;
    }


    .ep-logo img {

        max-height:
            58px;

        max-width:
            100%;
    }


    .ep-title {

        margin-bottom:
            24px;

        padding-right:
            40px;

        font-size:
            22px;

        line-height:
            1.3;
    }


    .ep-date,
    .ep-time {

        padding-right:
            35px;

        font-size:
            14px;

        line-height:
            1.45;
    }


    .ep-cta {

        min-height:
            54px;

        min-width:
            180px;

        margin-top:
            26px;

        padding:
            0 20px;

        gap:
            13px;

        font-size:
            15px;
    }


    .ep-cta-arrow {
        font-size:
            28px;
    }
}


/* =========================================================
   Small Mobile
   ========================================================= */

@media (max-width: 400px) {

    #event-popup {

        padding:
            32px 22px 26px;

        /*
         * Background image remains disabled
         * because the max-width: 600px rule above
         * already removes it.
         */
        background-image:
            none !important;
    }


    .ep-logo {

        margin-bottom:
            36px;
    }


    .ep-logo img {

        max-height:
            52px;
    }


    .ep-title {

        font-size:
            20px;

        margin-bottom:
            22px;
    }


    .ep-date,
    .ep-time {

        font-size:
            13px;
    }


    .ep-cta {

        min-width:
            165px;

        min-height:
            52px;

        font-size:
            14px;
    }


    .ep-cta-arrow {

        font-size:
            26px;
    }
}


/* =========================================================
   Reduced Motion
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    #event-popup {
        animation: none;
    }


    #event-popup.event-popup-closing {
        animation: none;
    }


    .ep-cta {
        transition: none;
    }


    .ep-cta-arrow {
        transition: none;
    }
}