/* =========================================================
   Theme Toggle Button (Top Right Floating)
   ========================================================= */

.theme-toggle {
  position: fixed;
  top: 12px;
  right: 12px;
  z-index: 9999;

  margin: 8px;

  background-color: var(--bg-color);

  border: 2px solid var(--border-color);
  border-radius: 20px;
  padding: 6px 10px;
  color: var(--text-color);

  cursor: pointer;
  font-size: 18px;
  line-height: 1;

  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    transform 0.1s ease;
}

/* Hover */
.theme-toggle:hover {
  background-color: var(--light-bg-color);
  border-color: var(--border-color-highlight);
}

/* Click feedback */
.theme-toggle:active {
  transform: scale(0.95);
}

/* =========================================================
   Emoji Logic (shows NEXT theme)
   ========================================================= */

/* DARK THEME ACTIVE (default) → show SUN (switch to light) */
.icon-sun {
  display: inline;
}

.icon-moon {
  display: none;
}

/* LIGHT THEME ACTIVE → show MOON (switch to dark) */
.light .icon-sun {
  display: none;
}

.light .icon-moon {
  display: inline;
}

/* =========================================================
   Smooth Theme Transitions
   ========================================================= */

body {
  transition: background-color 0.25s ease, color 0.25s ease;
}

a,
h1, h2, h3, h4, h5, h6,
strong,
hr {
  transition: color 0.25s ease, border-color 0.25s ease;
}