/* ==========================================================================
   assets/css/theme.css
   Site-wide polish layer — loaded AFTER each page's own stylesheet on every
   page, so it can harmonize buttons, cards, spacing, typography and add
   consistent motion without touching any page's own CSS file or any markup
   (no class names or JS hooks were changed anywhere).
   ========================================================================== */

:root {
  /* Refined/extended tokens (base greens/gold kept identical to every page) */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  --gradient-brand: linear-gradient(135deg, var(--primary-green) 0%, var(--dark-green) 100%);
  --gradient-gold: linear-gradient(135deg, var(--accent-gold) 0%, #d97706 100%);

  --shadow-card: 0 6px 18px rgba(15, 23, 42, 0.08);
  --shadow-card-hover: 0 18px 40px rgba(15, 23, 42, 0.16);
  --shadow-btn: 0 8px 20px rgba(30, 132, 73, 0.28);

  --ease-smooth: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ===== Fluid typography (consistent scale on every page, no cramped mobile
   headings and no oversized desktop ones) ===== */
.section-title {
  font-size: clamp(1.7rem, 1.2rem + 2vw, 2.6rem) !important;
  line-height: 1.25 !important;
}
.section-subtitle {
  font-size: clamp(0.8rem, 0.75rem + 0.3vw, 0.95rem) !important;
  letter-spacing: 1.5px !important;
}
.hero h1,
.hero-content h1 {
  font-size: clamp(1.9rem, 1.2rem + 3.2vw, 3.4rem) !important;
  line-height: 1.2 !important;
}
.hero p,
.hero-content p {
  font-size: clamp(1rem, 0.9rem + 0.4vw, 1.15rem) !important;
}
p { font-size: clamp(0.95rem, 0.9rem + 0.15vw, 1rem); }

/* ===== Consistent section rhythm on every page ===== */
section {
  padding: clamp(3rem, 2.2rem + 3vw, 6rem) 0;
}
.section-title,
.section-subtitle {
  text-align: center;
  display: block;
}

/* ===== Buttons — one consistent shape/feel for every .btn everywhere ===== */
.btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.9rem 1.9rem !important;
  min-height: 48px;
  border-radius: var(--radius-pill) !important;
  font-weight: 600 !important;
  letter-spacing: 0.3px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.35s var(--ease-smooth), box-shadow 0.35s var(--ease-smooth), background 0.35s var(--ease-smooth), color 0.35s var(--ease-smooth) !important;
  will-change: transform;
}
.btn:hover,
.btn:focus-visible {
  transform: translateY(-3px) scale(1.02);
  box-shadow: var(--shadow-btn);
}
.btn:active { transform: translateY(-1px) scale(0.99); }
.btn:focus-visible { outline: 3px solid var(--accent-gold); outline-offset: 2px; }

.btn-donate, .btn-sponsor {
  background: var(--gradient-gold) !important;
  color: #1e293b !important;
  border-color: transparent !important;
}
.btn-volunteer, .btn-learn-more, .btn-view-all, .btn-gallery, .btn-contact {
  background: var(--gradient-brand) !important;
  color: #fff !important;
  border-color: transparent !important;
}
.btn-outline-success {
  background: transparent !important;
  color: var(--primary-green) !important;
  border-color: var(--primary-green) !important;
}
.btn-outline-success:hover {
  background: var(--primary-green) !important;
  color: #fff !important;
}
.btn.pulse {
  animation: aghosh-pulse 2.4s var(--ease-smooth) infinite;
}
@keyframes aghosh-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.45); }
  50% { box-shadow: 0 0 0 12px rgba(245, 158, 11, 0); }
}

/* ===== Cards — one consistent shape/lift for every card-like block ===== */
.program-card, .benefit-card, .stat-card, .story-card, .bank-card,
.donate-items-card, .faq-item, .timeline-item, .testimonial-card {
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-card) !important;
  transition: transform 0.4s var(--ease-smooth), box-shadow 0.4s var(--ease-smooth) !important;
}
.program-card:hover, .benefit-card:hover, .stat-card:hover, .story-card:hover,
.bank-card:hover, .donate-items-card:hover, .faq-item:hover, .timeline-item:hover,
.testimonial-card:hover {
  transform: translateY(-8px) !important;
  box-shadow: var(--shadow-card-hover) !important;
}
.program-card .program-icon,
.program-icon {
  transition: transform 0.4s var(--ease-smooth), background 0.4s var(--ease-smooth) !important;
}
.program-card:hover .program-icon {
  transform: scale(1.12) rotate(-4deg) !important;
}

/* Light-touch rows (icon + text, not full boxed cards) — subtle hover only */
.contact-item, .highlight-item, .impact-item, .metric-item {
  transition: transform 0.3s var(--ease-smooth) !important;
}
.contact-item:hover, .highlight-item:hover, .impact-item:hover, .metric-item:hover {
  transform: translateX(4px) !important;
}

/* ===== Gallery / media items — consistent zoom + overlay feel ===== */
.gallery-item, .custom-gallery-item, .video-item-wrapper {
  border-radius: var(--radius-md) !important;
  overflow: hidden !important;
}
.gallery-item img, .custom-gallery-item img, .video-item-wrapper img,
.gallery-item video, .custom-gallery-item video, .video-item-wrapper video {
  transition: transform 0.6s var(--ease-smooth) !important;
}
.gallery-item:hover img, .custom-gallery-item:hover img, .video-item-wrapper:hover img,
.gallery-item:hover video, .custom-gallery-item:hover video, .video-item-wrapper:hover video {
  transform: scale(1.08) !important;
}

/* ===== Scroll-reveal animation (see assets/js/reveal.js) =====
   Elements start slightly faded/lowered, then settle into place the first
   time they scroll into view. Purely additive — nothing is hidden if JS is
   somehow blocked, since .reveal-ready only gets its opacity dropped once
   JS confirms it's running (see reveal.js). */
.reveal-ready {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s var(--ease-smooth), transform 0.7s var(--ease-smooth);
}
.reveal-ready.in-view {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .btn.pulse { animation: none; }
  .reveal-ready, .reveal-ready.in-view {
    transition: none;
    opacity: 1;
    transform: none;
  }
}

/* ===== Mobile touch-friendliness ===== */
@media (max-width: 576px) {
  .btn {
    width: 100%;
    padding: 1rem 1.5rem !important;
  }
  .hero-buttons, .cta-buttons {
    display: flex;
    flex-direction: column;
    gap: 0.9rem !important;
  }
}

/* ==========================================================================
   Navbar "Donate Now" pill — was a tiny, cramped square button that turned
   invisible on hover (gold -> white on a white navbar). Now a proper pill
   that matches the rest of the site's buttons and stays visible on hover.
   ========================================================================== */
.btn-donate-nav {
  background: var(--gradient-gold) !important;
  color: #1e293b !important;
  padding: 0.65rem 1.5rem !important;
  margin-left: 1rem;
  border-radius: var(--radius-pill) !important;
  font-weight: 600 !important;
  display: inline-flex !important;
  align-items: center;
  box-shadow: 0 3px 8px rgba(245, 158, 11, 0.28) !important;
  transition: transform 0.3s var(--ease-smooth), box-shadow 0.3s var(--ease-smooth) !important;
}
/* Each page's own CSS has a ".header.shrink .navbar a { padding: 0.3rem 0
   !important; }" rule for the shrinking-header effect on scroll. Its higher
   specificity (.header.shrink .navbar a) beats the plain ".btn-donate-nav"
   rule above even though both are !important, which is exactly why the
   padding was collapsing to almost nothing (background touching the text)
   once you scrolled. This matches/beats that specificity so the pill shape
   survives the shrink state too. */
.header.shrink .navbar a.btn-donate-nav,
.navbar a.btn-donate-nav {
  padding: 0.65rem 1.5rem !important;
}
/* Only apply the hover lift on devices with a real mouse — on touch/mobile
   (where "hover" has no real meaning) the button now just stays gold at
   all times instead of getting visually stuck on the green hover state
   while scrolling/tapping, and the shadow no longer bleeds past the fixed
   header into the section below it. */
@media (hover: hover) and (pointer: fine) {
  .btn-donate-nav:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(245, 158, 11, 0.4) !important;
  }
}

/* ==========================================================================
   Announcement popup — was a plain pale-blue/navy box that clashed with the
   site's green/gold brand. Now a clean card that matches the rest of the
   site, with a proper icon badge instead of a raw emoji floating alone.
   ========================================================================== */
.aghosh-popup {
  background: var(--white) !important;
  color: var(--text-dark) !important;
  border: none !important;
  border-left: 5px solid var(--accent-gold) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-card-hover) !important;
  padding: 18px 22px 20px 18px !important;
  animation: aghoshPopupIn 0.5s var(--ease-smooth) !important;
}
.popup-close {
  background-color: var(--light-gray) !important;
  color: var(--dark-green) !important;
  box-shadow: var(--shadow-sm) !important;
}
.popup-close:hover {
  background-color: var(--medium-gray) !important;
}
.popup-icon {
  width: 38px;
  height: 38px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--gradient-brand) !important;
  color: #fff !important;
  font-size: 16px !important;
  margin-bottom: 10px !important;
  animation: aghosh-pulse 2.2s var(--ease-smooth) infinite !important;
}
.popup-heading {
  color: var(--dark-green) !important;
  font-weight: 700 !important;
}
.popup-text {
  color: var(--text-dark) !important;
}
.popup-arrow {
  border-top-color: var(--white) !important;
  filter: drop-shadow(2px 6px 4px rgba(15, 23, 42, 0.08));
}
@keyframes aghoshPopupIn {
  from { transform: translateX(80px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

/* ==========================================================================
   Mobile content density — desktop grids of 3-4 cards were simply becoming
   "Card 1 -> scroll -> Card 2 -> scroll -> Card 3" on phones (every page's
   own CSS collapses these grids to grid-template-columns: 1fr below 768px).
   Instead: short icon/number cards go 2-up so you see more in one screen;
   long-text testimonials become a swipeable horizontal row instead of a
   tall single column; photo/video grids stay multi-per-row like a real
   gallery instead of one giant vertical filmstrip.
   ========================================================================== */
@media (max-width: 768px) {
  /* Compact 2-up grid for short icon+text cards */
  .programs-grid, .benefits-grid, .overview-stats {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1rem !important;
  }
  .programs-grid .program-card, .benefits-grid .benefit-card, .overview-stats .stat-card {
    padding: 1.1rem !important;
  }
  .programs-grid .program-card h3, .benefits-grid .benefit-card h3 {
    font-size: 1rem !important;
  }
  .programs-grid .program-card p, .benefits-grid .benefit-card p {
    font-size: 0.85rem !important;
  }

  /* Testimonials carry long quotes — a 2-up grid would cramp them, so make
     them a swipeable horizontal row instead of one long vertical column. */
  .testimonial-grid {
    display: flex !important;
    grid-template-columns: none !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch;
    gap: 1rem !important;
    padding-bottom: 0.75rem !important;
    margin: 0 -1.25rem !important;
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
  }
  .testimonial-grid .testimonial-card {
    flex: 0 0 82% !important;
    scroll-snap-align: start;
  }

  /* Photo/video grids: keep them feeling like a gallery, not a scroll marathon */
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.75rem !important;
  }
  .video-item-wrapper {
    width: 48% !important;
  }
}

/* ==========================================================================
   Form fields (contact/donate/volunteer) — these inputs use a Tailwind
   "focus:ring-primary-green" utility class, but Tailwind's CDN build has no
   idea what color "primary-green" is (that's only defined as a CSS variable
   in our own stylesheets), so the focus ring was silently doing nothing.
   This gives every form field on the site a real, visible, on-brand focus
   state without depending on Tailwind knowing our color names.
   ========================================================================== */
input, textarea, select {
  transition: border-color 0.25s var(--ease-smooth), box-shadow 0.25s var(--ease-smooth) !important;
}
input:focus, textarea:focus, select:focus {
  outline: none !important;
  border-color: var(--primary-green) !important;
  box-shadow: 0 0 0 3px rgba(30, 132, 73, 0.25) !important;
}

/* ==========================================================================
   Homepage "Our Commitment" highlights (Safe Housing / Quality Education /
   Healthcare) — these sit in the left half of a 2-column section, and at
   normal font/padding sizes three of them don't fit that half-width, so the
   3rd one was wrapping to its own row. Force them to share one row and
   shrink to fit instead of wrapping.
   ========================================================================== */
.mission-highlights {
  flex-wrap: nowrap !important;
  gap: 0.6rem !important;
}
.mission-highlights .highlight-item {
  flex: 1 1 0;
  min-width: 0;
  padding: 0.75rem 0.7rem !important;
  gap: 0.4rem !important;
}
.mission-highlights .highlight-item span {
  font-size: 0.85rem !important;
  line-height: 1.25;
  white-space: normal;
}
.mission-highlights .highlight-item i {
  font-size: 1rem !important;
  flex-shrink: 0;
}
@media (max-width: 768px) {
  /* Below 768px the mission section itself stacks to a single column
     (full width), so there's room again — go back to normal wrapping. */
  .mission-highlights {
    flex-wrap: wrap !important;
  }
  .mission-highlights .highlight-item {
    flex: 0 1 auto;
  }
  .mission-highlights .highlight-item span {
    font-size: 0.95rem !important;
  }
}

/* ==========================================================================
   Homepage "Our Commitment / Creating Brighter Futures" heading — this sits
   in the left half of a 2-column section (text left, photo right), so it
   should read left-aligned like the paragraph below it, not centered like a
   full-width section heading. Our sitewide ".section-title { text-align:
   center }" rule (meant for full-width sections) was wrongly centering it
   here too, and at the default size it wrapped to two lines in this
   narrower half-width column.
   ========================================================================== */
.mission .section-title,
.mission .section-subtitle {
  text-align: left !important;
  display: block;
  width: auto;
}
.mission .section-title {
  font-size: clamp(1.5rem, 1.05rem + 1.7vw, 2.15rem) !important;
  white-space: normal;
}
.mission .section-title::after {
  left: 0 !important;
  transform: none !important;
}