/* ============================================================
   HUNGER CAN'T WAIT! — $7.99 monthly partner campaign
   Approved premium banner + live partner tracker.
   Shared by the homepage (for_index.css) and donation page
   (for_donationpage.css). Palette follows the campaign artwork:
   white, orange, navy and light blue.
============================================================ */
.hcw {
  --hcw-orange:      #f07c1e;
  --hcw-orange-dark: #d96712;
  --hcw-navy:        #0d2a4e;
  --hcw-blue:        #1a6fd1;
  --hcw-blue-pale:   #e8f2fd;
  --hcw-green:       #16a34a;
  --hcw-text:        #334155;

  position: relative;
  background: linear-gradient(180deg, #ffffff 0%, #f6f9fd 100%);
  border-bottom: 4px solid var(--hcw-orange);
  font-family: 'Inter', sans-serif;
  color: var(--hcw-text);
  overflow: hidden;
}

/* Homepage nav is fixed and the body has no top padding */
.hcw--home   { padding: calc(72px + 28px) 0 44px; }
.hcw--donate { padding: 32px 0 40px; }

.hcw-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── Banner artwork ─────────────────────────────────── */
.hcw-banner-wrap {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
}
.hcw-banner {
  position: relative;
  container-type: inline-size;
  display: block;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 18px 48px rgba(13,42,78,.16);
  transition: transform .25s ease, box-shadow .25s ease;
  -webkit-tap-highlight-color: transparent;
}
.hcw-banner:hover { transform: translateY(-2px); box-shadow: 0 22px 56px rgba(13,42,78,.22); }
.hcw-banner:focus-visible { outline: 3px solid var(--hcw-navy); outline-offset: 4px; }
.hcw-banner img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2048 / 768;
}
/* Uganda status: covers "Coming soon" in the artwork (x 1738–1894, y 650–670 of 2048×768), sized to the banner */
.hcw-banner-status {
  position: absolute;
  left: 84.86%;
  top: 84.64%;
  width: 7.62%;
  height: 2.6%;
  display: flex;
  align-items: center;
  padding-left: .34cqw;
  background: rgb(3,101,54);
  color: rgb(212,236,211);
  font-family: 'Montserrat', 'Inter', 'Segoe UI', sans-serif;
  font-size: .94cqw;
  font-weight: 700;
  letter-spacing: .03em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
}

/* ── Tracker card ───────────────────────────────────── */
.hcw-tracker {
  position: relative;
  max-width: 1120px;
  margin: 24px auto 0;
  padding: 28px 36px;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: 36px;
  align-items: center;
  background: #ffffff;
  border: 1px solid rgba(13,42,78,.08);
  border-radius: 20px;
  box-shadow: 0 14px 40px rgba(13,42,78,.12);
}
.hcw-tracker[hidden] { display: none; }

.hcw-tracker-stats,
.hcw-tracker-cta { min-width: 0; }

.hcw-eyebrow {
  display: inline-block;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--hcw-blue);
  background: var(--hcw-blue-pale);
  padding: 6px 14px;
  border-radius: 999px;
  margin: 0 0 12px;
}

.hcw-count {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin: 0 0 14px;
  line-height: 1.05;
  color: var(--hcw-navy);
}
.hcw-count[hidden],
.hcw-message[hidden],
.hcw-live[hidden] { display: none; }
.hcw-message .hcw-count { margin-bottom: 6px; }
.hcw-message-sub {
  margin: 0 0 14px;
  font-size: 1rem;
  line-height: 1.45;
  color: var(--hcw-text);
}
.hcw-count-num {
  font-size: clamp(2.4rem, 5vw, 3.4rem);
  font-weight: 800;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}
.hcw-count-label {
  font-size: clamp(1rem, 1.8vw, 1.2rem);
  font-weight: 700;
  color: var(--hcw-orange-dark);
}
.hcw-count--first {
  font-size: clamp(1.35rem, 2.6vw, 1.75rem);
  font-weight: 800;
  letter-spacing: -.01em;
}

/* ── Progress line: full width across the top of the card ── */
.hcw-progress { grid-column: 1 / -1; }
.hcw-progress-track {
  position: relative;
  height: 30px;
  margin-top: 6px;
  border-radius: 999px;
  background: #e5eaf1;
  box-shadow: inset 0 2px 4px rgba(13,42,78,.14);
  overflow: hidden;
}
.hcw-progress-fill {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: inherit;
  background: linear-gradient(90deg, #ff2d2d 0%, #e10600 100%);
  box-shadow: 0 0 14px rgba(225,6,0,.45);
}
/* Notch on the line at the first milestone */
.hcw-progress-tick {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--hcw-milestone-at);
  width: 4px;
  margin-left: -2px;
  background: #ffffff;
}

.hcw-progress-marks {
  position: relative;
  list-style: none;
  height: 52px;
  margin: 10px 0 0;
  padding: 0;
}
.hcw-progress-mark {
  position: absolute;
  top: 0;
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  white-space: nowrap;
}
.hcw-progress-mark strong {
  font-size: clamp(1.15rem, 2.2vw, 1.5rem);
  font-weight: 800;
  color: var(--hcw-navy);
  font-variant-numeric: tabular-nums;
}
.hcw-progress-mark span {
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--hcw-text);
}
.hcw-progress-mark--start { left: 0; }
.hcw-progress-mark--milestone {
  left: var(--hcw-milestone-at);
  align-items: center;
  transform: translateX(-50%);
}
.hcw-progress-mark--milestone span { color: #e10600; }
.hcw-progress-mark--goal { right: 0; align-items: flex-end; text-align: right; }

.hcw-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 60px;
  padding: 16px 28px;
  border-radius: 999px;
  background: var(--hcw-orange);
  color: #ffffff;
  font-size: 1.08rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: 0 10px 26px rgba(240,124,30,.38);
  transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
  -webkit-tap-highlight-color: transparent;
}
.hcw-btn:hover { background: var(--hcw-orange-dark); transform: translateY(-2px); box-shadow: 0 14px 30px rgba(240,124,30,.45); }
.hcw-btn:focus-visible { outline: 3px solid var(--hcw-navy); outline-offset: 3px; }
.hcw-btn svg { flex-shrink: 0; }

.hcw-cta-note {
  margin: 10px 0 14px;
  font-size: .86rem;
  text-align: center;
  color: var(--hcw-text);
}
.hcw-cta-note strong { color: var(--hcw-navy); }

.hcw-programs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.hcw-program {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .9rem;
  line-height: 1.3;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1.5px solid transparent;
}
.hcw-program::before {
  content: '';
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}
.hcw-program-name { font-weight: 700; color: var(--hcw-navy); }
.hcw-program--active { background: #fff3e8; border-color: rgba(240,124,30,.35); }
.hcw-program--active::before { background: var(--hcw-green); box-shadow: 0 0 0 3px rgba(22,163,74,.18); }
.hcw-program--soon { background: var(--hcw-blue-pale); border-color: rgba(26,111,209,.25); }
.hcw-program--soon::before { background: var(--hcw-blue); }

/* ── Tablet (iPad portrait and smaller laptops) ────── */
@media (max-width: 1024px) {
  .hcw-tracker { margin: 20px 24px 0; padding: 24px 28px; gap: 28px; }
}

/* ── Mobile: banner edge to edge, tracker stacked ───── */
@media (max-width: 768px) {
  .hcw--home   { padding: 72px 0 28px; }
  .hcw--donate { padding: 0 0 28px; }

  .hcw-banner-wrap { padding: 0; }
  .hcw-banner { border-radius: 0; box-shadow: none; }
  .hcw-banner:hover { transform: none; box-shadow: none; }

  .hcw-tracker {
    grid-template-columns: minmax(0, 1fr);
    margin: 16px 16px 0;
    padding: 22px 18px;
    gap: 20px;
    text-align: center;
  }
  .hcw-eyebrow { font-size: .68rem; letter-spacing: .1em; padding: 6px 12px; }
  .hcw-count { justify-content: center; }
  .hcw-btn { font-size: 1rem; letter-spacing: .03em; padding: 16px 20px; }

  .hcw-progress-track { height: 24px; }
  .hcw-progress-marks { text-align: left; }
  .hcw-progress-mark span { font-size: .68rem; letter-spacing: .03em; }
}

@media (max-width: 380px) {
  .hcw-progress-mark span { font-size: .62rem; }
  .hcw-btn { font-size: .94rem; padding: 16px 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .hcw-btn, .hcw-banner { transition: none; }
  .hcw-btn:hover, .hcw-banner:hover { transform: none; }
}