/* ╔═════════════════════════════════════════════════════════════════════════╗ */
/* ║                        BACKGROUND COLOURS                               ║ */
/* ╚═════════════════════════════════════════════════════════════════════════╝ */



/* hide radio inputs visually but keep them accessible */
input[type="radio"] {
  display: none;
}

/* season toggle navigation styles */
.season-toggle {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin: 1em 0;
}

.season-toggle label {
  margin: 0.5em;
  padding: 0.6em 1.2em;
  border-radius: 5px;
  cursor: pointer;
  transition: background 0.3s, color 0.3s, border 0.3s, outline 0.3s;
  user-select: none;
  font-weight: bold;
  color: #000;
  border: 2px solid transparent;
}

/* focus state for accessibility */
.season-toggle label:focus {
  outline: 2px solid #000;
  outline-offset: 2px;
  animation: pulse-border 1.5s ease-in-out infinite;
}

/* default label colours for each season */
.season-toggle label[for="spring"] {
  background: #c0b9cb;
}

.season-toggle label[for="summer"] {
  background: #81efa5;
}

.season-toggle label[for="autumn"] {
  background: #66b595;
}

.season-toggle label[for="winter"] {
  background: #fff1e8;
}

/* selected label styles: match season background with border */
#spring:checked ~ .wrapper .season-toggle label[for="spring"] {
  background: #c0b9cb;
  color: #000;
  animation: pulse-border 1.5s ease-in-out infinite;

}

#summer:checked ~ .wrapper .season-toggle label[for="summer"] {
  background: #81efa5;
  color: #000;
  animation: pulse-border 1.5s ease-in-out infinite;

}

#autumn:checked ~ .wrapper .season-toggle label[for="autumn"] {
  background: #66b595;
  color: #000;
  animation: pulse-border 1.5s ease-in-out infinite;

}

#winter:checked ~ .wrapper .season-toggle label[for="winter"] {
  background: #fff1e8;
  color: #000;
  animation: pulse-border 1.5s ease-in-out infinite;

}

/* background colour changes for wrapper */
.wrapper {
  min-height: 100vh;
  transition: background 0.5s;
}

#spring:checked ~ .wrapper {
  background: #c0b9cb;
}

#summer:checked ~ .wrapper {
  background: #81efa5;
}

#autumn:checked ~ .wrapper {
  background: #66b595;
}

#winter:checked ~ .wrapper {
  background: #fff1e8;
}

/* content visibility */
.content {
  display: none;
}

#spring:checked ~ .wrapper main .spring,
#summer:checked ~ .wrapper main .summer,
#autumn:checked ~ .wrapper main .autumn,
#winter:checked ~ .wrapper main .winter {
  display: block;
}

/* ensure only visible content is accessible to screen readers */
#spring:not(:checked) ~ .wrapper main .spring,
#summer:not(:checked) ~ .wrapper main .summer,
#autumn:not(:checked) ~ .wrapper main .autumn,
#winter:not(:checked) ~ .wrapper main .winter {
  display: none !important;
}

/* pulse selected season outline (indicating it is selectable) */
@keyframes pulse-border {
  0%, 100% {
    border-color: rgba(0, 0, 0, 0.1);
  }
  50% {
    border-color: rgba(0, 0, 0, 0.9);
  }
}