/*
 * GALLERY SLIDESHOW CSS (Updated for Block Editor Galleries)
 */

/* Target the main gallery container for positioning */
.wp-block-gallery {
    margin-left: auto;
    margin-right: auto;
    position: relative; /* CRITICAL: For nav button positioning */
    overflow: hidden; 
}
/* IMPORTANT: Reset the block styles on the parent container */
.wp-block-gallery.has-nested-images {
    display: block !important;
}

/* Hide all gallery slides (the wp-block-image figures) by default */
.wp-block-gallery .wp-block-image {
    display: none !important; 
    float: none !important; 
    width: 100% !important; 
    margin: 0 !important;
}

/* Show the active slide and apply fade animation */
.gallery-slideshow-active .wp-block-image.active-slide {
    display: block !important;
    animation: fadeInSlide 0.5s ease-out;
}

/* Navigation Buttons Styling - TARGET THE NEW WRAPPER CLASS */
.gallery-slideshow-active .gallery-nav {
    cursor: pointer;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: auto;
    padding: 16px 12px;
    color: white;
    font-weight: bold;
    font-size: 20px;
    transition: 0.3s ease;
    user-select: none;
    background-color: rgba(0,0,0,0.5);
    z-index: 10;
}
.gallery-slideshow-active .gallery-prev {
    left: 0;
    border-radius: 0 3px 3px 0;
}
.gallery-slideshow-active .gallery-next {
    right: 0;
    border-radius: 3px 0 0 3px;
}
.gallery-slideshow-active .gallery-nav:hover {
    background-color: rgba(0,0,0,0.8);
}

/* Keyframe for the smooth fade effect */
@keyframes fadeInSlide {
    from { opacity: 0.8; }
    to { opacity: 1; }
}