/* =============================================================================
   polish.css — design-audit fixes (deterministic pass)
   Linked LAST on every page (after theme-shadcn-blue.css) so equal-specificity
   rules here win by source order alone — !important is avoided except where
   noted. Grouped by defect category; see the audit brief for full rationale.
   ========================================================================== */

/* -----------------------------------------------------------------------
   (a) 14px text floor — nothing rendered below 14px
   ----------------------------------------------------------------------- */
.label,
.footer-bottom,
.accordion-body .scripture,
.comp-theme-label,
.stat-bar-item .stat-desc,
.stat-item p,
.stat-bar-inner .desc,
.pillar-featured-badge,
.pillar-link,
.pathway-link,
.donate-card .card-cta,
.funding-card-cta,
.funding-card-label,
.funding-card-remaining,
.roadmap-status,
.or-divider,
.info-item .info-label,
.form-group label,
.endorsement-author span,
.footer-col h3,
.footer-mini,
.donate-security p {
  font-size: 0.875rem;
}

.btn-arrow {
  font-size: inherit;
}

/* -----------------------------------------------------------------------
   (b) Tap targets (mobile) — minimum 44x44 touch area
   ----------------------------------------------------------------------- */
.footer-socials a,
.mobile-toggle {
  min-width: 44px;
  min-height: 44px;
}

.funding-card-cta,
.pillar-link,
.pathway-link,
.donate-card .card-cta,
.back-link a,
.info-item a.info-value,
.contact-item a.contact-value {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* -----------------------------------------------------------------------
   (c) Mission page mobile overflow — urgency-grid at narrow widths
   ----------------------------------------------------------------------- */
@media (max-width: 480px) {
  .urgency-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  .urgency-num {
    font-size: clamp(1.75rem, 9vw, 2.5rem);
  }
  .urgency-card {
    min-width: 0;
    padding-inline: 12px;
  }
}

/* -----------------------------------------------------------------------
   (d) Homepage Get Trained stats — even 2x2 wrap on mobile
   ----------------------------------------------------------------------- */
@media (max-width: 640px) {
  .training-stats-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
  }
}

/* -----------------------------------------------------------------------
   (e) Funding progress bar fill — visible contrast on donate.html
   ----------------------------------------------------------------------- */
.funding-card-bar {
  background: var(--color-surface);
  border: 1px solid var(--border, #e5e7eb);
}

.funding-card-bar-fill {
  background: var(--color-accent);
  /* keep the inline label decorative-only; the % is already printed beside the bar */
  font-size: 0;
  color: transparent;
  overflow: hidden;
}

/* -----------------------------------------------------------------------
   (f) 14px floor — compound/higher-specificity inline rules that beat the
   bare selectors in (a). Selector text matches each page's own rule
   exactly (same specificity) so source order (polish.css loads last) wins.
   ----------------------------------------------------------------------- */
.training-stat-item p,          /* index.html — "Hours Free Training" etc. */
.pillar-card .pillar-link,      /* index.html — home.css beats bare .pillar-link; also fixes the nested .btn-arrow via inherit */
.bio-content .label,            /* about.html — "President & Founder" */
.bio-credentials h3,            /* about.html — "Education" */
.endorsement-meta span,         /* about.html — endorser affiliation line */
.why-section .label,            /* get-trained.html — "The Need" */
.testimonial-meta span,         /* mmwu.html — testimonial country tag */
.impact-stat-card p,            /* mmwu.html — "Muslims Globally" stat caption */
.roadmap-summary-item p,        /* wise-global.html — "Total Build Cost" */
.contact-item .contact-label,   /* donate.html — "Mailing Address" */
.trust-item p {                 /* donate-form.html — trust-strip captions */
  font-size: 0.875rem;
}

/* -----------------------------------------------------------------------
   (g) Tap targets — additional finds from the 390px re-audit
   ----------------------------------------------------------------------- */
.trust-item p a,
.form-page__trust-item p a {
  /* donate-form.html mailto link inside the trust strip */
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.lausanne-intro a {
  /* about.html — inline "Lausanne Covenant" link; padding-block only, so the
     paragraph's line layout doesn't shift, just the link's hit area */
  padding-block: 4px;
}

.ebook-cta .btn {
  /* contact.html — components.css (which normally styles .btn) isn't linked
     on this page, so "Get the Free Ebook" was rendering as bare inline text */
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* -----------------------------------------------------------------------
   (h) donate.html giving cards — CTA as buttons, card/check dominant.
   Lives here (not inline) because styles/donate.css re-declares
   .donate-card .card-cta color after the inline block.
   ----------------------------------------------------------------------- */
.donate-card .card-cta--primary {
  background: var(--color-accent); color: #fff;
  padding: 14px 22px; border-radius: 6px;
  text-transform: none; letter-spacing: 0; font-size: 1rem;
  min-height: 48px; width: 100%; justify-content: center;
}
.donate-card .card-cta--secondary {
  border: 1.5px solid var(--color-text); color: var(--color-text);
  padding: 14px 22px; border-radius: 6px;
  text-transform: none; letter-spacing: 0; font-size: 1rem;
  min-height: 48px; width: 100%; justify-content: center;
}
.donate-card:hover .card-cta--primary { background: var(--color-accent-warm); }
.donate-card:hover .card-cta--secondary { background: var(--color-surface); }

/* -----------------------------------------------------------------------
   (i) Intrinsic-size attributes need height:auto, or a max-width'd image
   renders at the literal height attribute (the logo strip was 2x tall).
   ----------------------------------------------------------------------- */
.trusted-by img {
  height: auto;
}

/* -----------------------------------------------------------------------
   (j) Urgency cards — death-counter (mission), mission-counter (home) and
   pullquote (mission).

   Contrast: the gradient's light stop was var(--color-accent) #3b82f6, on
   which the label text measured 2.8:1 (home) and 2.8:1 (mission) — below
   the 4.5:1 WCAG AA minimum for normal-size text, and the big numeral sat
   at 3.4:1. Deepening that stop to #1d4ed8 (blue-700, same brand family)
   takes the labels to ~5.5:1 and the numeral to 6.3:1. The pullquote's
   <cite> was the worst at 2.3:1 and needed an opacity bump as well.

   Size: the community icon is capped by mission.css at clamp(56px,5vw,84px),
   which renders it as a 72px smudge inside a 200px box. Sized here instead.

   These live in polish.css, not the pages' inline <style>, because inline
   styles load FIRST in this project and mission.css/home.css override them.
   ----------------------------------------------------------------------- */
.death-counter,
.mission-counter,
.pullquote {
  background: linear-gradient(135deg, #1d4ed8, var(--color-accent-deep));
}
.death-counter .counter-icon,
.mission-counter .counter-icon {
  width: clamp(140px, 13vw, 200px);
  flex-shrink: 0;
  align-self: center;
}
.death-counter .counter-icon img,
.mission-counter .counter-icon img {
  width: 100%;
  height: auto;
  opacity: 1;
}
.death-counter .count-label { color: rgba(250, 247, 242, 0.92); }
.mission-counter .counter-label { color: rgba(255, 255, 255, 0.92); }
.pullquote cite { color: rgba(255, 255, 255, 0.85); }

/* Anonymous crowd imagery: homepage band and Mission page overlay. */
.mission:has(.mission-visual--crowd) .mission-grid {
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(48px, 6vw, 88px);
}
.mission-visual--crowd {
  width: 100%;
  max-width: 600px;
  justify-self: center;
}
.mission-crowd-image picture,
.mission-crowd-image img {
  display: block;
  width: 100%;
  height: auto;
}
.mission-crowd--hero {
  container: mission-counter / inline-size;
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: end;
  overflow: hidden;
  max-width: 800px;
  height: clamp(340px, 50vw, 460px);
  margin-inline: auto;
  background: #081322;
}
.mission-crowd--hero .mission-crowd-image {
  position: absolute;
  inset: 0;
}
.mission-crowd--hero .mission-crowd-image picture,
.mission-crowd--hero .mission-crowd-image img {
  height: 100%;
}
.mission-crowd--hero .mission-crowd-image img {
  object-fit: cover;
  object-position: center;
}
.mission-crowd--hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(8, 19, 34, 0.02) 18%,
    rgba(8, 19, 34, 0.64) 48%,
    rgba(8, 19, 34, 0.84) 65%,
    rgba(8, 19, 34, 0.96) 100%);
}
.mission-counter--crowd {
  display: block;
  padding: 28px 32px;
  border-radius: 0;
  background: var(--color-accent-deep);
  box-shadow: none;
  text-align: left;
}
.mission-counter--crowd::before { content: none; }
.mission-counter--crowd .counter-content {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 24px;
}
.mission-counter--crowd .counter-number {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  color: #eff6ff;
  font-size: clamp(3.5rem, 5.6vw, 5.5rem);
  line-height: 1;
  white-space: nowrap;
}
.mission-counter--crowd .counter-label {
  margin: 0;
  max-width: 23ch;
  color: #eff6ff;
  font-size: 1rem;
  line-height: 1.5;
}
@media (max-width: 1024px) {
  .mission:has(.mission-visual--crowd) .mission-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 48px;
  }
}
@media (max-width: 480px) {
  .mission-counter--crowd { padding: 20px; }
  .mission-counter--crowd .counter-content {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }
  .mission-counter--crowd .counter-number { font-size: 4rem; }
  .mission-counter--crowd .counter-label { max-width: 27ch; }
}

/* Keep the live text in HTML and place it over the dark lower image area. */
.mission-crowd--hero .mission-counter--crowd {
  position: relative;
  z-index: 2;
  padding: 32px 40px;
  background: transparent;
}
.mission-crowd--hero .counter-number {
  font-size: clamp(4.25rem, 8vw, 7rem);
  color: #fff;
}
.mission-crowd--hero .counter-label {
  max-width: 26ch;
  font-size: 1.125rem;
  color: #fff;
}
@container mission-counter (max-width: 600px) {
  .mission-crowd--hero .mission-counter--crowd { padding: 24px; }
  .mission-crowd--hero .counter-content {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }
  .mission-crowd--hero .counter-label {
    max-width: 30ch;
    font-size: 1rem;
    text-wrap: pretty;
  }
}

/* -----------------------------------------------------------------------
   (k) Accessible text accent.

   --color-accent (#3b82f6) is too light to carry NORMAL-SIZE text in either
   direction: as text on white it measures 3.67:1, and as a button fill under
   white text it also measures 3.67:1. WCAG 2.1 AA wants 4.5:1 for normal
   text. An axe-core pass over all 10 pages found 55 contrast violations and
   every one of them traced back to this single token.

   #3b82f6 is kept everywhere it is decorative -- glows, borders, rules,
   large display type, the hero -- because large text only needs 3:1 and the
   brand identity lives there. This darker sibling is applied ONLY where the
   accent carries small text or sits beneath white button text. #1d4ed8 is
   blue-700, the same family, and measures 6.70:1 both ways.
   ----------------------------------------------------------------------- */
:root {
  --color-accent-text: #1d4ed8;
}

/* accent used as small text on a light background */
.label,
.footer-col h3,
.nav-ebook,
.comp-subnav-link span,
.form-page__eyebrow,
.verify-question {
  color: var(--color-accent-text);
}

/* accent used as a button fill beneath white text */
.nav-cta {
  background: var(--color-accent-text) !important;
}
.btn-primary,
#submitBtn,
.form-submit,
.form-page__btn--primary {
  background: var(--color-accent-text);
  border-color: var(--color-accent-text);
}

/* .nav-ebook needs !important and it is earned, not lazy: every page's inline
   <style> sets `color: var(--color-accent) !important`, so an ordinary rule
   cannot reach it. Nothing else here needs it -- donate-form.html used to
   carry a <style> block AFTER its polish.css <link>, which inverted the
   documented load order; that link has since been moved to load last, so
   these rules win on source order like everywhere else. */
.nav-ebook {
  color: var(--color-accent-text) !important;
  border-color: var(--color-accent-text) !important;
}
.form-page__eyebrow { color: var(--color-accent-text); }
.form-page__eyebrow::before { background: var(--color-accent-text); }
.form-page__btn--primary {
  background: var(--color-accent-text);
  border-color: var(--color-accent-text);
}
.form-page a[href^="mailto:"] { color: var(--color-accent-text); }

/* -----------------------------------------------------------------------
   (l) Tap targets — the remaining sub-44px hits from a 390px sweep of all
   ten pages. These clear WCAG 2.2 AA (2.5.8 wants 24x24) but sit under this
   project's own 44px rule, which follows Apple's HIG and WCAG 2.5.5 AAA.

   Scoped to the mobile breakpoint on purpose: on a pointer device a 24px
   footer link is comfortable, and forcing 44px there would stretch the
   footer columns for no benefit.
   ----------------------------------------------------------------------- */
@media (max-width: 768px) {
  /* footer links are block-level and stacked -- inline-flex would collapse the
     whole column onto one line, so these stay block-level flex */
  .footer-col a {
    display: flex;
    align-items: center;
    min-height: 44px;
  }
  /* these two are genuinely inline, so inline-flex is correct for them */
  .nav-logo,
  .form-page__back {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}