/**
 * VOVO Sliders & Greetings v11 — 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 — or the slide's base color when set */
.vovoef-slide--nogfx {
        background: var( --vovoef-sbg, 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: image takes one side at FULL height, text on the other.
   .vovoef-slide--split-left  = text panel LEFT, image RIGHT
   .vovoef-slide--split-right = image LEFT, text panel RIGHT
   The blend classes decide how the two halves meet:
   --cut     straight edge + solid text panel (classic)
   --merge   image fades into the slide background — no visible edge
   --overlay image spans the whole slide, text sits on a soft dark side */
.vovoef-slide .vovoef-slide-img {
        max-width: none;
        /* themes often ship `img { height:auto !important }` which broke the
           full-height cover (image "hanging" at the top) — win it back */
        height: 100% !important;
        object-fit: cover !important;
}

.vovoef-slide--split .vovoef-slide-img,
.vovoef-slide--split .vovoef-slide-shade {
        width: 58%;
        top: 0;
        bottom: 0;
        height: 100%;
        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--merge {
        background-color: var( --vovoef-sbg, #101322 );
}

.vovoef-slide--split.vovoef-slide--merge .vovoef-slide-img,
.vovoef-slide--split.vovoef-slide--merge .vovoef-slide-shade {
        width: 68%;
}

/* merge: the image's inner edge dissolves into the background */
.vovoef-slide--split.vovoef-slide--merge.vovoef-slide--split-left .vovoef-slide-img,
.vovoef-slide--split.vovoef-slide--merge.vovoef-slide--split-left .vovoef-slide-shade {
        -webkit-mask-image: linear-gradient( to right, rgba( 0, 0, 0, 0 ) 0, #000 48% );
        mask-image: linear-gradient( to right, rgba( 0, 0, 0, 0 ) 0, #000 48% );
}

.vovoef-slide--split.vovoef-slide--merge.vovoef-slide--split-right .vovoef-slide-img,
.vovoef-slide--split.vovoef-slide--merge.vovoef-slide--split-right .vovoef-slide-shade {
        -webkit-mask-image: linear-gradient( to left, rgba( 0, 0, 0, 0 ) 0, #000 48% );
        mask-image: linear-gradient( to left, rgba( 0, 0, 0, 0 ) 0, #000 48% );
}

.vovoef-slide--split.vovoef-slide--overlay .vovoef-slide-img,
.vovoef-slide--split.vovoef-slide--overlay .vovoef-slide-shade {
        width: 100%;
        left: 0;
        right: 0;
}

.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: var( --vovoef-pbg, 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;
}

/* merge & overlay: no solid panel — that is the whole point */
.vovoef-slide--split.vovoef-slide--merge:not( .vovoef-slide--grad ) .vovoef-slide-body,
.vovoef-slide--split.vovoef-slide--overlay:not( .vovoef-slide--grad ) .vovoef-slide-body {
        background: transparent;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
}

.vovoef-slide--split.vovoef-slide--merge .vovoef-slide-body {
        width: 46%;
        max-width: 46%;
}

.vovoef-slide--split.vovoef-slide--overlay .vovoef-slide-body {
        width: 52%;
        max-width: 52%;
}

/* Keep the slide text clear of the arrow buttons: split panels hug one
   slide edge, exactly where an arrow hovers — pad that outer side by the
   arrow footprint (edge distance + button size) when arrows are on. */
.vovoef-slider--hasarrows .vovoef-slide--split.vovoef-slide--split-left .vovoef-slide-body {
        padding-left: calc( clamp( 22px, 4vw, 64px ) + var( --vovoef-ax, 16px ) + var( --vovoef-as, 46px ) + 8px );
}

.vovoef-slider--hasarrows .vovoef-slide--split.vovoef-slide--split-right .vovoef-slide-body {
        padding-right: calc( clamp( 22px, 4vw, 64px ) + var( --vovoef-ax, 16px ) + var( --vovoef-as, 46px ) + 8px );
}

/* A custom text-panel color also shows behind the text on full-image
   slides when one is set (unset = no panel, exactly as before) */
.vovoef-slide:not( .vovoef-slide--split ) .vovoef-slide-body {
        background: var( --vovoef-pbg, transparent );
        border-radius: 14px;
}

.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: var( --vovoef-h1-color, #fff );
        font-family: var( --vovoef-h1-font, inherit );
        font-size: clamp( 30px, 5vw, 58px );
        line-height: var( --vovoef-h1-lh, 1.1 );
        font-weight: var( --vovoef-h1-weight, 800 );
        margin: 0;
        letter-spacing: var( --vovoef-h1-ls, -0.5px );
        text-transform: var( --vovoef-h1-tt, none );
        text-shadow: 0 2px 26px rgba( 0, 0, 0, 0.45 );
}

/* Heading 2 — the optional second heading line, its own style controls */
.vovoef-slide-title2 {
        color: var( --vovoef-h2-color, rgba( 255, 255, 255, 0.92 ) );
        font-family: var( --vovoef-h2-font, inherit );
        font-size: var( --vovoef-h2-size, clamp( 20px, 3.2vw, 40px ) );
        line-height: var( --vovoef-h2-lh, 1.15 );
        font-weight: var( --vovoef-h2-weight, 700 );
        margin: 0;
        letter-spacing: var( --vovoef-h2-ls, 0 );
        text-transform: var( --vovoef-h2-tt, none );
        text-shadow: 0 2px 20px rgba( 0, 0, 0, 0.4 );
}

.vovoef-slide-sub {
        color: var( --vovoef-desc-color, rgba( 255, 255, 255, 0.94 ) );
        font-family: var( --vovoef-desc-font, inherit );
        font-size: clamp( 15px, 1.8vw, 20px );
        line-height: var( --vovoef-desc-lh, 1.5 );
        font-weight: var( --vovoef-desc-weight, 400 );
        margin: 0;
        max-width: var( --vovoef-desc-max, 560px );
        letter-spacing: var( --vovoef-desc-ls, 0 );
        text-transform: var( --vovoef-desc-tt, none );
        text-shadow: 0 1px 12px rgba( 0, 0, 0, 0.5 );
}

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

/* Small line under the description (date · place · teaser) */
.vovoef-slide-tagline {
        color: var( --vovoef-tag-color, rgba( 255, 255, 255, 0.82 ) );
        font-family: var( --vovoef-tag-font, inherit );
        font-size: var( --vovoef-tag-size, clamp( 13px, 1.4vw, 17px ) );
        line-height: var( --vovoef-tag-lh, 1.5 );
        font-weight: var( --vovoef-tag-weight, 600 );
        margin: 0;
        letter-spacing: var( --vovoef-tag-ls, 0.04em );
        text-transform: var( --vovoef-tag-tt, none );
        text-shadow: 0 1px 10px rgba( 0, 0, 0, 0.5 );
}

.vovoef-slide-tagline::before {
        content: "";
        display: inline-block;
        width: 26px;
        height: 2px;
        margin-right: 10px;
        vertical-align: middle;
        background: currentColor;
        opacity: 0.55;
        border-radius: 2px;
}

.vovoef-slide-body--center .vovoef-slide-tagline::before {
        display: none;
}

/* Buttons row (button 1 + optional button 2) */
.vovoef-slide-ctas {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        margin-top: 8px;
}

.vovoef-slide-ctas .vovoef-slide-cta {
        margin-top: 0;
}

.vovoef-slide-body--center .vovoef-slide-ctas {
        justify-content: center;
}

.vovoef-slide-body--right .vovoef-slide-ctas {
        justify-content: flex-end;
}

.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 — every look lives in CSS vars set by render(); the
   fallbacks are the classic glassy circle. */

.vovoef-slider-nav {
        position: absolute;
        top: 50%;
        transform: translateY( -50% );
        z-index: 6;
        width: var( --vovoef-as, 46px );
        height: var( --vovoef-as, 46px );
        border-radius: var( --vovoef-ars, 50% );
        border: 1px solid rgba( 255, 255, 255, 0.35 );
        background: var( --vovoef-abg, rgba( 10, 12, 22, 0.45 ) );
        color: var( --vovoef-ac, #fff );
        opacity: var( --vovoef-ao, 1 );
        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 svg {
        width: 56%;
        height: 56%;
}
.vovoef-slider-nav:hover,
.vovoef-slider-nav:focus {
        filter: brightness( 1.18 );
}
.vovoef-slider-nav--prev {
        left: var( --vovoef-ax, 16px );
}
.vovoef-slider-nav--next {
        right: var( --vovoef-ax, 16px );
}

/* Dots — overlapping (default) or under the slider; size, gap, colors and
   shape all come from vars. */

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

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

/* "Round dots" style: active does not stretch */
.vovoef-slider-dots--dot .vovoef-slider-dot.is-active {
        width: var( --vovoef-ds, 11px );
        transform: scale( 1.25 );
        border-radius: 50%;
}

/* "Lines" style: slim bars */
.vovoef-slider-dots--line .vovoef-slider-dot {
        width: calc( var( --vovoef-ds, 11px ) * 2.1 );
        height: calc( var( --vovoef-ds, 11px ) * 0.4 );
        border-radius: 99px;
}
.vovoef-slider-dots--line .vovoef-slider-dot.is-active {
        width: calc( var( --vovoef-ds, 11px ) * 3.4 );
}

/* Dots UNDER the slider (rendered outside the clipped box) */
.vovoef-slider-outer {
        position: relative;
}
.vovoef-slider-dots--below {
        position: static;
        transform: none;
        justify-content: center;
        padding: 14px 0 4px;
        background: transparent;
}
.vovoef-slider-dots--below .vovoef-slider-dot.is-active {
        width: 28px;
}

/* 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: calc( var( --vovoef-as, 46px ) * 0.82 );
                height: calc( var( --vovoef-as, 46px ) * 0.82 );
        }
        .vovoef-slider-nav--prev {
                left: calc( var( --vovoef-ax, 16px ) * 0.6 );
        }
        .vovoef-slider-nav--next {
                right: calc( var( --vovoef-ax, 16px ) * 0.6 );
        }
        .vovoef-slider-dots {
                bottom: 12px;
        }
        .vovoef-slider-dots--below {
                padding: 10px 0 2px;
        }
        .vovoef-slide-body {
                padding: 20px;
        }

        /* custom text sizes scale down (~68%) so a 60px headline stays
           readable on a phone; unset sizes keep their fluid clamps */
        .vovoef-slide-title--sm,
        .vovoef-slide-title--md,
        .vovoef-slide-title--lg,
        .vovoef-slide-title--xl {
                font-size: calc( var( --vovoef-h1-size, 44px ) * 0.68 );
        }
        .vovoef-slide-title2 {
                font-size: calc( var( --vovoef-h2-size, 30px ) * 0.68 );
        }
        .vovoef-slide-sub--sm,
        .vovoef-slide-sub--md,
        .vovoef-slide-sub--lg {
                font-size: calc( var( --vovoef-desc-size, 17px ) * 0.88 );
        }
        .vovoef-slide-tagline {
                font-size: calc( var( --vovoef-tag-size, 14px ) * 0.88 );
        }
        .vovoef-slide-cta,
        .vovoef-slide-cta--custom {
                padding-top: calc( var( --vovoef-b1-pv, 13px ) * 0.82 );
                padding-bottom: calc( var( --vovoef-b1-pv, 13px ) * 0.82 );
                padding-left: calc( var( --vovoef-b1-ph, 30px ) * 0.78 );
                padding-right: calc( var( --vovoef-b1-ph, 30px ) * 0.78 );
        }
        .vovoef-slide-cta--custom.vovoef-slide-cta--b2 {
                padding-top: calc( var( --vovoef-b2-pv, 13px ) * 0.82 );
                padding-bottom: calc( var( --vovoef-b2-pv, 13px ) * 0.82 );
                padding-left: calc( var( --vovoef-b2-ph, 30px ) * 0.78 );
                padding-right: calc( var( --vovoef-b2-ph, 30px ) * 0.78 );
        }
        .vovoef-slide-ctas {
                gap: 9px;
        }

        /* split layouts stack: image strip on top, text panel below.
           !important is needed because the desktop blend rules (width 68%,
           edge masks, full-height overlays) have higher specificity and the
           full-height cover defense is !important too — on phones the strip
           must always win. Same for the readable panel: it comes back on
           merge/overlay slides (their desktop "no panel" rules are stronger),
           and the merge edge-fade is dropped. */
        .vovoef-slide--split .vovoef-slide-img {
                width: 100% !important;
                left: 0 !important;
                right: 0 !important;
                height: 46% !important;
                bottom: auto !important;
                -webkit-mask-image: none !important;
                mask-image: none !important;
        }
        .vovoef-slide--split .vovoef-slide-shade {
                width: 100% !important;
                left: 0 !important;
                right: 0 !important;
                height: 46% !important;
                bottom: auto !important;
                -webkit-mask-image: none !important;
                mask-image: none !important;
        }
        .vovoef-slide.vovoef-slide--split .vovoef-slide-body,
        .vovoef-slide.vovoef-slide--split.vovoef-slide--merge .vovoef-slide-body,
        .vovoef-slide.vovoef-slide--split.vovoef-slide--overlay .vovoef-slide-body {
                top: auto;
                bottom: 0;
                left: 0;
                right: 0;
                width: 100% !important;
                max-width: 100% !important;
                height: 54%;
                justify-content: center;
                padding: 20px calc( 22px + var( --vovoef-as, 46px ) * 0.6 );
                background: var( --vovoef-pbg, linear-gradient( 160deg, rgba( 16, 19, 31, 0.95 ) 0%, rgba( 16, 19, 31, 0.86 ) 55%, rgba( 16, 19, 31, 0.93 ) 100% ) );
        }
        .vovoef-slide--split.vovoef-slide--bottom .vovoef-slide-body {
                justify-content: center;
        }

        /* dragged text on phones: handled at the very end of this file, in a
           later media query so the clamp wins the !important cascade */
}

/* 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) — a custom px size in Typography overrides
   the preset via the --vovoef-h1-size var. */
.vovoef-slide-title--sm {
        font-size: var( --vovoef-h1-size, clamp( 22px, 3.2vw, 36px ) );
}

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

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

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

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

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

.vovoef-slide-sub--lg {
        font-size: var( --vovoef-desc-size, clamp( 18px, 2.2vw, 26px ) );
        max-width: var( --vovoef-desc-max, 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;
}

/* Custom buttons — every value from the Typography boxes; b1 = button 1,
   b2 = button 2. Unset values fall back to a white pill. */
.vovoef-slide-cta--custom {
        background: var( --vovoef-b1-bg, #fff );
        color: var( --vovoef-b1-c, #10131f ) !important;
        border: var( --vovoef-b1-bw, 0px ) solid var( --vovoef-b1-brd, transparent );
        border-radius: var( --vovoef-b1-rad, 999px );
        font-size: var( --vovoef-b1-size, 15px );
        font-weight: var( --vovoef-b1-w, 700 );
        padding-top: var( --vovoef-b1-pv, 13px );
        padding-bottom: var( --vovoef-b1-pv, 13px );
        padding-left: var( --vovoef-b1-ph, 30px );
        padding-right: var( --vovoef-b1-ph, 30px );
        box-shadow: 0 10px 34px rgba( 0, 0, 0, 0.3 );
}
.vovoef-slide-cta--custom:hover,
.vovoef-slide-cta--custom:focus {
        filter: brightness( 1.08 );
        color: var( --vovoef-b1-c, #10131f ) !important;
}
.vovoef-slide-cta--custom.vovoef-slide-cta--b2 {
        background: var( --vovoef-b2-bg, #10131f );
        color: var( --vovoef-b2-c, #fff ) !important;
        border-color: var( --vovoef-b2-brd, transparent );
        border-width: var( --vovoef-b2-bw, 0px );
        border-style: solid;
        border-radius: var( --vovoef-b2-rad, 999px );
        font-size: var( --vovoef-b2-size, 15px );
        font-weight: var( --vovoef-b2-w, 700 );
        padding-top: var( --vovoef-b2-pv, 13px );
        padding-bottom: var( --vovoef-b2-pv, 13px );
        padding-left: var( --vovoef-b2-ph, 30px );
        padding-right: var( --vovoef-b2-ph, 30px );
}
.vovoef-slide-cta--custom.vovoef-slide-cta--b2:hover,
.vovoef-slide-cta--custom.vovoef-slide-cta--b2:focus {
        filter: brightness( 1.12 );
        color: var( --vovoef-b2-c, #fff ) !important;
}

/* Drag-positioned text ("Move text" in the editor) ----------------------
   NOTE the strong selector + !important: the split-layout panel rules
   (.vovoef-slide--split .vovoef-slide-body, .vovoef-slide--split-left …)
   set top/left/right/bottom/width/height at 0,2,0 specificity and the
   phone defenses even use !important — a plain .vovoef-slide-body--drag
   rule LOSES that fight, which made a dragged text panel snap back to the
   slide edge with translate(-50%,-50%) pushing it half outside the slide
   (the "text jumps to the top corner after Update" bug). The dragged
   position must always win, in every layout, at every width. */
.vovoef-slide .vovoef-slide-body.vovoef-slide-body--drag {
        position: absolute !important;
        left: var( --vovoef-dx, 50% ) !important;
        top: var( --vovoef-dy, 50% ) !important;
        right: auto !important;
        bottom: auto !important;
        transform: translate( -50%, -50% );
        width: auto !important;
        max-width: min( 720px, 84% ) !important;
        height: auto !important;
        justify-content: center;
        background: transparent;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        padding: clamp( 14px, 2.5vw, 34px );
        z-index: 4;
}

/* "Move text" mode inside the live preview: grab & drag affordances */
.vovoef-slider[data-draggable] .vovoef-slide-body {
        cursor: grab;
        touch-action: none;
}
.vovoef-slider[data-draggable] .vovoef-slide.is-active .vovoef-slide-body {
        outline: 1.5px dashed rgba( 255, 255, 255, 0.4 );
        outline-offset: 8px;
}
.vovoef-slide-body.vovoef-dragging {
        cursor: grabbing;
        user-select: none;
        -webkit-user-select: none;
        outline: 1.5px dashed rgba( 255, 255, 255, 0.85 ) !important;
        outline-offset: 10px;
        z-index: 9;
}

/* 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;
        }
}

/* ==================================================================== */
/* v11 — image layer controls                                           */
/* ==================================================================== */

/* Hide the image layer entirely (keep the featured image on the post, just
   do not show it): the base color / gradient remains. */
.vovoef-slide[data-imghide="1"] .vovoef-slide-img,
.vovoef-slide[data-imghide="1"] .vovoef-slide-shade {
        display: none;
}

/* "Fit" — Contain shows the WHOLE image inside the slide (letterboxed on the
   base color); Cover (default) crops it to fill. */
.vovoef-slide[data-ifit="contain"] .vovoef-slide-img {
        object-fit: contain !important;
        background: var( --vovoef-sbg, transparent );
}

/* Zoom: the image box grows past the slide on all sides (object-fit keeps
   cropping inside the box). Expressed in % so it stays responsive. */
.vovoef-slide[data-iscale] .vovoef-slide-img {
        width: calc( 100% * var( --vovoef-iscale, 1 ) ) !important;
        height: calc( 100% * var( --vovoef-iscale, 1 ) ) !important;
        left: calc( 50% - 50% * var( --vovoef-iscale, 1 ) ) !important;
        top: calc( 50% - 50% * var( --vovoef-iscale, 1 ) ) !important;
        right: auto !important;
        bottom: auto !important;
}

/* Dragged image ("Move image" in the editor): the box is centered on the
   saved point. transform-based centering would fight the Ken Burns
   animation, so left/top are used and KB is simply disabled for this
   slide — a hand-placed image must not start drifting. */
.vovoef-slide[data-imgdrag="1"] .vovoef-slide-img {
        left: var( --vovoef-ix, 50% ) !important;
        top: var( --vovoef-iy, 50% ) !important;
        right: auto !important;
        bottom: auto !important;
        transform: translate( -50%, -50% );
        animation: none !important;
}

/* Image opacity + rounded corners (opacity stays above the shade so the
   darkening keeps working with it). */
.vovoef-slide[data-iop] .vovoef-slide-img {
        opacity: calc( var( --vovoef-iop, 100 ) / 100 );
}
.vovoef-slide[data-irad] .vovoef-slide-img {
        border-radius: calc( var( --vovoef-irad, 0 ) * 1px );
}

/* Split layouts: how much of the slide the image side takes (default per
   blend: 58 / 68 / 100). One value drives image + shade together, and the
   text panel takes the rest (minus a small breathing gap). */
.vovoef-slide--split[data-iside] .vovoef-slide-img,
.vovoef-slide--split[data-iside] .vovoef-slide-shade {
        width: calc( var( --vovoef-iside, 58 ) * 1% ) !important;
}
.vovoef-slide--split[data-iside]:not( .vovoef-slide--overlay ) .vovoef-slide-body {
        width: calc( ( 100 - var( --vovoef-iside, 58 ) ) * 1% - 2% ) !important;
        max-width: calc( ( 100 - var( --vovoef-iside, 58 ) ) * 1% - 2% ) !important;
}

/* Explicit text-panel width (wins over the derived one above when set). */
.vovoef-slide--split[data-pw] .vovoef-slide-body {
        width: calc( var( --vovoef-pw, 46 ) * 1% ) !important;
        max-width: calc( var( --vovoef-pw, 46 ) * 1% ) !important;
}

/* "Move image" mode inside the live preview: grab affordance + the corner
   resize handle (injected by slider.js on the active slide only). */
.vovoef-slider[data-draggable] .vovoef-slide.is-active .vovoef-slide-img {
        cursor: grab;
        touch-action: none;
        outline: 1.5px dashed rgba( 255, 255, 255, 0.5 );
        outline-offset: -4px;
}
.vovoef-slider[data-draggable] .vovoef-slide.is-active .vovoef-slide-img.vovoef-dragging,
.vovoef-slider[data-draggable] .vovoef-slide.is-active .vovoef-slide-img.vovoef-img-resizing {
        cursor: grabbing;
        outline: 1.5px dashed rgba( 255, 255, 255, 0.95 ) !important;
}
.vovoef-img-handle {
        position: absolute;
        width: 18px;
        height: 18px;
        right: -9px;
        bottom: -9px;
        z-index: 9;
        background: #fff;
        border: 2px solid #2271b1;
        border-radius: 4px;
        cursor: nwse-resize;
        box-shadow: 0 2px 8px rgba( 0, 0, 0, 0.4 );
        touch-action: none;
}
.vovoef-img-handle::after {
        content: "";
        position: absolute;
        inset: 3px;
        border-right: 2px solid #2271b1;
        border-bottom: 2px solid #2271b1;
}

/* ==================================================================== */
/* v11 — text effects                                                   */
/* ==================================================================== */

/* Text shadows — a var per element, default = the classic soft drop. */
.vovoef-slide-title {
        text-shadow: var( --vovoef-h1-shadow, 0 2px 26px rgba( 0, 0, 0, 0.45 ) );
}
.vovoef-slide-title2 {
        text-shadow: var( --vovoef-h2-shadow, 0 2px 20px rgba( 0, 0, 0, 0.4 ) );
}
.vovoef-slide-sub {
        text-shadow: var( --vovoef-desc-shadow, 0 1px 12px rgba( 0, 0, 0, 0.5 ) );
}
.vovoef-slide-tagline {
        text-shadow: var( --vovoef-tag-shadow, 0 1px 10px rgba( 0, 0, 0, 0.5 ) );
}

/* Text panel blur (glass) + rounded corners — applied only when the editor
   set them, so the built-in looks (glass gradient panels, the 14px radius
   of colored panels on full-image slides) stay untouched by default. */
.vovoef-slide[data-pblur] .vovoef-slide-body {
        backdrop-filter: blur( var( --vovoef-pblur, 0 ) ) !important;
        -webkit-backdrop-filter: blur( var( --vovoef-pblur, 0 ) ) !important;
}
.vovoef-slide[data-prad] .vovoef-slide-body {
        border-radius: var( --vovoef-prad, 0 ) !important;
}

/* Entrance animations (per slide, data-anim) — the elements rise / zoom /
   drift in one after another every time the slide becomes active.
   NOTE: the animation shorthand resets animation-delay, so the stagger
   delays come AFTER the shorthand rules below. */

.vovoef-slide[data-anim="up"].is-active .vovoef-slide-title,
.vovoef-slide[data-anim="up"].is-active .vovoef-slide-title2,
.vovoef-slide[data-anim="up"].is-active .vovoef-slide-sub,
.vovoef-slide[data-anim="up"].is-active .vovoef-slide-tagline,
.vovoef-slide[data-anim="up"].is-active .vovoef-slide-ctas {
        animation: vovoefTxtUp 0.7s cubic-bezier( 0.2, 0.7, 0.3, 1 ) both;
}
.vovoef-slide[data-anim="fade"].is-active .vovoef-slide-title,
.vovoef-slide[data-anim="fade"].is-active .vovoef-slide-title2,
.vovoef-slide[data-anim="fade"].is-active .vovoef-slide-sub,
.vovoef-slide[data-anim="fade"].is-active .vovoef-slide-tagline,
.vovoef-slide[data-anim="fade"].is-active .vovoef-slide-ctas {
        animation: vovoefTxtFade 0.8s ease both;
}
.vovoef-slide[data-anim="zoom"].is-active .vovoef-slide-title,
.vovoef-slide[data-anim="zoom"].is-active .vovoef-slide-title2,
.vovoef-slide[data-anim="zoom"].is-active .vovoef-slide-sub,
.vovoef-slide[data-anim="zoom"].is-active .vovoef-slide-tagline,
.vovoef-slide[data-anim="zoom"].is-active .vovoef-slide-ctas {
        animation: vovoefTxtZoom 0.7s cubic-bezier( 0.2, 0.7, 0.3, 1 ) both;
}
.vovoef-slide[data-anim="left"].is-active .vovoef-slide-title,
.vovoef-slide[data-anim="left"].is-active .vovoef-slide-title2,
.vovoef-slide[data-anim="left"].is-active .vovoef-slide-sub,
.vovoef-slide[data-anim="left"].is-active .vovoef-slide-tagline,
.vovoef-slide[data-anim="left"].is-active .vovoef-slide-ctas {
        animation: vovoefTxtLeft 0.7s cubic-bezier( 0.2, 0.7, 0.3, 1 ) both;
}

/* the stagger — plain animation-delay AFTER the shorthands, so each
   element joins in one step later than the one above it */
.vovoef-slide[data-anim].is-active .vovoef-slide-title {
        animation-delay: 0.05s;
}
.vovoef-slide[data-anim].is-active .vovoef-slide-title2 {
        animation-delay: 0.16s;
}
.vovoef-slide[data-anim].is-active .vovoef-slide-sub {
        animation-delay: 0.27s;
}
.vovoef-slide[data-anim].is-active .vovoef-slide-tagline {
        animation-delay: 0.36s;
}
.vovoef-slide[data-anim].is-active .vovoef-slide-ctas {
        animation-delay: 0.46s;
}

@keyframes vovoefTxtUp {
        from {
                opacity: 0;
                transform: translateY( 34px );
        }
        to {
                opacity: 1;
                transform: translateY( 0 );
        }
}
@keyframes vovoefTxtFade {
        from {
                opacity: 0;
        }
        to {
                opacity: 1;
        }
}
@keyframes vovoefTxtZoom {
        from {
                opacity: 0;
                transform: scale( 0.86 );
        }
        to {
                opacity: 1;
                transform: scale( 1 );
        }
}
@keyframes vovoefTxtLeft {
        from {
                opacity: 0;
                transform: translateX( -46px );
        }
        to {
                opacity: 1;
                transform: translateX( 0 );
        }
}

/* Phones ---------------------------------------------------------------
   Dragged text: pulled safely inside the narrower screen; dragged images
   settle toward the middle too (a corner position would crop the photo on
   a phone). */

@media ( max-width: 720px ) {
        .vovoef-slide .vovoef-slide-body.vovoef-slide-body--drag {
                left: clamp( 14%, var( --vovoef-dx, 50% ), 86% ) !important;
                top: clamp( 12%, var( --vovoef-dy, 50% ), 88% ) !important;
                max-width: 88% !important;
        }
        .vovoef-slide[data-imgdrag="1"] .vovoef-slide-img {
                left: clamp( 40%, var( --vovoef-ix, 50% ), 60% ) !important;
                top: clamp( 40%, var( --vovoef-iy, 50% ), 60% ) !important;
        }
        /* contain + heavy zoom can hide too much on a phone — soften it */
        .vovoef-slide[data-iscale] .vovoef-slide-img {
                width: calc( 100% * min( var( --vovoef-iscale, 1 ), 1.4 ) ) !important;
                height: calc( 100% * min( var( --vovoef-iscale, 1 ), 1.4 ) ) !important;
                left: calc( 50% - 50% * min( var( --vovoef-iscale, 1 ), 1.4 ) ) !important;
                top: calc( 50% - 50% * min( var( --vovoef-iscale, 1 ), 1.4 ) ) !important;
        }
}

@media ( prefers-reduced-motion: reduce ) {
        .vovoef-slide[data-anim] .vovoef-slide-title,
        .vovoef-slide[data-anim] .vovoef-slide-title2,
        .vovoef-slide[data-anim] .vovoef-slide-sub,
        .vovoef-slide[data-anim] .vovoef-slide-tagline,
        .vovoef-slide[data-anim] .vovoef-slide-ctas {
                animation: none;
        }
}