/**
 * Jarvis webform styles. Loaded only where a webform renders (libraries-extend
 * on webform/webform.form in jarvis.info.yml), so pages without a form never
 * pay for it.
 *
 * Colours come from the theme's Bootstrap variables, so the form follows the
 * Primary set in theme settings. Field borders use --jarvis-field-border, a
 * grey that clears the 3:1 non-text contrast minimum (WCAG 1.4.11) on white;
 * Bootstrap's own #dee2e6 border does not.
 */
.webform-submission-form {
  --jarvis-field-border: #6c757d;
  --jarvis-field-error: #b00020;
  /* Lets .jarvis-form--inline-labels switch layout by the form's own width,
     so it works in a half-width column as well as full width. */
  container-type: inline-size;
}

.webform-submission-form .form-item { margin-bottom: 1.1rem; }
.webform-submission-form label,
.webform-submission-form legend {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 1rem;
  font-weight: 500;
}

/* Required marker. The fields carry the required attribute, so screen readers
   already announce it; the alt text "" keeps the asterisk out of the name. */
.webform-submission-form .form-required::after {
  content: " *" / "";
  color: var(--jarvis-field-error);
  font-weight: 700;
}

.webform-submission-form input:not([type="submit"], [type="hidden"], [type="checkbox"], [type="radio"], [type="color"]),
.webform-submission-form select,
.webform-submission-form textarea {
  display: block;
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--jarvis-field-border);
  border-radius: 0.375rem;
  background: #fff;
  color: var(--bs-body-color);
  font: inherit;
  line-height: 1.4;
}
.webform-submission-form textarea { min-height: 8.5rem; resize: vertical; }
.webform-submission-form :is(input, select, textarea):focus-visible {
  border-color: var(--bs-primary);
  outline: 3px solid rgba(var(--bs-primary-rgb), 0.35);
  outline-offset: 1px;
}
.webform-submission-form :is(input, select, textarea).error { border: 2px solid var(--jarvis-field-error); }
.webform-submission-form .form-item--error-message { margin-top: 0.25rem; color: var(--jarvis-field-error); }
.webform-submission-form .description { margin-top: 0.3rem; color: var(--bs-secondary-color); font-size: 0.9em; }

/* Submit and other action buttons, styled as .btn-primary. */
.webform-submission-form .form-actions { margin-top: 0.5rem; }
.webform-submission-form .form-actions .form-submit {
  padding: 0.6rem 1.4rem;
  border: 0;
  border-radius: 0.375rem;
  background: var(--bs-primary);
  color: #fff;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.webform-submission-form .form-actions .form-submit:hover,
.webform-submission-form .form-actions .form-submit:focus-visible {
  background: color-mix(in srgb, var(--bs-primary) 82%, #000);
}

/* CAPTCHA module: a borderless group. The question's own label carries the
   required marker, so the legend does not repeat it. */
.webform-submission-form .captcha { margin: 0 0 1.1rem; padding: 0; border: 0; }
.webform-submission-form .captcha__title { float: none; width: auto; padding: 0; font-weight: 700; }
.webform-submission-form .captcha__title.form-required::after { content: none; }
.webform-submission-form .captcha input.form-text { max-width: 8em; }

/* Opt-in: labels beside the fields once the form is at least 520px wide.
   Add the class under the webform's Settings > Form > Form CSS classes.
   Below that width the form stacks as normal. */
@container (min-width: 520px) {
  .jarvis-form--inline-labels .form-item {
    display: grid;
    grid-template-columns: 11rem 1fr;
    align-items: start;
  }
  .jarvis-form--inline-labels .form-item > label { margin: 0.5rem 1rem 0 0; }
  .jarvis-form--inline-labels .form-item > :not(label) { grid-column: 2; }
  .jarvis-form--inline-labels .form-actions,
  .jarvis-form--inline-labels .captcha { padding-left: 11rem; }
  /* The CAPTCHA question is too long for the label column; it stacks. */
  .jarvis-form--inline-labels .captcha .form-item { display: block; }
  .jarvis-form--inline-labels .captcha .form-item > label { margin: 0 0 0.35rem; }
}