/* ==========================================================================
   Fullscreen Slideshow — slideshow.css
   ========================================================================== */

/* ------------------------------------------------------------------
   Force the page/body and Beaver Builder wrapper to have no gap
   so the slideshow truly edge-to-edge fills the screen.
   ------------------------------------------------------------------ */
html,
body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

/* Beaver Builder: zero out every wrapper that contains the slideshow */
.fl-row:has(.fss-slideshow) .fl-row-content-wrap,
.fl-col-group:has(.fss-slideshow),
.fl-col:has(.fss-slideshow) .fl-col-content,
.fl-module:has(.fss-slideshow) .fl-module-content,
.fl-html:has(.fss-slideshow) {
    padding: 0 !important;
    margin: 0 !important;
    max-width: none !important;
}

/* General theme header — push slideshow behind it if you want overlap,
   or remove the rule to let the header sit above the slideshow.
   Uncomment the line below to let the slideshow go under a fixed header: */
/* .fss-slideshow { margin-top: -80px; } */

/* ------------------------------------------------------------------
   Slideshow container — fills the full viewport
   ------------------------------------------------------------------ */
.fss-slideshow {
    position: relative !important;
    width: 100% !important;
    /* JS sets --fss-vh on load and resize for iOS Safari accuracy.
       Falls back to 100dvh, then 100vh for older browsers. */
    height: calc(var(--fss-vh, 1vh) * 100) !important;
    overflow: hidden !important;
    background: #111;
    --fss-transition: 600ms;
    padding: 0 !important;
    margin: 0 !important;
    max-width: none !important;
}

/* ------------------------------------------------------------------
   Individual slides
   ------------------------------------------------------------------ */
.fss-slide {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    opacity: 0 !important;
    transition: opacity var(--fss-transition) ease-in-out !important;
    pointer-events: none;
    margin: 0 !important;
    padding: 0 !important;
}

.fss-slide.fss-active {
    opacity: 1 !important;
    pointer-events: auto;
}

/* Background-image approach — immune to theme img resets (height:auto etc) */
.fss-slide {
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
}

/* ------------------------------------------------------------------
   Optional overlay text
   ------------------------------------------------------------------ */
.fss-overlay-text {
    position: absolute;
    bottom: 90px;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 900px;
    text-align: center;
    color: #fff;
    font-size: clamp(1.4rem, 3.5vw, 3.2rem);
    font-weight: 300;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.4);
    pointer-events: none;
}

/* ------------------------------------------------------------------
   Nav wrapper — centred at the bottom of the slideshow
   ------------------------------------------------------------------ */
.fss-nav-wrapper {
    position: absolute;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 0;
}

/* Thin vertical divider between the two arrows */
.fss-nav-divider {
    display: block;
    width: 1px;
    height: 18px;
    background: rgba(255, 255, 255, 0.55);
    flex-shrink: 0;
}

/* ------------------------------------------------------------------
   Arrow buttons
   ------------------------------------------------------------------ */
.fss-nav {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    color: #fff !important;
    cursor: pointer;
    opacity: 0.8;
    transition: opacity 0.2s;
}

.fss-nav:hover,
.fss-nav:focus-visible {
    opacity: 1 !important;
    outline: none !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.fss-nav svg {
    width: 22px;
    height: 22px;
    display: block;
    filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.5));
}

/* ------------------------------------------------------------------
   Mobile tweaks
   ------------------------------------------------------------------ */
@media (max-width: 480px) {
    .fss-nav svg {
        width: 18px;
        height: 18px;
    }

    .fss-overlay-text {
        bottom: 75px;
        font-size: clamp(1rem, 5vw, 1.8rem);
        letter-spacing: 0.15em;
    }
}

/* ------------------------------------------------------------------
   Reduced-motion
   ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
    .fss-slide {
        transition: none;
    }
}