/* ========================================================================
   MOCKUP ONLY: floating palette switcher (js/mockup/palette-switcher.js)
   Fixed bottom-left, desktop only (from xl, where the desktop navigation
   starts). Neutral styling, so it doesn't take colours from the palette it
   switches. Not part of the Umbraco build.
 ========================================================================== */

.palette-switcher {
  display: none;
}

@media (width >= 1200px) {
  .palette-switcher {
    display: grid;
  }
}

.palette-switcher {
  position: fixed;
  left: 1rem;
  bottom: 1rem;
  z-index: 70;
  gap: 0.25rem;
  margin: 0;
  padding: 0.75rem;
  border: 0;
  border-radius: var(--box-br);
  background-color: #fff;
  box-shadow: 0 0.5rem 2rem rgb(0 0 0 / 0.2);
  font-family: var(--font-primary);
  font-size: var(--fs-sm);
  color: #222;
}

.palette-switcher__legend {
  float: left; /* lets the legend sit inside the padded box */
  width: 100%;
  margin-bottom: 0.25rem;
  padding: 0;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #555;
}

.palette-switcher__option {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.375rem 0.5rem;
  border-radius: var(--small-br);
  cursor: pointer;
}

.palette-switcher__option:has(:checked) {
  background-color: #f0f0f0;
  font-weight: var(--fw-semibold);
}

.palette-switcher__input {
  margin: 0;
  accent-color: #222;
}

/* Two halves: primary-600 + accent-400 */
.palette-switcher__swatch {
  width: 1.75rem;
  height: 1.25rem;
  border-radius: var(--small-br);
  background: linear-gradient(90deg, var(--swatch-a) 50%, var(--swatch-b) 50%);
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.15);
}