/**
 * @file
 * Form styles for Aotearoa theme.
 *
 * Uses variables from _variables/variables-forms.css
 */

/* Form item spacing */
.form-item {
  margin-bottom: var(--sp3);
}

/* Labels */
.form-item label {
  display: block;
  margin-bottom: var(--sp1);
  font-weight: 600;
  color: var(--neutral-800);
}

.form-required::after {
  content: " *";
  color: var(--error, #dc2626);
}

/* Shared input styles */
.form-text,
.form-email,
.form-select,
textarea {
  display: block;
  width: 100%;
  padding: var(--sp1) var(--sp2);
  font-family: var(--font-sans);
  font-size: var(--body-m-size);
  color: var(--form-text-color);
  background-color: var(--form-background);
  border: 1px solid var(--neutral-300);
  border-radius: var(--radius-lg);
  transition: border-color 0.2s ease;
}

.form-text:focus,
.form-email:focus,
.form-select:focus,
textarea:focus {
  outline: none;
  border-color: var(--primary);
}

textarea {
  min-height: 120px;
  resize: vertical;
  border-radius: var(--radius-md);
}

/* Checkboxes & Radios */
.form-type-checkbox,
.form-type-radio {
  display: flex;
  align-items: center;
  gap: var(--sp1);
}

.form-type-checkbox label,
.form-type-radio label {
  margin-bottom: 0;
  font-weight: 400;
}

input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--primary);
}

/* Form actions */
.form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp2);
  margin-top: var(--sp4);
  padding-bottom: var(--sp4);
}

/* Descriptions & Errors */
.form-item .description {
  margin-top: var(--sp1);
  font-size: var(--body-s-size);
  color: var(--neutral-600);
}

.form-item--error input,
.form-item--error select,
.form-item--error textarea {
  border-color: var(--error, #dc2626);
}

.form-item--error-message {
  margin-top: var(--sp1);
  font-size: var(--body-s-size);
  color: var(--error, #dc2626);
}