/* ==========================================================================
   form.css · Hunter Huon Valley · the shared enquiry form
   Lifted out of contact.css on 8 Sep 2026, unchanged, when /gift-vouchers/
   took the same form on the same Olive band. One definition, two pages, so
   the two forms cannot drift apart. Linked by /contact/ and
   /gift-vouchers/, before each page's own stylesheet.

   The class is still .contact-form. The name is historical, not a scope: it
   is the site's only form component. Renaming it would touch both pages and
   buy nothing.

   Underlined fields: transparent background, a single off-white hairline
   under each control, Copper on focus. No boxes, no radii on fields. Built
   for a dark band (Olive or Forest); it has no light-band variant because
   there is nowhere on the site that needs one. Every value references
   tokens.css, no hex, ever.
   ========================================================================== */

/* The whole section is centred in the container: at 1200px the 46rem form
   otherwise sat hard left with a wide band of empty Olive beside it. Heading,
   lead, form, and button share one centre line. Field labels stay LEFT
   aligned inside the form, since centred labels detach from their inputs. */
/* The gap down to the first field is owned by the head, not by whichever
   element happens to end it. /contact ends on the availability button and
   /gift-vouchers/ ends on the lead paragraph, so hanging the space off those
   gave the two pages a different gap: 4rem on one, 1.5rem on the other, and
   the short one read as the form crowding the sentence above it. One rule,
   one gap, both pages (9 Sep 2026). Comfortably clear of the form's own
   2rem row gap, so the head reads as a separate block rather than as the
   first row of the form. */
.enquiry__head {
  max-width: 46rem;
  margin-inline: auto;
  margin-block-end: var(--space-3xl);
}
.enquiry__head > :last-child { margin-block-end: 0; }

.enquiry__lead {
  max-width: 52ch;
  margin-block-end: var(--space-md);
  color: var(--color-text-on-dark-alt);
}
.enquiry__lead-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md);
  margin-block-end: 0;
}

.contact-form {
  display: grid;
  gap: var(--space-lg);
  max-width: 46rem;
  margin-inline: auto;
}
@media (min-width: 640px) {
  .contact-form { grid-template-columns: 1fr 1fr; }
  .field--full,
  .contact-form__submit { grid-column: 1 / -1; }
}

.field { display: grid; gap: var(--space-2xs); }
.field > label,
.dates__legend {
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  color: var(--color-text-on-dark);
}
.field__hint {
  font-size: var(--fs-small);
  color: var(--color-text-on-dark-alt);
  opacity: 0.85;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  background-color: transparent;
  color: var(--color-text-on-dark);
  border: none;
  border-bottom: var(--divider-w) solid var(--border-on-dark);
  border-radius: 0;
  padding-block: var(--space-2xs);
  padding-inline: 0;
  transition: border-color var(--dur-fast) var(--ease);
}
.field textarea { resize: vertical; min-height: 7.5rem; line-height: var(--lh-body); }

/* Focus: suppress the boxed outline, thicken the underline to Copper so the
   indicator is thickness + colour, not colour alone. */
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  outline: none;
  border-bottom-width: 2px;
  border-bottom-color: var(--color-accent);
  padding-block-end: calc(var(--space-2xs) - 1px);
}
.field input::placeholder,
.field textarea::placeholder { color: var(--color-text-on-dark-alt); opacity: 0.6; }

/* Native invalid state (after a no-JS submit attempt) */
.field input:user-invalid,
.field textarea:user-invalid { border-bottom-color: var(--color-accent); }

/* Custom caret for the cabin select (appearance stripped) */
.select-wrap { position: relative; display: block; }
.select-wrap select {
  appearance: none;
  -webkit-appearance: none;
  padding-inline-end: var(--space-lg);
}
.select-wrap::after {
  content: "";
  position: absolute;
  inset-inline-end: 4px;
  inset-block-start: 50%;
  width: 0.5em;
  height: 0.5em;
  border-right: var(--divider-w) solid currentColor;
  border-bottom: var(--divider-w) solid currentColor;
  transform: translateY(-75%) rotate(45deg);
  pointer-events: none;
}
.select-wrap select option { color: var(--c-forest); }

/* Dates: two date controls under one legend */
.dates { border: none; padding: 0; margin: 0; display: grid; gap: var(--space-2xs); }
.dates__legend { padding: 0; }
/* minmax(0, 1fr) and min-width: 0, not 1fr: a date input's intrinsic width
   would otherwise hold each track open, and at 360-375px the pair ran 6px
   past the viewport. */
.dates__grid { display: grid; gap: var(--space-md); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.dates__field { display: grid; gap: var(--space-3xs); grid-template-columns: minmax(0, 1fr); }
.dates__field input { min-width: 0; }
.dates__field label { font-size: var(--fs-small); color: var(--color-text-on-dark-alt); }
.dates input::-webkit-calendar-picker-indicator { filter: invert(1); opacity: 0.6; }

.contact-form__submit { margin-block-start: var(--space-2xs); }

/* Centre only where there is room to centre in. Below 900px the form already
   fills the container, so there is no empty band to correct, and every other
   section head on the page is left aligned there. */
@media (min-width: 900px) {
  .enquiry__head { text-align: center; }
  .enquiry__lead { margin-inline: auto; }
  .enquiry__lead-actions { justify-content: center; }
  .contact-form__submit { display: flex; justify-content: center; }
}

/* Honeypot: tempting to bots, hidden from people. Web3Forms discards any
   submission that arrives with "botcheck" filled in, so the field has to be
   in the form and out of sight. display:none keeps it off the tab order and
   out of the accessibility tree, which is the point: nobody should ever meet
   it. Named for Netlify once; the mechanism is the same. */
.hp-field { display: none; }

/* ==========================================================================
   The submission status · written by forms.js, one per form
   Ships hidden and empty. On success it replaces the form; on failure it
   sits under the form, which keeps every answer the visitor typed. Both
   states are one paragraph on the Olive band with an accent rule down the
   leading edge: Sage when it worked, Copper when it did not. Colour is never
   the only signal, the words say which it is.
   ========================================================================== */
.form-status {
  max-width: 46rem;
  margin-inline: auto;
  margin-block-start: var(--space-lg);
  padding: var(--space-md);
  border-inline-start: 2px solid var(--c-sage);
  background-color: var(--overlay-on-dark);
  color: var(--color-text-on-dark);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}
.form-status:focus { outline: none; }
.form-status:focus-visible {
  outline: var(--divider-w) solid var(--color-focus);
  outline-offset: 3px;
}
.form-status--error { border-inline-start-color: var(--color-accent); }
.form-status a {
  color: var(--color-text-on-dark);
  text-decoration-color: var(--color-accent);
  text-underline-offset: 3px;
}
.form-status a:hover { color: var(--color-accent); }

/* The success message is the only thing left on the band once the form is
   gone, so it gets the form's own centre line rather than sitting left of it. */
@media (min-width: 900px) {
  .form-status--ok { text-align: center; }
}