/* ==========================================================================
   Site-wide segmented toggle
   --------------------------------------------------------------------------
   Markup (built in JS):
     .site-toggle                      rounded white track
       .site-toggle__indicator         glassy green pill that slides under the active button
       .site-toggle__button            one option; add .is-active to the selected one
   Use enhanceSiteToggle() / syncSiteToggleIndicator() from utility_UI.js
   to create and move the sliding pill.
   ========================================================================== */

.site-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    width: fit-content;
    padding: 4px;
    border: 1px solid #e3eaf1;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06);
    isolation: isolate;
}

/* Sliding glassy green pill. Position and width are set from JS. */
.site-toggle__indicator {
    position: absolute;
    top: 4px;
    bottom: 4px;
    left: 0;
    width: 0;
    z-index: 0;
    border: 1px solid rgba(16, 185, 129, 0.35);
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(209, 250, 229, 0.95) 0%, rgba(167, 243, 208, 0.75) 55%, rgba(110, 231, 183, 0.6) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.85),
        0 2px 8px rgba(16, 185, 129, 0.18);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    opacity: 0;
    pointer-events: none;
}

/* Only animate after the first placement so the pill does not slide in from the left edge. */
.site-toggle.is-ready .site-toggle__indicator {
    opacity: 1;
    transition: transform 250ms linear, width 250ms linear;
}

.site-toggle__button {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #4b5b6e;
    cursor: pointer;
    font: inherit;
    font-weight: 700;
    padding: 7px 14px;
    white-space: nowrap;
    transition: color 200ms linear;
}

.site-toggle__button:hover { color: #0f766e; }

.site-toggle__button:focus-visible {
    outline: 2px solid rgba(16, 185, 129, 0.45);
    outline-offset: 1px;
}

.site-toggle__button.is-active { color: #0f5f4f; }

/* Before JS runs (or without it), show the active state directly on the button. */
.site-toggle:not(.is-ready) .site-toggle__button.is-active {
    background: rgba(167, 243, 208, 0.75);
}

@media (prefers-reduced-motion: reduce) {
    .site-toggle.is-ready .site-toggle__indicator { transition: none; }
}