/* =====================================================================
   Individuals_Funnel.css
   Individuals.html hero quote form, restyled as the Medicare funnel
   floating card panel.

   Design system is lifted 1:1 from styles/MedicareFunnel.css (the
   Individuals_Medicare_Quote_01.html card): same palette, same Costco
   Sans Micro stack, same 14px card radius / 10px control radius, same
   shadow recipe, same error-summary treatment.

   LINK ORDER: must load LAST, after theme.css, expansionStyles.css and
   mobile.css. Several rules here win on source order at equal
   specificity against mobile.css Section 8, so an earlier position
   silently breaks the card.

   SCOPING: every card rule is scoped to .indvEmbed (and, where it has
   to out-specify mobile.css Section 8's id-based selectors, to
   #individualQuoteForm). Nothing generic is declared at :root or on a
   bare class, so .btn / .card / .grid / .field elsewhere on the site
   are untouched.

   Sections
     1. Design tokens (scoped, NOT :root)
     2. Hero banner - flexible height
     3. The floating card panel
     4. Fieldset / legend / grid
     5. Fields - labels, inputs, selects
     6. Error summary
     7. Actions - submit button
     8. Conditional-field reveal
     9. mobile.css Section 8 reconciliation
    10. Breakpoints
   ===================================================================== */


/* ============================================================
   SECTION 1 - Design tokens
   Declared on .indvEmbed rather than :root so the card is
   self-contained and never competes with the identical token block
   in expansionStyles.css. Values are byte-identical to
   MedicareFunnel.css except --maxw, which is the card width here.
   ============================================================ */
.indvEmbed{
  --blue:#005DAB; --blue-dark:#004a8a;        /* Costco primary (Get a Quote) */
  --red:#E31936; --red-dark:#c2142e;          /* accent + error ink */
  --focus:#DE2127;                            /* input focus ring (theme.css:1701) */
  --ink:#1f2733; --body:#444; --muted:#6a717b;
  --line:#d9dee4; --soft:#f4f7fa; --bg:#fff;
  --font:"Costco Sans Micro",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --maxw:660px; --radius:14px;                /* ONE card-radius family */
  --btn-radius:10px;                          /* ONE control radius: buttons + inputs */
  --shadow:0 6px 28px rgba(15,30,50,.10),0 1px 2px rgba(15,30,50,.06);
}


/* ============================================================
   SECTION 2 - Hero banner: flexible height

/* Desktop breathing room under the card. Left to mobile.css Section 8
   below 800px, which already owns the hero padding there. */
@media only screen and (min-width:800px){
  .homeHeroWrapper.Individuals{ padding-top:1.5em; padding-bottom:2.5em; }
}

/* .homeHero has min-height:340px in theme.css - a floor, not a cap, so
   it is left alone. Only the stale float context is cleared so the
   card is never overlapped by a floated sibling above it. */
.homeHero.Individuals{ height:auto; }
.homeHeroContent.Individuals{ height:auto; }


/* ============================================================
   SECTION 3 - The floating card panel

   Left-anchored inside .homeHeroContent.Individuals, which theme.css
   already sizes to 65% of the hero, so the hero photograph stays
   visible to the right of the card.
   ============================================================ */
.indvEmbed{
  position:relative;
  z-index:10;
  width:100%;
  max-width:var(--maxw);
  margin:0;
  /* .homeHeroContent.Individuals sets font-size:1.4em; reset to the root
     size so the card's own px/rem scale resolves as designed */
  font-size:1rem;
  font-family:var(--font);
  line-height:normal;
  text-align:left;
  clear:both;
}
.indvEmbed *{ box-sizing:border-box; }

.indvEmbed .card{
  background:var(--bg);
  border-radius:var(--radius);
  box-shadow:0 6px 28px rgba(15,30,50,.16),0 1px 2px rgba(15,30,50,.08);
  overflow:hidden;
}
.indvEmbed .card__bar{ height:5px; background:var(--red); }
.indvEmbed .card__pad{ padding:28px; }


/* ============================================================
   SECTION 4 - Fieldset / legend / grid

   NOTE ON .indvStep: the Medicare card marks its panels
   `fieldset class="step"`, but theme.css:7962 already owns a bare
   `.step` (a progress-stepper cell: position:relative, top:-1.2em,
   padding-top:var(--gap-top), text-align:center, color:#333). That
   rule bleeds straight into any fieldset carrying the class and drags
   the whole panel up 1.2em. There is only one panel here, so the class
   is renamed .indvStep and nothing is inherited by accident.

   theme.css has no fieldset or legend reset, so the browser defaults
   are zeroed inside the card only.
   ============================================================ */
.indvEmbed fieldset,
.indvEmbed .indvStep{
  border:0;
  margin:0;
  padding:0;
  min-width:0;
  position:static;
  top:auto;
}

.indvEmbed legend{
  display:block;
  float:none;
  width:100%;
  padding:0;
  margin:0 0 .85rem;
  color:var(--ink);
  font-size:1.4em;
  line-height:1.25;
}
.indvEmbed legend:focus{ outline:none; }
.indvEmbed legend:focus-visible{ outline:3px solid var(--focus); outline-offset:3px; }

.indvEmbed .grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px 16px;
  align-items:end;              /* short and tall labels keep their controls on one baseline */
}
.indvEmbed .grid > .full{ grid-column:1/-1; }


/* ============================================================
   SECTION 5 - Fields: labels, inputs, selects
   Scoped with #individualQuoteForm so these out-specify mobile.css
   Section 8's `#individualQuoteForm label` / `#individualQuoteForm
   select, #individualQuoteForm input` and the bare `#insuranceType`
   rule at mobile.css:694.
   ============================================================ */
.indvEmbed .field{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:0;
  padding:0;
}

#individualQuoteForm .field label{
  display:block;
  margin:0;
  font-family:var(--font);
  font-weight:500;
  color:var(--ink);
  font-size:.92rem;
  line-height:1.3;
}
.indvEmbed .req{ color:var(--red); font-weight:700; }

/* ---- text / date inputs ---- */
#individualQuoteForm .field input{
  font-family:var(--font);
  font-size:16px;                /* 16px floor: no iOS focus zoom */
  font-weight:normal;
  color:var(--ink);
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--btn-radius);
  padding:12px 13px;
  width:100%;
  max-width:none;
  min-height:48px;               /* >=44px target (WCAG 2.5.8) */
  margin:0;
  transition:border-color .12s,box-shadow .12s;
}
#individualQuoteForm .field input::placeholder{ color:#9aa3ad; }
#individualQuoteForm .field input:focus{
  outline:none;
  border-color:var(--focus);
  box-shadow:0 0 0 3px rgba(222,33,39,.18);
}
#individualQuoteForm .field input[aria-invalid="true"]{
  border-color:var(--red);
  background:#fff7f8;
}

/* ---- selects: match the input box exactly, plus a drawn caret ---- */
#individualQuoteForm .field select{
  font-family:var(--font);
  font-size:16px;
  font-weight:normal;
  color:var(--ink);
  background-color:#fff;
  border:1px solid var(--line);
  border-radius:var(--btn-radius);
  padding:12px 38px 12px 13px;
  width:100%;
  max-width:none;
  min-height:48px;
  margin:0;
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  cursor:pointer;
  text-overflow:ellipsis;
  transition:border-color .12s,box-shadow .12s;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236a717b' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 14px center;
  background-size:12px 8px;
}
#individualQuoteForm .field select:focus{
  outline:none;
  border-color:var(--focus);
  box-shadow:0 0 0 3px rgba(222,33,39,.18);
  /* theme.css:1854 sets `select:focus{color:#E31936}`; the card keeps the
     value legible in ink. Its `border:...!important` still applies and is
     the same red family as --focus, so the ring reads correctly. */
  color:var(--ink);
}
#individualQuoteForm .field select[aria-invalid="true"]{
  border-color:var(--red);
  background-color:#fff7f8;
}
/* Unselected placeholder dims like ::placeholder. [data-empty] is set by
   INDVFunnel_app.js and covers the conditional selects, which are not
   `required` until their branch is active (so :invalid alone misses them). */
#individualQuoteForm .field select:invalid,
#individualQuoteForm .field select[data-empty="true"]{ color:#9aa3ad; }
.indvEmbed .field option{ color:var(--ink); }


/* ============================================================
   SECTION 6 - Error summary
   Same block as MedicareFunnel.css: hidden until .show, red-ruled,
   in-page anchor per message focusing the offending control.
   ============================================================ */
.indvEmbed .errs{
  display:none;
  border:1px solid var(--red);
  background:#fff5f6;
  border-radius:var(--btn-radius);
  padding:12px 14px;
  margin:0 0 18px;
}
.indvEmbed .errs.show{ display:block; }
.indvEmbed .errs:focus{ outline:none; }
.indvEmbed .errs:focus-visible{ outline:3px solid var(--focus); outline-offset:2px; }
.indvEmbed .errs h2{
  margin:0 0 6px;
  padding:0;
  font-family:var(--font);
  font-size:1.05rem;
  font-weight:700;
  line-height:1.2;
  color:var(--red-dark);
  border:0;
  text-align:left;
}
.indvEmbed .errs ul{
  margin:0;
  padding-left:18px;
  list-style:disc outside;
  font-size:.92rem;
  line-height:1.5;
}
.indvEmbed .errs li{ margin:0 0 2px; }
.indvEmbed .errs a{
  color:var(--red-dark);
  font-weight:500;
  text-decoration:underline;
  /* >=24px hit box (WCAG 2.5.8) without disturbing the list flow */
  display:inline-block;
  min-height:24px;
  line-height:24px;
}
.indvEmbed .errs a:hover,
.indvEmbed .errs a:focus{ color:var(--red); border:none; }


/* ============================================================
   SECTION 7 - Actions / submit button
   .btn / .btn--primary already exist in expansionStyles.css:1427 and
   are used elsewhere on this page, so the card's variants are scoped
   rather than redeclared.
   ============================================================ */
.indvEmbed .actions{
  display:flex;
  gap:12px;
  align-items:center;
  margin-top:24px;
  flex-wrap:wrap;
}
.indvEmbed .actions .btn{
  font-family:var(--font);
  font-weight:700;
  font-size:1.02rem;
  border:0;
  border-radius:var(--btn-radius);
  padding:14px 22px;
  cursor:pointer;
  min-height:50px;
  display:inline-flex;
  align-items:center;
  gap:9px;
  justify-content:center;
  text-decoration:none;
}
.indvEmbed .actions .btn--primary{ background:var(--blue); color:#fff; }
.indvEmbed .actions .btn--primary:hover{ background:var(--blue-dark); color:#fff; }
.indvEmbed .actions .btn:focus-visible{ outline:3px solid var(--focus); outline-offset:2px; }
.indvEmbed .actions .btn[disabled]{ opacity:.65; cursor:default; }


/* ============================================================
   SECTION 8 - Conditional-field reveal
   [hidden] must beat the .field flex display, and the wrapper is
   removed from the a11y tree while hidden.
   ============================================================ */
.indvEmbed .field[hidden],
.indvEmbed .reveal[hidden]{ display:none !important; }


/* ============================================================
   SECTION 9 - mobile.css Section 8 reconciliation

   mobile.css:442 targets `#individualQuoteForm #indvGetAQuoteBtn`
   (specificity 2,0,0) with float/width/margin overrides written for
   the old inline form. Matched at 2,0,0 and won on source order, so
   the button behaves like the Medicare card's: inline on desktop,
   full-width stretched on phones.
   ============================================================ */
#individualQuoteForm #indvGetAQuoteBtn{
  float:none;
  right:auto;
  margin:0;
  width:auto;
  max-width:none;
  border:none;
}


/* ============================================================
   SECTION 10 - Breakpoints
   Mirrors MedicareFunnel.css: single column at 560px, stretched
   actions and tighter card padding at 480px, 360px floor.
   ============================================================ */

/* width:100% + max-width:660px already lets the card shrink with the hero
   column, so no override is needed as the viewport narrows - only the
   column count, which drops earlier than the standalone funnel's 560px
   because the card sits in a 65%-wide hero column, not a full-width page. */
@media only screen and (max-width:620px){
  .indvEmbed .grid{ grid-template-columns:1fr; }
}

@media only screen and (max-width:480px){
  .indvEmbed .card__pad{ padding:20px 16px; }
  .indvEmbed .actions{ flex-direction:column; align-items:stretch; }
  .indvEmbed .actions .btn{ width:100%; }
  #individualQuoteForm #indvGetAQuoteBtn{ width:100%; max-width:none; margin:0; }
  .indvEmbed legend{ font-size:1.05rem; }
}

@media only screen and (max-width:360px){
  .indvEmbed .card__pad{ padding:18px 14px; }
  #individualQuoteForm .field input,
  #individualQuoteForm .field select{ max-width:100%; }
}

/* Honour reduced-motion for the control transitions. */
@media (prefers-reduced-motion: reduce){
  #individualQuoteForm .field input,
  #individualQuoteForm .field select{ transition:none; }
}


/* ============================================================
   SECTION 11 - Global mobile field-box reconciliation  (<=799px)

   Two site-wide stylesheets restyle EVERY input and select below
   800px using unscoped element selectors and !important, so below
   that width they overwrite the whole card field treatment - most
   visibly the red border + pink fill on an invalid field, which
   simply vanished:

     mobile.css:2037   (Section 19, "Global form-field boxes")
                       border:1px solid #0B5EA2 !important
                       border-radius:5px !important
                       background-color:#fff !important
     popupMobile.css:112 / :127  (Section 1, "ALL INPUTS" / "ALL SELECTS")
                       border:1.5px solid #b3c8df !important
                       border-radius:4px !important
                       background:#fff !important
                       padding / font-size / caret / outline, all !important

   popupMobile.css is linked on Individuals.html (line 17) even though
   the page is not a popup, which is why its rules reach this form at
   all. Removing that link is the cleaner architectural fix, but it
   would also drop the sheet's .blueButton / .greenButton mobile rules
   that other CTAs on this page rely on, so the card re-asserts its own
   values instead. !important is required here only because the rules
   being overridden use it.

   Scoped to #individualQuoteForm .field, so every other field on the
   site keeps the global mobile treatment untouched.
   ============================================================ */
@media only screen and (max-width:799px){

  #individualQuoteForm .field input,
  #individualQuoteForm .field select{
    border:1px solid var(--line) !important;
    border-radius:var(--btn-radius) !important;
    background-color:#fff !important;
    color:var(--ink) !important;
    font-family:var(--font) !important;
    font-size:16px !important;          /* 16px floor: no iOS focus zoom */
    min-height:48px !important;
    box-sizing:border-box !important;
    outline:none !important;
    margin:0 !important;
  }

  #individualQuoteForm .field input{ padding:12px 13px !important; }

  #individualQuoteForm .field select{
    padding:12px 38px 12px 13px !important;
    appearance:none !important;
    -webkit-appearance:none !important;
    -moz-appearance:none !important;
    /* the card's grey caret, not popupMobile's blue one */
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236a717b' d='M1 1l5 5 5-5'/%3E%3C/svg%3E") !important;
    background-repeat:no-repeat !important;
    background-position:right 14px center !important;
    background-size:12px 8px !important;
  }

  #individualQuoteForm .field input:focus,
  #individualQuoteForm .field select:focus{
    border-color:var(--focus) !important;
    box-shadow:0 0 0 3px rgba(222,33,39,.18) !important;
    outline:none !important;
  }

  /* Invalid state last, so it wins over :focus at equal specificity -
     same ordering the Medicare card relies on. */
  #individualQuoteForm .field input[aria-invalid="true"],
  #individualQuoteForm .field select[aria-invalid="true"]{
    border-color:var(--red) !important;
    background-color:#fff7f8 !important;
  }

  #individualQuoteForm .field select:invalid,
  #individualQuoteForm .field select[data-empty="true"]{ color:#9aa3ad !important; }
}