/* -----------------------------------------------------------
  Forms
-------------------------------------------------------------- */
form {
  margin: 1rem 0;
}
div.form-item {
  margin-bottom: 1rem;
  position: relative;
}
fieldset {
  border: none;
  margin: 1rem 0;
}
form legend {
  display: inline-block;
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.4;
  margin-bottom: 1rem;
}
fieldset.fieldgroup legend {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}
fieldset.fieldgroup div.form-item {
  margin-bottom: 0.5rem;
}
label {
  display: block;
  font-weight: 600;
  line-height: 1.5;
  margin-bottom: 0.5rem;
}
input,
select,
textarea {
  border: 2px solid currentColor;
  display: block;
  font-family: inherit;
  font-size: inherit;
  padding: 0.5rem;
}
select {
  padding: 0.45rem;
}
input[type="search"] {
  -webkit-appearance: none;
}
textarea {
  max-width: 90%;
  min-height: 10em;
}
input:disabled {
  background-color: lightgrey;
}

/* -----------------------------------------------------------
 Checkboxes and Radios
-------------------------------------------------------------- */
/* Hide default Checkboxes and Radios */
/* Only if its label is not visually-hidden */
input[type="checkbox"]:where(:not(label.visually-hidden ~ input[type="checkbox"])),
input[type="radio"]:where(:not(label.visually-hidden ~ input[type="radio"])) {
  bottom: 0;
  clip: rect(1px, 1px, 1px, 1px);
  height: 1px;
  left: 0;
  overflow: hidden;
  position: absolute;
  width: 1px;
}
/* Labels for Checkboxes and Radios  */
input[type="checkbox"] ~ label,
input[type="radio"] ~ label {
  cursor: pointer;
  display: inline-block;
  font-weight: 400;
  padding-left: 2.25rem;
  position: relative;
}
/* Draw our own Checkboxes and Radios  */
input[type="checkbox"] ~ label:before,
input[type="radio"] ~ label:before {
  border: 2px solid currentColor;
  content: "";
  height: 1.5rem;
  left: 0;
  outline: 2px solid transparent;
  outline-offset: 4px;
  position: absolute;
  transition: outline-offset 0.2s linear;
  width: 1.5rem;
}
/*  Radios are round  */
input[type="radio"] ~ label:before {
  border-radius: 50%;
}
/* Focus state */
input[type="checkbox"]:focus ~ label:before,
input[type="radio"]:focus ~ label:before {
  outline-color: currentColor;
  outline-offset: 2px;
}
/* Checkbox when checked */
input[type="checkbox"]:checked ~ label:after {
  border: 3px solid currentColor;
  border-left: none;
  border-top: none;
  content: "";
  height: 1.1rem;
  left: 0.5rem;
  position: absolute;
  top: 0.125rem;
  -webkit-transform: rotate(40deg);
  transform: rotate(40deg);
  -webkit-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
  width: 0.45rem;
}
/* Radios when selected */
input[type="radio"]:checked ~ label:after {
  background-color: currentColor;
  border: 3px solid currentColor;
  border-radius: 50%;
  content: "";
  height: 1rem;
  left: 0.25rem;
  position: absolute;
  top: 0.25rem;
  width: 1rem;
}

/* --------------------------------------------------------------
  Form Actions (Submit button)
-------------------------------------------------------------- */
.form-actions {
  margin: 1rem 0;
}
input[type="submit"] {
  -webkit-appearance: none;
  cursor: pointer;
  font-weight: 500;
}

/* -----------------------------------------------------------
  User feedback
-------------------------------------------------------------- */
span.required {
  color: darkred;
  font-size: small;
}
div.form-item--description {
  font-size: 0.9rem;
  margin: 0.5rem 0 1rem 0;
}
div.form-item--error-message {
  background: url("../images/icon-error.svg") 0.5rem center no-repeat;
  background-color: color-mix(in srgb, darkred 4%, white);
  background-size: 1rem;
  border: 1px solid darkred;
  color: darkred;
  display: inline-block;
  margin: 0 0 1rem 0;
  padding: 0.5rem 0.5rem 0.5rem 2rem;
}
div.form-item--error-message a {
  color: darkred;
}

/* -----------------------------------------------------------
  For the Honeypot
-------------------------------------------------------------- */
#edit-url {
  left: -9999em;
  position: absolute;
}