/* === Hero Banner Base Styles === */
.hero {
  background: var(--green-primary);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 26px 15px;
  height: 44vh;
  min-height: 240px;
  max-height: 360px;
}

.hero h1 {
  font-size: 1.8rem;
}

.hero form input {
  height: 40px;
  font-size: 0.95rem;
  border-radius: 6px;
  padding: 0 0.75rem;
  flex: 1 1 auto;
}

/* Homepage Search Button */
.hero form button {
  height: 40px;
  background-color: var(--white);
  color: var(--green-primary);
  border: none;
  white-space: nowrap;
  border-radius: 6px;
  padding: 0.5rem 1rem;
  transition: background-color 0.2s, color 0.2s;
}

.hero form button:hover {
  background-color: var(--green-medium);
  color: var(--white);
}


/* Match input and button height */
.search-input {
  height: 36px;
  font-size: 0.95rem;
  border-radius: 6px;
  padding: 0.375rem 0.75rem;
  max-width: 500px;
  flex: 1 1 auto;
}

/* Search Button Utility */
.search-btn {
  background-color: var(--green-medium);
  color: var(--white);
  border: none;
  height: 36px;
  font-size: 0.95rem;
  padding: 0 20px;
  white-space: nowrap;
  border-radius: 6px;
  transition: background-color 0.2s, color 0.2s;
}

.search-btn:hover {
  background-color: var(--green-primary);
  color: var(--white);
}