/* ============================================================
   FOUNDATION — GLOBAL FORM FIELD SYSTEM
   FILE: assets/css/forms.css
   Phase 1.5 of the Final Master Roadmap, Stage 1.
   Depends on: tokens.css, buttons.css.
   Owns: reusable field styling only — no actual form (contact,
   consultation, etc.) is wired up here. That is Stage 12.
   ============================================================ */

.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-bottom: var(--space-3);
}

.field__label {
  font-size: var(--text-small);
  font-weight: 600;
  color: var(--color-navy);
}

.field__helper {
  font-size: var(--text-small);
  color: rgba(51, 51, 51, 0.7);
}

/* ----------------------------------------------------------
   TEXT / SELECT / TEXTAREA — shared base
---------------------------------------------------------- */
.field__input,
.field__select,
.field__textarea {
  min-height: var(--touch-target-min);
  padding: var(--space-2);
  border: 1px solid rgba(var(--color-navy-rgb), 0.25);
  border-radius: var(--radius-btn);
  background-color: var(--color-white);
  color: var(--color-dark-gray);
  font-size: var(--text-body);
  transition: border-color var(--duration-fast) var(--ease-premium),
              box-shadow var(--duration-fast) var(--ease-premium);
}

.field__textarea {
  min-height: 120px;
  resize: vertical;
}

.field__input:hover,
.field__select:hover,
.field__textarea:hover {
  border-color: rgba(var(--color-navy-rgb), 0.4);
}

.field__input:focus-visible,
.field__select:focus-visible,
.field__textarea:focus-visible {
  outline: none;
  border-color: var(--color-gold);
  box-shadow: 0 0 0 3px rgba(var(--color-gold-rgb), 0.25);
}

.field__input:disabled,
.field__select:disabled,
.field__textarea:disabled {
  background-color: var(--color-light-gray);
  color: rgba(51, 51, 51, 0.5);
  cursor: not-allowed;
}

/* ----------------------------------------------------------
   CHECKBOX / RADIO
---------------------------------------------------------- */
.field__choice {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-body);
  cursor: pointer;
}

.field__choice input[type="checkbox"],
.field__choice input[type="radio"] {
  width: 20px;
  height: 20px;
  accent-color: var(--color-gold);
  cursor: pointer;
}

/* ----------------------------------------------------------
   FILE INPUT
---------------------------------------------------------- */
.field__file {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2);
  border: 1px dashed rgba(var(--color-navy-rgb), 0.3);
  border-radius: var(--radius-btn);
}

/* ----------------------------------------------------------
   STATES — error / success
   Error is always indicated by icon/text as well as color,
   never color alone (contrast + colorblind-safe requirement).
---------------------------------------------------------- */
.field--error .field__input,
.field--error .field__select,
.field--error .field__textarea {
  border-color: var(--color-error);
}

.field__message {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-small);
}

.field__message--error {
  color: var(--color-error);
}

.field--success .field__input,
.field--success .field__select,
.field--success .field__textarea {
  border-color: var(--color-success);
}

.field__message--success {
  color: var(--color-success);
}

/* ----------------------------------------------------------
   HONEYPOT — Stage 12.1 (§28 Interim Form Security).
   Shared by every form's hidden anti-spam field so a bot that
   ignores CSS still fills it in, while sighted users and screen
   readers never encounter it. Off-screen rather than
   display:none/visibility:hidden, since some bots skip fields
   hidden that way.
---------------------------------------------------------- */
.field--honeypot {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}