/**
 * VOVO Events & Fireworks v7 — hero slider styles.
 *
 * Layering inside the slider (bottom → top):
 *   1. slide background image + dark shade
 *   2. festival effects canvas (added by frontend.js during a festival)
 *   3. slide text (headline, sub, button) / custom content
 *   4. festival greeting bar or card (added by frontend.js)
 *   5. arrows + dots + progress bar
 *
 * So effects always sit behind the text — never on top of it.
 */

/* Boxed width wrapper (render() adds it when the slider is "Boxed") */
.vovoef-slider-wrap {
        position: relative;
        margin: 0 auto;
        width: 100%;
}

.vovoef-slider {
        position: relative;
        overflow: hidden;
        min-height: var( --vovoef-h, 70vh );
        background: #10131f;
        outline: none;
}

.vovoef-slider--hidden {
        display: none;
}

.vovoef-slides {
        position: relative;
        min-height: inherit;
        height: 100%;
}

/* Slides ---------------------------------------------------------- */

.vovoef-slide {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
}

.vovoef-slide-img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        z-index: 1;
        font-family: "object-fit: cover;"; /* ancient browsers */
}

.vovoef-slide-shade {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
}

/* No image set: quiet brand gradient */
.vovoef-slide--nogfx {
        background: linear-gradient( 135deg, #1b2a5e 0%, #101322 68%, #0a0c18 100% );
}

/* Gradient slide background (festival gradients — the demo look).
   The two colors + soft light glows arrive inline from PHP; this adds a
   gentle vignette under the text so headlines stay readable on any color. */
.vovoef-slide--grad {
        background-size: cover;
        background-position: center;
}

.vovoef-slide--grad::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
        pointer-events: none;
        background: radial-gradient( 120% 95% at 50% 112%, rgba( 0, 0, 0, 0.42 ), rgba( 0, 0, 0, 0 ) 58% ),
                linear-gradient( 180deg, rgba( 0, 0, 0, 0.12 ) 0%, rgba( 0, 0, 0, 0 ) 34% );
}

/* Split layout on a gradient: the text panel becomes a translucent glass
   panel over the gradient, spanning the full slide (no image half). */
.vovoef-slide--grad.vovoef-slide--split .vovoef-slide-body {
        width: 100%;
        max-width: 100%;
        background: linear-gradient( 160deg, rgba( 8, 10, 20, 0.52 ) 0%, rgba( 8, 10, 20, 0.34 ) 55%, rgba( 8, 10, 20, 0.46 ) 100% );
        backdrop-filter: blur( 4px );
        -webkit-backdrop-filter: blur( 4px );
}

/* Split layouts: half-page image with a text panel beside it.
   .vovoef-slide--split-left  = text panel LEFT, image RIGHT
   .vovoef-slide--split-right = image LEFT, text panel RIGHT */
.vovoef-slide--split .vovoef-slide-img {
        width: 58%;
        left: auto;
        right: 0;
}

.vovoef-slide--split .vovoef-slide-shade {
        width: 58%;
        left: auto;
        right: 0;
}

.vovoef-slide--split-left .vovoef-slide-img,
.vovoef-slide--split-left .vovoef-slide-shade {
        left: auto;
        right: 0;
}

.vovoef-slide--split-right .vovoef-slide-img,
.vovoef-slide--split-right .vovoef-slide-shade {
        left: 0;
        right: auto;
}

.vovoef-slide--split .vovoef-slide-body {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 42%;
        height: 100%;
        max-width: 42%;
        justify-content: center;
        padding: clamp( 22px, 4vw, 64px );
        background: linear-gradient( 160deg, rgba( 16, 19, 31, 0.97 ) 0%, rgba( 16, 19, 31, 0.88 ) 55%, rgba( 16, 19, 31, 0.94 ) 100% );
        z-index: 3;
}

.vovoef-slide--split-left .vovoef-slide-body {
        left: 0;
        margin: 0;
}

.vovoef-slide--split-right .vovoef-slide-body {
        right: 0;
        left: auto;
        margin-left: auto;
}

.vovoef-slide--split.vovoef-slide--nogfx .vovoef-slide-body {
        width: 50%;
        max-width: 50%;
}

/* Elementor-template / custom-HTML slides: the content fills the slide */
.vovoef-slide-custom {
        position: relative;
        z-index: 3;
        height: 100%;
        width: 100%;
        box-sizing: border-box;
}

.vovoef-slide-custom > :first-child {
        margin-top: 0;
}

.vovoef-slide-custom img {
        max-width: 100%;
        height: auto;
}

/* Transitions ------------------------------------------------------ */

/* fade (default): crossfade */
.vovoef-slider--fade .vovoef-slide {
        opacity: 0;
        transition: opacity 0.9s ease;
        pointer-events: none;
        z-index: 0;
}
.vovoef-slider--fade .vovoef-slide.is-active {
        opacity: 1;
        pointer-events: auto;
        z-index: 1;
}

/* slide: horizontal push */
.vovoef-slider--slide .vovoef-slide {
        transform: translateX( 100% );
        transition: transform 0.72s cubic-bezier( 0.55, 0.06, 0.35, 1 );
        pointer-events: none;
        z-index: 0;
}
.vovoef-slider--slide .vovoef-slide.is-active {
        transform: translateX( 0 );
        pointer-events: auto;
        z-index: 1;
}
.vovoef-slider--slide .vovoef-slide.is-prev {
        transform: translateX( -100% );
        z-index: 0;
}
.vovoef-slider--slide .vovoef-slide.is-next {
        transform: translateX( 100% );
        z-index: 0;
}

/* Ken Burns -------------------------------------------------------- */

.vovoef-slider--kb .vovoef-slide.is-active[data-kb="1"] .vovoef-slide-img {
        animation: vovoefKb 10s ease-out both, vovoefImgIn 1.05s ease both;
}

@keyframes vovoefKb {
        from {
                transform: scale( 1 ) translateX( 0 );
        }
        to {
                transform: scale( 1.12 ) translateX( -1.5% );
        }
}

/* Slide text -------------------------------------------------------- */

.vovoef-slide-body {
        position: relative;
        z-index: 3;
        display: flex;
        flex-direction: column;
        gap: 14px;
        padding: clamp( 20px, 5vw, 72px );
        max-width: min( 720px, 100% );
        box-sizing: border-box;
        height: 100%;
        justify-content: center;
}

.vovoef-slide--bottom .vovoef-slide-body {
        justify-content: flex-end;
        padding-bottom: clamp( 40px, 9vw, 110px );
}

.vovoef-slide-body--left {
        align-items: flex-start;
        text-align: left;
}
.vovoef-slide-body--center {
        align-items: center;
        text-align: center;
        margin: 0 auto;
}
.vovoef-slide-body--right {
        align-items: flex-end;
        text-align: right;
        margin-left: auto;
}

.vovoef-slide-title {
        color: #fff;
        font-size: clamp( 30px, 5vw, 58px );
        line-height: 1.1;
        font-weight: 800;
        margin: 0;
        letter-spacing: -0.5px;
        text-shadow: 0 2px 26px rgba( 0, 0, 0, 0.45 );
}

.vovoef-slide-sub {
        color: rgba( 255, 255, 255, 0.94 );
        font-size: clamp( 15px, 1.8vw, 20px );
        line-height: 1.5;
        margin: 0;
        max-width: 560px;
        text-shadow: 0 1px 12px rgba( 0, 0, 0, 0.5 );
}

.vovoef-slide-body--center .vovoef-slide-sub {
        margin: 0 auto;
}

.vovoef-slide-cta {
        display: inline-block;
        margin-top: 8px;
        padding: 13px 30px;
        border-radius: 999px;
        background: #fff;
        color: #10131f !important;
        font-weight: 700;
        font-size: 15px;
        text-decoration: none;
        box-shadow: 0 10px 34px rgba( 0, 0, 0, 0.3 );
        transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.vovoef-slide-cta:hover,
.vovoef-slide-cta:focus {
        transform: translateY( -2px );
        box-shadow: 0 14px 40px rgba( 0, 0, 0, 0.4 );
        color: #10131f !important;
        text-decoration: none;
}

/* Nav arrows -------------------------------------------------------- */

.vovoef-slider-nav {
        position: absolute;
        top: 50%;
        transform: translateY( -50% );
        z-index: 6;
        width: 46px;
        height: 46px;
        border-radius: 50%;
        border: 1px solid rgba( 255, 255, 255, 0.35 );
        background: rgba( 10, 12, 22, 0.45 );
        color: #fff;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        backdrop-filter: blur( 6px );
        -webkit-backdrop-filter: blur( 6px );
        transition: background 0.18s ease, transform 0.18s ease;
}
.vovoef-slider-nav:hover,
.vovoef-slider-nav:focus {
        background: rgba( 10, 12, 22, 0.75 );
}
.vovoef-slider-nav--prev {
        left: 16px;
}
.vovoef-slider-nav--next {
        right: 16px;
}

/* Dots -------------------------------------------------------------- */

.vovoef-slider-dots {
        position: absolute;
        left: 50%;
        bottom: 18px;
        transform: translateX( -50% );
        z-index: 6;
        display: flex;
        gap: 10px;
}

.vovoef-slider-dot {
        width: 11px;
        height: 11px;
        padding: 0;
        border-radius: 50%;
        border: none;
        cursor: pointer;
        background: rgba( 255, 255, 255, 0.42 );
        transition: background 0.18s ease, transform 0.18s ease, width 0.25s ease;
}
.vovoef-slider-dot:hover {
        background: rgba( 255, 255, 255, 0.75 );
}
.vovoef-slider-dot.is-active {
        background: #fff;
        width: 28px;
        border-radius: 999px;
}

/* Single slide: nothing to control */
.vovoef-slider--single .vovoef-slider-nav,
.vovoef-slider--single .vovoef-slider-dots {
        display: none;
}

/* Autoplay progress bar (thin bar at the bottom edge) ------------------ */
.vovoef-slider-progress {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 4px;
        z-index: 7;
        overflow: hidden;
        background: rgba( 255, 255, 255, 0.14 );
        opacity: 0;
        transition: opacity 0.3s ease;
        pointer-events: none;
}

.vovoef-slider-progress > span {
        display: block;
        height: 100%;
        width: 0;
        background: #fff;
        animation: vovoefProgressFill 6s linear forwards;
}

@keyframes vovoefProgressFill {
        from { width: 0; }
        to { width: 100%; }
}

/* Festival layers (added by frontend.js into the same container) ----- */

/* effects canvas above the image, under the text */
.vovoef-slider .vovoef-canvas {
        z-index: 2;
}

/* greeting above slide text */
.vovoef-slider .vovoef-greeting {
        z-index: 5;
}

/* when a greeting bar is pinned at the bottom of the slider, lift the
   dots a little so they don't sit on it (:has is progressive — older
   browsers simply leave the dots in place) */
.vovoef-slider:has( .vovoef-greeting--bottom .vovoef-greeting-bar ) .vovoef-slider-dots {
        bottom: 44px;
}

/* Mobile ------------------------------------------------------------ */

@media ( max-width: 767px ) {
        .vovoef-slider {
                min-height: var( --vovoef-hm, 55vh );
        }
        .vovoef-slider-nav {
                width: 38px;
                height: 38px;
        }
        .vovoef-slider-nav--prev {
                left: 10px;
        }
        .vovoef-slider-nav--next {
                right: 10px;
        }
        .vovoef-slide-body {
                padding: 20px;
        }

        /* split layouts stack: image strip on top, text panel below */
        .vovoef-slide--split .vovoef-slide-img {
                width: 100%;
                left: 0;
                right: 0;
                height: 46%;
                bottom: auto;
        }
        .vovoef-slide--split .vovoef-slide-shade {
                width: 100%;
                left: 0;
                right: 0;
                height: 46%;
        }
        .vovoef-slide--split .vovoef-slide-body {
                top: auto;
                bottom: 0;
                left: 0;
                right: 0;
                width: 100%;
                max-width: 100%;
                height: 54%;
                justify-content: center;
                padding: 20px 22px;
        }
        .vovoef-slide--split.vovoef-slide--bottom .vovoef-slide-body {
                justify-content: center;
        }
}

/* Accessibility ----------------------------------------------------- */

@media ( prefers-reduced-motion: reduce ) {
        .vovoef-slider--fade .vovoef-slide,
        .vovoef-slider--slide .vovoef-slide {
                transition: none;
        }
        .vovoef-slider--kb .vovoef-slide.is-active[data-kb="1"] .vovoef-slide-img,
        .vovoef-slide[data-imgfade="1"] .vovoef-slide-img {
                animation: none;
        }
        .vovoef-slide-cta:hover {
                transform: none;
        }
}

/* Headline sizes (per slide) ----------------------------------------- */
.vovoef-slide-title--sm {
        font-size: clamp( 22px, 3.2vw, 36px );
}

.vovoef-slide-title--md {
        font-size: clamp( 30px, 5vw, 58px );
}

.vovoef-slide-title--lg {
        font-size: clamp( 36px, 6vw, 72px );
}

.vovoef-slide-title--xl {
        font-size: clamp( 42px, 7vw, 92px );
        letter-spacing: -1px;
}

/* Sub text sizes ------------------------------------------------------ */
.vovoef-slide-sub--sm {
        font-size: clamp( 13px, 1.4vw, 16px );
}

.vovoef-slide-sub--md {
        font-size: clamp( 15px, 1.8vw, 20px );
}

.vovoef-slide-sub--lg {
        font-size: clamp( 18px, 2.2vw, 26px );
        max-width: 640px;
}

/* Button styles (per slide) ------------------------------------------- */
.vovoef-slide-cta--light {
        background: #fff;
        color: #10131f !important;
        box-shadow: 0 10px 34px rgba( 0, 0, 0, 0.3 );
}

.vovoef-slide-cta--light:hover,
.vovoef-slide-cta--light:focus {
        color: #10131f !important;
        box-shadow: 0 14px 44px rgba( 0, 0, 0, 0.42 );
}

.vovoef-slide-cta--dark {
        background: #10131f;
        color: #fff !important;
        box-shadow: 0 10px 30px rgba( 0, 0, 0, 0.35 );
}

.vovoef-slide-cta--dark:hover,
.vovoef-slide-cta--dark:focus {
        background: #1d2236;
        color: #fff !important;
}

.vovoef-slide-cta--outline {
        background: rgba( 255, 255, 255, 0.06 );
        color: #fff !important;
        border: 1.5px solid rgba( 255, 255, 255, 0.8 );
        box-shadow: none;
        backdrop-filter: blur( 4px );
        -webkit-backdrop-filter: blur( 4px );
}

.vovoef-slide-cta--outline:hover,
.vovoef-slide-cta--outline:focus {
        background: rgba( 255, 255, 255, 0.16 );
        color: #fff !important;
        border-color: #fff;
}

/* Image fade-in (per slide, data-imgfade="1") ------------------------- */
.vovoef-slider--fade .vovoef-slide[data-imgfade="1"] .vovoef-slide-img,
.vovoef-slider--slide .vovoef-slide[data-imgfade="1"] .vovoef-slide-img {
        animation: vovoefImgIn 1.05s ease both;
}

@keyframes vovoefImgIn {
        from {
                opacity: 0.25;
        }
        to {
                opacity: 1;
        }
}