/* Sun/moon-over-a-hill theme toggle. Shared by every page.
   The theme color variables live in style.css / projects/vectr.css / aic.css. */

/* Soft, fast theme fade. Animate color/background on `body` so every element
   that INHERITS color fades in lockstep from a single transition. (A universal
   `* { transition: color }` puts a separate transition on every nested node;
   on mobile those compound and the deepest text lags seconds behind the bg.)
   Elements that set their own color opt in via their stylesheet. */
body {
  transition:
    background-color 0.2s ease,
    color 0.2s ease;
}

.theme-toggle {
  transition: color 0.2s ease;
}

main,
.container {
  position: relative;
}

/* Top row that holds the name block (index) or back-link (sub-pages) on the
   left and the toggle on the right, aligned to the content column. */
.site-header,
.topbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.header-text {
  min-width: 0;
}

.theme-control {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  flex: none;
}

/* On the off-brand sub-pages the control floats to the top-right of the column. */
.container > .theme-control {
  position: absolute;
  top: 0;
  right: 0;
}

.moon-phase {
  font-style: italic;
  font-size: 0.72rem;
  line-height: 1.2;
  color: var(--muted);
  white-space: nowrap;
  text-align: center;
  opacity: 0; /* shown only in dark mode (the moon is up) */
  transition: opacity 0.5s ease;
}

@media (prefers-color-scheme: dark) {
  .moon-phase {
    opacity: 1;
  }
}

:root[data-theme="dark"] .moon-phase {
  opacity: 1;
}

:root[data-theme="light"] .moon-phase {
  opacity: 0;
}

.theme-toggle {
  width: 2.9rem;
  height: 2.5rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--muted);
  cursor: pointer;
  display: none; /* shown only when JS is available */
}

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

.theme-toggle:hover {
  color: var(--text);
}

.theme-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 8px;
}

.theme-toggle svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* The orbit carries sun + moon along a clockwise arc; each body counter-rotates
   so it stays upright while travelling. */
.orbit {
  transform-box: view-box;
  transform-origin: 24px 30px;
}
.sun {
  transform-box: view-box;
  transform-origin: 24px 12px;
}
.moon {
  transform-box: view-box;
  transform-origin: 24px 48px;
}

.theme-toggle.anim .orbit,
.theme-toggle.anim .sun,
.theme-toggle.anim .moon {
  transition: transform 0.9s cubic-bezier(0.45, 0.05, 0.2, 1);
}

/* Sun and moon share the same outline weight so they read as a set. */
.sun circle {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}
.sun line {
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}
.hill {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}
.moon-disk {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}
.moon-lit {
  fill: currentColor;
}

/* Mobile: stack the toggle on its own row above full-width text, so the name
   and intro get the whole column (less wrapping) instead of being squeezed. */
@media (max-width: 640px) {
  .site-header {
    flex-direction: column-reverse;
    align-items: stretch;
    gap: 0.75rem;
  }
  .theme-control {
    align-items: flex-end;
  }
}

@media (prefers-reduced-motion: reduce) {
  .theme-toggle.anim .orbit,
  .theme-toggle.anim .sun,
  .theme-toggle.anim .moon {
    transition: none;
  }
}