/*!
 * bht-theme.css - shared sticky dark/light toggle (FAB)
 * -----------------------------------------------------
 * Lifted from bht-home.css, which was the only page that had a toggle, so the
 * button looks and sits identically on every page: fixed bottom-right, 52px
 * round, 46px under 480px wide.
 *
 * SELECTOR NOTE: home used `#bht-page[data-theme="light"] ~ .bht-theme-fab`,
 * a sibling combinator off a wrapper that 20 of the 39 pages do not have.
 * These rules key off :root[data-theme] instead, which exists everywhere, so
 * one stylesheet serves the whole network.
 */

.bht-theme-fab {
  position: fixed;
  right: clamp(16px, 4vw, 28px);
  bottom: clamp(16px, 4vw, 28px);
  z-index: 950;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #131d2e;
  color: #f2ece4;
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.38), 0 2px 8px rgba(0, 0, 0, 0.22);
  cursor: pointer;
  padding: 0;
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease,
              background .22s ease, color .22s ease;
}

.bht-theme-fab:hover {
  transform: translateY(-3px);
  border-color: #f68d1e;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.45), 0 0 0 4px rgba(246, 141, 30, 0.15);
}

.bht-theme-fab:active { transform: translateY(-1px) scale(0.96); }

.bht-theme-fab:focus-visible {
  outline: 2px solid #f68d1e;
  outline-offset: 3px;
}

/* Sun shows in dark mode (click for light), moon shows in light mode. */
.bht-theme-icon { display: none; }
.bht-theme-fab .bht-theme-icon-sun { display: block; }
:root[data-theme="light"] .bht-theme-fab .bht-theme-icon-sun { display: none; }
:root[data-theme="light"] .bht-theme-fab .bht-theme-icon-moon { display: block; }

/* Recolour the button itself in light mode, using the same warm cream palette
   the designer established (#F6F5F2 / #1C1A18 / #B5590F), so it doesn't read as
   a leftover dark-mode element sitting on a light page. */
:root[data-theme="light"] .bht-theme-fab {
  background: #f6f5f2;
  color: #1c1a18;
  border-color: rgba(28, 26, 24, 0.15);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08);
}
:root[data-theme="light"] .bht-theme-fab:hover {
  border-color: #b5590f;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.16), 0 0 0 4px rgba(181, 89, 15, 0.12);
}

@media (max-width: 480px) {
  .bht-theme-fab { width: 46px; height: 46px; }
}

@media (prefers-reduced-motion: reduce) {
  .bht-theme-fab { transition: none; }
  .bht-theme-fab:hover, .bht-theme-fab:active { transform: none; }
}