/* IHP Impact Counter — component styles.
   Directive §I.2 · Copy Brief Part 3 · tokens from Directive §C.

   Scope note: the *type* of the odometer (size, weight, and the .62em
   fixed-width digit cell that stops Poppins' proportional figures wiggling)
   lives in ihp-child-theme.css §6.7, because that is the design system. What
   lives here is only what the component needs to function: the sliding strip
   mechanics and the band layout. If the child theme is absent the number still
   renders correctly, just at inherited size.

   Every custom property below has a literal fallback so the counter cannot be
   the one section that renders unstyled when Elementor loads this stylesheet
   before the child theme. */

.ihp-impact {
  background: var(--ihp-deep-navy, #00294F);
  color: var(--ihp-white, #FFFFFF);
  padding: var(--s-24, 96px) var(--s-6, 24px);
  text-align: center;
}

.ihp-impact__inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-4, 16px);
}

.ihp-impact__figure { display: block; }

.ihp-impact__headline {
  margin: var(--s-2, 8px) 0 0;
  font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.375rem);
  font-weight: 600;
  line-height: 1.2;
  color: var(--ihp-white, #FFFFFF);
}

.ihp-impact__support {
  max-width: 68ch;
  margin: 0;
  font-size: 1rem;
  line-height: 1.625;
  color: var(--ihp-mist, #D9E2E9);
}

/* The footnote is separated by a hairline rather than whitespace: it reads as
   part of the device, and it survives a theme that collapses margins. */
.ihp-impact .ihp-odometer-footnote {
  margin: var(--s-6, 24px) 0 0;
  padding-top: var(--s-4, 16px);
  border-top: 1px solid rgba(255, 255, 255, .16);
}

/* ---------------------------------------------------------------------------
   Rolling digits (Part 3.3)

   Each .ihp-digit is a fixed-width, one-line-tall window. Inside it a strip of the
   ten glyphs is shifted by whole cells. The offsets are percentages of the
   strip (ten cells tall), so the mechanism is independent of font size and
   nothing needs recomputing at a breakpoint.

   No inline styles and no style injection: the position is a function of the
   data-d attribute PHP already wrote, which means the server-rendered fallback
   shows the correct digits with JavaScript disabled and with a strict CSP.
   ------------------------------------------------------------------------ */

.ihp-odometer { display: inline-block; white-space: nowrap; }

.ihp-odometer .ihp-digit {
  position: relative;
  overflow: hidden;
  height: 1.05em;                 /* matches .ihp-odometer line-height */
  vertical-align: bottom;
}

.ihp-odometer .ihp-digit__strip {
  display: block;
  will-change: transform;
}

.ihp-odometer .ihp-digit__n {
  display: block;
  height: 1.05em;
  line-height: 1.05em;
}

.ihp-odometer .ihp-digit[data-d="0"] .ihp-digit__strip { transform: translateY(0); }
.ihp-odometer .ihp-digit[data-d="1"] .ihp-digit__strip { transform: translateY(-10%); }
.ihp-odometer .ihp-digit[data-d="2"] .ihp-digit__strip { transform: translateY(-20%); }
.ihp-odometer .ihp-digit[data-d="3"] .ihp-digit__strip { transform: translateY(-30%); }
.ihp-odometer .ihp-digit[data-d="4"] .ihp-digit__strip { transform: translateY(-40%); }
.ihp-odometer .ihp-digit[data-d="5"] .ihp-digit__strip { transform: translateY(-50%); }
.ihp-odometer .ihp-digit[data-d="6"] .ihp-digit__strip { transform: translateY(-60%); }
.ihp-odometer .ihp-digit[data-d="7"] .ihp-digit__strip { transform: translateY(-70%); }
.ihp-odometer .ihp-digit[data-d="8"] .ihp-digit__strip { transform: translateY(-80%); }
.ihp-odometer .ihp-digit[data-d="9"] .ihp-digit__strip { transform: translateY(-90%); }

/* .ihp-is-rolling is added only for a poll-driven change, where the delta is small
   and a smooth slide is the point. The 2.2s count-up is positioned per frame
   with no transition — a transition there would lag behind the frames and
   smear into mush. */
.ihp-odometer.ihp-is-rolling .ihp-digit__strip {
  transition: transform var(--t-slow, 400ms) cubic-bezier(.22, .61, .36, 1);
}

/* Reduced motion: no rolling at all, the value fades in (Part 3.6). */
.ihp-odometer.ihp-is-faded-in { animation: ihp-impact-fade 400ms ease-out both; }

@keyframes ihp-impact-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .ihp-odometer.ihp-is-rolling .ihp-digit__strip { transition: none; }
  .ihp-odometer .ihp-digit__strip { will-change: auto; }
}

/* ---------------------------------------------------------------------------
   Screen-reader mirror

   Defined here rather than assumed: the visually-hidden sibling carries the
   real number in an aria-live region, so if the theme does not ship
   .screen-reader-text the mirror would otherwise print on screen next to the
   digits it duplicates.
   ------------------------------------------------------------------------ */

.ihp-impact .screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* The editor-only notice shown in place of the odometer when the portal has not
   returned a figure, or returned less than $1.
 *
 * It carries .ihp-impact, so without this it inherited 96px of vertical padding
 * and centred text sized for a display figure — a full-height dark band whose only
 * content is one line of admin prose. The modifier was used from the first version
 * of the plugin and defined nowhere; found when the class check learned to read
 * PHP, which is also how the missing Block B styling surfaced.
 *
 * Deliberately unattractive. It is a defect notice, not a section: a withheld
 * odometer means the endpoint is wrong and somebody has to go and look. */
.ihp-impact--withheld {
  padding: var(--s-4, 16px) var(--s-6, 24px);
  text-align: left;
  border-left: 4px solid var(--ihp-amber, #D79A2B);
}

.ihp-impact--withheld p {
  margin: 0;
  max-width: 90ch;
  font-size: var(--ihp-body-sm, 0.9375rem);
  line-height: 1.6;
}