/* ==========================================================================
   Canberra Carpentry & Roofing — lead form additions
   --------------------------------------------------------------------------
   The page CSS is inline and duplicated across seven pages, so anything the
   forms need that isn't already in there lives here instead of being pasted
   seven times.

   Right now that's the <select> control, used by the urgency and budget
   questions. It is styled to sit flush with .form__input rather than looking
   like a browser default dropped into the middle of the form.
   ========================================================================== */

/* Two fields on a row. The page CSS gives every .form__row its own
   margin-bottom, so this only has to supply the column split and the gutter —
   the vertical rhythm is unchanged, and below the breakpoint the rows stack
   exactly as they did before. */
.form__grid { display: grid; gap: 0 var(--space-2); }
@media (min-width: 560px) {
  .form__grid { grid-template-columns: 1fr 1fr; }
  /* Keep the two controls on a row level with each other even if one label
     wraps. Labels here are written short so it shouldn't happen, but a
     translated or edited label must not knock the row out of alignment. */
  .form__grid .form__row { display: flex; flex-direction: column; }
  .form__grid .form__label { margin-top: auto; }
}

.form__select {
  width: 100%;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--color-ink);
  background-color: var(--color-bone);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-input);
  padding: 12px 40px 12px 14px;
  transition: border-color var(--transition-fast), background-color var(--transition-fast);

  /* Own chevron, so the control matches on every browser. */
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%238C8780' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px;
}

.form__select:focus {
  outline: none;
  border-color: var(--color-ink);
  background-color: #fff;
}

/* Until a real option is chosen the select is still invalid, which is what
   makes the placeholder read as a prompt rather than as an answer. */
.form__select:invalid { color: var(--color-text-muted); }

.form__row.is-error .form__select { border-color: #B5483D; }

/* A short note under a field — used to say why we ask for a budget. */
.form__hint {
  margin: 6px 0 0;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--color-text-secondary);
}

/* The budget hint is pulled out of the field's own row so it can run the full
   width instead of being squeezed into one column. That leaves it separated
   from the field it explains by the row's margin, so claw that back — and put
   a full gap underneath, or it reads as a caption for the NEXT field. Declared
   after .form__hint because that rule sets margin with the shorthand. */
.form__hint--under {
  margin-top: calc(6px - var(--space-3));
  margin-bottom: var(--space-3);
}