/**
 * @file
 * MLT Modern — Webform styling.
 *
 * Styles all Drupal webforms by scoping to `.webform-submission-form` —
 * Drupal automatically adds this class to every form rendered by the
 * Webform module. Search forms, admin forms, and other contrib forms are
 * not affected.
 *
 * Visual style is the rewires.html hero form pattern: white-card inputs
 * with soft borders, blue focus ring, yellow CTA submit button.
 *
 * For a white card wrapper (e.g. when embedding inside a blue hero band),
 * add the `mlt-form-card` class to the block or container wrapping the
 * form.
 */

/* -----------------------------------------------------------------------
 * Form layout — vertical stack, sensible field gaps.
 * ----------------------------------------------------------------------- */
.webform-submission-form .form-item,
.webform-submission-form .js-form-item {
  margin: 0 0 16px 0;
}

.webform-submission-form .form-actions {
  margin: 24px 0 0 0;
}

/* -----------------------------------------------------------------------
 * Labels.
 * ----------------------------------------------------------------------- */
.webform-submission-form label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--mlt-text);
}

/* Required-field asterisk colour. Drupal renders <abbr class="form-required"
 * title="This field is required.">*</abbr> after labels. */
.webform-submission-form .form-required::after,
.webform-submission-form abbr.form-required {
  color: var(--mlt-danger);
  text-decoration: none;
  margin-left: 2px;
}

/* -----------------------------------------------------------------------
 * Input fields, textareas, selects.
 * Match every input type Drupal/webform might emit, plus textarea and
 * select. Using attribute selectors rather than relying on Drupal's
 * .form-* classes so we cover stock HTML5 inputs too.
 * ----------------------------------------------------------------------- */
.webform-submission-form input[type="text"],
.webform-submission-form input[type="email"],
.webform-submission-form input[type="tel"],
.webform-submission-form input[type="url"],
.webform-submission-form input[type="search"],
.webform-submission-form input[type="number"],
.webform-submission-form input[type="password"],
.webform-submission-form input[type="date"],
.webform-submission-form input[type="time"],
.webform-submission-form input[type="datetime-local"],
.webform-submission-form input[type="file"],
.webform-submission-form textarea,
.webform-submission-form select {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--mlt-border);
  border-radius: var(--mlt-radius-md);
  background: #fff;
  color: var(--mlt-text);
  font-size: 15px;
  font-family: inherit;
  line-height: 1.4;
  box-sizing: border-box;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.webform-submission-form input[type="text"]:focus,
.webform-submission-form input[type="email"]:focus,
.webform-submission-form input[type="tel"]:focus,
.webform-submission-form input[type="url"]:focus,
.webform-submission-form input[type="search"]:focus,
.webform-submission-form input[type="number"]:focus,
.webform-submission-form input[type="password"]:focus,
.webform-submission-form input[type="date"]:focus,
.webform-submission-form input[type="time"]:focus,
.webform-submission-form input[type="datetime-local"]:focus,
.webform-submission-form input[type="file"]:focus,
.webform-submission-form textarea:focus,
.webform-submission-form select:focus {
  outline: none;
  border-color: var(--mlt-primary);
  box-shadow: 0 0 0 3px var(--mlt-primary-light);
}

.webform-submission-form textarea {
  resize: vertical;
  min-height: 120px;
}

/* -----------------------------------------------------------------------
 * Checkboxes and radios — keep them inline with their labels.
 * ----------------------------------------------------------------------- */
.webform-submission-form input[type="checkbox"],
.webform-submission-form input[type="radio"] {
  margin: 0 8px 0 0;
  vertical-align: middle;
  width: auto;
}

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

/* -----------------------------------------------------------------------
 * Placeholders.
 * ----------------------------------------------------------------------- */
.webform-submission-form ::placeholder {
  color: var(--mlt-text-light);
  opacity: 0.7;
}

/* -----------------------------------------------------------------------
 * Field descriptions and help text.
 * ----------------------------------------------------------------------- */
.webform-submission-form .description,
.webform-submission-form .form-item__description {
  font-size: 13px;
  color: var(--mlt-text-light);
  margin-top: 6px;
  line-height: 1.5;
}

/* -----------------------------------------------------------------------
 * Fieldsets — soft border, prevent the default browser legend offset.
 * ----------------------------------------------------------------------- */
.webform-submission-form fieldset {
  border: 1px solid var(--mlt-border);
  border-radius: var(--mlt-radius-md);
  padding: 16px 20px 8px;
  margin: 0 0 20px;
}

.webform-submission-form fieldset legend {
  font-size: 14px;
  font-weight: 600;
  padding: 0 6px;
  color: var(--mlt-text);
}

/* Checkboxes/radios groups don't need the fieldset border — Drupal wraps
 * them in fieldsets for accessibility, but visually they should look like
 * other form items. */
.webform-submission-form fieldset.webform-type-checkboxes,
.webform-submission-form fieldset.webform-type-radios {
  border: none;
  padding: 0;
}

.webform-submission-form fieldset.webform-type-checkboxes legend,
.webform-submission-form fieldset.webform-type-radios legend {
  padding: 0;
  margin-bottom: 6px;
}

/* -----------------------------------------------------------------------
 * Submit / action buttons. Yellow CTA, dark text — matches the rest of
 * our buttons across the site.
 * ----------------------------------------------------------------------- */
.webform-submission-form button[type="submit"],
.webform-submission-form input[type="submit"],
.webform-submission-form .button--primary,
.webform-submission-form .form-submit {
  display: inline-block;
  background: var(--mlt-accent);
  color: var(--mlt-accent-contrast);
  padding: 13px 28px;
  border: 2px solid transparent;
  border-radius: var(--mlt-radius-md);
  font-size: 16px;
  font-weight: 700;
  font-family: inherit;
  line-height: 1.2;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s, transform 0.1s;
}

.webform-submission-form button[type="submit"]:hover,
.webform-submission-form input[type="submit"]:hover,
.webform-submission-form .button--primary:hover,
.webform-submission-form .form-submit:hover {
  background: var(--mlt-accent-dark);
  color: var(--mlt-accent-contrast);
  text-decoration: none;
}

.webform-submission-form button[type="submit"]:active,
.webform-submission-form input[type="submit"]:active,
.webform-submission-form .form-submit:active {
  transform: translateY(1px);
}

/* Secondary "Preview" / "Reset" / "Cancel" buttons — softer styling. */
.webform-submission-form .button--secondary,
.webform-submission-form input[type="reset"],
.webform-submission-form input[type="button"] {
  background: #fff;
  color: var(--mlt-text);
  border: 1px solid var(--mlt-border);
  padding: 13px 24px;
  border-radius: var(--mlt-radius-md);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  margin-right: 10px;
}

.webform-submission-form .button--secondary:hover,
.webform-submission-form input[type="reset"]:hover,
.webform-submission-form input[type="button"]:hover {
  background: var(--mlt-bg-soft);
  border-color: var(--mlt-text-light);
}

/* -----------------------------------------------------------------------
 * Inline validation errors. Drupal Webform adds `.error` to fields and
 * renders messages in a status message area.
 * ----------------------------------------------------------------------- */
.webform-submission-form input.error,
.webform-submission-form textarea.error,
.webform-submission-form select.error {
  border-color: var(--mlt-danger);
}

.webform-submission-form input.error:focus,
.webform-submission-form textarea.error:focus,
.webform-submission-form select.error:focus {
  box-shadow: 0 0 0 3px var(--mlt-danger-soft);
}

.webform-submission-form .form-item--error-message,
.webform-submission-form .form-item__error-message {
  font-size: 13px;
  color: var(--mlt-danger);
  margin-top: 6px;
}

/* -----------------------------------------------------------------------
 * Form card wrapper — opt-in. Wrap a webform with .mlt-form-card to give
 * it the rewires-style white card with shadow. Useful for forms embedded
 * inside a blue hero band.
 *
 * Usage (in a parent block or twig template):
 *   <div class="mlt-form-card">
 *     <h3 class="mlt-form-card__title">Get a free quote</h3>
 *     <p class="mlt-form-card__sub">No spam, no obligation.</p>
 *     {{ webform render output here }}
 *   </div>
 * ----------------------------------------------------------------------- */
.mlt-form-card {
  background: #fff;
  color: var(--mlt-text);
  padding: 30px;
  border-radius: var(--mlt-radius-lg);
  box-shadow: var(--mlt-shadow-hero-form, 0 20px 50px rgba(0, 0, 0, 0.25));
}

.mlt-form-card__title {
  font-size: 22px;
  font-weight: 700;
  color: var(--mlt-primary);
  margin: 0 0 6px 0;
}

.mlt-form-card__sub {
  font-size: 14px;
  color: var(--mlt-text-light);
  margin: 0 0 20px 0;
}

@media (max-width: 540px) {
  .mlt-form-card {
    padding: 22px;
  }
}