:root { --stripe-bg: rgba(255, 193, 7, 0.10); }
.logo{ height: 56px; width: 56px; }
@media (min-width: 992px){ .logo{ height: 64px; width: 64px; } }
#myBtn {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 30px;
    z-index: 99;
    font-size: 18px;
    border: none;
    outline: none;
    color: white;
    cursor: pointer;
    padding: 15px;
    border-radius: 4px;
  }
  
  #myBtn:hover {
    background-color: #555;
  }

/* Global spacing tweaks to reduce large gaps site-wide */
section.py-5 { padding-top: 2rem !important; padding-bottom: 2rem !important; }
.my-5 { margin-top: 2rem !important; margin-bottom: 2rem !important; }
/* Compact common Bootstrap utilities */
.px-5 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }
.gx-5 { --bs-gutter-x: 1.5rem !important; }
.mb-5 { margin-bottom: 2rem !important; }
.mt-5 { margin-top: 2rem !important; }

/* Make room if navbar is sticky */
header.pt-5 {
  padding-top: 3rem !important;
}

/* Utility: compact sections without changing HTML classes everywhere */
.section-compact {
  padding-top: 1.5rem !important;
  padding-bottom: 1.5rem !important;
}
/* Reduce space before footer on last section */
main > section:last-child { padding-bottom: .5rem !important; }

/* Latest media: Facebook embed card tweaks */
.fb-card .card-body { padding: 1rem !important; }
.fb-card .ratio { min-height: 400px; height: 100%; }
/* Remove Bootstrap ratio pseudo padding so height is exact */
.fb-card .ratio::before { display: none !important; content: none !important; }
.fb-card iframe { width: 100% !important; height: 100% !important; }
.fb-card .card-body { position: relative; z-index: 2; }
.fb-card .ratio { position: relative; z-index: 1; margin-bottom: 0; }
/* Mask small ad gutter areas that Facebook may inject */
.fb-card .fb-clean-mask { position: absolute; inset: 0 0 0 auto; pointer-events: none; }
.fb-card .fb-clean-mask::before,
.fb-card .fb-clean-mask::after {
  content: ""; position: absolute; pointer-events: none;
}
/* Right edge mask */
.fb-card .fb-clean-mask::before {
  top: 0; right: 0; bottom: 0; width: 10px;
  background: linear-gradient(to right, rgba(255,255,255,0), #fff);
}
/* Bottom edge mask */
.fb-card .fb-clean-mask::after {
  left: 0; right: 0; bottom: 0; height: 10px;
  background: linear-gradient(to bottom, rgba(255,255,255,0), #fff);
}

/* Slightly stronger mask on lg+ screens */
@media (min-width: 992px){
  .fb-card .fb-clean-mask::before { width: 12px; }
  .fb-card .fb-clean-mask::after  { height: 12px; }
}

/* Removed click-through overlay to preserve scrolling */

/* Upcoming Events list styling */
/* Events list calendar icon bullets */
.events-list li { position: relative; padding-left: 1.5rem; }
.events-list .fw-semibold { margin-bottom: .125rem; }
.events-list li::before {
  content: ""; position: absolute; left: 0; top: .2rem;
  width: 1rem; height: 1rem;
  background-repeat: no-repeat; background-size: contain; background-position: center;
  /* Inline SVG calendar icon using Bootstrap colors */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2' fill='%23ffffff' stroke='%236c757d' stroke-width='1.5'/%3E%3Cline x1='16' y1='2' x2='16' y2='6' stroke='%236c757d' stroke-width='1.5'/%3E%3Cline x1='8' y1='2' x2='8' y2='6' stroke='%236c757d' stroke-width='1.5'/%3E%3Cline x1='3' y1='10' x2='21' y2='10' stroke='%236c757d' stroke-width='1.5'/%3E%3Crect x='7' y='13' width='5' height='5' rx='1' fill='%23ffc107'/%3E%3C/svg%3E");
}
/* Highlight the closest upcoming event */
.events-list li.is-next {
  background-color: rgba(255, 193, 7, .22);
  border-left: 3px solid #e0a100;
  border-radius: .25rem;
  padding: .25rem .5rem .25rem 1.5rem;
}
/* Badge spacing for highlighted "Next" */
.events-list .next-badge { margin-left: .4rem; font-weight: 600; }
.events-list li[data-next-exclude="true"] .text-muted { color: #b02a37 !important; }

/* Subtle yellow background matching Next-event highlight */
.bg-next { background-color: rgba(255, 193, 7, .18) !important; }

/* Left border tint matching Next-event highlight */
.border-start-next { border-left: 3px solid #e0a100 !important; }

/* Facebook card column borders */
.fb-col-outer { border: 1px solid var(--bs-warning) !important; }
.fb-col-middle { border: 1px solid var(--bs-primary) !important; }

/* Utility: prevent line wrapping where required */
.no-wrap { white-space: nowrap; }

/* Subtle motion for the featured event while it is in "Coming Soon" state */
.featured-coming-soon-cta {
  animation: featuredPulse 3.2s ease-in-out infinite;
}
.featured-coming-soon-badge {
  animation: featuredGlow 3.2s ease-in-out infinite;
}

@keyframes featuredPulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 0 rgba(13, 202, 240, 0);
  }
  50% {
    transform: scale(1.03);
    box-shadow: 0 0 0.85rem rgba(13, 202, 240, 0.28);
  }
}

@keyframes featuredGlow {
  0%, 100% {
    transform: translateY(0);
    box-shadow: 0 0 0 rgba(13, 202, 240, 0);
  }
  50% {
    transform: translateY(-1px);
    box-shadow: 0 0 0.7rem rgba(13, 202, 240, 0.3);
  }
}

@media (prefers-reduced-motion: reduce) {
  .featured-coming-soon-cta,
  .featured-coming-soon-badge {
    animation: none;
  }
}

/* No overlay needed now; middle column presents events */

/* Media photo grid spacing */
.media-grid .card-body { padding: .5rem .75rem; }
.media-grid .small { font-size: .8rem; color: #6c757d; }

/* Fixed-top navbar offset (JS sets --nav-height precisely to avoid 1px gaps) */
body { padding-top: var(--nav-height, 84px); }
@media (max-width: 991.98px) { body { padding-top: var(--nav-height, 72px); } }

/* Consistent media card sizes */
.media-card .card-img-top,
.gallery-card .card-img-top {
  width: 100%;
  height: 180px;
  object-fit: cover;
}
/* Newest badge overlay on gallery items */
.gallery-card { position: relative; }
.badge-newest {
  position: absolute;
  top: .5rem;
  left: .5rem;
  background: #ffc107;
  color: #212529;
  font-weight: 600;
  padding: .15rem .4rem;
  font-size: .75rem;
  border-radius: .2rem;
  box-shadow: 0 .125rem .25rem rgba(0,0,0,.15);
  z-index: 2;
  pointer-events: none;
}
/* Corner tag for videos */
.badge-video {
  position: absolute;
  top: .5rem;
  right: .5rem;
  background: rgba(33, 37, 41, .8);
  color: #fff;
  font-weight: 600;
  padding: .15rem .4rem;
  font-size: .7rem;
  border-radius: .2rem;
  box-shadow: 0 .125rem .25rem rgba(0,0,0,.2);
  z-index: 2;
  pointer-events: none;
}
/* Videos in gallery use same fixed height as images for uniformity */
.gallery-card video { width: 100%; height: 180px; object-fit: cover; }
@media (min-width: 768px) {
  .media-card .card-img-top,
  .gallery-card .card-img-top { height: 200px; }
  .gallery-card video { height: 200px; }
}
@media (min-width: 1200px) {
  .media-card .card-img-top,
  .gallery-card .card-img-top { height: 220px; }
  .gallery-card video { height: 220px; }
}

/* Profile cards (About page) */
.profile-card { display: flex; flex-direction: column; height: 420px; }
.profile-card .card-img-top { width: 100%; height: 240px; object-fit: cover; object-position: center top; display: block; }
.profile-card .card-body { flex: 1 1 auto; padding: .5rem .75rem; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 140px; }
.profile-card h5 { margin-bottom: .2rem; font-weight: 700; }
.profile-card .card-body .text-muted { margin-bottom: 0; }
@media (min-width: 768px){
  .profile-card { height: 460px; }
  .profile-card .card-img-top { height: 260px; }
  .profile-card .card-body { height: 150px; }
}
@media (min-width: 1200px){
  .profile-card { height: 500px; }
  .profile-card .card-img-top { height: 280px; }
  .profile-card .card-body { height: 160px; }
}

/* Safer default for any card image */
.card-img-top { object-fit: cover; }

/* Recent 10 grid: 2 rows x 5 on large screens */
.recent-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
@media (min-width: 576px){ .recent-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 768px){ .recent-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1200px){ .recent-grid { grid-template-columns: repeat(5, 1fr); } }
.recent-card img { width: 100%; height: 220px; object-fit: cover; border-radius: .25rem; }
@media (min-width: 768px){ .recent-card img { height: 240px; } }
.recent-card video { width: 100%; height: 220px; object-fit: cover; border-radius: .25rem; background: #000; }
@media (min-width: 768px){ .recent-card video { height: 240px; } }
.recent-card { position: relative; }

/* Trim bottom space before footer */
main > section:last-child .container.my-5 { margin-bottom: 0 !important; }
footer.bg-dark { margin-top: 0 !important; }

/* Modal media sizing: uniform view */
#mediaModal .modal-dialog { max-width: 1000px; }
#mediaModal .modal-content { background-color: #000; }
#mediaModal .modal-body { padding: 0; display: flex; align-items: center; justify-content: center; }
#mediaModalImg, #mediaModalVideo { width: 100%; height: 70vh; object-fit: contain; background: #000; }

/* Zoom cursor for clickable media */
a.media-zoom img, a.recent-media img { cursor: zoom-in; }

/* Prose page typography */
.prose { max-width: 840px; margin: 0 auto; }
.prose h1 { margin-top: 0; }
.prose h1, .prose h2, .prose h3 { font-weight: 700; }
.prose h2 { margin-top: 1.25rem; margin-bottom: .75rem; }
.prose p { color: #6c757d; line-height: 1.75; margin-bottom: .75rem; }

/* Wide prose option for pages needing full container width */
.prose-wide { max-width: 100%; margin: 0 auto; }
.prose-wide h1, .prose-wide h2, .prose-wide h3 { font-weight: 700; }
.prose-wide h2 { margin-top: 1.25rem; margin-bottom: .75rem; }
.prose-wide p { color: #6c757d; line-height: 1.75; margin-bottom: .75rem; }

/* Donor Wall layout */
.donor-wall { max-width: 1150px; margin-left: 0; margin-right: auto; }
@media (min-width: 1200px){ .donor-wall { max-width: 1220px; } }
.donor-wall .donor-item { padding: .35rem .5rem; word-break: break-word; border-radius: .25rem; }

/* Striped rows for Donor Wall */
/* Mobile (single column): alternate every item */
@media (max-width: 767.98px){
  .donor-wall > [class*="col-"]:nth-child(odd) .donor-item { background-color: var(--stripe-bg); }
}
/* md+ (three columns): stripe per visual row (groups of 3) */
@media (min-width: 768px){
  .donor-wall > [class*="col-"]:nth-child(6n+1) .donor-item,
  .donor-wall > [class*="col-"]:nth-child(6n+2) .donor-item,
  .donor-wall > [class*="col-"]:nth-child(6n+3) .donor-item { background-color: var(--stripe-bg); }
}

/* Global text justification for readable body copy */
p { text-align: justify; text-justify: inter-word; }

/* Preserve explicit Bootstrap alignment utilities at all breakpoints */
.text-start p, .text-end p, .text-center p,
.text-sm-start p, .text-sm-end p, .text-sm-center p,
.text-md-start p, .text-md-end p, .text-md-center p,
.text-lg-start p, .text-lg-end p, .text-lg-center p,
.text-xl-start p, .text-xl-end p, .text-xl-center p,
.text-xxl-start p, .text-xxl-end p, .text-xxl-center p { text-align: inherit; }

/* Navbar CTA button */
.nav-cta { font-weight: 600; padding: .5rem 1rem; }
.nav-cta:hover { background-color: #e0a100; border-color: #e0a100; }
.navbar .nav-cta { line-height: 1.25; }

/* Navbar brand + links sizing to keep single-line */
.navbar-brand { flex-shrink: 1; }
.navbar-brand .brand-lines { font-size: 1rem; max-width: 420px; }
@media (min-width: 1200px){ .navbar-brand .brand-lines { font-size: 1.05rem; } }
.navbar-nav { white-space: nowrap; }
.navbar-nav .nav-link { font-size: .95rem; padding-left: .5rem; padding-right: .5rem; text-transform: uppercase; letter-spacing: .02em; }
.dropdown-menu .dropdown-item { text-transform: uppercase; letter-spacing: .02em; font-size: .95rem; }

/* QR images: normalize size and add subtle framing */
.qr-box {
  width: 220px;
  height: 220px;
  margin: 0 auto;
  border: 1px solid var(--bs-warning);
  border-radius: .25rem;
  box-shadow: 0 .125rem .25rem rgba(0,0,0,.075);
  background-color: #fff;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.qr-box img { width: 100%; height: 100%; object-fit: contain; }