/* Theme toggle control: standalone CSS file
   - Uses only HTML + CSS
   - Checkbox with id `theme-toggle-checkbox` kept for existing JS
   - Smaller overall size; the moving knob contains the icon (sun or moon)
*/

.theme-toggle {
  display: inline-flex;
  align-items: center;
}

/* hide the native checkbox but keep it accessible */
.theme-toggle-checkbox {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
  border: 0;
  padding: 0;
  margin: -1px;
}

.theme-toggle-label {
  --w: 52px; /* overall width */
  --h: 28px; /* overall height */
  --knob: 22px; /* diameter of moving circle */
  display: inline-block;
  position: relative;
  width: var(--w);
  height: var(--h);
  background: rgba(0,0,0,0.12);
  border-radius: 999px;
  cursor: pointer;
  transition: background-color 220ms ease, box-shadow 220ms ease;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.04);
}

/* decorative icons (we position them so they overlap the knob) */
.theme-toggle-label .sun,
.theme-toggle-label .moon {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 15px; /* icons size */
  line-height: 1;
  pointer-events: none;
  transition: opacity 220ms ease, transform 220ms ease;
  z-index: 4; /* sit above knob */
}

/* position sun at left knob center, moon at right knob center */
.theme-toggle-label .sun {
  left: calc(4px + (var(--knob) / 2) - 0.5em);
  color: #FFD34D;
}
.theme-toggle-label .moon {
  left: calc(100% - 4px - (var(--knob) / 2) - 0.6em);
  color: #ffffff;
}

/* knob */
.theme-toggle-label .knob {
  position: absolute;
  top: 50%;
  left: 4px;
  width: var(--knob);
  height: var(--knob);
  transform: translateY(-50%);
  background: #ffffff9c;
  border-radius: 50%;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.075);
  transition: left 260ms cubic-bezier(.2,.9,.2,1), background-color 260ms ease, box-shadow 260ms ease;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* When checked (dark mode), move knob to the right and change background */
.theme-toggle-checkbox:checked + .theme-toggle-label {
  background: rgba(0,0,0,0.76);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.02);
}
.theme-toggle-checkbox:checked + .theme-toggle-label .knob {
  left: calc(100% - var(--knob) - 4px);
  background: #222;
  box-shadow: 0 6px 18px rgba(0,0,0,0.28);
}

/* Icons visibility rules: icon inside knob shows brightly, the opposite icon is dim */
.theme-toggle-checkbox:not(:checked) + .theme-toggle-label .sun { opacity: 1; transform: translateY(-50%) scale(1); }
.theme-toggle-checkbox:not(:checked) + .theme-toggle-label .moon { opacity: 0.24; transform: translateY(-50%) scale(.86); }

.theme-toggle-checkbox:checked + .theme-toggle-label .sun { opacity: 0.24; transform: translateY(-50%) scale(.86); }
.theme-toggle-checkbox:checked + .theme-toggle-label .moon { opacity: 1; transform: translateY(-50%) scale(1); }

/* ensure the icon appears inside the knob visually by masking overlap */
.theme-toggle-label .sun, .theme-toggle-label .moon { pointer-events: none; }

/* focus styles for accessibility */
.theme-toggle-checkbox:focus + .theme-toggle-label { box-shadow: 0 0 0 4px rgba(100,150,255,0.12); }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .theme-toggle-label, .theme-toggle-label .knob, .theme-toggle-label .sun, .theme-toggle-label .moon { transition: none !important; }
}