/* Light mode styles */
body.light {
  background-color: #8fb634; /* soft green background */
  color: #222222; /* dark grey text */
  font-family: 'Open Sans', sans-serif;
  padding: 20px;
  margin: 0;
  position: relative;
  min-height: 90vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* Dark mode styles */
body.dark {
  background-color: #1b2a0e; /* deep forest green background */
  color: #d9e6c2; /* pale sage text */
  font-family: 'Open Sans', sans-serif;
  padding: 20px;
  margin: 0;
  position: relative;
  min-height: 90vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* Dark/Light mode toggle switch - top left */
.switch {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 10;
}

/* Search form - top right */
form {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Nav buttons container - bottom center */
.nav_buttons_container {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  width: 90vw;
  max-width: 1200px;
  z-index: 10;
}

/* Nav buttons */
body.light .nav_button {
  text-decoration: none;
  background-color: white;
  color: #8fb634;
  border-radius: 5px;
  border: 1px solid #8fb634;
  cursor: pointer;
  font-size: 25px;
  padding: 8px 20px;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

body.light .nav_button:hover {
  background-color: #7aa42a;
  color: white;
  border-color: #7aa42a;
}

body.dark .nav_button {
  text-decoration: none;
  background-color: #3a5a1a;
  color: #e6f0d4;
  border-radius: 5px;
  border: 1px solid #4a6a1f;
  cursor: pointer;
  font-size: 25px;
  padding: 8px 20px;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

body.dark .nav_button:hover {
  background-color: #5a7d2a;
  color: #121212;
  border-color: #5a7d2a;
}

/* Search bar */
body.light .search_bar {
  background-color: #e0e0e0;
  color: #555555;
  border-radius: 5px;
  border: 1px solid #8fb634;
  padding: 6px 12px;
  font-size: 20px;
  transition: background-color 0.3s ease, color 0.3s ease;
}

body.light .search_bar::placeholder {
  color: #888888;
}

body.dark .search_bar {
  background-color: #2c3a12;
  color: #cccccc;
  border-radius: 5px;
  border: 1px solid #5a7d2a;
  padding: 6px 12px;
  font-size: 20px;
  transition: background-color 0.3s ease, color 0.3s ease;
}

body.dark .search_bar::placeholder {
  color: #7a8b5a;
}

/* Search button */
body.light .search_button {
  background-color: white;
  color: #8fb634;
  border-radius: 5px;
  border: 1px solid #8fb634;
  cursor: pointer;
  padding: 6px 16px;
  font-size: 20px;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

body.light .search_button:hover {
  background-color: #7aa42a;
  color: white;
  border-color: #7aa42a;
}

body.dark .search_button {
  background-color: #3a5a1a;
  color: #e6f0d4;
  border-radius: 5px;
  border: 1px solid #4a6a1f;
  cursor: pointer;
  padding: 6px 16px;
  font-size: 20px;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

body.dark .search_button:hover {
  background-color: #5a7d2a;
  color: #121212;
  border-color: #5a7d2a;
}

/* Clock (#samla) */
#samla {
  font-size: 200px !important;
  font-weight: 700;
  border: 2px solid currentColor;
  border-radius: 20px;
  padding: 10px 20px;
  background-color: #fffde7; /* light mode fallback */
  color: inherit;
  text-align: center;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

body.dark #samla {
  background-color: #2c3a12;
  border-color: #5a7d2a;
  color: #c9d6b9;
  box-shadow: 0 0 10px rgba(0,0,0,0.5);
}

/* Date (#date) */
#date {
  font-size: 25px !important;
  margin-top: 10px;
  font-weight: 600;
  color: inherit;
  text-align: center;
}

/* Label text for toggle */
body.light .label-text {
  color: #3a5a1a;
  font-weight: 600;
  font-size: 1rem;
  user-select: none;
}

body.dark .label-text {
  color: #a3b47a;
  font-weight: 600;
  font-size: 1rem;
  user-select: none;
}

/* Hide unused time spans */
#hour, #minute {
  display: none;
}