/* ==========================================================================
   COLORADOHEALTH.COM — THE QUOTE FORM
   ==========================================================================

   This styles the questions people answer before they see their plans.
   Same rules as the results page: NO JavaScript anywhere.

   The old version asked these questions across three separate pages using
   one wide table. That table is gone. Everything here is made of ordinary
   boxes, so it can fold down to one column on a phone by itself.

   Colours come from vb-base.css. Load that first.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. THE TWO CARDS
   "Your household" and "Who is being covered?"
   -------------------------------------------------------------------------- */
.qf { max-width: 880px; margin: 0 auto; }

/* Step one asks two questions. Narrower, so it does not read as a huge
   empty form with two boxes stranded in the corner of it. */
.qf-step1 { max-width: 440px; }

.card {
  margin: 0 0 16px;
  padding: 18px clamp(14px, 3vw, 24px) 22px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 30, 60, .06);
}

.card-head {
  margin: 0 0 2px;
  color: var(--ink);
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -.01em;
}
.card-sub {
  margin: 0 0 14px;
  color: var(--quiet);
  font-size: 13px;
}
.card-head + .grid { margin-top: 14px; }


/* --------------------------------------------------------------------------
   2. THE HOUSEHOLD QUESTIONS
   One question per line is the starting point, which is what a phone gets.
   The rule underneath puts two side by side once the window is wide enough.
   -------------------------------------------------------------------------- */
.grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px 18px;
}
.field-wide { grid-column: 1 / -1; }

/* two side by side once there is room: year + ZIP, then people + income,
   then the employer question across the bottom */
@media (min-width: 620px) {
  .grid { grid-template-columns: 1fr 1fr; }
}

.field { display: block; }

.lab {
  display: block;
  margin: 0 0 5px;
  color: var(--ink);
  font-size: 13.5px;
  font-weight: 700;
}
/* "optional" and "your ZIP covers 2 counties" - a quiet aside on a label */
.lab .opt {
  margin-left: 6px;
  color: var(--quiet);
  font-size: 12px;
  font-weight: 500;
  font-style: normal;
}

.hint {
  display: block;
  margin: 5px 0 0;
  color: var(--quiet);
  font-size: 12px;
}


/* --------------------------------------------------------------------------
   3. BOXES YOU TYPE IN, AND DROPDOWNS
   One rule covers both so they always look the same.
   16px text is on purpose — anything smaller makes an iPhone zoom in when
   you tap the box, which then leaves the page stranded off to one side.
   -------------------------------------------------------------------------- */
.qf input[type="text"],
.qf textarea,
.qf select {
  width: 100%;
  min-height: 44px;                 /* comfortable to tap */
  padding: 8px 10px;
  border: 1px solid #c3d3e1;
  border-radius: 9px;
  background: #fff;
  color: var(--ink);
  font-family: inherit;
  font-size: 16px;
}
.qf select { padding-right: 6px; }
.qf textarea { min-height: 96px; resize: vertical; }

.qf input[type="text"]:focus,
.qf textarea:focus,
.qf select:focus {
  border-color: var(--navy);
  outline: 2px solid rgba(0, 63, 103, .18);
  outline-offset: 0;
}

.qf input::placeholder { color: #9fb3c6; }


/* the dollar sign sits inside the box */
.money { position: relative; display: block; }
.money-sign {
  position: absolute;
  top: 0;
  left: 11px;
  height: 44px;
  display: flex;
  align-items: center;
  color: var(--quiet);
  font-size: 15px;
  pointer-events: none;
}
.money input { padding-left: 25px !important; }


/* --------------------------------------------------------------------------
   4. ONE PERSON
   On a computer this reads as a row: name, date of birth, age, gender,
   tobacco. On a phone the same boxes stack. It is one grid either way —
   only the column line changes.
   -------------------------------------------------------------------------- */
.people {
  display: grid;
  gap: 10px;
}

.who {
  display: grid;
  grid-template-columns: 1fr 1fr;         /* age and gender share a line */
  gap: 9px 16px;
  padding: 11px 14px 13px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--page);
}
.who-name,
.who-dob,
.who-tob { grid-column: 1 / -1; }

.who-name {
  color: var(--navy);
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.who-field { min-width: 0; }

.who-lab {
  display: block;
  margin: 0 0 4px;
  color: var(--quiet);
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}


/* the three date boxes */
.dob { display: flex; align-items: center; gap: 5px; }
.dob input { text-align: center; }
.dob input[name^="MM"], .dob input[name^="DD"] { flex: 0 0 52px; }
.dob input[name^="YYYY"] { flex: 0 0 76px; }
.dob-sep { color: var(--quiet); }

.who-age select { max-width: 110px; }
.who-gender select { max-width: 150px; }


/* --------------------------------------------------------------------------
   4b. PICK ONE - every choice visible at once
   The county. A dropdown hides the fact that a ZIP can cover more than one
   county, and the county changes the price, so all of them are on screen.
   Real radio buttons, the way the old site had them, in boxes that are big
   enough to tap on a phone.
   -------------------------------------------------------------------------- */
.pick { display: flex; flex-wrap: wrap; gap: 8px; }

.pick label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid #c3d3e1;
  border-radius: 9px;
  background: #fff;
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.pick input { width: 16px; height: 16px; margin: 0; accent-color: var(--navy); }

/* the chosen one is shaded, so it reads at a glance and not only by the dot */
.pick label:has(input:checked) { border-color: var(--navy); background: var(--tint); }
.pick input:focus-visible { outline: 3px solid #ffb100; outline-offset: 2px; }


/* --------------------------------------------------------------------------
   5. YES / NO
   Radio buttons again, hidden, with the label as the button — the same
   trick the filters on the results page use.
   -------------------------------------------------------------------------- */
.yesno { display: inline-flex; gap: 6px; }
.yesno input { position: absolute; opacity: 0; pointer-events: none; }

.yesno label {
  min-width: 54px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #c3d3e1;
  border-radius: 9px;
  background: #fff;
  color: var(--body);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}
.yesno input:checked + label {
  border-color: var(--navy);
  background: var(--navy);
  color: #fff;
}
.yesno input:focus-visible + label { outline: 3px solid #ffb100; outline-offset: 2px; }


/* --------------------------------------------------------------------------
   6. SHOW MORE CHILDREN
   Most households are one to three people, so children 2 to 6 start out
   hidden and one tap brings them back. It is a checkbox with the label as
   the button — exactly the trick the filters on the results page use, and
   again with no JavaScript.

   The checkbox sits between the two lists of people, on its own, for two
   reasons:

     1. A rule can only reach forwards, so the children it reveals have to
        come after it.
     2. Tapping a label focuses the box it belongs to, and a browser scrolls
        whatever it focuses into view. When the box was at the top of the
        form, one tap threw the whole page back to the top. Putting it
        inside the list of people was not enough either — a hidden box in a
        grid counts as being at the top of that grid no matter where it is
        written, so it still jumped. Out on its own, in ordinary flow beside
        its own button, there is nothing to scroll to.
   -------------------------------------------------------------------------- */
.people-extra { display: none; }
#morekids:checked ~ .people-extra { display: grid; }

.more-off { display: none; }
#morekids:checked ~ .more .more-on  { display: none; }
#morekids:checked ~ .more .more-off { display: inline; }

.more {
  display: inline-flex;
  align-items: center;
  margin: 10px 0;
  min-height: 44px;
  padding: 0 16px;
  border: 1px dashed #b6c9d9;
  border-radius: 9px;
  color: var(--link);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}
.more:hover { border-color: var(--navy); border-style: solid; background: var(--tint); }
#morekids:focus-visible ~ .more { outline: 3px solid #ffb100; outline-offset: 2px; }


/* --------------------------------------------------------------------------
   7. THE BUTTON AT THE BOTTOM
   -------------------------------------------------------------------------- */
.qf-go { text-align: center; padding: 4px 0 10px; }

.go {
  max-width: 100%;                /* a long label wraps, never overflows */
  white-space: normal;
  min-width: 260px;
  min-height: 54px;
  padding: 0 30px;
  border: 0;
  border-radius: 11px;
  background: linear-gradient(180deg, #1d7a33 0%, var(--green) 100%);
  color: #fff;
  font-family: inherit;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: .01em;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 50, 20, .22);
}
.go:hover { filter: brightness(1.07); }
.go:active { transform: translateY(1px); }

.go-note {
  margin: 10px 0 0;
  color: var(--quiet);
  font-size: 12.5px;
}


/* --------------------------------------------------------------------------
   8. ON A COMPUTER — LAY EACH PERSON OUT AS A ROW
   Below 760px none of this applies and everything above stays stacked,
   which is what a phone gets.

   The five columns are: name, date of birth, age, gender, tobacco. The
   name has to be a plain <span>, not a <legend> — a legend refuses to sit
   in a grid column and quietly shunts every other column one place left.

   960px, not 760px: five columns side by side need about 950px of window
   before they stop shoving the Yes/No buttons off the edge of the card.
   Below that the stacked layout above is used, which is fine on a tablet.
   -------------------------------------------------------------------------- */
@media (min-width: 960px) {

  .who {
    grid-template-columns: 118px 200px 104px 148px 1fr;
    align-items: end;
    gap: 0 16px;
    padding: 9px 16px 11px;
  }

  /* undo the phone rule that made these span the full width */
  .who-name, .who-dob, .who-tob { grid-column: auto; }

  .who-name { align-self: center; padding-bottom: 2px; }

  /* the small labels only need saying once, above the first person */
  .who ~ .who .who-lab { display: none; }
  .who ~ .who { padding-top: 7px; }
}