/* Page Banner - CSS Slider */
.page-banner {
    position: relative;
    width: 100%;
    height: 400px;
    overflow: hidden;
    padding: var(--spacing-md);
}

/* Hide Radio Inputs */
.page-banner input[name="slider"] {
    display: none;
}

/* Slides Container */
.page-banner .slides {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: var(--radius-lg);
    overflow: hidden;
}

/* Individual Slide */
.page-banner .slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    z-index: 1;
    transition: opacity 1s ease-in-out;
}

/* 
 * DEFAULT AUTO-PLAY STATE
 * When the hidden #slide-auto is checked (default on page load),
 * we apply the animation to all slides.
 */
#slide-auto:checked~.slides .slide {
    animation: bannerFade 30s infinite;
}

/* Delay for each slide animation */
#slide-auto:checked~.slides .slide:nth-child(1) {
    animation-delay: 0s;
}

#slide-auto:checked~.slides .slide:nth-child(2) {
    animation-delay: -20s;
}

#slide-auto:checked~.slides .slide:nth-child(3) {
    animation-delay: -10s;
}

/* Keyframes for the fading animation */
/* 
 * 30 second total loop. 10s per slide.
 * To prevent dipping to the background, the outgoing slide must stay at opacity: 1 
 * while the incoming slide fades in over it.
 * To prevent the instant jump on page load, we use negative delays (-20s, -10s) 
 * so the animations start mid-stride synchronized from the first second.
 */
@keyframes bannerFade {

    0%,
    25% {
        opacity: 1;
        z-index: 2;
        /* Holds as the base layer */
    }

    33.33%,
    85% {
        opacity: 0;
        z-index: 1;
        /* Hidden */
    }

    90% {
        opacity: 0;
        z-index: 3;
        /* Prepares to fade in on top */
    }

    100% {
        opacity: 1;
        z-index: 3;
        /* Fully faded in on top, then loops immediately to 0% (z-index 2) */
    }
}

/* Pause the animation if the slider wrapper is hovered, optional but nice */
#slide-auto:checked~.slides:hover .slide {
    animation-play-state: paused;
}

/*  MANUAL OVERRIDE STATE  */
#slide1:checked~.slides .slide:nth-child(1),
#slide2:checked~.slides .slide:nth-child(2),
#slide3:checked~.slides .slide:nth-child(3) {
    opacity: 1;
    z-index: 3;
}

/* Slider Controls (Bottom Right Boxes) */
.slider-controls {
    position: absolute;
    bottom: 20px;
    right: 20px;
    z-index: 20;
    /* Above overlay */
    display: flex;
    gap: 10px;
    padding: var(--spacing-sm);
}

.slider-controls label {
    display: block;
    width: 15px;
    height: 15px;
    background-color: var(--color-tertiary);
    border: 4px solid var(--color-primary);
    cursor: pointer;
    transition: background-color 0.3s;
}

.slider-controls label:hover {
    background-color: var(--color-primary);
}

/* Highlight active control during manual selection */
#slide1:checked~.slider-controls label:nth-child(1),
#slide2:checked~.slider-controls label:nth-child(2),
#slide3:checked~.slider-controls label:nth-child(3) {
    background-color: var(--color-primary);
}


.banner-text-overlay {
    position: absolute;
    top: 66%;
    left: var(--spacing-md);
    z-index: 20;
    background-color: var(--color-primary-overlay);
    color: var(--color-text-light);
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: 1.2rem;
    font-weight: bold;
    font-family: var(--font-banner);
}