/* ==============================================================
   §30 — Booking form

   One markup, two layouts. Stacked card below the threshold, a
   horizontal bar above it. The <form> is its own query container —
   a container cannot style ITSELF by its own size, so everything
   that differs between card and bar lives on the rows, the fields
   and the button; the form's own properties (border, background,
   flex-wrap) are the same in both. Padding is on the children for
   the same reason.

   Replaces the hero's previous free-text location field with a
   fixed branch select — see the tokens.css comment above
   --bookingform-max for why.
   ============================================================== */

.bookingform {
  container-type: inline-size;

  display: flex;
  flex-wrap: wrap;
  align-items: stretch;

  /* The bar's cap. A card is whatever its parent allows below the
     threshold, which is by definition narrower than a bar. */
  width: 100%;
  max-width: var(--bookingform-bar-max);
  /* Dropped in the port: the form is a block-level flex box, and
     .bookinghero__content's text-align:center only centres inline
     content — without this, the form sat flush against the left
     edge of that (wider) centred column the moment its own max-width
     capped it below 928px, the same job margin-inline:auto did on
     the .bookinghero__bar this replaced. */
  margin-inline: auto;

  border: var(--bookingform-border-w) solid var(--color-bookingform-border);
  background: var(--color-bookingform-surface);
  color: var(--color-bookingform-ink);
}


/* --- Card (default) ------------------------------------------------ */

.bookingform__row {
  flex: 1 1 100%;
  min-width: 0;
  padding-inline: var(--bookingform-pad);
}

/* The field is the flex line in both layouts: icon . control . chevron. */
.bookingform__field {
  --_pad: 0px;   /* inline inset the chevron is measured from; 0 here, the row pads */
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--bookingform-icon-gap);
  /* Half the measured row pad here and half on the control, so the
     control keeps a box of its own for the focus outline. */
  padding-block: calc(var(--bookingform-row-pad) / 2);
}

/* One rule, between the two fields, on the FIELD rather than the row so
   it runs inside the card's own inline padding rather than edge to edge. */
.bookingform__row--when .bookingform__field {
  border-top: 1px solid var(--color-bookingform-rule);
}

.bookingform__icon {
  flex: 0 0 auto;
  width: var(--bookingform-icon);
  height: var(--bookingform-icon);
  stroke-width: var(--icon-stroke);
  color: var(--color-bookingform-icon);
}

/* Both controls, one rule. appearance:none flattens the select's
   native arrow and the date input's native chrome; the chevron is
   drawn once below so there is one arrow, not two. Right padding
   reserves the chevron's lane.

   No shared .field__control layer here (see booking-form.pug):
   CM's other composed fields each write this reset inline rather
   than through a shared class, so this does too — flex/min-width/
   border/background/font are the reset, the rest is this
   component's own sizing and colour. Outline is deliberately left
   alone: there is no bordered wrapper here to hand focus to, so the
   control keeps the global :focus-visible ring — the indicator
   forced-colors mode preserves. */
/* Explicit height, not left to padding-block + line-height: a native
   <select> and a native type="date" render at different intrinsic
   heights in every engine (measured 46.4px / 48.4px here), the same
   gap bookinghero.css's own field ran into and fixed the same way.
   48px is not arbitrary — it's the .btn--md height this component's
   own submit button now renders at (see the tokens.css comment above
   --bookingform-max), so all three controls in this form share one
   number instead of two of them drifting off it by ~2px. */
.bookingform__select,
.bookingform__input {
  flex: 1 1 auto;
  min-width: 0;
  height: 3rem;
  border: 0;
  background: transparent;
  font: inherit;

  padding-block: calc(var(--bookingform-row-pad) / 2);
  padding-inline: 0 calc(var(--bookingform-chevron) + var(--bookingform-icon-gap));
  border-radius: 0;
  appearance: none;
  -webkit-appearance: none;
  font-size: var(--text-bookingform-input);
  line-height: var(--leading-control);
  color: var(--color-bookingform-ink);
}

/* The select shows its placeholder option in muted ink until a real
   choice is made — :invalid is true exactly while the disabled empty
   option is selected, because the control is required. */
.bookingform__select:invalid { color: var(--color-bookingform-placeholder); }
.bookingform__select option  { color: var(--color-bookingform-ink); }

.bookingform__input::placeholder {
  color: var(--color-bookingform-placeholder);
  opacity: 1;
}

/* Overlaid on the control's right end and transparent to the pointer,
   so a click on the arrow is a click on the control. Positioned from
   --_pad so the same rule serves the card (0) and the bar (24). */
.bookingform__chevron {
  position: absolute;
  right: var(--_pad);
  top: 50%;
  translate: 0 -50%;
  width: var(--bookingform-chevron);
  height: var(--bookingform-chevron);
  stroke-width: var(--icon-stroke);
  color: var(--color-bookingform-icon);
  pointer-events: none;
}

/* The native date indicator is not hidden — it is moved under our
   chevron and made invisible, so clicking the chevron IS clicking the
   indicator and the browser's own picker opens with no script. Firefox
   has no indicator pseudo and opens its picker on any click in the
   field, so it needs nothing here. */
.bookingform__input[type='date']::-webkit-calendar-picker-indicator {
  position: absolute;
  right: var(--_pad);
  top: 50%;
  translate: 0 -50%;
  width: var(--bookingform-chevron);
  height: var(--bookingform-chevron);
  margin: 0;
  padding: 0;
  opacity: 0;
  cursor: pointer;
}


/* --- Submit ---------------------------------------------------------- */

/* No min-height override: a plain .btn--md already renders 48px,
   matching the two controls above (see the comment on
   .bookingform__select/__input) rather than the source's own
   bespoke 60px card button — see tokens.css. */
.bookingform__submit {
  flex: 1 1 100%;
  display: flex;
  margin: var(--bookingform-submit-gap) var(--bookingform-pad) var(--bookingform-pad-bottom);
}


/* ==============================================================
   Bar — above the threshold the rows sit in one line.

   43rem (688px) is measured, not provisional: with the bar forced at
   every width from 1000 down to 400 it never overflowed or wrapped —
   the controls have min-width:0 and were squeezed to nothing before
   they'd visibly break — so the threshold is the first placeholder
   that stops fitting its lane, checked under SC 1.4.12's widened
   letter/word-spacing rather than at normal spacing, which is what
   pushes it from ~605px to 688px. Note the query reads the form's
   CONTENT box, so the switch lands at an outer width of 690 — two
   pixels of border — not 688.
   ============================================================== */

@container (min-width: 43rem) {

  .bookingform__row {
    padding: 0;
  }

  /* Not an even split: the date field's content ("mm/dd/yyyy") is a
     quarter the length of the branch field's, so it takes only what
     it needs (plus a little air) instead of matching the branch
     field's width column for column. */
  .bookingform__row--where {
    flex: 1 1 0;
  }

  .bookingform__row--when {
    flex: 0 1 auto;
    min-width: var(--bookingform-when-min);
  }

  /* Explicit, not left to stretch: the row used to take its height
     from whatever the submit button's own box needed (60px content +
     8px margin), which is exactly what made the button a fixed 60px
     in the first place. Now that the button is a plain 48px .btn--md
     (see tokens.css / the .bookingform__submit rule below), nothing
     is left to anchor the bar's cross size — so the row states it
     directly: 48px control + the same 4px top/bottom the button's
     own margin uses, both landing on the button's own outer height. */
  .bookingform__row {
    height: 3.5rem;   /* 56 = 48 control + 2 x 4px */
  }

  .bookingform__field {
    --_pad: var(--bookingform-bar-field-pad);
    height: 100%;
    padding-inline: var(--_pad);
    /* The card's row padding comes off here — the field only has to
       centre its (now fixed-height) control inside the row. */
    padding-block: 0;
    border-top: 0;
  }

  /* The divider between the fields. Full height, not inset: an inset
     margin only reads as deliberate against a visibly taller bar (the
     source's own 69px one); at this bar's 56px it would eat a
     quarter of the rule's height for no legible gain, so it runs
     edge to edge like the card layout's rule between rows does. */
  .bookingform__row--when .bookingform__field {
    border-top: 0;
    border-left: 1px solid var(--color-bookingform-divider);
  }

  .bookingform__submit {
    flex: 0 0 auto;
    min-width: var(--bookingform-bar-submit-min-w);
    margin: var(--bookingform-bar-pad);
  }
}


/* ==============================================================
   Card, phone width

   One step, not a fluid clamp: a form row's padding is a hit target,
   and it should sit at one of two known values rather than drift
   through every size between.
   ============================================================== */

@container (max-width: 27.5rem) {

  .bookingform__row { padding-inline: var(--space-4); }

  .bookingform__field,
  .bookingform__select,
  .bookingform__input {
    padding-block: calc(var(--space-4) / 2);
  }

  .bookingform__submit {
    margin: var(--bookingform-submit-gap) var(--space-4) var(--space-5);
  }
}