/* ═══════════════════════════════════════════════════════════
   #program — Crisis Readiness Program Slideshows (Light Theme)
   Custom overrides and layouts for sequential state & steps slideshows
   ═══════════════════════════════════════════════════════════ */

#program {
    background-color: #ebe8e6;
    color: var(--wp--preset--color--contrast);
    position: relative;
    overflow: hidden;

    & .content {
        position: relative;
        z-index: 1;

        & .program-header {
            text-align: center;
            max-width: 800px;
            margin: 0 auto;
            margin-bottom: 1.5rem;

            & h2 {
                font-size: clamp(1.8rem, 3.5vw, 2.8rem);
                line-height: 1.25;
                font-weight: 600;
                color: var(--wp--preset--color--contrast);
                margin-top: 1.25rem;

                & span {
                    color: var(--wp--preset--color--focus);
                    font-weight: 700;
                }
            }
        }

        /* ── State Switcher Card (Left Column) ──────────────── */
        & .state-program {
            background-color: var(--wp--preset--color--base);
            border: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 25%, transparent);
            border-radius: 1rem;
            box-shadow: var(--wp--preset--shadow--post-shadow);
            padding: 1.5rem;
            text-align: center;

            & input[name="tab-control"] {
                display: none;
            }

            /* Smooth tab activation transitions instead of instant display block/none */
            & input[name="tab-control"]:nth-of-type(1):checked~.state-program--container>div:nth-child(1),
            & input[name="tab-control"]:nth-of-type(2):checked~.state-program--container>div:nth-child(2) {
                opacity: 1;
                pointer-events: auto;
                max-height: 1200px;
                transform: translateY(0);
                padding-top: 2rem;
            }

            & input[name="tab-control"]:nth-of-type(2):checked~.state-buttons> :nth-child(1) .pretext,
            & input[name="tab-control"]:nth-of-type(1):checked~.state-buttons> :nth-child(2) .pretext {
                background-color: color-mix(in srgb, #000 5%, transparent);
                border-color: color-mix(in srgb, #000 20%, transparent);
                color: var(--wp--preset--color--contrast);

                & .dot {
                    background-color: color-mix(in srgb, var(--wp--preset--color--contrast) 50%, transparent);
                    animation: none;
                }
            }

            @media (width <=600px) {
                & .state-buttons {
                    & label {
                        display: grid;

                        & .pretext {
                            display: flex;
                            justify-content: center;
                            font-size: 1rem;
                            width: 100%;
                        }
                    }
                }
            }

            & .state-program--container {
                position: relative;
                width: 100%;

                &>div {
                    opacity: 0;
                    pointer-events: none;
                    max-height: 0;
                    overflow: hidden;
                    transform: translateY(12px);
                    transition:
                        opacity 0.4s ease,
                        transform 0.4s cubic-bezier(0.25, 1, 0.5, 1),
                        max-height 0.5s cubic-bezier(0.25, 1, 0.5, 1),
                        padding-top 0.4s ease;
                    padding-top: 0;

                    & h3 {

                        font-size: clamp(1.3rem, 2.5vw, 1.7rem);
                        font-weight: 700;
                        color: var(--wp--preset--color--contrast);
                        margin: 0 0 0.5rem 0;
                    }

                    & p {
                        font-size: 1rem;
                        line-height: 1.6;
                        color: color-mix(in srgb, var(--wp--preset--color--contrast), transparent 30%);
                        margin: 0;
                    }
                }
            }
        }
    }
}

/* Left-bottom ambient light and Right-top background grids */
#program::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(to top, color-mix(in srgb, var(--wp--preset--color--contrast) 6%, transparent) 1px, transparent 1px),
        linear-gradient(to right, color-mix(in srgb, var(--wp--preset--color--contrast) 6%, transparent) 1px, transparent 1px);
    background-size: 30px 30px;
    background-position: center top;
    z-index: 0;
    pointer-events: none;
    mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%);
}

#program::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(to top, color-mix(in srgb, var(--wp--preset--color--contrast) 12%, transparent) 1.5px, transparent 1.5px),
        linear-gradient(to right, color-mix(in srgb, var(--wp--preset--color--contrast) 12%, transparent) 1.5px, transparent 1.5px);
    background-size: 150px 150px;
    background-position: center top;
    z-index: 0;
    pointer-events: none;
    mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%);
}

/* ── States Indicator Badges ───────────────────────── */
.pretext.state-indicator-badge {
    display: inline-flex;
    gap: .5rem;
    align-items: center;
    text-transform: uppercase;
    width: fit-content;
    font-size: .65rem;
    cursor: pointer;

    & .dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        animation: pulse-badge-dot 2s infinite;
    }

    &.warning {
        background: color-mix(in srgb, #cf2e2e 8%, transparent);
        color: #cf2e2e;
        border: 1px solid color-mix(in srgb, #cf2e2e 20%, transparent);

        & .dot {
            background-color: #cf2e2e;
        }
    }

    &.success {
        background: color-mix(in srgb, var(--wp--preset--color--focus) 8%, transparent);
        color: var(--wp--preset--color--focus);
        border: 1px solid color-mix(in srgb, var(--wp--preset--color--focus) 20%, transparent);

        & .dot {
            background-color: var(--wp--preset--color--focus);
        }
    }
}

/* ── Nested Slideshow Core Layout & Styles ───────────────── */
#program .quotes-container {
    position: relative;
    z-index: 4;
    display: grid;
    background: color-mix(in srgb, var(--wp--preset--color--base), transparent 50%);
    overflow: hidden;
    width: 100%;
    padding-top: 2rem;

    & .slideshow--wrapper {
        width: 100%;
        overflow: hidden;
        position: relative;
        padding-bottom: 2rem;

        & .slideshow {
            display: flex;
            height: 100%;
            width: 100%;
            align-items: stretch;
        }
    }
}

/* Slide Item structure */
#program .quote-item {
    flex-shrink: 0;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;

    & .quote-content {
        opacity: 0;
        transform: translateY(12px);
        filter: blur(2px);
        transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
        display: flex;
        flex-direction: column;
        gap: 0.5rem;

        & h4 {
            font-family: var(--wp--preset--font-family--manrope);
            font-size: 1.25rem;
            font-weight: 700;
            color: var(--wp--preset--color--contrast);
            margin: 0;
            line-height: 1.3;
        }

        & p {
            font-size: 1rem;
            line-height: 1.55;
            color: color-mix(in srgb, var(--wp--preset--color--contrast), transparent 30%);
            margin: 0;
        }
    }

    &.active .quote-content {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

/* Steps Slideshow Elements */
.step-num-badge {
    color: var(--wp--preset--color--focus);
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.step-visual {
    margin-block: 0.25rem;

    & .step-icon {
        width: 32px;
        height: 32px;
        border-radius: 6px;
        background: color-mix(in srgb, var(--wp--preset--color--focus) 10%, transparent);
        border: 1px solid color-mix(in srgb, var(--wp--preset--color--focus) 20%, transparent);
        color: var(--wp--preset--color--focus);
        display: grid;
        place-items: center;
        margin-inline: auto;
        margin-bottom: 1rem;

        & svg {
            width: 15px;
            height: 15px;
        }
    }
}

/* Badge pulse animation */
@keyframes pulse-badge-dot {
    0% {
        box-shadow: 0 0 0 0 color-mix(in srgb, var(--wp--preset--color--focus) 70%, transparent);
    }

    70% {
        box-shadow: 0 0 0 6px color-mix(in srgb, var(--wp--preset--color--focus) 0%, transparent);
    }

    100% {
        box-shadow: 0 0 0 0 color-mix(in srgb, var(--wp--preset--color--focus) 0%, transparent);
    }
}

.is-chromium {

    & .state-program,
    & .module-item {
        border-radius: 2rem !important;
        corner-shape: squircle;
    }

    & .btn-pagination,
    & .module-num {
        border-radius: .8rem !important;
        corner-shape: squircle;
    }
}