/**
 * sda-shared.css — Makeni Central SDA
 * Shared responsive fixes + scroll-reveal animations
 * for kids.html, youth.html, building.html (and index.html)
 *
 * Load AFTER tailwind: <link rel="stylesheet" href="../sda-shared.css"/>
 */

/* ═══════════════════════════════════════════
   GLOBAL RESETS
═══════════════════════════════════════════ */
html { scroll-behavior: smooth; }

*:focus-visible {
  outline: 2px solid #755b00;
  outline-offset: 3px;
  border-radius: 4px;
}

/* Prevent hero / section overflows on narrow viewports */
img { max-width: 100%; height: auto; }


/* ═══════════════════════════════════════════
   FLUID TYPOGRAPHY
   display-lg  : 56px → 32px
   headline-lg : 40px → 26px
   headline-md : 32px → 22px
═══════════════════════════════════════════ */
/* Fluid clamp — scales between 375 px and 1280 px viewport width */
.font-display-lg,
.text-display-lg {
  font-size: clamp(2rem, 4vw + 1rem, 3.5rem) !important;
  line-height: 1.1 !important;
}

.font-headline-lg,
.text-headline-lg {
  font-size: clamp(1.625rem, 3vw + 0.5rem, 2.5rem) !important;
  line-height: 1.2 !important;
}

.font-headline-md,
.text-headline-md {
  font-size: clamp(1.375rem, 2.5vw + 0.25rem, 2rem) !important;
  line-height: 1.3 !important;
}

/* ═══════════════════════════════════════════
   SECTION GAP — halved on mobile
═══════════════════════════════════════════ */
@media (max-width: 767px) {
  .py-section-gap  { padding-top: 60px !important;    padding-bottom: 60px !important; }
  .pt-section-gap  { padding-top: 60px !important; }
  .pb-section-gap  { padding-bottom: 60px !important; }
  .mb-section-gap  { margin-bottom: 60px !important; }
  .mt-section-gap  { margin-top: 60px !important; }
}


/* ═══════════════════════════════════════════
   NAV — scroll shrink
═══════════════════════════════════════════ */
header { transition: box-shadow 0.3s ease; }
header.scrolled { box-shadow: 0 4px 24px -4px rgba(4,21,52,0.14) !important; }

.nav-inner { transition: height 0.3s ease; }


/* ═══════════════════════════════════════════
   LOGO BADGE — hover lift (all pages)
═══════════════════════════════════════════ */
.logo-badge {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.logo-badge:hover {
  transform: scale(1.05);
  box-shadow: 0 0 0 4px rgba(117,91,0,0.15);
}


/* ═══════════════════════════════════════════
   SCROLL-REVEAL  (.reveal)
   Add class="reveal" to any element you want
   to animate in on scroll.
   Optional stagger via style="--delay:0.15s"
═══════════════════════════════════════════ */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity  0.55s ease var(--delay, 0s),
    transform 0.55s ease var(--delay, 0s);
  will-change: opacity, transform;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Cards that slide in from left */
.reveal-left {
  opacity: 0;
  transform: translateX(-24px);
  transition:
    opacity  0.55s ease var(--delay, 0s),
    transform 0.55s ease var(--delay, 0s);
}
.reveal-left.visible { opacity: 1; transform: translateX(0); }

/* Cards that slide in from right */
.reveal-right {
  opacity: 0;
  transform: translateX(24px);
  transition:
    opacity  0.55s ease var(--delay, 0s),
    transform 0.55s ease var(--delay, 0s);
}
.reveal-right.visible { opacity: 1; transform: translateX(0); }


/* ═══════════════════════════════════════════
   HERO ENTRANCE — index & building
   Classes added by JS after DOMContentLoaded
═══════════════════════════════════════════ */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hero-h1  { animation: fadeUp 0.8s 0.15s ease both; }
.hero-sub { animation: fadeUp 0.8s 0.4s  ease both; }
.hero-cta { animation: fadeUp 0.8s 0.65s ease both; }

/* Ken Burns for index hero bg */
@keyframes kenBurns {
  from { transform: scale(1); }
  to   { transform: scale(1.08); }
}
.hero-bg { animation: kenBurns 14s ease-out forwards; will-change: transform; }


/* ═══════════════════════════════════════════
   BUILDING PAGE — responsive fixes
═══════════════════════════════════════════ */

/* Bento gallery: fixed 600px height breaks on mobile */
@media (max-width: 767px) {
  .gallery-bento {
    height: auto !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: auto !important;
  }
  .gallery-bento > div {
    height: 220px;
    grid-column: auto !important;
    grid-row: auto !important;
  }

  /* Fund stats: prevent text overflow on tiny screens */
  [data-func="fund-raised"],
  [data-func="fund-goal"],
  [data-func="fund-percent"],
  [data-func="fund-donors"] {
    font-size: clamp(1.1rem, 4vw, 2rem) !important;
    word-break: break-all;
  }

  /* Hero h-[80vh] min height so text isn't cut */
  .building-hero { min-height: 480px !important; }

  /* Testimonial cards: full-width on mobile */
  .testimonial-grid { grid-template-columns: 1fr !important; }

  /* Progress tracker labels: smaller text */
  .progress-label { font-size: 11px !important; letter-spacing: 0.04em !important; }
}

/* Progress bar shimmer when animating */
@keyframes progressShimmer {
  0%   { background-position: 200% center; }
  100% { background-position: -200% center; }
}
[data-func="fund-bar"] {
  background: linear-gradient(90deg, #755b00 0%, #e6c364 50%, #755b00 100%);
  background-size: 200% auto;
  animation: progressShimmer 3s linear infinite;
}


/* ═══════════════════════════════════════════
   KIDS PAGE — responsive fixes
═══════════════════════════════════════════ */
@media (max-width: 767px) {
  /* Large bento story card: stack vertically */
  .story-bento-large {
    flex-direction: column !important;
  }
  .story-bento-large .story-img-wrap {
    width: 100% !important;
    height: 200px !important;
  }

  /* Hero image: shorter on mobile */
  .kids-hero-img { height: 260px !important; }

  /* Quote block padding */
  .kids-quote-block { padding: 40px 24px !important; }
}


/* ═══════════════════════════════════════════
   YOUTH PAGE — responsive fixes
═══════════════════════════════════════════ */
@media (max-width: 767px) {
  /* FAB: shrink label on very small screens */
  #fab-new-discussion .fab-label { display: none; }
  #fab-new-discussion {
    width: 56px; height: 56px;
    padding: 0 !important;
    justify-content: center;
    border-radius: 50% !important;
  }

  /* Filter pills: allow wrapping, smaller text */
  [data-filter] {
    font-size: 12px !important;
    padding: 6px 14px !important;
  }

  /* Discussion cards: reduce padding */
  .discussion-card { padding: 20px !important; }

  /* Sidebar scripture card: smaller heading */
  .youth-scripture blockquote {
    font-size: clamp(1.1rem, 3vw, 1.375rem) !important;
    line-height: 1.4 !important;
  }
}

/* Discussion card hover */
.discussion-card {
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.discussion-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px -12px rgba(4,21,52,0.14);
}

/* FAB pulse ring */
@keyframes fabPulse {
  0%   { box-shadow: 0 0 0 0 rgba(254,217,119,0.5); }
  70%  { box-shadow: 0 0 0 12px rgba(254,217,119,0); }
  100% { box-shadow: 0 0 0 0   rgba(254,217,119,0); }
}
#fab-new-discussion { animation: fabPulse 2.5s ease-in-out infinite; }
#fab-new-discussion:hover { animation: none; transform: scale(1.04); }
#fab-new-discussion:active { transform: scale(0.96); }


/* ═══════════════════════════════════════════
   MAP PIN PULSE (index.html)
═══════════════════════════════════════════ */
@keyframes pinPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,0.5); }
  50%       { box-shadow: 0 0 0 6px rgba(239,68,68,0); }
}
#pin-dot { animation: pinPulse 1.8s ease-in-out infinite; }


/* ═══════════════════════════════════════════
   UTILITY — touch targets
   Ensure all interactive elements meet 44px
═══════════════════════════════════════════ */
button, [role="button"], a {
  -webkit-tap-highlight-color: transparent;
}

/* Comfortable tap targets on mobile */
@media (max-width: 767px) {
  .mobile-give, .hamburger-btn { min-height: 44px; min-width: 44px; }
}