/* Hemi-Hand Global Styles */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --primary: #4A6741;
  --primary-dark: #3A5331;
  --primary-light: #6B8F61;
  --accent: #8AB47D;
  --accent-light: #AECFA2;   /* 4.98:1 on --primary-dark */
  --border-input: #7E9178;   /* 3.38:1 on white, WCAG 1.4.11 */
  --sage: #D4DDD0;
  --sage-light: #EDF1EB;
  --warm-white: #F8F9F7;
  --text-main: #1A2E1A;
  --text-secondary: #4A5D4A;
  --white: #FFFFFF;
}

html { scroll-behavior: smooth; }

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--warm-white);
  color: var(--text-main);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

main { flex: 1; }

p, h1, h2, h3, li, blockquote, label, span { text-wrap: pretty; }
img { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; color: inherit; }

/* ── Header ── */
.site-header {
  background: var(--white);
  border-bottom: 1px solid var(--sage);
  position: sticky;
  top: 0;
  z-index: 50;
}
.header-inner {
  max-width: 1152px;
  margin: 0 auto;
  padding: 0 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
}
.header-logo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.header-logo img { width: auto; height: 40px; border-radius: 4px; }
.header-logo span {
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--primary-dark);
}
.desktop-nav { display: flex; align-items: center; gap: 0.25rem; }
.desktop-nav a {
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: 4px;
  color: var(--text-secondary);
  transition: all 0.2s;
}
.desktop-nav a:hover, .desktop-nav a.active {
  color: var(--primary-dark);
  background: var(--sage-light);
}
.nav-cta {
  margin-left: 0.5rem;
  padding: 0.5rem 1rem !important;
  color: var(--white) !important;
  background: var(--primary) !important;
  border-radius: 4px;
}
.nav-cta:hover { background: var(--primary-dark) !important; }

/* Mobile nav */
.mobile-toggle {
  display: none;
  background: none;
  border: none;
  padding: 0.5rem;
  color: var(--text-secondary);
  cursor: pointer;
}
.mobile-toggle svg { width: 24px; height: 24px; }
.mobile-nav {
  display: none;
  border-top: 1px solid var(--sage);
  background: var(--white);
  padding: 0.75rem 1rem;
}
.mobile-nav.open { display: block; }
.mobile-nav a {
  display: block;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: 4px;
  color: var(--text-secondary);
  transition: all 0.2s;
}
.mobile-nav a:hover, .mobile-nav a.active {
  color: var(--primary-dark);
  background: var(--sage-light);
}

@media (max-width: 768px) {
  .desktop-nav { display: none; }
  .mobile-toggle { display: block; }
}

/* ── Footer ── */
.site-footer { background: var(--primary-dark); color: var(--white); }
.footer-inner {
  max-width: 1152px;
  margin: 0 auto;
  padding: 3rem 1rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}
@media (min-width: 768px) { .footer-grid { grid-template-columns: repeat(3, 1fr); } }
.footer-brand { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem; }
.footer-brand img { width: auto; height: 36px; border-radius: 4px; }
.footer-brand span { font-size: 1.125rem; font-weight: 600; letter-spacing: 0.05em; }
.footer-desc { font-size: 0.875rem; color: var(--sage); line-height: 1.6; }
.footer-heading {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--sage);
  margin-bottom: 1rem;
}
.footer-links { list-style: none; }
.footer-links li { margin-bottom: 0.5rem; }
.footer-links a { font-size: 0.875rem; color: var(--sage); transition: color 0.2s; }
.footer-links a:hover { color: var(--white); }
.footer-contact-btn {
  display: inline-block;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  border: 1px solid var(--sage);
  color: var(--sage);
  border-radius: 4px;
  transition: all 0.2s;
}
.footer-contact-btn:hover { background: var(--sage); color: var(--primary-dark); }
.footer-bottom {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--primary-light);
  text-align: center;
  font-size: 0.75rem;
  color: var(--sage);
}

/* ── Shared Section Styles ── */
.section { padding: 4rem 0; }
.section-sm { padding: 3rem 0; }
.section--sage { background: var(--sage-light); }
.section--primary { background: var(--primary); color: var(--white); }
.section--dark { background: var(--primary-dark); color: var(--white); }
.container { max-width: 1152px; margin: 0 auto; padding: 0 1rem; }
.container--narrow { max-width: 896px; margin: 0 auto; padding: 0 1rem; }
.container--mid { max-width: 1024px; margin: 0 auto; padding: 0 1rem; }
.text-center { text-align: center; }

/* Hero */
.hero { padding: 4rem 0 5rem; }
.hero h1 { font-size: 2.25rem; font-weight: 700; line-height: 1.2; margin-bottom: 1rem; }
.hero p { font-size: 1.125rem; color: var(--sage); line-height: 1.6; }
@media (min-width: 768px) { .hero h1 { font-size: 3rem; } .hero { padding: 5rem 0 7rem; } }

/* Typography */
h2 { font-size: 1.875rem; font-weight: 700; color: var(--primary-dark); margin-bottom: 1rem; }
h3 { font-weight: 600; color: var(--primary-dark); }
.subtitle { font-size: 1.125rem; color: var(--text-secondary); line-height: 1.6; }

/* Grid */
.grid-2 { display: grid; gap: 1.5rem; }
.grid-3 { display: grid; gap: 1.5rem; }
.grid-4 { display: grid; gap: 1.5rem; }
@media (min-width: 640px) {
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 768px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .grid-4 { grid-template-columns: repeat(4, 1fr); } }

.grid-2col { display: grid; gap: 3rem; }
@media (min-width: 768px) { .grid-2col { grid-template-columns: repeat(2, 1fr); align-items: center; } }

/* Cards */
.card {
  background: var(--white);
  border: 1px solid var(--sage);
  border-radius: 8px;
  padding: 1.5rem;
}
.card-sage {
  background: var(--sage-light);
  border-radius: 8px;
  padding: 1.5rem;
}
.card h3 { margin-bottom: 0.5rem; }
.card p, .card-sage p { font-size: 0.875rem; color: var(--text-secondary); line-height: 1.6; }

/* Buttons */
.btn {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  transition: all 0.2s;
  text-align: center;
}
.btn--white { background: var(--white); color: var(--primary-dark); }
.btn--white:hover { background: var(--sage-light); }
.btn--outline { border: 1px solid var(--sage); color: var(--sage); background: transparent; }
.btn--outline:hover { background: var(--primary-light); color: var(--white); }
.btn--primary { background: var(--primary); color: var(--white); }
.btn--primary:hover { background: var(--primary-dark); }
.btn--outline-primary { border: 1px solid var(--primary); color: var(--primary); background: transparent; }
.btn--outline-primary:hover { background: var(--primary); color: var(--white); }
.btn--full { width: 100%; padding: 1rem; }

/* Tag */
.tag {
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent-light);
  margin-bottom: 1rem;
}

/* Feature list */
.feature-list { list-style: none; }
.feature-list li { display: flex; gap: 0.75rem; margin-bottom: 1rem; }
.feature-dot {
  margin-top: 0.4rem;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--primary);
  flex-shrink: 0;
}
.feature-list .label { font-weight: 500; color: var(--primary-dark); }
.feature-list .desc { color: var(--text-secondary); }

/* Step grid (2x2 images) */
.step-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.step-grid img { border-radius: 8px; border: 1px solid var(--sage); width: 100%; }

/* Stat bar */
.stat-bar { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; text-align: center; }
@media (min-width: 768px) { .stat-bar { grid-template-columns: repeat(4, 1fr); } }
.stat-bar .value { font-size: 1.875rem; font-weight: 700; color: var(--primary-dark); }
.stat-bar .label { font-size: 0.875rem; color: var(--text-secondary); margin-top: 0.25rem; }

/* Source citations */
.sources { font-size: 0.75rem; color: var(--text-secondary); line-height: 1.7; margin-top: 2rem; }
.sources a { color: var(--primary); text-decoration: underline; text-underline-offset: 2px; }

/* Blockquote */
.quote { font-size: 1.125rem; color: var(--text-secondary); font-style: italic; line-height: 1.6; margin-bottom: 1rem; }

/* Timeline */
.timeline { position: relative; padding-left: 2rem; }
.timeline::before {
  content: '';
  position: absolute;
  left: 0.75rem;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--primary);
}
.timeline-item { position: relative; margin-bottom: 2.5rem; }
.timeline-dot {
  position: absolute;
  left: -1.625rem;
  top: 0.3rem;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid var(--primary);
  background: var(--sage-light);
}
.timeline-dot.done { background: var(--primary); border-color: var(--primary); }
.timeline-dot.current { background: var(--white); border-color: var(--primary); }
.timeline-date {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--primary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.timeline-title { font-size: 1.125rem; font-weight: 700; color: var(--primary-dark); margin-top: 0.25rem; }
.timeline-desc { font-size: 0.875rem; color: var(--text-secondary); margin-top: 0.25rem; line-height: 1.6; }

/* Team card */
.team-card {
  background: var(--white);
  border: 1px solid var(--sage);
  border-radius: 8px;
  overflow: hidden;
  text-align: center;
}
.team-card .photo {
  aspect-ratio: 1;
  background: var(--sage-light);
  overflow: hidden;
}
.team-card .photo img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.team-card .info { padding: 1.25rem; }
.team-card .info h3 { font-size: 1.125rem; }
.team-card .info .role { font-size: 0.875rem; font-weight: 500; color: var(--primary); margin-top: 0.25rem; }
.team-card .info .creds { font-size: 0.75rem; color: var(--text-secondary); margin-top: 0.5rem; }

/* Forms */
.form-group { margin-bottom: 1.25rem; }
.form-row { display: grid; gap: 1rem; }
@media (min-width: 640px) { .form-row { grid-template-columns: repeat(2, 1fr); } }
.form-label { display: block; font-size: 0.875rem; font-weight: 500; color: var(--primary-dark); margin-bottom: 0.25rem; }
.form-input, .form-select, .form-textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid var(--border-input);
  border-radius: 4px;
  font-size: 1rem;
  font-family: inherit;
  background: var(--white);
  transition: border-color 0.2s;
}
.form-input:focus-visible, .form-select:focus-visible, .form-textarea:focus-visible {
  outline: 3px solid var(--primary-light);
  outline-offset: 1px;
  border-color: var(--primary);
}
.form-textarea { resize: vertical; }

/* Checkbox */
.checkbox-label { display: flex; align-items: center; gap: 0.75rem; cursor: pointer; font-size: 0.875rem; color: var(--text-secondary); }
.checkbox-label input { width: 16px; height: 16px; accent-color: var(--primary); }

/* Donation amount buttons */
.amount-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; margin-bottom: 0.75rem; }
.amount-btn {
  padding: 0.75rem 1rem;
  border: 1px solid var(--border-input);
  border-radius: 4px;
  font-size: 1rem;
  font-weight: 500;
  background: var(--white);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s;
}
.amount-btn:hover { border-color: var(--primary-light); }
.amount-btn.selected { background: var(--primary); color: var(--white); border-color: var(--primary); }
.custom-amount-row { display: flex; align-items: center; gap: 0.75rem; }
.custom-input-wrap { position: relative; flex: 1; }
.custom-input-wrap .dollar { position: absolute; left: 0.75rem; top: 50%; transform: translateY(-50%); color: var(--text-secondary); }
.custom-input-wrap input { padding-left: 1.75rem; }

/* Contact sidebar */
.contact-grid { display: grid; gap: 3rem; }
@media (min-width: 768px) { .contact-grid { grid-template-columns: 3fr 2fr; } }
.sidebar { background: var(--sage-light); border-radius: 8px; padding: 1.5rem; }
.sidebar h3 { font-weight: 600; color: var(--primary-dark); margin-bottom: 0.5rem; }
.sidebar p { font-size: 0.875rem; color: var(--text-secondary); line-height: 1.6; }
.sidebar > div { margin-bottom: 1.5rem; }
.sidebar > div:last-child { margin-bottom: 0; }

/* Success message */
.success-msg {
  background: var(--sage-light);
  border: 1px solid var(--sage);
  border-radius: 8px;
  padding: 2rem;
  text-align: center;
}
.success-msg h2 { font-size: 1.5rem; margin-bottom: 0.5rem; }
.success-msg p { color: var(--text-secondary); }

/* Leaflet overrides */
.leaflet-container { height: 500px; width: 100%; border-radius: 8px; z-index: 1; }
.map-legend { display: flex; gap: 1.5rem; margin-top: 1rem; font-size: 0.875rem; }
.map-legend span { display: flex; align-items: center; gap: 0.5rem; color: var(--text-secondary); }
.legend-dot { width: 12px; height: 12px; border-radius: 50%; border: 1px solid var(--white); box-shadow: 0 1px 2px rgba(0,0,0,0.2); }

/* FDA list */
.fda-list { list-style: none; }
.fda-list li { margin-bottom: 0.5rem; font-size: 0.875rem; color: var(--text-secondary); }

/* Carousel */
.carousel {
  background: var(--white);
  border: 1px solid var(--sage);
  border-radius: 12px;
  overflow: hidden;
  max-width: 450px;
}
.carousel-image-wrap {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: var(--warm-white);
}
.carousel-image-wrap img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 8px;
}
.carousel-caption {
  padding: 1rem 1.5rem 0.75rem;
  text-align: center;
}
.carousel-step {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--primary);
  margin-bottom: 0.25rem;
}
.carousel-caption p {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--primary-dark);
  min-height: 2.5em;
}
.carousel-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 0.75rem 1.5rem 1.25rem;
}
.carousel-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--sage);
  background: var(--white);
  color: var(--primary-dark);
  font-size: 1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}
.carousel-btn:hover { background: var(--sage-light); border-color: var(--primary-light); }
.carousel-dots { display: flex; gap: 1rem; }
.carousel-dot {
  position: relative;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--sage);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background 0.2s;
}
.carousel-dot.active { background: var(--primary); }

/* Utility */
.mb-2 { margin-bottom: 0.5rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mb-8 { margin-bottom: 2rem; }
.mb-10 { margin-bottom: 2.5rem; }
.mt-2 { margin-top: 0.5rem; }
.max-w-2xl { max-width: 672px; margin-left: auto; margin-right: auto; }
.text-sm { font-size: 0.875rem; }
.text-xs { font-size: 0.75rem; }
.hidden { display: none; }

/* Grid and flex children default to min-width:auto, which stops them
   shrinking below their content and pushes the page sideways on phones. */
.grid-2 > *, .grid-3 > *, .grid-4 > *, .grid-2col > *,
.stat-bar > *, .contact-grid > *, .footer-grid > *, .form-row > * { min-width: 0; }

/* ── Accessibility ── */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--primary-dark);
  color: var(--white);
  padding: 0.75rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 600;
  border-radius: 0 0 4px 0;
}
.skip-link:focus { left: 0; }

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

/* Visible keyboard focus everywhere, tuned for dark surfaces */
:focus-visible {
  outline: 3px solid var(--primary-light);
  outline-offset: 2px;
}
.section--dark :focus-visible,
.section--primary :focus-visible,
.site-footer :focus-visible,
.skip-link:focus-visible {
  outline-color: var(--sage-light);
}

/* Enlarge the carousel dot hit area to 24px without changing its size */
.carousel-dot::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 24px;
  height: 24px;
  transform: translate(-50%, -50%);
}

blockquote.quote { margin-left: 0; margin-right: 0; }
blockquote.quote p { margin: 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}