/* Overrides y additions sobre el template Volunteer */

/* Lista con check en el hero donation card */
.donation-bullets li {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .3rem 0;
  color: #4a5568;
}
.donation-bullets .icon-check {
  color: var(--bs-primary);
  font-size: 1.1rem;
}

/* Tarjeta de donación */
.bank-card {
  border-top: 4px solid var(--bs-primary);
  box-shadow: 0 10px 40px rgba(0,0,0,.06);
}
.donate-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: rgba(89, 136, 107, .12);
  color: var(--bs-primary);
  font-size: 2rem;
  margin-bottom: .5rem;
}

/* Bloques de contacto */
.contact-block {
  border: 1px solid rgba(0,0,0,.05);
  transition: all .25s ease;
}
.contact-block:hover {
  border-color: var(--bs-primary);
  transform: translateY(-3px);
}
.contact-block [class^="icon-"] {
  font-size: 1.8rem;
  color: var(--bs-primary);
}
.contact-block h3 {
  font-size: 1.1rem;
  margin-bottom: .5rem;
}
.contact-block p,
.contact-block a {
  font-size: .95rem;
  color: #2c2c2c;
  word-break: break-word;
}

/* WhatsApp floating button */
.wa-float {
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  width: 56px;
  height: 56px;
  background: #25d366;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  box-shadow: 0 8px 24px rgba(37,211,102,.4);
  z-index: 1050;
  text-decoration: none;
  transition: transform .2s ease;
}
.wa-float:hover {
  color: #fff;
  transform: scale(1.08);
}

/* Logo del navbar: el template asume marca de 1 palabra y deja col-2
   (≈16%) que no alcanza para "Kolel Arám Zoba". Forzamos nowrap y
   tomamos solo el ancho necesario en cualquier viewport. */
.site-nav .logo {
  white-space: nowrap;
}

/* =====================================================================
 * Mobile / responsive overrides
 * El template Volunteer asume desktop-first y deja algunas tomas raras
 * en mobile (logo apretado en col-2, padding gigante, botones angostos).
 * ===================================================================== */

/* En todos los breakpoints donde el logo no cabe en col-2: liberamos
   las columnas del navbar para que el logo tome lo que necesite. */
@media (max-width: 1199.98px) {
  .site-nav .menu-bg-wrap > .site-navigation > .row > div:first-child {
    flex: 0 0 auto;
    width: auto;
    max-width: none;
  }
  .site-nav .menu-bg-wrap > .site-navigation > .row > div:last-child {
    margin-left: auto;
  }
}

@media (max-width: 991.98px) {
  .site-nav .logo { font-size: 1.15rem; letter-spacing: .01em; }
  .site-nav .call-us { display: none !important; }

  /* Sections — reducir padding vertical generoso del template */
  .section { padding: 60px 0; }

  /* Hero — texto y donation form más compactos en mobile/tablet */
  .hero { padding: 70px 0 60px; }
  .hero .heading { font-size: 2rem; line-height: 1.15; }
  .hero .lead { font-size: 1rem; }
  .hero .donation-form { padding: 1.75rem !important; margin-top: 1.5rem; }

  /* Headings de sección */
  h2.heading { font-size: 1.9rem; line-height: 1.2; }

  /* Tabs (Misión / Valores / Historia) que no se corten */
  .custom-nav-pills {
    flex-wrap: wrap;
    gap: .4rem;
    margin-bottom: 1.5rem !important;
  }
  .custom-nav-pills .nav-link {
    font-size: .9rem;
    padding: .5rem 1rem;
  }

  /* Overlap imgs de Nosotros: full-width en lugar de superposición */
  .overlap-imgs img { width: 100%; margin-bottom: 1rem; }

  /* Banner "Necesitas ayuda" — botones apilados, texto centrado */
  .flip-section.secondary-bg .heading { font-size: 1.6rem; }
  .flip-section.secondary-bg .btn { display: inline-block; margin: .35rem .25rem !important; }
}

@media (max-width: 767.98px) {
  /* === Hero === */
  .hero { padding: 50px 0 40px; }
  .hero .heading { font-size: 1.75rem; }
  .hero .lead { font-size: .98rem; margin-bottom: 1.5rem !important; }
  /* Botones del hero apilados full-width */
  .hero .col-lg-6 > p:last-of-type .btn,
  .hero .col-lg-6 > p:last-of-type > a {
    display: block;
    width: 100%;
    text-align: center;
    margin: 0 0 .75rem !important;
  }
  .hero .donation-form h3 { font-size: 1.25rem; }
  .hero .donation-form p { font-size: .92rem; }
  .hero .donation-form { padding: 1.5rem !important; }

  /* === Headings === */
  h2.heading { font-size: 1.6rem; }
  .heading { font-size: 1.6rem; }

  /* === Sections padding === */
  .section { padding: 50px 0; }

  /* === Misión / Visión cards === */
  .vision, .mission { margin-bottom: 1.5rem; }

  /* === Programs section "Cómo ayudamos" === */
  .flip-section .blob-1 { display: none; }  /* el blob estorba en mobile */
  .card-flip { margin-bottom: 1rem; height: 220px; }

  /* === Causes cards === */
  .causes-item h3 { font-size: 1.15rem; }
  .causes-item img { aspect-ratio: 4/3; object-fit: cover; }

  /* === Counters === */
  .section-counter .counter { margin: 0 0 1.5rem !important; text-align: center; }
  .section-counter .counter i { font-size: 2.2rem; }
  .section-counter .number { font-size: 2.5rem !important; }
  .section-counter .counter span.d-block { font-size: .9rem; }

  /* === Donate section (bank-card) === */
  .bank-card { padding: 2rem !important; }

  /* === Contact cards === */
  .contact-block { padding: 1.25rem !important; }
  .contact-block h3 { font-size: 1rem; }
  .contact-block p, .contact-block a { font-size: .9rem; }

  /* === WhatsApp floating button más chico para no tapar contenido === */
  .wa-float {
    width: 48px;
    height: 48px;
    right: 1rem;
    bottom: 1rem;
    font-size: 1.3rem;
  }

  /* === Footer === */
  .site-footer { padding: 50px 0 !important; }
  .site-footer .widget { margin-bottom: 1.5rem !important; }
  .site-footer .widget h3 { font-size: 1.05rem !important; margin-bottom: 1rem !important; }
}

@media (max-width: 380px) {
  /* iPhone SE / pantallas ultra-angostas */
  .hero .heading { font-size: 1.55rem; }
  h2.heading { font-size: 1.45rem; }
  .site-nav .logo { font-size: 1rem; }
}

/* Evita scroll horizontal por culpa de algún margin negativo */
html, body { overflow-x: hidden; }

/* Footer tweaks — override template (que dejaba links en negro sobre fondo oscuro) */
.site-footer,
.site-footer p,
.site-footer .widget p {
  color: rgba(255, 255, 255, .7);
}
.site-footer address {
  color: rgba(255, 255, 255, .7);
  font-style: normal;
  margin-bottom: 1rem;
}
.site-footer a {
  color: rgba(255, 255, 255, .55);
}
.site-footer a:hover {
  color: #fff;
}