/* =====================================================================
   CarrierHeroFunnel.css
   Shared hero-card styling for Channel Partner (CP_*) carrier pages that
   embed a short quote-lead form in the hero banner (Zip Code / Effective
   Date / # of Covered Applicants), starting with:
     - CP_Ameritas_Individual_Dental.html
     - CP_Ameritas_Individual_Vision.html

   Design system matches Individuals_Funnel.css / MedicareFunnel.css:
   same palette, same Costco Sans Micro stack, same 14px card radius /
   10px control radius, same shadow recipe, same error-summary pattern.
   This is the same "flexible hero + validated card" treatment applied
   to Individuals.html, adapted to the .benefitHeroContent hero family.

   LINK ORDER: load after theme.css, expansionStyles.css and mobile.css.
   Section 2's hero-wrapper fix out-specifies theme.css's
   .benefitHeroContent defaults on purpose (see the note there) so exact
   position in <head> isn't load-bearing the way it is for mobile.css
   overrides, but keeping it last matches the rest of the site's
   convention and avoids surprises later.

   SCOPING: every card rule sits under .chFunnel ("Channel-partner Hero
   Funnel"). The hero-wrapper fix in Section 2 is scoped to the two
   known wrapper classes below - NOT to bare .benefitHeroContent, which
   many other pages use with its original absolute-overlap-on-photo
   design. Changing that base rule globally would break those pages.

   HOW TO ADD A NEW CARRIER PAGE TO THIS SYSTEM:
   1. Add that page's hero-wrapper class to BOTH selector lists in
      Section 2 (the height rule and the position:static rule).
   2. Copy the .chFunnel markup block from one of the two reference
      pages: a .chFunnel > .card > .card__bar + .card__pad, with .errs
      above the <form>, fields in a fieldset > legend + .grid > .field,
      and a .actions > button.btn.btn--primary submit.
   3. Give the <form> a data-results-url="Whatever_Results.html"
      attribute - CarrierHeroFunnel_app.js reads it to know where to
      navigate on a valid submit. No JS changes needed for a new page.

   Sections
     1. Design tokens (scoped, NOT :root)
     2. Hero wrapper - flexible height + card rejoins normal flow
     3. The card panel
     4. Fieldset / legend / grid
     5. Fields - labels, inputs, selects
     6. Error summary
     7. Actions - submit button
     8. Breakpoints
   ===================================================================== */


/* ============================================================
   SECTION 1 - Design tokens
   Declared on .chFunnel rather than :root so the card is
   self-contained, matching Individuals_Funnel.css's approach. Values
   are byte-identical to MedicareFunnel.css / Individuals_Funnel.css.
   ============================================================ */
.chFunnel{
  --blue:#005DAB; --blue-dark:#004a8a;        /* Costco primary (Get Started) */
  --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;
  --radius:14px;                              /* ONE card-radius family */
  --btn-radius:10px;                          /* ONE control radius: buttons + inputs */
  --shadow:0 6px 22px rgba(15,30,50,.14),0 1px 2px rgba(15,30,50,.08);
  max-width: 640px;	
}


/* ============================================================
   SECTION 2 - Hero wrapper: flexible height + card rejoins flow

   Both wrappers already get height:auto from a later rule in
   expansionStyles.css (which overrides that same file's own earlier
   height:30em), so the box itself is not the blocker. Restated here
   explicitly (with the original 30em kept as a floor) so the fix isn't
   split silently across two files with unclear ownership.

   The real blocker is .benefitHeroContent: theme.css sets it
   `position:absolute; bottom:0` so the card overlaps the photo from
   the bottom-left. An absolutely positioned box does not contribute to
   its (auto-height) ancestor's size, so when the card grows - a
   validation summary appearing, a field wrapping to a second line -
   the browser keeps its bottom edge pinned and grows it UPWARD instead,
   off the top of the hero and over whatever sits above it on the page.
   Verified empirically: at 1280px, growing the card by 220px moved its
   top edge to 162px above the hero wrapper's own top edge.

   Fix: within these two wrappers only, put the card back in normal
   flow (position:static) so the wrapper's own height:auto genuinely
   contains it, the same mechanism used for Individuals.html's card.
   Scoped as a descendant rule so bare .benefitHeroContent elsewhere on
   the site keeps its original overlap design untouched.
   ============================================================ */
.AmeritasIFDentalHeroWrapper,
.AmeritasVisionHeroWrapper, .IFDentalHeroWrapper, .IFVisionHeroWrapper{
  height:auto;
  min-height:30em;      /* floor matches the pages' original fixed 30em */
}

.AmeritasIFDentalHeroWrapper .benefitHeroContent,
.AmeritasVisionHeroWrapper .benefitHeroContent,
.IFDentalHeroWrapper .benefitHeroContent,
.IFVisionHeroWrapper .benefitHeroContent{
  position:static;
  left:auto;
  bottom:auto;
  margin:1.5em 0;
}

@media only screen and (min-width:800px){
  .AmeritasIFDentalHeroWrapper,
  .AmeritasVisionHeroWrapper, .IFDentalHeroWrapper, .IFVisionHeroWrapper{ padding-bottom:2em; }
}

/* Mobile framing to match the sibling Detail_Pg_* hero wrappers that
   mobile.css Section 19 already whitelists (these two classes aren't
   in that list, since they predate it / live in a different page
   family, so the same two cosmetic properties are restated here). */
@media only screen and (max-width:799px){
  .AmeritasIFDentalHeroWrapper,
  .AmeritasVisionHeroWrapper, .IFDentalHeroWrapper .IFVisionHeroWrapper{ padding:1.25em 0; background-position:center top; }
}


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

   Sits inside .benefitHeroContent, below the existing logo image / h1 /
   intro paragraph, which stay exactly where they were (outside the
   card, as ordinary marketing copy - not folded into a <legend> the
   way Individuals.html's H1 is, since that content model only permits
   heading content, not the paragraph that follows it).
   ============================================================ */
.chFunnel{
  display:block;
  width:95%;
  /* .benefitHeroContent sets font-size:1.55em (1.25em on mobile); reset
     to the root size so the card's own px/rem scale resolves as designed */
  font-size:1.4rem;
  font-family:var(--font);
  line-height:normal;
  text-align:left;
  margin:1em 0;
	
}
.chFunnel *{ box-sizing:border-box; }

.chFunnel .card{
  background:var(--bg);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  overflow:hidden;
}
.chFunnel .card__bar{ height:5px; background:var(--red); }
.chFunnel .card__pad{ padding:20px 22px; }


/* ============================================================
   SECTION 4 - Fieldset / legend / grid
   No bare `fieldset` / `legend` element rule exists in any stylesheet
   linked on these pages, so - unlike Individuals.html's `.step` class
   collision with theme.css's progress-stepper - plain fieldset/legend
   need no renaming here. Kept for a future audit if that changes.
   ============================================================ */
.chFunnel fieldset{ border:0; margin:0; padding:0; min-width:0; }

.chFunnel legend{
  display:block;
  float:none;
  width:100%;
  padding:0;
  margin:0 0 .75rem;
  font-family:var(--font);
  font-weight:600;
  color:var(--ink);
  font-size:.98rem;
  line-height:1.3;
}

.chFunnel .grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px 14px;
}
.chFunnel .grid > .full{ grid-column:1/-1; }

@media only screen and (max-width:800px){
  .chFunnel .grid{ grid-template-columns:1fr; }
  .chFunnel{margin:.5em 2.5%;}		
}


/* ============================================================
   SECTION 5 - Fields: labels, inputs, selects
   mobile.css Section 19 already applies a mobile-only, unscoped
   `.benefitHeroContent form select, .benefitHeroContent form input`
   rule (width/min-height/font-size, one !important on width only). It
   sets no border/background/radius, and .chFunnel's rules below are
   more specific (.chFunnel .field input vs .benefitHeroContent form
   input), so the card's look wins at every width without needing
   !important of its own.
   ============================================================ */
.chFunnel .field{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:0;
}

.chFunnel .field label{
  font-family:var(--font);
  font-weight:500;
  color:var(--ink);
  font-size:.88rem;
  line-height:1.3;
}
.chFunnel .req{ color:var(--red); font-weight:700; }

.chFunnel .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:11px 12px;
  width:100%;
  min-height:46px;                /* >=44px target (WCAG 2.5.8) */
  margin:0;
  transition:border-color .12s,box-shadow .12s;
}
.chFunnel .field input::placeholder{ color:#9aa3ad; }
.chFunnel .field input:focus{
  outline:none;
  border-color:var(--focus);
  box-shadow:0 0 0 3px rgba(222,33,39,.18);
}
.chFunnel .field input[aria-invalid="true"]{
  border-color:var(--red);
  background:#fff7f8;
}

.chFunnel .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:11px 36px 11px 12px;
  width:100%;
  min-height:46px;
  margin:0;
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  cursor:pointer;
  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 13px center;
  background-size:12px 8px;
}
.chFunnel .field select:focus{
  outline:none;
  border-color:var(--focus);
  box-shadow:0 0 0 3px rgba(222,33,39,.18);
}
.chFunnel .field select[aria-invalid="true"]{
  border-color:var(--red);
  background-color:#fff7f8;
}


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


/* ============================================================
   SECTION 7 - Actions / submit button
   Full-width at every size: the old "Get Started" anchor was
   floatRight, which suited a single-line inline form; against the new
   two-column field grid a full-width bar reads as the clear next step
   and matches the un-floated, full-width CTA mobile.css already forces
   for these hero forms below 800px, now made consistent above it too.
   ============================================================ */
.chFunnel .actions{ margin-top:18px; }
.chFunnel .actions .btn{
  font-family:var(--font);
  font-weight:700;
  font-size:1rem;
  border:0;
  border-radius:var(--btn-radius);
  padding:13px 20px;
  cursor:pointer;
  min-height:48px;
  width:100%;
  display:inline-flex;
  align-items:center;
  gap:9px;
  justify-content:center;
  text-decoration:none;
  background:var(--blue);
  color:#fff;
}
.chFunnel .actions .btn:hover{ background:var(--blue-dark); color:#fff; }
.chFunnel .actions .btn:focus-visible{ outline:3px solid var(--focus); outline-offset:2px; }
.chFunnel .actions .btn[disabled]{ opacity:.65; cursor:default; }


/* ============================================================
   SECTION 8 - Breakpoints
   ============================================================ */
@media only screen and (max-width:480px){
  .chFunnel .card__pad{ padding:16px 14px; }
  .chFunnel legend{ font-size:.94rem; }
}

@media (prefers-reduced-motion: reduce){
  .chFunnel .field input,
  .chFunnel .field select{ transition:none; }
}