/* ==========================================================================
   Bloomlake, form styles.
   Separate from styles.css on purpose: styles.css is the design system Fable
   owns, this is the ride request form layered on top of its tokens. Uses no
   colors, sizes, or radii of its own.
   Standing rule: no em dashes anywhere in this codebase.
   ========================================================================== */

/* Contact details list for light backgrounds.
   The footer has its own .footer-list, but that one is colored for the deep
   footer background and is nearly invisible on paper. Do not reuse it here. */
.contact-list {
  list-style: none;
  margin: 0 0 var(--space-6);
  padding: 0;
}

.contact-list li {
  margin-bottom: var(--space-4);
  color: var(--color-text);
  line-height: var(--leading-body);
}

.contact-list strong {
  display: block;
  font-size: var(--text-meta);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-soft);
  margin-bottom: var(--space-1);
}

.contact-list a {
  color: var(--color-brand);
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
}

.contact-list a:hover { text-decoration: underline; text-underline-offset: 3px; }

.form-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  padding: clamp(var(--space-5), 4vw, var(--space-7));
}

.form-grid {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1fr;
}

/* A container query, not a viewport query. The form sits inside one column of a
   .split, so its real width has little to do with the width of the window: at a
   1440px viewport the column is only about 620px. Viewport breakpoints cannot see
   that, and both earlier attempts (42rem, then 90rem) produced fields around 230px
   wide for an audience of seniors and caregivers. Ask the card how wide IT is, and
   only go to two columns when each field can still be about 280px. */
.form-card {
  container-type: inline-size;
}

@container (min-width: 36rem) {
  .form-grid { grid-template-columns: 1fr 1fr; }
  .field--full { grid-column: 1 / -1; }
}

.field { display: flex; flex-direction: column; gap: var(--space-2); }

.field label {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-text);
  line-height: var(--leading-snug);
}

.field .hint {
  font-size: var(--text-meta);
  color: var(--color-text-soft);
  line-height: var(--leading-snug);
}

.field .req { color: var(--color-accent-text); font-weight: 700; }

.field input,
.field select,
.field textarea {
  font: inherit;
  font-size: var(--text-base);
  color: var(--color-text);
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  /* 44px minimum target height for every control */
  padding: 0.7rem 0.85rem;
  min-height: 3rem;
  width: 100%;
}

.field textarea { min-height: 7rem; resize: vertical; line-height: var(--leading-body); }

.field input:hover,
.field select:hover,
.field textarea:hover { border-color: var(--lake-200); }

.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
  border-color: var(--color-brand);
}

/* :user-invalid, not :invalid. A required input with no placeholder attribute can
   never match :placeholder-shown, so the old rule flagged name and phone as errors
   before the rider had typed a character. :user-invalid only fires after they have
   actually interacted, and degrades to no styling where it is unsupported. */
.field input:user-invalid,
.field select:user-invalid { border-color: var(--bloom-700); }

.form-actions {
  margin-top: var(--space-6);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: center;
}

.form-note {
  margin-top: var(--space-5);
  font-size: var(--text-meta);
  color: var(--color-text-soft);
  line-height: var(--leading-body);
}

/* Status messages. Announced to screen readers via aria-live on the container. */
.form-status {
  margin-top: var(--space-5);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  border: 1.5px solid transparent;
}

.form-status:empty { display: none; }

.form-status[data-state="ok"] {
  background: var(--lake-050);
  border-color: var(--lake-200);
  color: var(--lake-900);
}

.form-status[data-state="error"] {
  background: var(--bloom-100);
  border-color: var(--bloom-600);
  color: var(--bloom-700);
}

.form-status strong { display: block; margin-bottom: var(--space-1); }

/* Honeypot. Hidden from people, visible to naive bots. */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

@media (prefers-reduced-motion: no-preference) {
  .field input,
  .field select,
  .field textarea { transition: border-color 120ms ease; }
}