/*------------------------------------------------------------------*\
    COMPONENTS - Theme Switcher  ([theme_switcher] shortcode)
    Modern, accessible light/dark toggle for the Elementor header.

    A11y (validated against WAI / accessible-toggle best practice):
      - real <button>, native keyboard (Tab + Space/Enter)
      - accessible name (aria-label) + state via aria-pressed
      - decorative track/icons aria-hidden
      - ≥44×44 hit area (WCAG 2.5.5), visible :focus-visible ring
      - ≥3:1 contrast on the control in every state
      - honours prefers-reduced-motion

    State is set by theme-toggle.js on the button:
      aria-pressed="true" / .is-dark  → dark active.
\*------------------------------------------------------------------*/

.c-theme-switch {
    /* reset + ≥44px hit area around the visual track */
    appearance: none;
    -webkit-appearance: none;
    padding: 0px;
    border: 0;
    background: transparent;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.c-theme-switch:focus-visible {
    outline: none;
}
.c-theme-switch:focus-visible .c-theme-switch__track {
    box-shadow: 0 0 0 2px var(--neutral-900, #0E0E0E),
                0 0 0 4px var(--color-primary, #2C3D31);
}

/* ── Track (the pill) — solid surfaces for clear contrast in both
       themes (no glassy transparency that disappeared on light bg). ── */
.c-theme-switch__track {
    position: relative;
    display: inline-block;
    width: 52px;
    height: 28px;
    border-radius: 999px;
    background-color: #303030;          /* light state: dark track */
    border: 1px solid #fff;             /* mobile: white rim (desktop restores track-matched border below) */
    transition: background-color 0.25s ease, border-color 0.25s ease;
}
/* Dark active → invert the track to a light surface for the same
   visual weight (no green). */
.c-theme-switch[aria-pressed="true"] .c-theme-switch__track {
    background-color: transparent;
    border-color: #fff;                 /* mobile: keep the white rim in the dark state too */
}

/* ── Icons (sun / moon) ── */
.c-theme-switch__ic {
    position: absolute;
    top: 50%;
    width: 14px;
    height: 14px;
    transform: translateY(-50%);
    color: var(--neutral-50, #FAFAFA);
    transition: opacity 0.25s ease;
    pointer-events: none;
}
.c-theme-switch__ic--sun  { left: 7px; }
.c-theme-switch__ic--moon { right: 7px; }

/* Light active → sun lit, moon dim. Dark active → the reverse. */
.c-theme-switch__ic--sun  { opacity: 1; }
.c-theme-switch__ic--moon { opacity: 1; }
.c-theme-switch[aria-pressed="true"] .c-theme-switch__ic--sun  { opacity: 1; }
.c-theme-switch[aria-pressed="true"] .c-theme-switch__ic--moon { opacity: 1; }

/* ── Knob ── */
.c-theme-switch__knob {
    position: absolute;
    top: 2px;
    left: 3px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background-color: var(--neutral-50, #FAFAFA);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.c-theme-switch[aria-pressed="true"] .c-theme-switch__knob {
    transform: translateX(24px);
    background-color: #fff;   /* dark knob on the light track (no green) */
}

/* Icons follow the track: light on dark track, dark on light track.
   Mobile keeps both symbols white (desktop restores the dark-on-light below). */
.c-theme-switch[aria-pressed="true"] .c-theme-switch__ic {
    color: #fff;
}

/* ── Hover feedback ── */
.c-theme-switch:hover .c-theme-switch__track {
    background-color: transparent;
    border-color: #fff;
}

@media (prefers-reduced-motion: reduce) {
    .c-theme-switch__track,
    .c-theme-switch__ic,
    .c-theme-switch__knob {
        transition: none;
    }
}

/* ── Desktop (≥769) — restore the original look ──
   Mobile (base) shows a white rim + always-white icons (matches the design
   reference). From the inline-nav breakpoint up, put back the track-matched
   border and the dark-on-light-track icon colour, so desktop is unchanged. */
@media (min-width: 769px) {
    .c-theme-switch__ic--moon { opacity: 0.35; }
    .c-theme-switch[aria-pressed="true"] .c-theme-switch__ic--sun  { opacity: 0.35; }
    .c-theme-switch[aria-pressed="true"]:hover .c-theme-switch__track {
        border-color: #C4C4C4;   /* bg unchanged from the pressed state (#C4C4C4) */
    }
    .c-theme-switch__track {
        border-color: #303030;
    }
    .c-theme-switch[aria-pressed="true"] .c-theme-switch__track {
        background-color: #C4C4C4;
        border-color: #D0D0D0;
    }
    .c-theme-switch[aria-pressed="true"] .c-theme-switch__ic {
        color: #303030;
    }
    .c-theme-switch[aria-pressed="true"] .c-theme-switch__knob {
        background-color: #303030;   /* dark knob on the light track; transform comes from the base rule */
    }
    .c-theme-switch:hover .c-theme-switch__track {
        background-color: #b4b4b4; 
        border-color: #b4b4b4;  
    }
}