/* ==========================================================================
   Gathern — theme toggle button + dark-mode base layer
   Loaded on both pages. The actual recoloring is done by theme.js; this file
   only styles the toggle control and pins the page-level surfaces.
   ========================================================================== */

/* ------------------------------------------------------------ base layer */

/* The browser paints the canvas using `color-scheme`. Without pinning it to
   light, a visitor whose OS is set to dark gets a dark canvas behind a light
   page — which is exactly how the detail page ended up unreadable in light
   mode, because it never declares its own background. */
html[data-gathern-theme='light'] {
  color-scheme: light;
  background-color: #ffffff;
}
html[data-gathern-theme='light'] body {
  background-color: #ffffff;
}

html[data-gathern-theme='dark'],
html[data-gathern-theme='dark'] body {
  background-color: #14142b !important;
  color-scheme: dark;
}

/* Page scrollbar only.
   Do NOT put scrollbar-color on `*` — that turns off the browser's overlay
   scrollbars and forces a permanent classic scrollbar, complete with arrow
   buttons, inside every scrollable container on the page. That is where the
   stray arrows and vertical bars inside the cards were coming from. */
html[data-gathern-theme='dark'] {
  scrollbar-color: #454578 #14142b;
}

/* Photos are a touch hot against a dark page */
html[data-gathern-theme='dark'] img:not([data-gathern-invert='1']) {
  filter: brightness(0.94);
}

/* Avoid a white flash before theme.js runs */
html:not(.gathern-theme-ready) { visibility: visible; }

/* --------------------------------------------------------- toggle button */
.gathern-theme-toggle {
  display: inline-flex !important;
  align-items: center;
  gap: 7px;
  height: 38px;
  padding: 0 14px;
  margin: 0 6px;
  border-radius: 22px;
  border: 1px solid #d9d9e0;
  background: transparent;
  color: #050536;
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  vertical-align: middle;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
  -webkit-tap-highlight-color: transparent;
}
.gathern-theme-toggle:hover { background: rgba(79, 35, 150, .07); border-color: #4f2396; color: #4f2396; }
.gathern-theme-toggle:focus-visible { outline: 2px solid #4f2396; outline-offset: 2px; }
.gathern-theme-toggle svg { flex: 0 0 auto; }

html[data-gathern-theme='dark'] .gathern-theme-toggle {
  border-color: #3a3a5c;
  color: #f5f5f5;
}
html[data-gathern-theme='dark'] .gathern-theme-toggle:hover {
  background: rgba(123, 87, 212, .18);
  border-color: #7b57d4;
  color: #b9a5e8;
}

/* Floating fallback (only used if no language button was found) */
.gathern-theme-toggle--floating {
  position: fixed;
  inset-inline-start: 18px;
  bottom: 18px;
  z-index: 2147483000;
  background: #ffffff;
  box-shadow: 0 6px 22px rgba(5, 5, 54, .18);
}
html[data-gathern-theme='dark'] .gathern-theme-toggle--floating {
  background: #14142b;
  box-shadow: 0 8px 30px rgba(0, 0, 0, .55);
}

/* ---------------------------------------------------------------- mobile */
@media (max-width: 900px) {
  .gathern-theme-toggle {
    height: 34px;
    padding: 0 11px;
    margin: 0 4px;
    font-size: 12.5px;
  }
}

/* On narrow phones drop the word and keep just the icon */
@media (max-width: 600px) {
  .gathern-theme-toggle {
    padding: 0;
    width: 34px;
    justify-content: center;
    border-radius: 50%;
  }
  .gathern-theme-toggle span { display: none; }
  .gathern-theme-toggle--floating {
    width: 44px;
    height: 44px;
  }
}