/*
 * Making the Switch (page-making-the-switch.php)
 * Section styles for template-parts/switch/*. Loaded after style.css, which
 * owns the tokens, base, buttons, tag, header and footer.
 *
 * Measurements come from the 1920px Figma canvas and are converted with the
 * same clamp(min, px/1920*100vw, max) formula the type scale uses.
 */

/* Shared: inline orange accent */
.switch-hero__title .accent,
.switch-intro__heading .accent,
.switch-team__heading .accent,
.switch-care__heading .accent,
.switch-faq__heading .accent {
  color: var(--c-orange);
}

/* ==========================================================================
   Hero
   ========================================================================== */
.switch-hero {
  background: var(--c-white);
  padding-block: clamp(2.5rem, calc(6.09 * var(--vw)), 7.308rem);
}
.switch-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 812fr) minmax(0, 608fr);
  column-gap: clamp(2rem, calc(8.54 * var(--vw)), 10.25rem);
  align-items: center;
}
.switch-eyebrow {
  display: flex;
  align-items: center;
  gap: clamp(0.5rem, calc(0.57 * var(--vw)), 0.6875rem);
  font-size: var(--fs-ui);
  font-weight: 600;
  line-height: 1.283;
  color: var(--c-charcoal);
}
.switch-eyebrow__rule {
  flex: 0 0 auto;
  width: clamp(34px, calc(3.23 * var(--vw)), 62px);
  height: 2px;
  background: currentColor;
}
.switch-hero__title {
  margin-top: clamp(0.75rem, calc(1.15 * var(--vw)), 1.4rem);
  font-size: var(--fs-hero);
  font-weight: 800;
  line-height: 1.283;
  color: var(--c-charcoal);
}
.switch-hero__line {
  display: block;
}
.switch-hero__btn {
  margin-top: clamp(1.5rem, calc(3.65 * var(--vw)), 4.4rem);
  font-weight: 600;
  text-transform: uppercase;
  padding-inline: clamp(1.5rem, calc(2.4 * var(--vw)), 2.9rem);
}
.switch-hero__art {
  --hero-art-w: 452;
  /* Sits in the full-width container rather than the 1584 measure. */
  --hero-art-inset: 159;
}

/* ==========================================================================
   Intro — switching can have bumps
   ========================================================================== */
.switch-intro {
  background: var(--c-ice);
  padding-block: clamp(2rem, calc(4.8958 * var(--vw)), 5.875rem); /* 94 */
}
/* The band is centred copy on the canvas, and both blocks carry their own
   measure so the lines break where the design breaks them rather than running
   the full container. */
.switch-intro__copy {
  text-align: center;
}
.switch-intro__heading {
  max-width: min(997px, calc(51.9271 * var(--vw-inset)));
  margin-inline: auto;
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.15;
  color: var(--c-charcoal);
}
/* Break at the sentence, not wherever the measure runs out: with the "But"
   removed the client wants this on exactly two lines, black then orange. */
.switch-intro__heading .accent {
  display: block;
}
.switch-intro__body {
  max-width: var(--measure-narrow);
  margin-top: clamp(1rem, calc(2.4479 * var(--vw)), 2.9375rem); /* 47 */
  margin-inline: auto;
  font-size: var(--fs-body);
  line-height: 1.8;
  color: var(--c-charcoal);
}
/* ==========================================================================
   Steps — the seven implementation phases
   ========================================================================== */
.switch-steps__band {
  background: var(--c-white);
  padding-block: clamp(2.5rem, calc(6.09 * var(--vw)), 7.308rem);
}
.switch-steps__band--cream {
  background: var(--c-cream);
}
.switch-steps__band--ice {
  background: var(--c-ice);
}

/* Phase beside artwork */
.switch-steps__split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: clamp(2rem, calc(3.44 * var(--vw)), 4.125rem);
  align-items: center;
}
.switch-steps__split-art img {
  display: block;
  width: 100%;
  max-width: min(517px, calc(26.9271 * var(--vw-inset)));
  height: auto;
  margin-inline: auto;
}

/* Phase rows */
.switch-steps__grid {
  display: grid;
  column-gap: clamp(1.5rem, calc(2.92 * var(--vw)), 3.5rem);
  row-gap: clamp(2.5rem, calc(4 * var(--vw)), 4.8rem);
  max-width: var(--measure-narrow);
  margin-inline: auto;
}
/* Phases 1-4 share one row, so the four cards run the full container width on
   a tighter gap and step the type down a size — the wide-column sizing below
   belongs to the phases that still get half a band to themselves. */
.switch-steps__grid--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: clamp(1rem, calc(1.5 * var(--vw)), 1.8rem);
  max-width: none;
  padding-top: clamp(2rem, calc(4.06 * var(--vw)), 4.875rem);
  /* Figma "Line 24": a 3px dashed blue rule, 15.9px dash on a 31.79px period.
     Painted as a background so it can't become a grid item, and because CSS
     `border-style: dashed` picks its own dash length off the border width. */
  background-image: repeating-linear-gradient(
    to right,
    var(--c-blue) 0,
    var(--c-blue) 15.9px,
    transparent 15.9px,
    transparent 31.79px
  );
  background-repeat: no-repeat;
  background-size: 100% 3px;
  background-position: left top;
}
.switch-steps__grid--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.switch-steps__grid--1 {
  grid-template-columns: minmax(0, 1fr);
}
/* Inside the split band the grid already has only half the band to work with,
   so it uses all of it rather than centring on the narrow measure. */
.switch-steps__split-copy .switch-steps__grid {
  max-width: none;
}

/* The phase card itself — same hover "pop" language as the audience/path
   cards elsewhere on the site (e.g. .employers-path on For Employers): a
   white card surfaces out of the band on hover with a lift and shadow, since
   at rest it's just text sitting on the band's own background. */
.switch-step {
  border-radius: min(16px, calc(0.8333 * var(--vw-inset)));
  padding: clamp(0.75rem, calc(1 * var(--vw)), 1.25rem);
  margin: calc(-1 * clamp(0.75rem, calc(1 * var(--vw)), 1.25rem));
  background: transparent;
  border: 1px solid transparent;
  transition:
    var(--reveal-transition),
    transform var(--motion) ease,
    background-color var(--motion) ease,
    border-color var(--motion) ease,
    box-shadow var(--motion) ease;
}
.switch-step:hover {
  transform: translateY(calc(var(--lift) * -1)) scale(1.03);
  background: var(--c-white);
  border-color: var(--c-orange);
  box-shadow: 0 calc(var(--lift) * 2) calc(var(--lift) * 4) rgba(20, 42, 56, 0.13);
}
@media (prefers-reduced-motion: reduce) {
  .switch-step:hover {
    transform: none;
  }
}

.switch-step__phase {
  font-size: var(--fs-body);
  font-weight: 600;
  line-height: 1.283;
  text-transform: uppercase;
  color: var(--c-blue);
}
.switch-step__number {
  margin-top: clamp(0.25rem, calc(0.68 * var(--vw)), 0.8125rem);
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(3.125rem, calc(5.2083 * var(--vw)), 6.25rem); /* 100 */
  line-height: 1.3;
  color: var(--c-orange);
}
/* This line is the phase's own name ("Planning & Kickoff") now that the
   generic secondary title above it is gone, so it takes the blue the phase
   label carries rather than body charcoal. Every phase name shares one size,
   so Go-Live and Post-Go-Live Support match the four-up row above them. */
.switch-step__title {
  margin-top: clamp(0.75rem, calc(1.35 * var(--vw)), 1.625rem);
  font-size: clamp(1rem, calc(1.3 * var(--vw)), 1.6rem);
  font-weight: 700;
  line-height: 1.4;
  color: var(--c-blue);
}
.switch-step__body {
  margin-top: clamp(0.375rem, calc(0.57 * var(--vw)), 0.6875rem);
  font-size: var(--fs-body);
  line-height: 1.8;
  color: var(--c-charcoal);
}
.switch-step__week {
  display: inline-block;
  margin-top: clamp(1rem, calc(1.93 * var(--vw)), 2.3125rem);
  border-radius: min(44px, calc(2.2917 * var(--vw-inset)));
  padding: 0.55em 1.6em;
  background: var(--c-orange);
  font-size: var(--fs-ui);
  font-weight: 600;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--c-white);
}

/* The four-across row carries the same card type as the phases that get half a
   band to themselves; only its label differs. The label is now the bare phase
   number ("Phase 1"), one line for all four, so the four numerals under it
   line up without reserving a second line. */
.switch-steps__grid--4 .switch-step__phase {
  line-height: 1.08;
}
/* The phase name lives here now and the longest of them ("Testing and Member
   Outreach") needs two lines in a quarter-width card, so the row holds two
   lines open for every card — that keeps the bodies underneath on a shared
   baseline however the names wrap. */
.switch-steps__grid--4 .switch-step__title {
  min-height: calc(2 * 1.4em);
}
.switch-step__phase-line {
  display: block;
}
.switch-step__phase-name {
  font-weight: 700;
}

/* ==========================================================================
   Dedicated team
   ========================================================================== */
/* The gaps below are tuned to where the design actually puts the glyphs, not
   to its frame offsets: Figma's text frames carry more half-leading than these
   line-heights do, so quoting its box numbers verbatim would read ~13 too
   loose at every step. The canvas figure in each comment is the rendered gap. */
.switch-team {
  padding-top: clamp(3rem, calc(6.25 * var(--vw)), 7.5rem); /* 120 */
  padding-bottom: clamp(3rem, calc(5.5208 * var(--vw)), 6.625rem); /* 106 */
  background: var(--c-cream);
}
.switch-team__heading {
  font-size: var(--fs-h3);
  font-weight: 800;
  line-height: 1.28;
  text-align: center;
  color: var(--c-charcoal);
}
.switch-team__sub {
  margin-top: clamp(0.5rem, calc(0.7813 * var(--vw)), 0.9375rem); /* 15 */
  font-size: var(--fs-body);
  line-height: 1.8;
  text-align: center;
  color: var(--c-charcoal);
}
.switch-team__grid {
  margin-top: clamp(2rem, calc(5.1563 * var(--vw)), 6.1875rem); /* 99 */
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: clamp(1.5rem, calc(3.8 * var(--vw)), 4.5625rem);
  row-gap: clamp(2.5rem, calc(4 * var(--vw)), 4.8rem);
}
/* Each illustration is a 350 × 350 roundel (the circle and its white fill are
   in the artwork, the corners transparent), drawn at that fixed canvas size
   rather than a share of its column so it keeps the size the design gives it,
   centred over the copy. */
.switch-team__photo {
  width: 100%;
  max-width: min(350px, calc(18.2292 * var(--vw-inset)));
  margin-inline: auto;
  aspect-ratio: 1;
  /* Round so the hover halo below traces the circle drawn in the artwork. */
  border-radius: 50%;
  transition: box-shadow var(--motion) var(--ease-out);
}
.switch-team__photo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
/* On hover/focus the roundel picks up a soft ring in its outline blue and the
   figure gives a quick tilt that springs back upright — a nod hello — while
   the card lifts. The tilt is a one-shot animation rather than a transition so
   it settles at rest instead of staying cocked while the pointer is over it. */
.switch-team__card:hover .switch-team__photo,
.switch-team__card:focus-visible .switch-team__photo {
  box-shadow:
    0 0 0 clamp(6px, calc(0.625 * var(--vw)), 12px) rgba(0, 140, 193, 0.16),
    0 clamp(8px, calc(1.0417 * var(--vw)), 20px) clamp(20px, calc(2.0833 * var(--vw)), 40px) rgba(20, 42, 56, 0.12);
}
.switch-team__card:hover .switch-team__photo img,
.switch-team__card:focus-visible .switch-team__photo img {
  animation: switch-team-nod 0.8s var(--ease-out);
}
@keyframes switch-team-nod {
  0% {
    rotate: 0deg;
  }
  30% {
    rotate: -6deg;
  }
  60% {
    rotate: 4deg;
  }
  85% {
    rotate: -1.5deg;
  }
  100% {
    rotate: 0deg;
  }
}
/* Reveal target too — see .audience-card in front-page.css. */
.switch-team__card {
  transition:
    var(--reveal-transition),
    transform var(--motion) ease;
}
.switch-team__card:hover {
  transform: translateY(calc(var(--lift) * -1));
}
.switch-team__role {
  margin-top: clamp(1rem, calc(2.1875 * var(--vw)), 2.625rem); /* 42 */
  font-size: var(--fs-h6);
  font-weight: 700;
  line-height: 1.28;
  text-align: center;
  color: var(--c-charcoal);
}
.switch-team__body {
  margin-top: clamp(0.5rem, calc(0.7813 * var(--vw)), 0.9375rem); /* 15 */
  font-size: var(--fs-body);
  line-height: 1.8;
  color: var(--c-charcoal);
}
/* What each role does is hover/focus content: the three titles are what the
   row shows at rest. Same opacity + max-height reveal as .priorauth-type__body
   on the Prior Auth page, so the card grows into the row gap rather than the
   grid jumping a row height on hover. */
.switch-team__points {
  margin: 0 auto;
  padding: 0;
  list-style: none;
  display: grid;
  row-gap: clamp(0.25rem, calc(0.5 * var(--vw)), 0.5rem);
  width: fit-content;
  text-align: left;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition:
    opacity var(--motion) ease,
    max-height var(--motion) ease,
    margin-top var(--motion) ease;
}
.switch-team__card:hover .switch-team__points,
.switch-team__card:focus .switch-team__points,
.switch-team__card:focus-within .switch-team__points {
  margin-top: clamp(0.75rem, calc(1.15 * var(--vw)), 1.375rem);
  max-height: 14em;
  opacity: 1;
}
.switch-team__points li {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  column-gap: clamp(0.375rem, calc(0.5208 * var(--vw)), 0.625rem); /* 10 */
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--c-charcoal);
}
.switch-team__points img {
  flex: 0 0 auto;
  width: clamp(16px, calc(1.1458 * var(--vw)), 22px); /* 22 */
  height: auto;
  /* Half the line's leading, so the mark sits centred on the first line of
     text instead of flush with the top of the (possibly wrapped) block. */
  margin-top: 0.25em;
}
/* The card takes focus so the reveal is reachable from the keyboard; it is a
   disclosure, not a control, so it gets the focus ring and nothing else. */
.switch-team__card:focus {
  outline: 2px solid var(--c-orange);
  outline-offset: 6px;
}
.switch-team__card:focus:not(:focus-visible) {
  outline: none;
}
/* A touch screen has no hover, so the lists stand open there instead of being
   unreachable. */
@media (hover: none) {
  .switch-team__points {
    margin-top: clamp(0.75rem, calc(1.15 * var(--vw)), 1.375rem);
    max-height: none;
    opacity: 1;
  }
}

/* ==========================================================================
   Caring for your members
   ========================================================================== */
.switch-care {
  background: var(--c-ice);
  padding-block: clamp(3.5rem, calc(8.9 * var(--vw)), 10.68rem);
}
.switch-care__heading {
  font-size: var(--fs-h3);
  font-weight: 800;
  line-height: 1.28;
  color: var(--c-charcoal);
}
.switch-care__body {
  margin-top: clamp(1rem, calc(1.88 * var(--vw)), 2.25rem);
  max-width: 56ch;
  font-size: var(--fs-body);
  line-height: 1.8;
  color: var(--c-charcoal);
}
.switch-care__list {
  margin-top: clamp(1.5rem, calc(2.5 * var(--vw)), 3rem);
}
.switch-care__row {
  display: grid;
  grid-template-columns: clamp(80px, calc(7.81 * var(--vw)), 150px) minmax(0, 1fr);
  column-gap: clamp(1.5rem, calc(2.97 * var(--vw)), 3.5625rem);
  align-items: start;
  padding-block: clamp(1rem, calc(2.81 * var(--vw)), 3.372rem);
  border-top: 1px solid rgba(57, 57, 57, 0.5);
  /* Reveal target too — see .audience-card in front-page.css. */
  transition: var(--reveal-transition);
}
.switch-care__row:last-child {
  border-bottom: 1px solid rgba(57, 57, 57, 0.5);
}
.switch-care__icon img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform var(--motion) ease;
}
.switch-care__row:hover .switch-care__icon img {
  transform: scale(1.08);
}
.switch-care__title {
  font-size: var(--fs-h6);
  font-weight: 800;
  line-height: 1.28;
  color: var(--c-charcoal);
}
.switch-care__text {
  margin-top: clamp(0.75rem, calc(1.46 * var(--vw)), 1.75rem);
  font-size: var(--fs-body);
  line-height: 1.8;
  color: var(--c-charcoal);
}
.switch-care__link {
  display: inline-block;
  margin-top: clamp(0.75rem, calc(1.46 * var(--vw)), 1.75rem);
  font-size: var(--fs-body);
  font-weight: 700;
  line-height: 1.28;
  color: var(--c-blue);
  text-decoration: none;
}
.switch-care__link:hover {
  text-decoration: underline;
}

/* ==========================================================================
   Implementation FAQs
   ========================================================================== */
.switch-faq {
  background: var(--c-white);
  padding-block: clamp(1.75rem, calc(4.53 * var(--vw)), 5.436rem);
}
.switch-faq__heading {
  font-size: var(--fs-h3);
  font-weight: 800;
  line-height: 1.28;
  text-align: center;
  color: var(--c-charcoal);
}
/* The rows themselves are the shared .faq accordion in style.css */
.switch-faq__list {
  --faq-pad: clamp(1.5rem, calc(3.07 * var(--vw)), 3.69rem);
  margin-top: clamp(2rem, calc(3.49 * var(--vw)), 4.19rem);
  max-width: var(--measure-narrow);
  margin-inline: auto;
}
.switch-faq__list .faq__q {
  line-height: 1.28;
}

/* ==========================================================================
   Closing — implementation is the beginning
   ========================================================================== */
.switch-closing {
  background: var(--c-white);
  padding-block: clamp(2.75rem, calc(6.67 * var(--vw)), 8.004rem);
}
/* Columns, gap and padding are one set of numbers: 664 + 67 + 476 of content
   inside 2 × 144.5 of padding is exactly the 1496 card the design draws, so
   the artwork lands where it does only if they move together. */
.switch-closing__card {
  display: grid;
  grid-template-columns: minmax(0, 664fr) minmax(0, 476fr);
  column-gap: clamp(1.5rem, calc(3.4896 * var(--vw)), 4.1875rem); /* 67 */
  align-items: center;
  border-radius: clamp(1.25rem, calc(2.14 * var(--vw)), 2.5625rem);
  padding: clamp(2rem, calc(5.1563 * var(--vw)), 6.1875rem) clamp(1.5rem, calc(7.5260 * var(--vw)), 9.0313rem);
  background: var(--c-blue);
}
.switch-closing__heading {
  font-size: var(--fs-h3);
  font-weight: 800;
  line-height: 1.28;
  color: var(--c-white);
}
.switch-closing__heading .accent {
  color: #ebbcac;
}
.switch-closing__body {
  max-width: min(615px, calc(32.0313 * var(--vw-inset)));
  margin-top: clamp(1rem, calc(2.71 * var(--vw)), 3.25rem);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--c-white);
}
.switch-closing__art img {
  display: block;
  width: 100%;
  max-width: min(476px, calc(24.7917 * var(--vw-inset)));
  height: auto;
  margin-inline: auto;
}

/* ==========================================================================
   Contact band
   ========================================================================== */
.switch-contact {
  background: var(--c-navy);
  padding-block: clamp(2rem, calc(4.74 * var(--vw)), 5.688rem);
}
.switch-contact__inner {
  display: grid;
  grid-template-columns: minmax(0, 816fr) minmax(0, 410fr);
  column-gap: clamp(2rem, calc(6.56 * var(--vw)), 7.875rem);
  align-items: start;
}
.switch-contact__heading {
  font-size: var(--fs-h3);
  line-height: 1.5;
  color: var(--c-white);
}
.switch-contact__line {
  display: block;
  font-weight: 800;
}
.switch-contact__line--accent {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 700;
  color: var(--c-orange);
}
.switch-contact__body {
  margin-top: clamp(1rem, calc(1.56 * var(--vw)), 1.875rem);
  max-width: 30ch;
  font-size: var(--fs-body);
  line-height: 1.56;
  color: var(--c-white);
}
.switch-contact__actions {
  padding-top: clamp(0.5rem, calc(1.51 * var(--vw)), 1.8125rem);
}
.switch-contact__btn {
  font-weight: 600;
  text-transform: uppercase;
  text-decoration: underline;
}
.switch-contact__direct {
  margin-top: clamp(1rem, calc(1.41 * var(--vw)), 1.6875rem);
  font-size: var(--fs-body);
  line-height: 1.81;
  color: var(--c-white);
}
.switch-contact__direct a {
  font-weight: 700;
  color: inherit;
}
.switch-contact__email {
  display: block;
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1024px) {
  .switch-hero__inner,
  .switch-steps__split,
  .switch-closing__card,
  .switch-contact__inner {
    grid-template-columns: minmax(0, 1fr);
    row-gap: clamp(2rem, calc(4 * var(--vw)), 3rem);
  }
  .switch-steps__split--reverse .switch-steps__split-copy {
    order: 2;
  }
  .switch-steps__grid--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: clamp(2rem, calc(4 * var(--vw)), 3rem);
  }
  .switch-contact__actions {
    padding-top: 0;
  }
  .switch-care__body,
  .switch-closing__body,
  .switch-contact__body {
    max-width: none;
  }
}

@media (max-width: 767px) {
  .switch-team__grid,
  .switch-steps__grid--2,
  .switch-steps__grid--4 {
    grid-template-columns: minmax(0, 1fr);
    max-width: 480px;
    margin-inline: auto;
  }
  .switch-team__photo {
    max-width: 262px;
  }
  .switch-care__row {
    grid-template-columns: minmax(0, 1fr);
    row-gap: clamp(1rem, calc(3 * var(--vw)), 1.5rem);
  }
  .switch-care__icon img {
    width: clamp(80px, calc(20 * var(--vw)), 110px);
  }
  .switch-hero__btn,
  .switch-contact__btn {
    width: 100%;
  }
}

/* A visitor who has asked for reduced motion still gets the feedback, just not
   the movement: only the parts that travel or scale are dropped. See the
   matching block in front-page.css. */
@media (prefers-reduced-motion: reduce) {
  .switch-team__card:hover,
  .switch-care__row:hover .switch-care__icon img {
    transform: none;
  }
  .switch-team__card:hover .switch-team__photo img,
  .switch-team__card:focus-visible .switch-team__photo img {
    animation: none;
  }
}