/* ================================================
   ESTILA — Forms
   ================================================ */

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
select,
textarea {
  width: 100%;
  padding: 0.875rem 1rem;
  border: 1px solid var(--border);
  border-radius: 0;
  background-color: var(--white);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 300;
  transition: border-color var(--duration-fast) var(--ease);
  -webkit-appearance: none;
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--gold);
}

::placeholder {
  color: var(--ink-faint);
  font-weight: 200;
}

label {
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: var(--space-xs);
  display: block;
}

/* Messages
 *
 * Drupal 10+ emits status messages inside [data-drupal-messages] with a
 * [role="contentinfo"] inner element and a visually-hidden <h2>. The
 * legacy `.messages` class is not rendered by default, so we target the
 * data attribute + role combination to style the live element.
 */
.messages,
[data-drupal-messages] [role="contentinfo"] {
  background-color: var(--surface);
  border-left: 3px solid var(--gold);
  color: var(--ink);
  padding: var(--space-md) var(--space-lg);
  margin: var(--space-md) 0 var(--space-xl);
  font-family: var(--font-body);
  font-size: 0.92rem;
  line-height: 1.5;
}

[data-drupal-messages] [role="contentinfo"][aria-label="Error message"] {
  border-left-color: #b3261e;
}

[data-drupal-messages] [role="contentinfo"][aria-label="Warning message"] {
  border-left-color: #c77a00;
}

/* Drupal status messages — prominent, branded, auto-visible after form submit */
.messages {
  max-width: 700px;
  margin: 1.5rem auto;
  padding: 1rem 1.5rem;
  font-family: var(--font-ui);
  font-size: 0.9rem;
  line-height: 1.6;
  border-radius: 8px;
}

.messages--status {
  background: #f0f6f0;
  border-left: 4px solid #0b8043;
  color: #0b8043;
}

.messages--error {
  background: #fdf0f0;
  border-left: 4px solid #c5221f;
  color: #c5221f;
}

.messages--warning {
  background: #fef8e7;
  border-left: 4px solid #e37400;
  color: #856404;
}

/* ──────────────────────────────────────────────────────────────────────────
   Form error state — applied when Drupal marks an input as invalid.
   Drupal adds class="error" and aria-invalid="true" to the specific input
   that failed validation. These rules make the failure visually obvious.
   ────────────────────────────────────────────────────────────────────── */

input.error,
textarea.error,
select.error,
input[aria-invalid="true"],
textarea[aria-invalid="true"],
select[aria-invalid="true"] {
  border-color: var(--danger, #8A3B34) !important;
  background-color: #fdf4f3;
}

input.error:focus,
textarea.error:focus,
select.error:focus,
input[aria-invalid="true"]:focus,
textarea[aria-invalid="true"]:focus,
select[aria-invalid="true"]:focus {
  border-color: var(--danger, #8A3B34) !important;
  box-shadow: 0 0 0 2px rgba(138, 59, 52, 0.15);
  outline: none;
}

.form-item--error-message,
.form-item__error-message {
  color: var(--danger, #8A3B34);
  font-size: 0.875rem;
  margin-top: 0.375rem;
  font-family: var(--font-ui);
}