/* ==========================================================================
   Theme Toggle — Dark / Light switch

   The button shows the icon of the theme it will switch TO:
     dark active  -> sun  ("switch to light")
     light active -> moon ("switch to dark")
   ========================================================================== */

.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    padding: 0;
    border-radius: var(--radius-full);
    border: 1px solid var(--border-light);
    background: transparent;
    color: var(--color-white);
    cursor: pointer;
    transition:
        color var(--transition-fast),
        border-color var(--transition-fast),
        background var(--transition-fast);
}

.theme-toggle:hover {
    color: var(--color-cyan);
    border-color: var(--border-cyan-hover);
    background: var(--tint-cyan-weak);
}

.theme-toggle:focus-visible {
    outline: none;
    border-color: var(--color-cyan);
    box-shadow: var(--focus-ring);
}

/* flex-shrink:0 is REQUIRED. The button is a flex container and these SVGs
   carry no width/height attributes, so their flex basis resolves to zero
   content width; combined with `max-width:100%` from reset.css they collapse
   to 0px wide and the icon disappears. Same guard as `.btn svg`. */
.theme-toggle svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* ---------- Icon swap ----------

   `display` is deliberately NOT set on `.theme-toggle svg`. That selector
   scores 0-1-1 and would outrank the 0-1-0 icon classes below, forcing BOTH
   icons visible. Keep every display rule here at the same weight. */

/* Dark is the default theme, so the sun ("go light") shows first. */
.theme-toggle__icon--sun {
    display: block;
}

.theme-toggle__icon--moon {
    display: none;
}

:root[data-theme="light"] .theme-toggle__icon--sun {
    display: none;
}

:root[data-theme="light"] .theme-toggle__icon--moon {
    display: block;
}

/* Small flourish on swap. The class is added by theme-toggle.js and removed
   when the animation ends. */
.theme-toggle.is-switching svg {
    animation: themeIconSpin var(--transition-base) ease;
}

@keyframes themeIconSpin {
    from {
        transform: rotate(-90deg) scale(0.6);
        opacity: 0;
    }
    to {
        transform: rotate(0) scale(1);
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .theme-toggle.is-switching svg {
        animation: none;
    }
}

/* ---------- Mobile-menu variant ---------- */

/* Inside the slide-out panel the control is a labelled full-width row rather
   than a bare icon, because there is room for the label and it reads clearer. */
.theme-toggle--mobile {
    width: 100%;
    height: auto;
    justify-content: space-between;
    gap: var(--space-sm);
    padding: 12px var(--space-md);
    border-radius: var(--radius-md);
    font-family: var(--font-label);
    font-size: var(--fs-body-sm);
    font-weight: var(--fw-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.theme-toggle__label::after {
    content: 'Light Mode';
}

:root[data-theme="light"] .theme-toggle__label::after {
    content: 'Dark Mode';
}

/* The desktop button is icon-only — hide the label without removing it from
   the accessibility tree. */
.theme-toggle:not(.theme-toggle--mobile) .theme-toggle__label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* On narrow screens the desktop toggle is dropped in favour of the one inside
   the mobile menu, matching how .main-nav__menu is hidden at this width. */
@media (max-width: 1024px) {
    .main-nav__actions .theme-toggle {
        display: none;
    }
}