/* Form input */

::-webkit-input-placeholder {
  color: #002621aa;
  font-size: max(18px, .875em);
  font-weight: var(--regular);
}

::-moz-placeholder {
  color: #002621aa;
  font-size: max(18px, .875em);
  font-weight: var(--regular);
}

input[type="text"], input[type="number"], input[type="email"], input[type="tel"], input[type="search"],
input[type="date"], input[type="password"], input[type="url"], textarea, select {
  --border: var(--green-dark);
  display: block;
  font-family: inherit;
  width: 100%;
  max-width: 26rem;
  height: 2.25rem;
  padding: .55rem .625rem .5rem;
  border-radius: .25em;
  border: 1px solid var(--border);
  box-shadow: inset 0 0 0 1px var(--white), inset 0 0 .25em rgba(0, 0, 0, .1);
  background-color: var(--whiter);
  color: var(--green-dark);
  font-size: 1rem;
  font-weight: var(--bold);
  line-height: 1.2rem;
  transition: border 200ms, box-shadow 200ms;
}

input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

input[type="search"] {
  -webkit-appearance: textfield;
  appearance: textfield;
}

input[type="date"] {
  -webkit-appearance: none; /* Disable Safari's native styling */
  -moz-appearance: none;
  appearance: none;
  color: #000;
}

input[type="date"]::-webkit-datetime-edit {
  color: #004C43;
  padding-bottom: .125rem;
}

textarea {
  max-width: none;
  height: 12.375rem;
}

select {
  background-image: linear-gradient(45deg, transparent 50%, var(--green-dark) 50%), linear-gradient(135deg, var(--green-dark) 50%, transparent 50%);
  background-position: calc(100% - 24px) calc(.875em + 3px), calc(100% - 18px) calc(.875em + 3px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  -webkit-appearance: none;
  appearance: none;
}

input[type="text"]:focus, input[type="number"]:focus, input[type="email"]:focus, input[type="tel"]:focus, input[type="search"]:focus,
input[type="date"]:focus, input[type="password"]:focus, input[type="url"]:focus, textarea:focus, select:focus {
  --border: var(--green);
  outline: 0;
  box-shadow: inset 0 0 0 1px var(--white), inset 0 0 .25em rgba(0, 0, 0, 0), 0 0 0 3px var(--border);
}

select:hover, select:focus {
  background-image: linear-gradient(45deg, transparent 50%, var(--green) 50%), linear-gradient(135deg, var(--green) 50%, transparent 50%);
}

label:has(+input:not([type="checkbox"]):not([type="radio"])) {
  display: block;
  margin-bottom: .25em;
}

label:has(input:focus), label:has(+input:focus), label:has(select:focus), label:has(+select:focus), label:has(textarea:focus), label:has(+textarea:focus) {
  color: var(--green);
}

label:has(input[type="checkbox"]:focus), label:has(input[type="radio"]:focus) {
  color: inherit;
}

input[type="checkbox"], input[type="radio"] {
  margin-right: .625em;
  margin-bottom: .125em;
  accent-color: var(--green);
}

.bg-green-dark [type="checkbox"], .bg-green-dark input[type="radio"] {
  accent-color: var(--yellow);
}

label:has(input[type="checkbox"]), label:has(input[type="radio"]) {
  display: inline-flex !important;
  align-items: center;
  font-weight: var(--bold);
  cursor: pointer;
}

label:has(input[type="checkbox"]):active, label:has(input[type="radio"]):active {
  transform: translateY(1px);
  opacity: .85;
}

label:has(input[type="checkbox"]:checked), label:has(input[type="radio"]:checked), input[type="checkbox"]:checked+label, input[type="radio"]:checked+label {
  color: var(--green);
}

.bg-green-dark label:has(input[type="checkbox"]:checked), .bg-green-dark label:has(input[type="radio"]:checked), .bg-green-dark input[type="checkbox"]:checked+label, .bg-green-dark input[type="radio"]:checked+label {
  color: var(--yellow);
}

fieldset {
  border: 1px solid var(--gray);
  margin-block: var(--space-3) var(--space-2);
}

fieldset legend {
  font-weight: var(--bold);
  margin-bottom: 1rem;
}


/* Specific layouts */

form [class*="columns-"] {
  --column-gap: var(--space-3);
  --row-gap: 0;
}

.form-row-two {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: flex-start;
  column-gap: calc(var(--space-2) + .5rem);
}

.form-row-two>* {
  flex: 1 1 240px;
}
  
form p {
  margin-bottom: var(--space-2);
}

.checkbox-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem 1.5rem;
  margin-block: var(--space-3);
}

@media (max-width: 480px) {
  .checkbox-list {
    column-gap: 0;
  }

  .checkbox-list>* {
    min-width: 50%;
  }
}

.hf-message {
  padding: 1.5rem 1rem;
  margin-block: 1rem;
  text-align: center;
  font-weight: var(--bold);
  color: var(--green-dark);
  background-color: var(--yellow);
}

.hf-message-warning {
  color: var(--white);
  background-color: var(--invalid);
}