/* ==========================================================================
   Brisbane Best Movers — quote-form typography & control fit
   --------------------------------------------------------------------------
   File: assets/css/bbm-form-typography.css
   Load: LAST, after m3.css, the palette layers, bbm-expressive-v2.css and
         bbm-depth-layers.css.

     <link rel="stylesheet" href="/assets/css/bbm-form-typography.css">

   Scope: the two identical six-field enquiry forms — the home hero form
   (.home-quote-form) and the Get a Quote page form (.quote-form). No markup,
   no JavaScript, no colour-scheme changes; only type, spacing, control size,
   contrast and focus/error legibility.

   Why these numbers
   - 17px body inputs: 16px is the iOS Safari auto-zoom floor; 17px clears it
     with a little room and is comfortable at 320px without shrinking.
   - 16px labels: labels are read before typing, so they should not be the
     smallest text in the card. 16/17 also keeps label and value visually
     paired instead of making the field look like a caption.
   - 16px, 500-weight labels: at 16px the name is read before typing, but 500
     keeps it a label rather than a second heading. The old 700-750 labels at
     12-13px were both smaller and heavier, so they shouted without helping.
   - 14px hints and errors: helper copy is read at arm's length on a phone;
     14px at 1.5 line-height is comfortable without competing with the value.
   - 30-34px card headings: roughly 1.8-2.1x the label size. That keeps the
     form title dominant and the field labels clearly subordinate, instead of
     the old 12px-label / 24px-heading jump.
   - 52-56px controls: above the 48px touch target, while 13px vertical
     padding keeps the card compact. Row gaps stay 13-18px, not 24px+, so the
     six fields do not turn into a long scroll.
   - Contrast: labels/headings use --on-surface (17:1 on white), helper copy
     uses --on-surface-variant (7.7:1), placeholders #5b646e (5.4:1+ on the
     pale blue field fill), borders --field-border (3.3:1). Nothing relies on
     the colour of an error alone: the message is text plus a rule.
   ========================================================================== */

.home-quote-card,
.quote-card {
  --bbm-form-label: 16px;
  --bbm-form-value: 17px;
  --bbm-form-helper: 14px;
  --bbm-form-note: 13px;
  --bbm-form-control: 52px;
  --bbm-form-label-gap: 6px;
}

/* ---------- Card headings -------------------------------------------------
   Home card sits in a narrower hero column, so its ceiling is slightly lower
   than the full-width quote card. Both keep a 1.08-1.1 line-height. */
.page-home .home-quote-card__head {
  margin-bottom: 20px;
}

.page-home .home-quote-card__head .eyebrow {
  margin-bottom: 8px;
  font-size: 11.5px;
  line-height: 1.2;
}

.page-home .home-quote-card__head h2 {
  font-size: clamp(1.75rem, 2.2vw, 2.05rem);
  line-height: 1.08;
  letter-spacing: -.04em;
  text-wrap: balance;
}

.page-home .home-quote-card__lede {
  max-width: 46ch;
  margin-top: 8px;
  color: var(--on-surface-variant);
  font-size: 16px;
  line-height: 1.5;
  text-wrap: pretty;
}

.page-quote .quote-card__head {
  margin-bottom: 22px;
}

.page-quote .quote-card__head .eyebrow {
  margin-bottom: 8px;
  font-size: 11.5px;
  line-height: 1.2;
}

.page-quote .quote-card__head h2 {
  font-size: clamp(1.8rem, 2.3vw, 2.1rem);
  line-height: 1.1;
  letter-spacing: -.035em;
  text-wrap: balance;
}

.page-quote .quote-card__head > p:not(.eyebrow) {
  max-width: 56ch;
  margin-top: 8px;
  color: var(--on-surface-variant);
  font-size: 16px;
  line-height: 1.55;
  text-wrap: pretty;
}

.home-quote-card__lede .req,
.quote-card__head .req,
.field label .req {
  color: var(--tertiary);
  font-weight: 800;
}

/* ---------- Labels -------------------------------------------------------- */
.page-home .home-quote-form .field label,
.quote-form .field label {
  display: block;
  color: var(--on-surface);
  font-size: var(--bbm-form-label);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: .005em;
  overflow-wrap: break-word;
}

.page-home .home-quote-form .field label .req,
.quote-form .field label .req {
  font-size: .95em;
}

/* ---------- Inputs --------------------------------------------------------
   Home rules need the .page-home prefix to outrank the existing
   .page-home .home-quote-form .field input colour/focus block. */
.page-home .home-quote-form .field,
.quote-form .field {
  min-width: 0;
  gap: var(--bbm-form-label-gap);
}

.page-home .home-quote-form .field input,
.quote-form .field input {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: var(--bbm-form-control);
  padding: 13px 15px;
  border: 1.5px solid var(--field-border);
  border-radius: 14px;
  background: var(--x2-sky-50);
  color: var(--on-surface);
  font-size: var(--bbm-form-value);
  line-height: 1.45;
  letter-spacing: 0;
  caret-color: var(--primary);
  box-shadow: 0 1px 2px rgba(12, 34, 56, .04) inset;
}

.page-home .home-quote-form .field input::placeholder,
.quote-form .field input::placeholder {
  color: #5b646e;
  opacity: 1;
}

.page-home .home-quote-form .field input:hover,
.quote-form .field input:hover {
  border-color: var(--outline);
  background: #ffffff;
}

.page-home .home-quote-form .field input:focus,
.quote-form .field input:focus {
  border-color: var(--primary);
  background: #ffffff;
  box-shadow: 0 0 0 4px rgba(188, 214, 238, .55);
}

/* A real outline in addition to the soft ring: visible in forced colours and
   for anyone who cannot perceive the blue tint. */
.page-home .home-quote-form .field input:focus-visible,
.quote-form .field input:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* Date inputs have a native indicator with an intrinsic width on some
   engines; let it shrink with the field instead of forcing a scrollbar. */
.page-home .home-quote-form .field input[type="date"],
.quote-form .field input[type="date"] {
  -webkit-min-logical-width: 0;
  min-inline-size: 0;
}

/* ---------- Hints, errors, privacy note ---------------------------------- */
.page-home .home-quote-form .field__hint,
.quote-form .field__hint {
  display: block;
  margin-top: 1px;
  color: var(--on-surface-variant);
  font-size: var(--bbm-form-helper);
  line-height: 1.5;
}

.page-home .home-quote-form .field-error,
.quote-form .field-error {
  margin-top: 6px;
  padding-left: 9px;
  border-left: 3px solid currentColor;
  color: var(--error);
  font-size: var(--bbm-form-helper);
  font-weight: 650;
  line-height: 1.5;
  overflow-wrap: break-word;
}

.page-home .home-quote-form .field-error:not(.show),
.quote-form .field-error:not(.show) {
  display: none;
}

.page-home .home-quote-form .field-error.show,
.quote-form .field-error.show {
  display: block;
}

.page-home .home-quote-form .field input.invalid,
.quote-form .field input.invalid {
  border-color: var(--error);
  background: #fff6f5;
}

.page-home .home-quote-form .field input.invalid:focus,
.quote-form .field input.invalid:focus {
  border-color: var(--error);
  background: #ffffff;
  box-shadow: 0 0 0 4px rgba(186, 26, 26, .18);
}

/* ---------- Grid rhythm ---------------------------------------------------
   Larger type needs a little more air than 11px, but 24px+ rows would make
   six fields feel like a questionnaire. 13-18px keeps the card compact. */
.page-home .home-quote-form__grid {
  gap: 16px 14px;
}

.quote-form .form-grid {
  gap: 18px 16px;
}

/* ---------- Submit and privacy note -------------------------------------- */
.page-home .home-quote-form__foot {
  gap: 10px;
  margin-top: 18px;
}

.page-home .home-quote-form__foot .btn,
.quote-form .form-foot .btn {
  min-height: 54px;
  font-size: 16.5px;
  font-weight: 700;
  letter-spacing: 0;
}

.quote-form .form-foot {
  margin-top: 20px;
  gap: 12px;
}

.page-home .home-quote-form .form-note,
.quote-form .form-note {
  color: var(--on-surface-variant);
  font-size: var(--bbm-form-note);
  line-height: 1.55;
  text-wrap: pretty;
}

.page-home .home-quote-form .form-note a,
.quote-form .form-note a {
  color: var(--primary);
  font-weight: 650;
  text-underline-offset: 2px;
  white-space: nowrap;
}

/* Status messages inherit the form's helper scale rather than 12px. */
.home-quote-card .form-status,
.quote-card .form-status {
  font-size: 14px;
  line-height: 1.5;
}

.home-quote-card .form-status strong,
.quote-card .form-status strong {
  font-size: 14.5px;
}

/* ---------- Responsive ----------------------------------------------------
   Type stays at its readable size on phones; only padding and row gaps
   tighten a little. No breakpoint shrinks below 16px input text. */
@media (max-width: 760px) {
  .page-home .home-quote-card__head h2 {
    font-size: 1.8rem;
  }

  .page-quote .quote-card__head h2 {
    font-size: 1.85rem;
  }

  .page-home .home-quote-form .field input,
  .quote-form .field input {
    padding: 12px 14px;
  }

  .page-home .home-quote-form__grid {
    gap: 13px 14px;
  }

  .quote-form .form-grid {
    gap: 14px;
  }

  .page-home .home-quote-form__foot .btn,
  .quote-form .form-foot .btn {
    min-height: 52px;
  }
}

@media (max-width: 400px) {
  .page-home .home-quote-card {
    padding: 18px 16px;
  }

  .page-home .home-quote-card__lede,
  .page-quote .quote-card__head > p:not(.eyebrow) {
    font-size: 15.5px;
  }

  .page-home .home-quote-form__foot .btn,
  .quote-form .form-foot .btn {
    padding-inline: 20px;
  }
}

/* ---------- Increased contrast ------------------------------------------- */
@media (prefers-contrast: more) {
  .page-home .home-quote-form .field input,
  .quote-form .field input {
    border-width: 2px;
  }

  .page-home .home-quote-form .field-error,
  .quote-form .field-error {
    border-left-width: 4px;
  }
}

/* ---------- Forced colours ------------------------------------------------ */
@media (forced-colors: active) {
  .page-home .home-quote-form .field input:focus-visible,
  .quote-form .field input:focus-visible {
    outline: 3px solid Highlight;
    outline-offset: 2px;
  }

  .page-home .home-quote-form .field-error,
  .quote-form .field-error {
    border-left-color: Mark;
  }
}