/* The legacy responsive.css hides Smart Slider's background <img> elements.
 * Current Smart Slider renders the actual slide artwork in those images.
 * Restore only the homepage hero, leaving desktop and slide transitions alone.
 */
/* Smart Slider now adds a wrapper around each dot. The legacy > div rule
 * colors those wrappers gray instead of coloring the actual indicators.
 */
#home #n2-ss-2 .nextend-bullet-bar > div:not(.n2-bullet) {
    background: transparent !important;
    margin: 0 !important;
}

/* Caption layers use desktop coordinates and scale their fonts down to ~6px.
 * Use mobile layout coordinates and let each text box grow with its content.
 */
@media screen and (max-width: 767px) {
    #home #n2-ss-2 .n2-ss-layer[data-pm="absolute"]:has(> .n2-ss-text) {
        left: 12px !important;
        right: 12px !important;
        top: auto !important;
        bottom: 44px !important;
        width: auto !important;
        height: auto !important;
        transform: none !important;
    }

    #home #n2-ss-2 .n2-ss-text > a {
        box-sizing: border-box;
        width: 100%;
        font-size: clamp(14px, 4vw, 18px) !important;
        line-height: 1.3 !important;
        padding: 6px 10px !important;
        white-space: normal !important;
        overflow-wrap: anywhere;
    }

    /* Remove the old 35px upward offset to separate dots from captions. */
    #home #n2-ss-2 .n2-ss-control-bullet {
        bottom: 0 !important;
    }
}

@media screen and (max-width: 1000px) {
    #home #n2-ss-2 .n2-ss-slide-background img {
        opacity: 1;
    }

    #home #n2-ss-2 .nextend-bullet-bar {
        max-width: calc(100vw - 24px);
        flex-wrap: wrap;
        justify-content: center;
    }

    /* 10px visible dot inside a 24px tap target. Transparent borders keep
     * the larger target from painting a square around the circle.
     */
    #home #n2-ss-2 .nextend-bullet-bar .n2-bullet {
        box-sizing: border-box;
        flex-shrink: 0;
        width: 24px;
        height: 24px;
        margin: 0 !important;
        padding: 0 !important;
        border: 7px solid transparent !important;
        border-radius: 50%;
        background-color: rgba(0, 0, 0, 0.67) !important;
        background-clip: content-box;
    }

    #home #n2-ss-2 .nextend-bullet-bar .n2-bullet.n2-active,
    #home #n2-ss-2 .nextend-bullet-bar .n2-bullet:hover,
    #home #n2-ss-2 .nextend-bullet-bar .n2-bullet:focus-visible {
        background-color: #00c1c4 !important;
    }
}