/*
 * File: css/components/forms.css
 * Logic: Global Drupal/Webform styles — inputs, layout, actions.
 * Buttons: utilities.css (primary + outline, same as site-wide CTAs).
 */

/* --------------------------------------------------------------------------
   Labels & fieldsets
   -------------------------------------------------------------------------- */

form label,
.form-item label {
  display: block;
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--space-xs);
  color: var(--text-body);
}

.form-required::after {
  content: "*";
  color: var(--color-error-500);
  margin-left: 0.2em;
}

fieldset {
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;
}

fieldset legend {
  display: block;
  width: 100%;
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-lg);
  line-height: var(--line-height-tight);
  color: var(--text-title);
  margin-bottom: var(--space-md);
}

.form-item .description,
.form-item .form-item--description {
  margin-top: var(--space-2xs);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-base);
  color: var(--text-caption);
}

/* --------------------------------------------------------------------------
   Form items — spacing
   -------------------------------------------------------------------------- */

.form-item,
.js-form-item {
  margin-bottom: var(--space-md);
}

.form-item:last-child {
  margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   Text controls
   -------------------------------------------------------------------------- */

:is(
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="password"],
  input[type="search"],
  input[type="url"],
  input[type="number"],
  input[type="date"],
  input[type="time"],
  textarea,
  select
) {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  border: var(--border-width-sm) solid var(--form-border);
  border-radius: var(--form-radius);
  padding: var(--form-padding);
  font-family: var(--font-primary);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  color: var(--text-body);
  background-color: var(--form-bg);
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
}

:is(input, textarea, select):focus {
  outline: none;
  border-color: var(--form-border-focus);
  box-shadow: var(--form-focus-shadow);
}

textarea {
  resize: vertical;
  min-height: var(--form-min-height);
}

/* --------------------------------------------------------------------------
   Checkboxes & radios
   -------------------------------------------------------------------------- */

input[type="checkbox"],
input[type="radio"] {
  display: inline-block;
  width: auto;
  margin-right: var(--space-xs);
  vertical-align: middle;
}

.form-type-checkbox,
.form-type-radio,
.form-checkboxes .form-item,
.form-radios .form-item {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.form-type-checkbox label,
.form-type-radio label,
.form-checkboxes .form-item label,
.form-radios .form-item label {
  margin-bottom: 0;
  font-weight: var(--font-weight-regular);
}

/* --------------------------------------------------------------------------
   Form actions — layout (button visuals in utilities.css)
   -------------------------------------------------------------------------- */

.form-actions,
[data-drupal-selector="edit-actions"] {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
}

.form-actions .button,
.form-actions input[type="submit"],
.form-actions button[type="submit"],
.form-actions a.button {
  width: 100%;
  justify-content: center;
  text-align: center;
  white-space: normal;
  height: auto;
  min-height: var(--btn-size-square);
}

@media (min-width: 768px) {
  .form-actions,
  [data-drupal-selector="edit-actions"] {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
  }

  .form-actions .button,
  .form-actions input[type="submit"],
  .form-actions button[type="submit"],
  .form-actions a.button {
    width: auto;
  }
}