/**
 * BS Popup — popup.css
 * Child theme: /wp-popup/popup.css
 *
 * All colors are driven by CSS custom properties injected inline per-popup
 * from popup-manager.php, so the palette is fully isolated per instance.
 *
 * Custom properties available (set inline on each .wp-popup element):
 *   --wp-popup-bg           : popup panel background (rgba, supports opacity)
 *   --wp-popup-accent       : accent / CTA color
 *   --wp-popup-text         : primary text color
 *   --wp-popup-text-light   : secondary / muted text
 *   --wp-popup-close        : close icon default color
 *   --wp-popup-close-hover  : close icon hover color
 *   --wp-popup-overlay      : modal backdrop color (modal mode only)
 *
 * Additional design tokens you can override globally:
 */
:root {
    --wp-popup-radius       : 12px;
    --wp-popup-shadow       : 0 24px 64px rgba(0, 0, 0, 0.22), 0 4px 16px rgba(0, 0, 0, 0.12);
    --wp-popup-close-size   : 44px;    /* tap-target size of close button */
    --wp-popup-close-icon   : 24px;    /* visual size of the SVG icon */
    --wp-popup-speed        : 280ms;
    --wp-popup-ease         : cubic-bezier(0.34, 1.20, 0.64, 1); /* slight spring */
    --wp-popup-max-width    : 620px;
    --wp-popup-padding      : clamp(24px, 5vw, 48px);
    --wp-popup-pin-bottom   : 24px;    /* gap from bottom of viewport when pinned */
    --wp-popup-pin-width    : min(560px, calc(100vw - 32px)); /* pinned width */
    --wp-popup-toolbar-gap  : 8px;
    --wp-popup-z            : 99990;
}


/* ─────────────────────────────────────────────────────────────────────────────
   SHARED BASE
   ───────────────────────────────────────────────────────────────────────────── */

.wp-popup {
    box-sizing: border-box;
}

.wp-popup *,
.wp-popup *::before,
.wp-popup *::after {
    box-sizing: inherit;
}

.wp-popup__window {
    background    : var(--wp-popup-bg, #fff);
    border-radius : var(--wp-popup-radius);
    box-shadow    : var(--wp-popup-shadow);
    color         : var(--wp-popup-text, #111);
    position      : relative;
    width         : 100%;
}

.wp-popup__body {
    padding : var(--wp-popup-padding);
}

/* Close button shared styles */
.wp-popup__close,
.wp-popup__unpin {
    background    : none;
    border        : none;
    cursor        : pointer;
    padding       : 0;
    display       : flex;
    align-items   : center;
    justify-content: center;
    color         : var(--wp-popup-close, #111);
    width         : var(--wp-popup-close-size);
    height        : var(--wp-popup-close-size);
    border-radius : 50%;
    transition    : color var(--wp-popup-speed) ease,
                    background var(--wp-popup-speed) ease,
                    transform 150ms ease;
    flex-shrink   : 0;
}

.wp-popup__close:hover,
.wp-popup__unpin:hover {
    color      : var(--wp-popup-close-hover, #c00);
    background : rgba(0, 0, 0, 0.06);
}

.wp-popup__close:active,
.wp-popup__unpin:active {
    transform : scale(0.90);
}

.wp-popup__close svg,
.wp-popup__unpin svg {
    width  : var(--wp-popup-close-icon);
    height : var(--wp-popup-close-icon);
    display: block;
}




/* Placeholder form styles (remove when Bloomerang is live) */
.wp-popup__form-placeholder {
    border        : 2px dashed var(--wp-popup-accent, #333);
    border-radius : calc(var(--wp-popup-radius) - 4px);
    padding       : 32px 24px;
    text-align    : center;
    opacity       : 0.7;
}

.wp-popup__form-label {
    font-size   : 1rem;
    font-weight : 600;
    color       : var(--wp-popup-text, #111);
    margin      : 0 0 8px;
}

.wp-popup__form-note {
    font-size : 0.825rem;
    color     : var(--wp-popup-text-light, #666);
    margin    : 0;
}

.wp-popup__form-note code {
    background    : rgba(0,0,0,0.08);
    border-radius : 3px;
    padding       : 1px 4px;
    font-size     : 0.8em;
}




/* ─────────────────────────────────────────────────────────────────────────────
   MODE: MODAL
   Full-screen overlay. Triggered by JS after delay.
   ───────────────────────────────────────────────────────────────────────────── */

.wp-popup--modal {
    position   : fixed;
    inset      : 0;
    z-index    : var(--wp-popup-z);
    display    : flex;
    align-items: center;
    justify-content: center;
    padding    : 16px;
    /* Visibility toggled by JS via [hidden] attribute + animation class */
}

/* The [hidden] attribute collapses the element — we override display but keep it
   visually hidden until the enter animation fires */
.wp-popup--modal[hidden] {
    display    : flex !important; /* must override [hidden] to animate out too */
    visibility : hidden;
    pointer-events: none;
    opacity    : 0;
}

.wp-popup--modal:not([hidden]) {
    visibility    : visible;
    pointer-events: auto;
}

/* Overlay backdrop */
.wp-popup__overlay {
    position   : absolute;
    inset      : 0;
    background : var(--wp-popup-overlay, rgba(0,0,0,0.55));
    cursor     : pointer;
    z-index    : 0;
    /* Transition handled on the parent */
}

.wp-popup--modal .wp-popup__window {
    position       : relative;
    z-index        : 1;
    max-width      : var(--wp-popup-max-width);
    max-height     : calc(100vh - 32px);
    overflow-y     : auto;
    /* scrollbar styling */
    scrollbar-width: thin;
    scrollbar-color: var(--wp-popup-accent, #333) transparent;
}

/* Close button — top-right corner, outside the body padding */
.wp-popup--modal .wp-popup__close {
    position   : absolute;
    top        : 12px;
    right      : 12px;
    z-index    : 2;
}

/* ── Animations — modal ── */
@keyframes popup-modal-in {
    from {
        opacity   : 0;
        transform : scale(0.92) translateY(12px);
    }
    to {
        opacity   : 1;
        transform : scale(1) translateY(0);
    }
}

@keyframes popup-modal-out {
    from {
        opacity   : 1;
        transform : scale(1) translateY(0);
    }
    to {
        opacity   : 0;
        transform : scale(0.94) translateY(8px);
    }
}

.wp-popup--modal.is-entering {
    opacity    : 1;
    visibility : visible;
    pointer-events: auto;
}

.wp-popup--modal.is-entering .wp-popup__window {
    animation : popup-modal-in var(--wp-popup-speed) var(--wp-popup-ease) both;
}

.wp-popup--modal.is-leaving .wp-popup__window {
    animation : popup-modal-out var(--wp-popup-speed) ease-in both;
}

.wp-popup--modal.is-leaving {
    opacity    : 0;
    transition : opacity var(--wp-popup-speed) ease;
}


/* ─────────────────────────────────────────────────────────────────────────────
   MODE: SCROLL-PIN
   Sits in normal document flow. Pins to bottom-center on scroll past anchor.
   ───────────────────────────────────────────────────────────────────────────── */

.wp-popup--scroll-pin {
    /* In-flow state — rendered inline where the shortcode anchor sits */
    /* The JS moves this element around the DOM as needed */
    width      : 100%;
}

.wp-popup--scroll-pin .wp-popup__window {
    max-width : var(--wp-popup-max-width);
    margin    : 0 auto;
}

/* Toolbar: unpin + close buttons in a row */
.wp-popup__toolbar {
    display         : flex;
    justify-content : flex-end;
    align-items     : center;
    gap             : var(--wp-popup-toolbar-gap);
    padding         : 8px 12px 0;
}

/* ── Slide UP from below the screen when pinning ── */
@keyframes popup-slide-up {
    from {
        opacity   : 0;
        transform : translateX(-50%) translateY(120%);
    }
    to {
        opacity   : 1;
        transform : translateX(-50%) translateY(0);
    }
}

/* ── Slide DOWN back below the screen when unpinning / dismissing ── */
@keyframes popup-slide-down {
    from {
        opacity   : 1;
        transform : translateX(-50%) translateY(0);
    }
    to {
        opacity   : 0;
        transform : translateX(-50%) translateY(120%);
    }
}

/* Scroll-pin popup is hidden by default — JS shows it when appropriate */
.wp-popup--scroll-pin {
    display : none;
}

.wp-popup--scroll-pin.is-pinned {
    display   : block;
    position  : fixed;
    bottom    : var(--wp-popup-pin-bottom);
    left      : 50%;
    width     : var(--wp-popup-pin-width);
    z-index   : var(--wp-popup-z);
    animation : popup-slide-up 380ms var(--wp-popup-ease) both;
}

/* ── Sliding down: keep fixed position while animating out ── */
.wp-popup--scroll-pin.is-sliding-down {
    display   : block;
    position  : fixed;
    bottom    : var(--wp-popup-pin-bottom);
    left      : 50%;
    width     : var(--wp-popup-pin-width);
    z-index   : var(--wp-popup-z);
    animation : popup-slide-down 320ms ease-in both;
}

/* ── Fade out when user scrolls back near the top of the page ── */
@keyframes popup-fade-top {
    from { opacity: 1; }
    to   { opacity: 0; }
}

.wp-popup--scroll-pin.is-fading-top {
    position  : fixed;
    bottom    : var(--wp-popup-pin-bottom);
    left      : 50%;
    width     : var(--wp-popup-pin-width);
    z-index   : var(--wp-popup-z);
    animation : popup-fade-top 300ms ease-out both;
}

/* ── Dismissed state ── */
.wp-popup--scroll-pin.is-dismissed,
.wp-popup--modal.is-dismissed {
    display : none !important;
}

/* ── Anchor sentinel (shortcode output) ── */
.wp-popup-anchor {
    display : block;
    height  : 0;
    overflow: hidden;
}


/* ─────────────────────────────────────────────────────────────────────────────
   REDUCED MOTION
   ───────────────────────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .wp-popup--modal.is-entering .wp-popup__window,
    .wp-popup--modal.is-leaving .wp-popup__window,
    .wp-popup--scroll-pin.is-pinned,
    .wp-popup--scroll-pin.is-sliding-down {
        animation : none;
    }
}


/* ─────────────────────────────────────────────────────────────────────────────
   RESPONSIVE
   ───────────────────────────────────────────────────────────────────────────── */

@media (max-width: 600px) {
    :root {
        --wp-popup-padding  : 20px;
        --wp-popup-pin-bottom: 0px;
    }

    .wp-popup--modal {
        align-items : flex-end;
        padding     : 0;
    }

    .wp-popup--modal .wp-popup__window {
        max-width     : 100%;
        border-radius : var(--wp-popup-radius) var(--wp-popup-radius) 0 0;
        max-height    : 90vh;
    }

    /* On mobile: just visible in normal document flow, no scroll logic */
    .wp-popup--scroll-pin {
        display   : block !important;
        position  : static;
        width     : 100%;
        animation : none;
    }

    .wp-popup--scroll-pin.is-dismissed {
        display : none !important;
    }
}








#email-registration-form-container * {
    box-sizing: border-box;
    font-family: inherit;
    line-height: normal;
}

#email-registration-form-container h3 {
    all: unset;
    display: block;
    grid-column: 1 / -1;
    font-size: 13px;
    font-weight: 500;
    color: #666;
    text-transform: uppercase;
    letter-spacing: .07em;
    margin: 0 0 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
}

#email-registration-form-container .section.contact {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px 12px;
    background: none;
    padding: 0;
    margin: 0;
    border: none;
}

#email-registration-form-container .field.email-address {
    grid-column: 1 / -1;
}

#email-registration-form-container .consent {
    grid-column: 1 / -1;
}

#email-registration-form-container .field {
    all: unset;
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: none;
}

#email-registration-form-container .field label {
    all: unset;
    display: flex;
    gap: 3px;
    align-items: center;
    font-size: 12px;
    font-weight: 500;
    color: #666;
    background: none;
    float: none;
    width: auto;
}

#email-registration-form-container .field .label {
    all: unset;
    font-size: 1.1rem;
    font-weight: 500;
    color: #555;
}

#email-registration-form-container .required-star {
    all: unset;
    color: #c0392b;
    font-size: 11px;
}

#email-registration-form-container .field input[type=text],
#email-registration-form-container .field input[type=email] {
    all: unset;
    display: block;
    width: 100%;
    box-sizing: border-box;
    height: 50px;
    padding: 5px 10px;
    font-size: 1.2rem;
    border: 1px solid #888;
    border-radius: 6px;
    background: #fff;
    color: #333;
    transition: border-color .15s;
}

#email-registration-form-container .field input:focus {
    border-color: #005478;
    box-shadow: 0 0 0 3px rgba(0, 84, 120, 0.12);
}

#email-registration-form-container .consent {
    all: unset;
    display: block;
    grid-column: 1 / -1;
    font-size: 12px;
    color: #999;
    padding-top: 2px;
    text-align: right !important;
}

#email-registration-form-container .btn-group {
    all: unset;
    display: block;
    margin-top: 12px;
    text-align: center;
}

#email-registration-form-container .btn-submit {
    all: unset;
    display: inline-block;
    height: 40px;
    padding: 0 2.5rem;
    font-size: 1.2rem;
    font-weight: 500;
    background: #005478;
    color: #fff;
    border-radius: 6px;
    cursor: pointer;
    transition: opacity .15s;
}

#email-registration-form-container .btn-submit:hover {
    opacity: .85;
}

/* tablet: three columns */
@media (min-width: 600px) {
    #email-registration-form-container .section.contact {
        grid-template-columns: 1fr 1fr 1fr;
    }

    #email-registration-form-container .field.email-address {
        grid-column: 3 / 4;
    }

    #email-registration-form-container .consent {
        text-align: center;
        grid-column: 1 / -1;
    }
}




.sc-event-image a {
    display: block;
}

.sc-event-image a img {
    transition: opacity .15s;
}

.sc-event-image a:hover img {
    opacity: .85;
}

.sc-event-actions {
    margin-top: 14px;
}

.sc-event-btn {
    display: inline-block;
    height: 34px;
    line-height: 34px;
    padding: 0 18px;
    font-weight: 600;
    color: #005478;
    border: 1px solid #005478;
    border-radius: 6px;
    text-decoration: none;
    transition: background .15s, color .15s;
}

.sc-event-btn:hover {
    background: #005478;
    color: #fff;
}