/* ================================================
   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;
}