/* Central Cariboo Islamic Center — additions on top of the recoloured theme */

/* ---- Header logo (BCMA logo sits on a white plate so it reads on dark
   mobile-menu / footer backgrounds) ---- */
.logo-box .logo a,
.sticky-header .logo a,
.mobile-menu .nav-logo a,
.footer-one .logo a {
  display: inline-flex;
  align-items: center;
  background: #fff;
  border-radius: 12px;
  padding: 6px 10px;
}
.logo-box .logo img { max-height: 54px; }
.sticky-header .logo img { max-height: 40px; }
.mobile-menu .nav-logo img { max-height: 44px; }
.footer-one .logo img { max-height: 60px; }

/* ---- Header contact widget: no fabricated phone number, address + email ---- */
.contact-widget a { white-space: nowrap; }

/* ---- Board / team initials avatars (no stock photos standing in for real people) ---- */
.team-block-two .avatar-circle {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, var(--theme-color3), var(--theme-color2));
  color: #fff;
  font-family: var(--heading-font-family);
  font-size: 42px;
  letter-spacing: 1px;
}
/* ---- Board / team real photos: theme.css never gives .inner-box .image a
   fixed size (it expected the missing team-mask-bg.png to define the shape),
   so a portrait-cropped source photo rendered as a tall oval/rectangle next
   to perfectly circular photos from square sources — the "inconsistent card
   size" look. Forcing the same 1:1 frame as the initials avatar above makes
   every member photo, whatever its original aspect ratio, crop into the same
   uniform circle. ---- */
.team-block-two .inner-box .image {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
}
.team-block-two .inner-box .image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---- Prayer-times honesty card (real iqamah times are posted on social,
   not invented here) ---- */
.prayer-note {
  background: rgba(20, 78, 151, 0.06);
  border: 1px dashed rgba(20, 78, 151, 0.35);
  border-radius: 16px;
  padding: 24px 28px;
  text-align: center;
  max-width: 780px;
  margin: 40px auto 0;
}
.prayer-note .h6 { margin-bottom: 8px; }
.prayer-note a { color: var(--theme-color3); font-weight: 700; text-decoration: underline; }

/* ---- Empty state (events) ---- */
.empty-state {
  text-align: center;
  padding: 60px 20px;
  border: 1px dashed rgba(20, 78, 151, 0.3);
  border-radius: 20px;
  background: rgba(20, 78, 151, 0.04);
}
.empty-state i { font-size: 40px; color: var(--theme-color3); margin-bottom: 18px; display: inline-block; }

/* ---- Inspiration (Qur'an / Hadith) quote slider — replaces stock testimonials ---- */
.testimonial-block-two .quote-source {
  display: block;
  margin-top: 14px;
  font-weight: 700;
  color: var(--theme-color3);
  font-size: 14px;
  letter-spacing: .3px;
}
.testimonial-block-two blockquote { margin: 0; }

/* ---- Gallery lightbox ---- */
.gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 767px) { .gallery-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } }
.gallery-grid figure {
  margin: 0;
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  position: relative;
  aspect-ratio: 4 / 3;
}
.gallery-grid figure img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; display: block; }
.gallery-grid figure:hover img { transform: scale(1.08); }
.gallery-grid figure::after {
  content: "\f00e";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 22px;
  background: rgba(10, 47, 92, 0);
  opacity: 0;
  transition: all .35s ease;
}
.gallery-grid figure:hover::after { background: rgba(10, 47, 92, 0.45); opacity: 1; }

.lightbox-overlay {
  position: fixed; inset: 0; background: rgba(6, 20, 38, 0.92);
  display: flex; align-items: center; justify-content: center;
  z-index: 999999; opacity: 0; visibility: hidden; transition: opacity .3s ease;
  padding: 30px;
}
.lightbox-overlay.open { opacity: 1; visibility: visible; }
.lightbox-overlay img { max-width: 90vw; max-height: 85vh; border-radius: 10px; box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.lightbox-close {
  position: absolute; top: 24px; right: 28px; color: #fff; font-size: 28px;
  cursor: pointer; width: 46px; height: 46px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.12);
}
.lightbox-close:hover { background: var(--theme-color1); color: #14213A; }

/* ---- Donate page fundraiser progress bar: theme.css only styles
   .donation-progress/.progress-track/.fund-raise/.fund-goal when nested
   under .causes-block .inner-block .content-box (a card widget), but this
   page places the same classes directly in the section — so none of it
   matched and the raised/goal figures rendered as bare unstyled text. Also
   dropping the theme's own hardcoded loadProgress animation (which snaps
   the bar to a fixed 70%) since the width here is a real percentage set
   inline per member. ---- */
.donation-bar { margin: 30px 0 40px; }
.donation-progress { width: 100%; }
.donation-progress .progress-track {
  background: rgba(20, 78, 151, 0.12);
  border-radius: 50px;
  height: 7px;
  position: relative;
  width: 100%;
}
.donation-progress .progress-fill {
  background: var(--theme-color3);
  border-radius: 50px;
  height: 100%;
  position: relative;
  transition: width 0.6s ease;
}
.donation-progress .progress-thumb {
  background: var(--theme-color-white);
  border: 2px solid var(--theme-color1);
  border-radius: 50%;
  box-sizing: border-box;
  height: 11px;
  position: absolute;
  right: -6px;
  top: 50%;
  transform: translateY(-50%);
  width: 11px;
}
.donation-info {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  margin-top: 20px;
}
.donation-info .fund-raise,
.donation-info .fund-goal {
  align-items: center;
  display: flex;
  gap: 11.5px;
}
.donation-info .fund-raise .icon,
.donation-info .fund-goal .icon {
  color: var(--theme-color1);
  font-size: 20px;
}
.donation-info .fund-raise .text,
.donation-info .fund-goal .text {
  color: var(--text-color);
}
.donation-info .fund-raise .text .value,
.donation-info .fund-goal .text .value {
  font-weight: 700;
  color: var(--theme-color3);
}

/* ---- Ways to give cards (replaces fake fundraiser progress bars) ---- */
.give-block .content-box .tag { display: inline-flex; align-items: center; gap: 8px; }
.give-block .content-box .tag i { color: var(--theme-color1); }
.give-note {
  font-size: 13px;
  color: var(--text-color);
  margin-top: 10px;
}

/* ---- Small helper: copy-to-clipboard chip for e-transfer email ---- */
.copy-chip {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid rgba(20,78,151,.25); border-radius: 999px;
  padding: 8px 16px; cursor: pointer; background: #fff; font-weight: 700; color: var(--theme-color3);
  transition: all .25s ease;
}
.copy-chip:hover { background: var(--theme-color3); color: #fff; }
.copy-chip.copied { background: var(--theme-color1); color: #14213A; border-color: var(--theme-color1); }

/* ---- The about-section's decorative ::before oval is a 1905x1327px ellipse
   that pokes 496px above the section's own box — fine on the home page
   where it peeks over the bottom of the tall hero, but the About page reuses
   the exact same about-section directly after the much shorter .page-banner,
   so that fixed -496px overlap swallowed the banner's whole "About Us"
   heading and breadcrumb under a solid white dome. Shrinking the overlap
   only in that context. ---- */
.page-banner + .about-section:before {
  top: -40px !important;
}

/* ---- Page (inner) banner ---- */
.page-banner {
  position: relative;
  padding: 190px 0 100px;
  text-align: center;
  background: linear-gradient(180deg, rgba(10,47,92,.88), rgba(10,47,92,.72)), url(../images/banner-bg.jpg) center/cover;
  color: #fff;
}
.page-banner .h1, .page-banner h1 { color: #fff; margin-bottom: 14px; }
.page-banner .breadcrumb-nav { color: rgba(255,255,255,.8); font-weight: 600; }
.page-banner .breadcrumb-nav a { color: #fff; }
.page-banner .breadcrumb-nav i { margin: 0 8px; font-size: 11px; }

/* ---- FAQ note credit ---- */
.section-eyebrow { color: var(--theme-color3); font-weight: 700; letter-spacing: .5px; }

/* ---- Donation CTA decorative background: this section's .sec-bg/.sec-shape
   markup doesn't match any theme.css nesting (the theme only styles these
   classes under other donation-section variants' own .outer-container), so
   the pattern-texture and skyline-silhouette images rendered inline as huge
   unstyled blocks — the "wall of empty space" below the Building Fund CTA
   on both the home page and the Donate page. Pinning them as an absolute
   background layer instead. ---- */
.donation-section > .sec-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
}
.donation-section > .sec-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.donation-section > .sec-shape {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  pointer-events: none;
}
.donation-section > .sec-shape img {
  width: 100%;
  display: block;
}

/* ---- Hero banner mouse-ripple effect (jQuery Ripples plugin) ---- */
.banner-section .outer-box .sec-bg.banner-ripple canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* ---- Utility ---- */
.text-navy { color: var(--theme-color3) !important; }
.bg-soft { background: rgba(20,78,151,.05); }

/* ---- Critical fix: WOW.js's own visibility:hidden pre-animation state (set by
   animate.css's .wow{visibility:hidden}) can get permanently stuck hidden if its
   scroll-position polling misses a fast/programmatic scroll — leaving whole
   sections invisible. Replaced with a simpler, reliable opacity/transform
   transition driven by IntersectionObserver in custom.js (see initReveal). */
.wow {
  visibility: visible !important;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s ease, transform .6s ease;
}
.wow.wow-in {
  opacity: 1;
  transform: translateY(0);
}

/* ---- Photo frames: several containers relied SOLELY on the missing CSS
   mask-image blobs (see the mask-image fix below) for their rounded/organic
   shape, with no border-radius fallback at all — so once masking was
   disabled they rendered as bare hard-edged rectangles. Restoring a clean
   rounded-rect "frame" so every photo across the site sits inside a shape,
   not a raw edge-to-edge image. Only applies to spots with no matching
   halo/shape asset to build a real mask from (see restore block below). ---- */
.donation-section .image-column .inner-column .image {
  border-radius: 30px;
  overflow: hidden;
  box-shadow: 0 20px 45px rgba(10, 47, 92, 0.18);
}
.service-block .inner-box {
  border-radius: 24px;
}
.time-block {
  border-radius: 20px;
}

/* ---- Critical fix: theme.css references ~25 decorative CSS mask-image blobs
   (images/mask/*.png, images/resource/*.png, images/bg/*.png) that were never
   part of the saved template download. An element masked by a missing image
   renders fully invisible (about images, service/time/team cards, donation
   images, etc.) — so mask-image is disabled globally here. Nothing in this
   rebuild relies on the organic blob-crop look; cards keep their border-radius. */
* {
  mask-image: none !important;
  -webkit-mask-image: none !important;
}

/* ---- Restore the real organic photo frames the theme intended, for the
   handful of spots where we still have the matching silhouette: each of
   these "-bg"/"-shape" PNGs is the exact halo drawn behind the photo, so
   reusing it as the photo's own clip-mask makes the picture fill that same
   lantern/dome outline instead of sitting on top of it as a bare rectangle
   (this was the "pictures overlaying the frame" look in the hero and about
   sections). Must win over the "* { mask-image: none }" reset above purely
   on selector specificity, since both sides carry !important. ---- */
.banner-section .outer-box .banner-image .image,
.about-section .image-column .inner-column .image-box .image,
.about-section .image-column .inner-column .image-box-two .image,
.service-block .inner-box .image-box .image {
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
  /* The halo PNGs are a colour gradient, not flat white — without forcing
     alpha mode the browser masks by luminance, fading the photo out toward
     the darker end of the gradient instead of giving a clean, fully-opaque
     cutout. */
  mask-mode: alpha !important;
  -webkit-mask-mode: alpha !important;
  mask-type: alpha !important;
}
.banner-section .outer-box .banner-image .image {
  /* banner-image-bg.png (used as the halo behind the photo) bakes a soft
     vertical alpha gradient into the glow, so using it directly as a mask
     fades the photo out near the top; banner-image-mask.png is a hard-alpha
     binarised version of the same silhouette generated from it. */
  mask-image: url(../images/banner-image-mask.png) !important;
  -webkit-mask-image: url(../images/banner-image-mask.png) !important;
  mask-repeat: no-repeat !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-size: contain !important;
  -webkit-mask-size: contain !important;
  mask-position: top center !important;
  -webkit-mask-position: top center !important;
}
.about-section .image-column .inner-column .image-box .image {
  mask-image: url(../images/about-image1-shape.png) !important;
  -webkit-mask-image: url(../images/about-image1-shape.png) !important;
  mask-repeat: no-repeat !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-size: contain !important;
  -webkit-mask-size: contain !important;
  mask-position: center !important;
  -webkit-mask-position: center !important;
}
.about-section .image-column .inner-column .image-box-two .image {
  mask-image: url(../images/about-image2-shape.png) !important;
  -webkit-mask-image: url(../images/about-image2-shape.png) !important;
  mask-repeat: no-repeat !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-size: contain !important;
  -webkit-mask-size: contain !important;
  mask-position: center !important;
  -webkit-mask-position: center !important;
}
.service-block .inner-box .image-box .image {
  mask-image: url(../images/service-image-bg.png) !important;
  -webkit-mask-image: url(../images/service-image-bg.png) !important;
  mask-repeat: no-repeat !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-size: contain !important;
  -webkit-mask-size: contain !important;
  mask-position: center !important;
  -webkit-mask-position: center !important;
}