/* ═══════════════════════════════════════════
   Theme Toggle Button — fixed bottom-left
   ═══════════════════════════════════════════ */

.theme-toggle {
  position: fixed;
  bottom: 24px;
  left: 24px;
  z-index: 50;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid var(--nav-border);
  background: var(--nav-bg);
  color: var(--color-heading);
  cursor: pointer;
  display: grid;
  place-items: center;
  box-shadow: var(--shadow-sm);
  transition: background 0.3s ease, border-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
  -webkit-tap-highlight-color: transparent;
}

.theme-toggle:hover {
  background: var(--icon-btn-hover-bg);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.theme-toggle:active {
  transform: scale(0.95);
}

.theme-toggle svg {
  width: 22px;
  height: 22px;
  transition: transform 0.3s ease, opacity 0.2s ease;
}

.theme-toggle .icon-sun,
.theme-toggle .icon-moon {
  position: absolute;
  transition: opacity 0.25s ease, transform 0.3s ease;
}

/* Light theme: show moon icon (to switch to dark) */
.theme-toggle .icon-moon {
  opacity: 1;
  transform: rotate(0deg);
}

.theme-toggle .icon-sun {
  opacity: 0;
  transform: rotate(-90deg);
}

/* Dark theme: show sun icon (to switch to light) */
[data-theme="dark"] .theme-toggle .icon-moon {
  opacity: 0;
  transform: rotate(90deg);
}

[data-theme="dark"] .theme-toggle .icon-sun {
  opacity: 1;
  transform: rotate(0deg);
}

@media (max-width: 640px) {
  .theme-toggle {
    bottom: 16px;
    left: 16px;
    width: 40px;
    height: 40px;
  }

  .theme-toggle svg {
    width: 20px;
    height: 20px;
  }
}