/**
 * @file
 * Enhanced validation error styles for candidatura webforms.
 * Targets Foundation 6 classes (is-invalid-input, is-invalid-label,
 * form-error.is-visible) and Drupal's form-item--error.
 */

/* =============================================
   1) Input, select, textarea — invalid state
   ============================================= */
.form-item--error input,
.form-item--error select,
.form-item--error textarea,
.webform-has-error input,
.webform-has-error select,
.webform-has-error textarea {
  border: 2px solid #c0392b !important;
  background-color: #fdf2f2 !important;
  box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.15) !important;
  outline: none;
}

.is-invalid-input:focus,
.form-item--error input:focus,
.form-item--error select:focus,
.form-item--error textarea:focus,
.webform-has-error input:focus,
.webform-has-error select:focus,
.webform-has-error textarea:focus {
  border-color: #a93226 !important;
  box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.3) !important;
}

/* =============================================
   2) Labels — invalid state (Foundation + Drupal)
   ============================================= */
.is-invalid-label,
.form-item--error > label,
.webform-has-error > label {
  color: #c0392b !important;
  font-weight: 700;
}

/* =============================================
   3) Inline error messages (Foundation + Drupal)
   ============================================= */
.form-error.is-visible,
.form-item--error-message,
.webform-has-error .a11y-error-msg {
  display: block !important;
  /*margin-top: 4px;*/
  padding: 6px 10px;
  font-size: 0.85rem;
  font-weight: 600;
  color: #c0392b;
  border-left: 3px solid #c0392b;
  border-radius: 0 4px 4px 0;
}

.form-error.is-visible::before,
.form-item--error-message::before {
  content: "\e002";
  font-family: 'Material Icons', sans-serif;
  margin-right: 6px;
  font-size: 1rem;
  vertical-align: middle;
}

/* =============================================
   4) Radio / checkbox groups — invalid labels
   ============================================= */
.form-field-container--sub .is-invalid-label,
.form-field-container .is-invalid-label {
  color: #c0392b !important;
  font-weight: 700;
}

.form-item--error fieldset,
.webform-has-error fieldset,
fieldset.error {
  border: 2px solid #c0392b !important;
  border-radius: 4px;
  padding: 10px;
  background-color: #fdf2f2;
}

/* Radio cards (posizione) — invalid label */
.radio--with-image .is-invalid-label {
  border-color: #c0392b !important;
  box-shadow: 0 0 0 2px rgba(192, 57, 43, 0.2);
}

/* Posizione container in error */
.ruoli-candidatura.webform-has-error {
  border: 2px solid #c0392b;
  border-radius: 6px;
  padding: 12px;
  background-color: #fdf2f2;
}

.ruoli-candidatura.webform-has-error .radio__label {
  border-color: #c0392b !important;
  box-shadow: 0 0 0 2px rgba(192, 57, 43, 0.15);
}

.ruoli-candidatura > .form-error {
  display: none;
  margin-top: 8px;
  text-align: center;
}

.ruoli-candidatura > .form-error.is-visible {
  display: block !important;
}

/* Driving license checkboxes */
.driving_license .is-invalid-label {
  color: #c0392b !important;
}

/* =============================================
   5) File upload — invalid state
   ============================================= */
.uploader-button.is-invalid-label {
  border-color: #c0392b !important;
  color: #c0392b !important;
  background-color: #fdf2f2 !important;
}

.form-item--error .form-managed-file,
.webform-has-error .form-managed-file {
  border: 2px solid #c0392b;
  border-radius: 4px;
  padding: 8px;
  background-color: #fdf2f2;
}

/* KN7 — Focus visibile sul pulsante "Seleziona i file".
   Il tema imposta outline:none su .cta con selettori ad alta specificità;
   usiamo outline inline tramite :focus-visible sul tabindex="0" aggiunto
   dal behavior a11yFileUpload, con !important per garantire il contrasto. */
label.uploader-button[tabindex="0"]:focus-visible {
  outline: 2px solid #00769F !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 3px rgba(0, 118, 159, 0.3) !important;
}

/* =============================================
   6) Select2 widget — invalid state
   ============================================= */
.webform-has-error .select2-container .select2-selection,
.form-item--error .select2-container .select2-selection {
  border: 2px solid #c0392b !important;
  background-color: #fdf2f2 !important;
}

/* =============================================
   7) Smooth transitions
   ============================================= */
.form-field-container input,
.form-field-container select,
.form-field-container textarea,
.form-field-container .select2-selection,
.form-field-container fieldset,
.form-field-container label,
.uploader-button {
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

/* =============================================
   8) Error summary banner (messages--error)
   ============================================= */
.messages--error {
  border-left: 4px solid #c0392b;
  background-color: #fdf2f2;
  padding: 16px 20px;
  margin-bottom: 24px;
  border-radius: 0 4px 4px 0;
}

.messages--error .messages__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.messages--error .messages__item {
  padding: 4px 0;
  color: #6e1515;
}

.messages--error .messages__item a {
  color: #c0392b;
  font-weight: 600;
  text-decoration: underline;
}

.messages--error .messages__item a:hover,
.messages--error .messages__item a:focus {
  color: #922b21;
}