/* =========================================================
   ENGAGE.CSS
   Additive styles only. Nothing here overrides existing
   selectors in styles.css / theme_override.css — this file
   covers: footer social icons, contact page, scroll-reveal
   animation, floating donate button, back-to-top button.
   ========================================================= */

/* ---- Scroll reveal (used by assets/js/engage.js) ---- */
.reveal{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .7s ease, transform .7s ease;
}
.reveal.in-view{
  opacity:1;
  transform:translateY(0);
}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1;transform:none;transition:none}
}

/* ---- Footer social icons ---- */
.foot-social{
  display:flex;
  gap:10px;
  margin-top:14px;
}
.foot-social a{
  width:38px;height:38px;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:50%;
  background:rgba(255,255,255,.08);
  color:#fff;
  font-size:15px;
  transition:transform .25s ease, background .25s ease;
}
.foot-social a:hover{
  background:var(--orange, #e05a2b);
  transform:translateY(-3px);
  color:#fff;
}

/* ---- Floating "Donate" button ---- */
.floating-donate-btn{
  position:fixed;
  right:22px;
  bottom:90px;
  z-index:1040;
  background:var(--orange, #e05a2b);
  color:#fff;
  border:none;
  border-radius:50px;
  padding:13px 22px;
  font-weight:600;
  font-size:14px;
  box-shadow:0 10px 25px rgba(0,0,0,.25);
  display:flex;
  align-items:center;
  gap:8px;
  cursor:pointer;
  transition:transform .2s ease, box-shadow .2s ease;
  opacity:0;
  pointer-events:none;
  transform:translateY(12px);
}
.floating-donate-btn.show{
  opacity:1;
  pointer-events:auto;
  transform:translateY(0);
}
.floating-donate-btn:hover{
  transform:translateY(-3px);
  box-shadow:0 14px 30px rgba(0,0,0,.3);
}
.floating-donate-btn i{ animation:heartbeat 1.6s ease-in-out infinite; }
@keyframes heartbeat{
  0%,100%{transform:scale(1)}
  25%{transform:scale(1.15)}
}

/* ---- Back-to-top button ---- */
.back-to-top-btn{
  position:fixed;
  right:22px;
  bottom:22px;
  z-index:1040;
  width:44px;height:44px;
  border-radius:50%;
  background:#222;
  color:#fff;
  border:none;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:16px;
  opacity:0;
  pointer-events:none;
  transform:translateY(12px);
  transition:opacity .25s ease, transform .25s ease, background .25s ease;
  box-shadow:0 8px 20px rgba(0,0,0,.2);
}
.back-to-top-btn.show{
  opacity:1;
  pointer-events:auto;
  transform:translateY(0);
}
.back-to-top-btn:hover{ background:var(--orange, #e05a2b); }

@media (max-width:576px){
  .floating-donate-btn span{ display:none; }
  .floating-donate-btn{ padding:13px 16px; bottom:80px; }
  .back-to-top-btn{ bottom:20px; }
}

/* =========================================================
   CONTACT PAGE
   ========================================================= */
.contact-info-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
  margin-bottom:40px;
}
.contact-info-card{
  background:#fff;
  border-radius:14px;
  padding:28px 22px;
  text-align:center;
  box-shadow:0 8px 26px rgba(0,0,0,.06);
  border:1px solid #f0f0f0;
  transition:transform .3s ease, box-shadow .3s ease;
}
.contact-info-card:hover{
  transform:translateY(-6px);
  box-shadow:0 16px 34px rgba(0,0,0,.10);
}
.contact-info-icon{
  width:58px;height:58px;
  margin:0 auto 14px;
  border-radius:50%;
  background:var(--orange-light, #e05a2b22);
  color:var(--orange, #e05a2b);
  display:flex;align-items:center;justify-content:center;
  font-size:22px;
}
.contact-info-card h5{ font-weight:700; margin-bottom:6px; font-size:16px; }
.contact-info-card p{ color:#666; font-size:14px; margin:0; line-height:1.6; }

.contact-form-wrap{
  background:#fff;
  border-radius:16px;
  box-shadow:0 10px 34px rgba(0,0,0,.07);
  padding:36px;
  border:1px solid #f2f2f2;
}
.contact-form-wrap h3{ font-weight:800; margin-bottom:6px; }
.contact-form-wrap .sub{ color:#777; margin-bottom:24px; font-size:14px; }
.contact-form-wrap .form-control{
  border-radius:10px;
  border:1px solid #e4e4e4;
  padding:12px 14px;
  font-size:14px;
  height:auto;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.contact-form-wrap .form-control:focus{
  border-color:var(--orange, #e05a2b);
  box-shadow:0 0 0 3px var(--orange-light, #e05a2b22);
}
.contact-form-wrap label{ font-weight:600; font-size:13px; color:#333; margin-bottom:6px; }
.contact-submit-btn{
  background:var(--orange, #e05a2b);
  color:#fff;
  border:none;
  border-radius:10px;
  padding:13px 30px;
  font-weight:600;
  font-size:14px;
  transition:transform .2s ease, background .2s ease;
}
.contact-submit-btn:hover{ transform:translateY(-2px); background:var(--orange-dark,#c24a20); color:#fff; }
.contact-submit-btn:disabled{ opacity:.7; transform:none; cursor:default; }

.contact-social-row{
  display:flex;
  gap:10px;
  margin-top:20px;
}
.contact-social-row a{
  width:42px;height:42px;
  border-radius:50%;
  background:#f4f4f4;
  color:#555;
  display:flex;align-items:center;justify-content:center;
  font-size:16px;
  transition:all .25s ease;
}
.contact-social-row a:hover{
  background:var(--orange, #e05a2b);
  color:#fff;
  transform:translateY(-3px);
}

.contact-map-frame{
  border-radius:14px;
  overflow:hidden;
  border:1px solid #eee;
  box-shadow:0 8px 26px rgba(0,0,0,.06);
}

@media (max-width:768px){
  .contact-info-grid{ grid-template-columns:1fr; }
  .contact-form-wrap{ padding:24px; }
}