/* =============================================================================
   NOVA ADUs — estimate + contact forms (JetFormBuilder restyle)

   Loaded only by contact-us.html, after home.css and pages.css. JetFormBuilder's
   own sheet (assets/build/frontend/main.css) is spliced in AHEAD of the theme
   sheets by nwb-jfb-embed.php, so any selector here of equal specificity wins
   by source order — most rules below deliberately match JetFormBuilder's own
   specificity rather than escalating it.

   Two traps carried over from the AH build, both handled here:
   - JetFormBuilder hides inactive steps with a LOW-specificity
     `.jet-form-builder-page--hidden { display:none }`. Any `display` set on a
     page selector must be scoped `:not(.jet-form-builder-page--hidden)` or the
     hidden pages render forever underneath the active one.
   - The honeypot's hiding CSS ships through wp_enqueue_scripts, which never
     runs on these documents, so it is re-declared here.

   01  Section head + aside
   02  Form frame, steps, headings
   03  Tiles (radio options)
   04  Inputs, selects, textarea
   05  Buttons
   06  Progress rail
   07  Messages, note, honeypot
   08  Contact form grid
   09  Motion
   ============================================================================= */

/* --------------------------------------------------------------------------
   01  SECTION HEAD + ASIDE
   -------------------------------------------------------------------------- */
.estimate__head {
  display: grid;
  gap: var(--s-3);
  margin-bottom: var(--s-6);
}

.estimate__head .lede {
  margin: 0;
  max-width: 44ch;
}

.next__title {
  margin: 0 0 var(--s-4);
  font-family: var(--font-display);
  font-size: var(--t-body-l);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.next-steps {
  list-style: none;
  counter-reset: step;
  margin: 0 0 var(--s-5);
  padding: 0;
  display: grid;
  gap: var(--s-4);
}

.next-steps li {
  counter-increment: step;
  display: grid;
  grid-template-columns: 2rem 1fr;
  column-gap: var(--s-3);
  row-gap: var(--s-1);
}

.next-steps li::before {
  content: counter(step, decimal-leading-zero);
  grid-row: span 2;
  font-family: var(--font-display);
  font-size: var(--t-small);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--accent-ink);
  padding-top: 0.2em;
}

.next-steps strong {
  font-weight: 600;
  color: var(--text);
}

.next-steps span {
  font-size: var(--t-small);
  line-height: 1.55;
  color: var(--text-soft);
}

/* --------------------------------------------------------------------------
   02  FORM FRAME, STEPS, HEADINGS
   -------------------------------------------------------------------------- */
.jet-fb-form-block {
  container-type: inline-size;
}

.jet-fb-form-block form.jet-form-builder {
  display: grid;
  gap: var(--s-4);
}

/* Scoped so JetFormBuilder's low-specificity --hidden rule keeps winning. */
.jet-fb-form-block .jet-form-builder-page:not(.jet-form-builder-page--hidden) {
  display: grid;
  gap: var(--s-4);
}

.jet-fb-form-block .jet-form-builder-row {
  margin: 0;
  display: grid;
  gap: var(--s-1);
}

.jet-fb-form-block .jet-form-builder__heading-desc {
  order: -1;
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-mute);
}

.jet-fb-form-block .jet-form-builder__heading {
  margin: 0;
}

.jet-fb-form-block .jet-form-builder__heading .jet-form-builder__label-text {
  font-family: var(--font-display);
  font-size: var(--t-d1);
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -0.02em;
  color: var(--text);
  text-wrap: balance;
}

.jet-fb-form-block .jet-form-builder__label {
  margin: 0;
}

.jet-fb-form-block .jet-form-builder__label-text {
  font-size: var(--t-small);
  font-weight: 600;
  color: var(--text);
}

.jet-fb-form-block .jet-form-builder__required {
  color: var(--accent-ink);
  margin-inline-start: 0.125rem;
}

.jet-fb-form-block .jet-form-builder__desc small {
  font-size: var(--t-small);
  color: var(--text-mute);
}

/* --------------------------------------------------------------------------
   03  TILES
   The <span> after each radio is the tile. The input stays in the tab order
   and takes the focus ring; it is only visually out of the way — never
   display:none, or keyboard and screen-reader users lose the control.
   -------------------------------------------------------------------------- */
.jet-fb-form-block .jet-form-builder__fields-group.checkradio-wrap {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-3);
}

@container (max-width: 30rem) {
  .jet-fb-form-block .jet-form-builder__fields-group.checkradio-wrap {
    grid-template-columns: minmax(0, 1fr);
  }
}

.jet-fb-form-block .jet-form-builder__field-wrap.radio-wrap {
  margin: 0;
  display: block;
}

/* An odd last tile ("Not sure yet") spans both columns instead of leaving a hole. */
.jet-fb-form-block .jet-form-builder__field-wrap.radio-wrap:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

.jet-fb-form-block .jet-form-builder__field-label.for-radio {
  position: relative;
  display: block;
  margin: 0;
  height: 100%;
}

/* JetFormBuilder's radio sheet draws its own circle as a ::before on the
   label's span and forces every span inside it to display:flex. Both are
   matched at (0,3,0) here so this sheet, loading later, takes them over. */
.jet-fb-form-block .field-type-radio-field .jet-form-builder__field-label.for-radio > span::before {
  content: none;
  display: none;
}

.jet-fb-form-block .nwb-tile {
  position: absolute;
  inset-inline-start: 1rem;
  top: 1rem;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

.jet-fb-form-block .checkradio-wrap .nwb-tile + span {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0 var(--s-3);
  box-sizing: border-box;
  height: 100%;
  min-height: 3.5rem;
  padding: 0.875rem 1rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-m);
  background: var(--paper-raised);
  color: var(--text);
  cursor: pointer;
  transition: border-color var(--d-fast) var(--ease),
    background-color var(--d-fast) var(--ease),
    box-shadow var(--d-fast) var(--ease);
}

.jet-fb-form-block .checkradio-wrap .nwb-tile + span:hover {
  border-color: var(--accent-hover);
}

.jet-fb-form-block .checkradio-wrap .nwb-tile:checked + span {
  border-color: var(--accent-ink);
  background: var(--sand);
  box-shadow: inset 0 0 0 1px var(--accent-ink);
}

.jet-fb-form-block .checkradio-wrap .nwb-tile:focus-visible + span {
  outline: 2px solid var(--accent-ink);
  outline-offset: 2px;
}

.jet-fb-form-block .checkradio-wrap .jet-fb-form-block .checkradio-wrap :is(.nwb-tile__t, .nwb-tile__s) {
  display: block;
}

.jet-fb-form-block .checkradio-wrap .nwb-tile__ico {
  display: block;
  width: 1.75rem;
  height: 1.75rem;
  flex: none;
  background-color: var(--accent-ink);
  -webkit-mask: var(--ico) center / contain no-repeat;
  mask: var(--ico) center / contain no-repeat;
}

.nwb-tile__ico--dadu     { --ico: url(../images/icons/estimate/dadu.svg); }
.nwb-tile__ico--garage   { --ico: url(../images/icons/estimate/garage.svg); }
.nwb-tile__ico--attached { --ico: url(../images/icons/estimate/attached.svg); }
.nwb-tile__ico--basement { --ico: url(../images/icons/estimate/basement.svg); }
.nwb-tile__ico--multi    { --ico: url(../images/icons/estimate/multi.svg); }
.nwb-tile__ico--plans    { --ico: url(../images/icons/estimate/plans.svg); }
.nwb-tile__ico--unsure   { --ico: url(../images/icons/estimate/unsure.svg); }

.nwb-tile__t {
  font-size: var(--t-body);
  font-weight: 600;
  line-height: 1.3;
}

.nwb-tile__s {
  font-size: var(--t-small);
  line-height: 1.4;
  color: var(--text-soft);
}

/* --------------------------------------------------------------------------
   04  INPUTS
   Ported from pages.css .field rules. (0,2,0) ties JetFormBuilder's
   `.layout-column .jet-form-builder__field { width:100% }`; this sheet loads
   later, so it wins.
   -------------------------------------------------------------------------- */
.jet-fb-form-block .jet-form-builder__field-wrap {
  margin: 0;
}

.jet-fb-form-block :is(input, select, textarea).jet-form-builder__field {
  box-sizing: border-box;
  width: 100%;
  min-height: 3.25rem;
  padding: 0.875rem 1rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-m);
  background: var(--paper-raised);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: 1.5;
  transition: border-color var(--d-fast) var(--ease),
    box-shadow var(--d-fast) var(--ease);
}

.jet-fb-form-block textarea.jet-form-builder__field {
  resize: vertical;
  min-height: 8rem;
}

.jet-fb-form-block select.jet-form-builder__field {
  appearance: none;
  -webkit-appearance: none;
  padding-inline-end: 2.5rem;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right 1.15rem center, right 0.875rem center;
  background-size: 0.3125rem 0.3125rem, 0.3125rem 0.3125rem;
  background-repeat: no-repeat;
}

.jet-fb-form-block :is(input, select, textarea).jet-form-builder__field:focus {
  outline: none;
  border-color: var(--accent-ink);
  box-shadow: 0 0 0 3px rgb(139 175 143 / 0.28);
}

.jet-fb-form-block :is(input, textarea).jet-form-builder__field::placeholder {
  color: var(--text-mute);
}

.jet-fb-form-block .jet-form-builder__field-error {
  margin: 0;
  font-size: var(--t-small);
  color: #a4232f;
}

.jet-fb-form-block .jet-form-builder-row.field-has-error :is(input, select, textarea).jet-form-builder__field,
.jet-fb-form-block :is(input, select, textarea).jet-form-builder__field[aria-invalid="true"] {
  border-color: #a4232f;
}

/* --------------------------------------------------------------------------
   05  BUTTONS
   Continue and the submit carry .btn.btn--solid from the form definition.
   The Back button has no class hook, so it is dressed as .btn--outline here.
   -------------------------------------------------------------------------- */
.jet-fb-form-block .jet-form-builder__next-page-wrap,
.jet-fb-form-block .jet-form-builder__submit-wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--s-3);
  margin: 0;
}

/* Step one has no Back button, so its lone Continue is pushed right to sit
   where Continue sits on every other step. The submit button used to be in
   this rule too, but the estimate form's submit always has Back beside it —
   the only thing that selector ever matched was the contact form's lone Send
   Message, which belongs on the left with the fields. */
.jet-fb-form-block .jet-form-builder__next-page-wrap > .jet-form-builder__next-page:only-child {
  margin-inline-start: auto;
}

.jet-fb-form-block .jet-form-builder__prev-page {
  --btn-bg: transparent;
  --btn-fg: var(--text);
  --btn-bd: var(--line-strong);
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.9375rem 1.75rem;
  border-radius: var(--r-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-bd);
  font-family: var(--font-body);
  font-size: var(--t-small);
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color var(--d-fast) var(--ease);
}

.jet-fb-form-block .jet-form-builder__prev-page:hover {
  --btn-bd: currentColor;
}

.jet-fb-form-block .btn {
  cursor: pointer;
}

.jet-fb-form-block .btn:disabled,
.jet-fb-form-block .btn[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}

.jet-fb-form-block :is(.btn, .jet-form-builder__prev-page):focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

@container (max-width: 30rem) {
  .jet-fb-form-block :is(.jet-form-builder__next-page, .jet-form-builder__prev-page, .jet-form-builder__submit) {
    flex: 1 1 100%;
    justify-content: center;
  }
}

/* --------------------------------------------------------------------------
   06  PROGRESS RAIL
   JetFormBuilder colours its circles with (0,4,0) selectors; these match
   that specificity and win by order.
   -------------------------------------------------------------------------- */
.jet-fb-form-block .jet-form-builder-progress-pages {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin: 0 0 var(--s-2);
  padding: 0;
}

.jet-fb-form-block .jet-form-builder-progress-pages__item--wrapper {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  gap: var(--s-2);
  min-width: 0;
}

.jet-fb-form-block .jet-form-builder-progress-pages__item--wrapper:last-child {
  flex: 0 0 auto;
}

.jet-fb-form-block .jet-form-builder-progress-pages__item {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  min-width: 0;
}

.jet-fb-form-block .jet-form-builder-progress-pages__item--circle {
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--text-soft);
  font-family: var(--font-display);
  font-size: var(--t-label);
  font-weight: 600;
  transition: background-color var(--d-fast) var(--ease),
    border-color var(--d-fast) var(--ease), color var(--d-fast) var(--ease);
}

.jet-fb-form-block .jet-form-builder-progress-pages__item--label {
  font-size: var(--t-small);
  color: var(--text-mute);
  white-space: nowrap;
}

.jet-fb-form-block .jet-form-builder-progress-pages__separator {
  flex: 1 1 1rem;
  height: 1px;
  background: var(--line);
}

.jfb-progress-type--default .jet-form-builder-progress-pages__item--wrapper.active-page .jet-form-builder-progress-pages__item--circle {
  background: var(--accent-ink);
  border-color: var(--accent-ink);
  color: #fff;
}

.jfb-progress-type--default .jet-form-builder-progress-pages__item--wrapper.active-page .jet-form-builder-progress-pages__item--label {
  color: var(--text);
  font-weight: 600;
}

.jfb-progress-type--default .jet-form-builder-progress-pages__item--wrapper.passed-page .jet-form-builder-progress-pages__item--circle {
  background: transparent;
  border-color: var(--accent-ink);
  color: var(--accent-ink);
}

/* JetFormBuilder colours the passed separator at (0,5,0)
   (…passed-page .item + .separator); match it exactly so order decides. */
.jfb-progress-type--default .jet-form-builder-progress-pages__item--wrapper.passed-page .jet-form-builder-progress-pages__item + .jet-form-builder-progress-pages__separator {
  background: var(--accent-ink);
}

@container (max-width: 40rem) {
  .jet-fb-form-block .jet-form-builder-progress-pages__item--wrapper:not(.active-page) .jet-form-builder-progress-pages__item--label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* --------------------------------------------------------------------------
   07  MESSAGES, NOTE, HONEYPOT
   -------------------------------------------------------------------------- */
.jet-fb-form-block .jet-form-builder-messages-wrap:empty {
  display: none;
}

.jet-fb-form-block .jet-form-builder-message {
  margin: 0;
  padding: var(--s-4) var(--s-5);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-m);
  background: var(--paper-raised);
  font-size: var(--t-body);
  line-height: 1.5;
  color: var(--text);
}

.jet-fb-form-block .jet-form-builder-message--success {
  border-color: var(--accent);
  background: var(--sand);
}

.jet-fb-form-block .jet-form-builder-message--error {
  border-color: #a4232f;
  color: #a4232f;
}

/* A sent form has nothing left to say; the message takes its place. */
.jet-fb-form-block:has(.jet-form-builder-message--success) form > :not(.jet-form-builder-messages-wrap) {
  display: none;
}

.jet-fb-form-block .jet-form-builder__conditional {
  display: grid;
}

.nwb-note {
  margin: 0;
  padding: var(--s-3) var(--s-4);
  border-inline-start: 3px solid var(--accent);
  border-radius: 0 var(--r-m) var(--r-m) 0;
  background: var(--sand);
  font-size: var(--t-small);
  line-height: 1.55;
  color: var(--text-soft);
}

.form__status--fallback {
  padding: var(--s-4) var(--s-5);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-m);
  background: var(--paper-raised);
}

/* JetFormBuilder only ships this via wp_enqueue_scripts; re-declared here. */
.jfb-user-info,
.jfb-user-info input {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   08  CONTACT FORM GRID
   The plain form is a single page; pair the short fields at wider widths.
   -------------------------------------------------------------------------- */
/* A single-page form has no .jet-form-builder-page wrapper — its rows sit
   straight inside the <form>, so the grid goes on the form itself. Hidden
   inputs take no cell and the honeypot is absolutely positioned. */
@container (min-width: 36rem) {
  #contact .jet-fb-form-block form.jet-form-builder {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s-4) var(--s-4);
  }

  #contact .jet-fb-form-block :is(.field-type-textarea-field, .field-type-submit-field, .jet-form-builder-messages-wrap) {
    grid-column: 1 / -1;
  }
}

/* --------------------------------------------------------------------------
   09  MOTION
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .jet-fb-form-block .checkradio-wrap .nwb-tile + span,
  .jet-fb-form-block .jet-form-builder__prev-page,
  .jet-fb-form-block .jet-form-builder-progress-pages__item--circle,
  .jet-fb-form-block :is(input, select, textarea).jet-form-builder__field {
    transition: none;
  }
}

/* ==========================================================================
   SOLO ESTIMATE COLUMN  (14 Sep 2026)
   The form used to sit beside a "what happens next" card. With the card gone
   it holds the band alone, so it takes a fixed column and centres rather than
   stretching the full 1400px shell. 48rem deliberately, not --w-text (46rem):
   the form's own rows go two-up above 40rem via a container query on
   .jet-fb-form-block, and this keeps that container clear of the threshold.
   Text stays left-aligned — centred field labels would be worse, not better.
   ========================================================================== */

.estimate-solo {
  max-width: 48rem;
  margin-inline: auto;
}

/* Heading and lede centre over the form; the form itself stays left —
   centred labels and inputs are harder to fill in, not more elegant.
   The lede needs the auto margin as well as the text-align: it carries a
   44ch cap, and a capped box with centred text inside still hugs the left
   edge of the column unless it is centred as a box too.
   Scoped to .estimate-solo so the #contact head, which still sits beside
   the map, keeps its left alignment. */
.estimate-solo .estimate__head {
  text-align: center;
}

.estimate-solo .estimate__head .lede {
  margin-inline: auto;
}

/* ==========================================================================
   NO HERO  (15 Sep 2026)
   The contact page lost its hero, so the estimate band is now the first thing
   under a header that floats over the page. --chrome-h is the header's height
   plus the inset it sits in; --s-9 alone is not enough at small sizes.
   ========================================================================== */

/* Was #estimate. Neither of these pages has a hero, and the section that
   comes first differs per page — the estimate form on one, the contact form
   on the other — so this follows position rather than id. */
#main > section:first-child {
  padding-block-start: calc(var(--chrome-h) + var(--s-7));
}

/* The way out for someone who does not want a five-step form. Quiet, under
   the submit, centred with the head above it. */
.estimate-solo__aside {
  margin-block-start: var(--s-6);
  padding-block-start: var(--s-5);
  border-top: 1px solid var(--line);
  text-align: center;
  font-size: var(--t-small);
  color: var(--text-mute);
}

.estimate-solo__aside .arrow-link {
  margin-inline-start: var(--s-2);
}