/* Melissa Foundation additions: card hover interactions */
.lift-hover {
  transition: transform 0.5s, box-shadow 0.5s;
}
.lift-hover:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 40px rgba(61, 32, 63, 0.14) !important;
}
.lift-hover img {
  transition: transform 0.6s;
}

/* Keep the Donate CTA visible from 992px up.
   The theme hides .header-part-right below 1200px, but the slide-out menu
   (which carries its own Donate button) only takes over below 992px. */
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .site-header.box-header2 .main-bar .container .header-part-right {
    display: flex;
  }
  .site-header.box-header2 .main-bar .container .header-part-right .btn {
    padding-left: 22px;
    padding-right: 22px;
  }
}


/* Contact form */
.form-message {
  display: none;
  padding: 14px 18px;
  border-radius: var(--radius-sm);
  margin-bottom: 22px;
  font-weight: 500;
  line-height: 1.5;
}
.form-message.is-success,
.form-message.is-error,
.form-message.is-info {
  display: block;
}
.form-message.is-success {
  background: #E8F5E9;
  color: #1B5E20;
}
.form-message.is-error {
  background: #FDECEF;
  color: #9B1B47;
}
.form-message.is-info {
  background: var(--bs-primary-bg-subtle);
  color: var(--bs-secondary);
}
.form-message a {
  color: var(--bs-primary);
  text-decoration: underline;
}
#contactForm .form-control {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  height: auto;
}
#contactForm .form-control:focus {
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), 0.12);
}
#contactForm .form-label {
  margin-bottom: 6px;
  color: var(--bs-secondary);
}

/* Donation QR codes */
.qr-card {
  text-align: center;
  height: 100%;
}
.qr-card img {
  width: 100%;
  max-width: 230px;
  height: auto;
  margin: 0 auto 18px;
  display: block;
  background: #fff;
  border-radius: var(--radius-sm);
}


/* ---------------------------------------------------------------
   Footer layout
   The theme stretches .widget_about to full height and spreads its
   children with space-between, which left the logo stranded at the top
   with large gaps below it. Lay it out normally instead, align all three
   columns to the top, and give the legal text its own full-width bar.
   --------------------------------------------------------------- */
.site-footer.style-1 .widget_about {
  display: block;
  height: auto;
  padding-bottom: 0;
}
.site-footer.style-1 .footer-top {
  padding: 24px 10px 0;
}
.site-footer.style-1 .footer-top > .footer-inner-wraper {
  padding: 48px 20px 26px;
}
footer .footer-logo {
  margin-bottom: 20px;
  line-height: 0;
}
footer .footer-logo a {
  display: inline-block;
  line-height: 0;
}
footer .footer-logo img {
  max-width: 190px;
}
.footer-about-text {
  max-width: 400px;
  margin-bottom: 18px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--bs-secondary);
}
footer .footer-title {
  margin-bottom: 16px;
}
.site-footer.style-1 .widget_services ul li {
  padding: 0.3rem 0;
}

/* Instagram */
.footer-ig {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-weight: 500;
  color: var(--bs-secondary);
  transition: color 0.3s;
}
.footer-ig i {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #F2ECEF;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  transition: all 0.3s;
}
.footer-ig:hover {
  color: var(--bs-primary);
}
.footer-ig:hover i {
  background: var(--bs-primary);
  color: #fff;
}

/* Legal bar */
.footer-bottom-bar {
  border-top: 1px solid #ECE6E9;
  margin-top: 8px;
  padding-top: 24px;
  text-align: center;
}
.footer-bottom-bar p {
  color: var(--bs-secondary);
  font-size: 14px;
  line-height: 1.6;
}
.footer-bottom-bar .footer-disclaimer {
  font-size: 13px;
  opacity: 0.7;
  max-width: 760px;
  margin: 8px auto 0;
}

/* Sister sites */
.footer-bottom-bar .footer-family {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 18px;
  margin: 0 auto 14px;
  max-width: 900px;
}
.footer-bottom-bar .footer-family span {
  font-weight: 600;
  color: var(--bs-secondary);
}
.footer-bottom-bar .footer-family a {
  color: var(--bs-secondary);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.footer-bottom-bar .footer-family a:hover {
  color: var(--bs-primary);
}

@media only screen and (max-width: 991px) {
  .site-footer.style-1 .footer-top > .footer-inner-wraper {
    padding: 40px 20px 24px;
  }
  .footer-about-text {
    max-width: none;
  }
}

/* ── Accessibility: brand pink, darkened just enough for WCAG AA ───────────
   #DB479D on white / #FAF7F8 was 3.9:1 / 3.65:1 (buttons, sub-titles, links).
   #C7338D is 4.9:1 on white and 4.6:1 on the light background. */
html[data-theme-color=skin-5] {
  --bs-primary: #C7338D;
  --bs-primary-rgb: 199, 51, 141;
  --bs-primary-btn-hover-bg: #A92B78;
  --bs-primary-btn-hover-border-color: #A92B78;
}

/* ── Images ────────────────────────────────────────────────────────────────
   <picture> wrappers (WebP + fallback) must not change layout, and images with
   width/height attributes keep their aspect ratio unless a rule sets a height. */
picture { display: contents; }
:where(img[width][height]) { height: auto; }

/* Inline text links need more than colour to stand out from the dark body text */
p.text-secondary a.text-primary { text-decoration: underline; text-underline-offset: 2px; }