/**
 * VOVO Events & Fireworks v7 — frontend styles.
 *
 * When no event is active nothing is injected at all, so the site looks
 * exactly like it does without the plugin.
 */

/* Effect canvas ---------------------------------------------------- */
.vovoef-canvas {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
        z-index: 1;
        overflow: hidden;
}

/* Hero mode, "behind" layer: draws under the hero's own content
   (headline, buttons...) so effects act as a living background.
   The engine sets `isolation: isolate` on the hero for this to work. */
.vovoef-canvas.vovoef-behind {
        z-index: -1;
}

.vovoef-canvas.vovoef-fixed {
        position: fixed;
        z-index: 9998; /* above content, below the WP admin bar (99999) */
}

/* Hero zone (shortcode / block) ------------------------------------ */
/* Collapsed (no height, invisible) while no event is active; the boot
   script expands it to its data-vovoef-min height when an event plays. */
.vovoef-hero {
        position: relative;
        overflow: hidden;
}

/* Greeting — screen-edge notice bar ----------------------------------
   The greeting is ALWAYS a slim gradient bar pinned to the very top or
   bottom edge of the visitor's screen (fixed), full width. The boot
   script adds matching body padding so the bar never covers the header,
   footer or content while the page scrolls underneath it. Visitors close
   it with the "x" (remembered for the browser session). There is no
   pop-up, no modal and no card floating over the page. */

.vovoef-greeting.vovoef-greeting--fixed.vovoef-greeting-bar-wrap {
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        bottom: auto;
        z-index: 10000; /* above content, below the WP admin bar (99999) */
        display: block;
        padding: 0;
        pointer-events: none;
}

.vovoef-greeting--fixed.vovoef-greeting-bar-wrap.vovoef-greeting--bottom {
        top: auto;
        bottom: 0;
}

.vovoef-greeting-bar {
        display: flex;
        align-items: baseline;
        justify-content: center;
        gap: 10px;
        box-sizing: border-box;
        width: 100%;
        padding: 11px 52px 11px 22px;
        background: linear-gradient( 90deg, #f5c518 0%, #1b2a5e 100% );
        color: #fff;
        font-weight: 700;
        font-size: clamp( 14px, 1.6vw, 18px );
        letter-spacing: 0.3px;
        line-height: 1.35;
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        box-shadow: 0 4px 22px rgba( 0, 0, 0, 0.18 );
        animation: vovoefBarIn 0.5s ease both;
        pointer-events: auto;
}

.vovoef-greeting-bar .vovoef-greeting-title {
        font-size: clamp( 14px, 1.6vw, 18px );
        font-weight: 700;
        margin: 0;
}

.vovoef-greeting-bar .vovoef-greeting-sub {
        font-weight: 500;
        font-size: 0.78em;
        opacity: 0.9;
}

/* rounded corners on the pinned edge */
.vovoef-greeting--bottom .vovoef-greeting-bar {
        border-radius: 14px 14px 0 0;
        box-shadow: 0 -4px 22px rgba( 0, 0, 0, 0.18 );
}

/* small festival icon leading the bar text */
.vovoef-greeting-bar-icon {
        align-self: center;
        height: 22px;
        width: auto;
        max-width: 32px;
        margin-right: 4px;
        filter: drop-shadow( 0 1px 5px rgba( 0, 0, 0, 0.35 ) );
}

/* Dismiss button — right inside the bar.
   A solid contrasting chip (white face, dark ×, soft shadow) so it reads
   clearly on any festival gradient; hover turns the classic dismiss red
   and grows a touch. It never blends into the bar background. */
.vovoef-greeting-close {
        position: absolute;
        top: 50%;
        right: 10px;
        transform: translateY( -50% );
        width: 32px;
        height: 32px;
        border: 0;
        border-radius: 50%;
        background: #fff;
        color: #1c2434;
        font-size: 20px;
        font-weight: 700;
        line-height: 1;
        cursor: pointer;
        pointer-events: auto;
        box-shadow: 0 2px 10px rgba( 0, 0, 0, 0.35 );
        transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.vovoef-greeting-close:hover,
.vovoef-greeting-close:focus {
        background: #d5392e;
        color: #fff;
        transform: translateY( -50% ) scale( 1.1 );
}

.vovoef-greeting-close:focus {
        outline: 2px solid #fff;
        outline-offset: 2px;
}

@keyframes vovoefBarIn {
        from {
                opacity: 0;
                transform: translateY( -12px );
        }
        to {
                opacity: 1;
                transform: none;
        }
}

/* Mobile ------------------------------------------------------------- */
@media ( max-width: 640px ) {
        .vovoef-greeting-bar {
                padding: 9px 44px 9px 14px;
                font-size: 14px;
        }

        .vovoef-greeting-bar-icon {
                height: 18px;
        }

        .vovoef-greeting-bar .vovoef-greeting-sub {
                display: none; /* keep slim phones tidy: headline only */
        }

        .vovoef-greeting-close {
                width: 28px;
                height: 28px;
                font-size: 18px;
        }
}

/* Accessibility ---------------------------------------------------- */
@media ( prefers-reduced-motion: reduce ) {
        .vovoef-canvas {
                display: none;
        }
        .vovoef-greeting-bar {
                animation: none;
        }
}