:root{
  --brand-100: #ffeaf5;
  --brand: #ff4db0;
  --brand-600: #b02aa3;
  --brand-800: #7a1f6f;
  --nav-bg: #0b0830;
  --muted: #6c757d;
  --accent: #f7f6fb;
  --text-on-brand: #ffffff;
}

html,body{
  height:100%;
  font-family: 'Poppins', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background: linear-gradient(180deg, #fbf9ff, #f3f0fb);
  margin:0;
  padding:0;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

.top-ribbon{
  background: var(--brand-600);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1055;
  color:#fff;
  text-align:center;
  padding:.35rem 0;
  font-size:.95rem;
}
.top-ribbon a{ text-decoration: underline; color:#fff; font-weight:700; }

main#main{
  padding-top: 1.75rem;
  min-height: calc(100vh - 200px);
}

.site-header{
  padding-top: 0.5rem;
  position: fixed;
  top: 26px;
  width: 100%;
  z-index: 1050;
  background: linear-gradient(180deg, rgba(11,8,48,0.98), rgba(11,8,48,0.95));
  color: var(--text-on-brand);
  border-bottom: 1px solid rgba(255,255,255,0.04);
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}

.logo{ width:auto; height:auto; padding:0; }

.brand-logo{ height:48px; width:auto; display:block; }

.brand-text .h6{ font-weight:700; color:#fff; }
.brand-text small{ color: #D24780; }

.donate-primary{
  background: linear-gradient(180deg, var(--brand), var(--brand-600));
  color:var(--text-on-brand);
  border: 0;
  padding: .5rem .9rem;
  font-weight: 700;
  border-radius: .375rem;
}
.donate-primary:hover, .donate-primary:focus{ background: var(--brand-600); color:#fff; }

.fab-donate{
  background: linear-gradient(180deg, var(--brand), var(--brand-600));
  color: var(--text-on-brand);
  position: fixed;
  right: 1rem;
  bottom: 1.25rem;
  z-index: 1050;
  padding: .6rem .9rem;
  border-radius: 999px;
  font-weight:700;
  text-decoration:none;
  box-shadow: 0 6px 18px rgba(0,0,0,0.12);
}

.navbar-nav .nav-link.active {
  border-bottom: 2px solid var(--brand);
  font-weight:600;
  color: var(--text-on-brand) !important;
}
.navbar-nav .nav-link { color: var(--brand-100); }

.hero{ background: linear-gradient(180deg, rgba(200,16,46,0.06), rgba(200,16,46,0.02)); border-radius: .5rem; padding: 2rem; margin-top: 1rem; }

.hero-carousel .carousel-item {
  height: 58vh;
  min-height: 320px;
  max-height: 760px;
  overflow: hidden;
}
.hero-carousel .carousel-item img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  filter: contrast(0.98) brightness(0.95);
}
.hero-carousel .carousel-caption {
  background: linear-gradient(90deg, rgba(11,8,48,0.78), rgba(176,42,163,0.06));
  padding: 1rem;
  border-radius: .5rem;
  max-width: 60%;
}
.hero-carousel .carousel-caption h2,
.hero-carousel .carousel-caption p { color: #fff; text-shadow: 0 2px 6px rgba(0,0,0,0.6); }

@media (max-width: 575px) {
  .hero-carousel .carousel-caption {
    max-width: 95%;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
  }
}

.hero-carousel { margin-top: 1rem; }

.card-card{ margin-bottom: 1rem; border-radius: .65rem; }

.site-footer{
  position:relative;
  bottom:0;
  width:100%;
  background: linear-gradient(180deg, rgba(11,8,48,0.98), rgba(11,8,48,0.95));
  color: rgba(255,255,255,0.92);
}
.site-footer a{ color: #e9ecef; }

@media (max-width: 767px){
  .brand-text small{ display:none; }
  main#main{ padding-top: 1rem; }
  .navbar-nav .nav-link{ padding-left: .5rem; padding-right: .5rem; }
}

:focus{ outline: 3px solid rgba(200,16,46,0.12); outline-offset: 2px; }

.navbar-toggler{ background-color: var(--brand-100) !important; }

/* Global card light theme and readability */
.card-card,
.card.card-card {
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: .65rem;
  color: #222;
  box-shadow: 0 3px 12px rgba(0,0,0,0.08);
  padding: 1rem;
}
.card-card h5,
.card-card h4,
.card-card h3 {
  color: #1d1d1d;
  font-weight: 600;
}
.card-card p,
.card-card .small {
  color: #444;
}

.btn-brand-outline {
  color: var(--brand) !important;
  border: 2px solid rgba(255, 77, 176, 0.55) !important;
  background: transparent !important;
  font-weight: 600;
  border-radius: .45rem;
  padding: .45rem .85rem;
  transition: all 0.15s ease-in-out;
}
.btn-brand-outline:hover,
.btn-brand-outline:focus {
  background: var(--brand) !important;
  color: #fff !important;
  border-color: var(--brand) !important;
  box-shadow: 0 4px 18px rgba(255, 77, 176, 0.35);
}

.btn-primary,
.btn-brand,
button.btn-primary {
  background: linear-gradient(180deg, var(--brand), var(--brand-600)) !important;
  color: #fff !important;
  border: 0 !important;
  font-weight: 600;
  padding: .5rem 1rem;
  border-radius: .45rem;
  box-shadow: 0 4px 12px rgba(255, 77, 176, 0.35);
  transition: all 0.15s ease-in-out;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-brand:hover,
.btn-brand:focus {
  background: var(--brand-600) !important;
  color: #fff !important;
  box-shadow: 0 4px 16px rgba(255, 77, 176, 0.45);
}

.btn-sm {
  padding: .35rem .65rem;
  border-radius: .40rem;
  font-size: 0.85rem;
}

.btn-outline-light {
  color: #fff !important;
  border-color: rgba(255,255,255,0.18) !important;
  background: transparent !important;
}
.btn-outline-light:hover,
.btn-outline-light:focus {
  background: rgba(255,255,255,0.1) !important;
}

a.btn { text-decoration: none !important; }

.card-card { border-radius: .65rem; }

/* home page planned initiatives */
.card-card p.small { color: #444; }
.col-lg-4 .card { background: #ffffff; }

.card-card ul { padding-left: 1rem; }
.card-card ul li { margin-bottom: .35rem; color: #333; }

/* homepage carousel caption tweak */
.hero-carousel .carousel-caption { max-width: 70%; }

/* improve text visibility */
.card-card {
  background: #ffffff;
  color: #222;
}
.card-card h5,
.card-card h4,
.card-card h6 {
  color: #111;
  font-weight: 700;
  text-shadow: none;
}
.card-card p.small,
.card-card ul li,
.card-card .small,
.card-card .lead {
  color: #444;
  line-height: 1.35;
}
.card-card a,
.card-card .btn-outline-light,
.card-card a.small {
  color: #111;
}
.btn-outline-light {
  color: #111;
  border-color: rgba(0,0,0,0.12);
}
.btn-outline-light:hover {
  background: rgba(0,0,0,0.03);
  border-color: rgba(0,0,0,0.18);
}

/* Carousel caption stronger */
.hero-carousel .carousel-caption {
  background: linear-gradient(90deg, rgba(6,4,30,0.78), rgba(6,4,30,0.34));
  padding: 1rem 1.1rem;
  border-radius: 0.5rem;
}
.hero-carousel .carousel-caption h2,
.hero-carousel .carousel-caption p {
  color: #ffffff !important;
  text-shadow: 0 2px 6px rgba(0,0,0,0.6);
}

/* content box */
.content-box,
.content-box p,
.content-box li,
.content-box small {
  color: #222;
}

/* countdown */
.countdown .cd {
  background: rgba(0,0,0,0.03);
  border: 1px solid rgba(0,0,0,0.04);
}
.countdown .value { color: #111; font-weight:700; }
.countdown .label { color: #444; }

.social a { color: #111 !important; }
.note, footer { color: #444; }

@media (max-width: 480px) {
  .hero-carousel .carousel-caption { background: rgba(6,4,30,0.78); max-width: 92%; left:50%; transform:translateX(-50%); }
  .card-card { background: #fff; }
}

a:focus, button:focus, .btn:focus {
  outline: 3px solid rgba(176,42,163,0.14);
  outline-offset: 3px;
}

/* Recent Field Work & gallery */
.work-card {
  border-radius: .6rem;
  overflow: hidden;
  background: #ffffff;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease;
  display:flex;
  flex-direction:column;
}
.work-card img { width:100%; height:220px; object-fit:cover; display:block; }
.work-card figcaption { padding: .55rem .6rem; color: #222; background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(255,255,255,0.95)); }
.work-card:hover { transform: translateY(-6px); box-shadow: 0 14px 40px rgba(6,4,30,0.08); }

.prog-thumb {
  border-radius: .35rem;
  object-fit: cover;
  width:84px;
  height: 60px;
  flex-shrink:0;
  box-shadow: 0 3px 10px rgba(0,0,0,0.12);
}

/* gallery grid & items */
.gallery-grid {
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .5rem;
}
.gallery-item img { width:100%; height:220px; object-fit:cover; display:block; border-radius:.5rem; transition: transform .18s ease; }
.gallery-item:hover img { transform: scale(1.03); }

/* lightbox */
.lightbox {
  display:none;
  position:fixed;
  inset:0;
  background: rgba(0,0,0,0.85);
  align-items:center;
  justify-content:center;
  z-index:2000;
  padding:1.25rem;
}
.lightbox .lb-img { max-width:calc(100% - 120px); max-height:calc(100% - 120px); border-radius:6px; box-shadow: 0 18px 60px rgba(0,0,0,0.6); }
.lightbox .lb-caption { color:#fff; margin-top:.6rem; text-align:center; font-size:.95rem; opacity:.95; }
.lb-close, .lb-prev, .lb-next {
  position: absolute;
  background: transparent;
  border:0;
  color:#fff;
  font-size:36px;
  cursor:pointer;
  padding:.4rem .6rem;
}
.lb-close { right: 20px; top: 18px; font-size:42px; }
.lb-prev { left: 20px; top: 50%; transform:translateY(-50%); }
.lb-next { right: 20px; top: 50%; transform:translateY(-50%); }

/* Lightbox metadata layout */
.lb-inner { display:flex; gap:1rem; align-items:center; max-width:1100px; width:100%; }
.lb-img { max-width:66%; max-height:80vh; object-fit:contain; border-radius:6px; }
.lb-meta { color:#fff; max-width:34%; font-size:0.95rem; line-height:1.35; text-align:left; }
.lb-meta .lb-title { font-weight:700; font-size:1.05rem; margin-bottom:.45rem; }
.lb-meta .lb-location, .lb-meta .lb-date { opacity:0.92; margin-bottom:.35rem; }
.lb-meta .lb-caption { margin-top:.6rem; color: #e9e0fb; opacity:0.95; }
@media (max-width:820px) {
  .lb-inner { flex-direction:column; }
  .lb-img { max-width:100%; }
  .lb-meta { width:100%; max-width:none; text-align:center; }
}

/* CTA */
.cta-join { margin-top: 1.6rem; border-radius: .75rem; overflow:hidden; }
.cta-join .cta-inner {
  background-image: url('assets/events/event-2025-11-14-6.jpg');
  background-size: cover;
  background-position: center;
  padding: 2.2rem 1rem;
  border-radius: .75rem;
  color:#fff;
  text-align:center;
  position:relative;
}
.cta-join .cta-inner::before {
  content: ""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(11,8,48,0.62), rgba(176,42,163,0.12)); z-index:0;
}
.cta-join .cta-inner > * { position:relative; z-index:1; }
.cta-join h2 { margin-bottom:.35rem; font-size:1.3rem; }

/* responsive gallery */
@media (max-width: 760px) {
  .gallery-grid { grid-template-columns: repeat(2,1fr); }
  .work-card img, .gallery-item img { height: 160px; }
}
@media (max-width: 420px) {
  .gallery-grid { grid-template-columns: 1fr; }
  .prog-thumb { display:none; }
}

/* About page hero */
.about-hero {
  background-image: url('../img/events/2025-11-14/event-2025-11-14 (8).jpeg');;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 3rem 1rem;
  border-radius: .75rem;
  margin-bottom: 1.5rem;
  color: #fff;
  position: relative;
  overflow: hidden;
}
.about-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(11,8,48,0.62);
  backdrop-filter: blur(1px);
}
.about-hero h1,
.about-hero .lead {
  position: relative;
  z-index: 2;
  color: #ffffff;
  text-shadow: 0 2px 6px rgba(0,0,0,0.55);
}
@media (max-width: 576px) {
  .about-hero { padding: 2rem 1rem; }
  .about-hero h1 { font-size: 1.25rem; }
  .about-hero .lead { font-size: 0.88rem; }
}
.about-logo-wrap {
  position: relative;
  z-index: 3;
}

.about-logo {
  max-width: 140px;
  width: 40%;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.35));
  border-radius: 6px;
  margin-top: .5rem;
}

/* Improve figcaption visibility */
.work-card,
.gallery-item {
  position: relative;
  overflow: hidden;
}
.work-card figcaption,
.gallery-item figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: .6rem .7rem;
  background: linear-gradient(180deg, rgba(6,4,30,0.0), rgba(6,4,30,0.72));
  color: #ffffff;
  font-size: .9rem;
  line-height: 1.2;
  z-index: 3;
  text-shadow: 0 2px 6px rgba(0,0,0,0.6);
  display: block;
}
.work-card figcaption small,
.gallery-item figcaption small {
  color: rgba(255,255,255,0.92);
  font-size: .82rem;
  display:block;
}
.work-card figcaption strong,
.gallery-item figcaption strong {
  display:block;
  font-weight:700;
  color:#fff;
  margin-bottom:.15rem;
}
@media (max-width: 576px) {
  .work-card figcaption,
  .gallery-item figcaption { padding: .45rem .5rem; font-size:.86rem; background: linear-gradient(180deg, rgba(6,4,30,0.05), rgba(6,4,30,0.78)); }
}
.gallery-item .caption,
.work-card .caption {
  position:absolute; left:0; right:0; bottom:0; padding:.6rem .7rem;
  background: linear-gradient(180deg, rgba(6,4,30,0.0), rgba(6,4,30,0.72));
  color:#fff; z-index:3; text-shadow:0 2px 6px rgba(0,0,0,0.6);
}

/* Donate page base */
.donate-simple .qr-img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-width: 260px;
  width: 60%;
  height: auto;
  object-fit: contain;
  border-radius: 6px;
  box-shadow: 0 8px 26px rgba(6,4,30,0.06);
}
.donate-simple .card-card { padding: 1.25rem; }

/* Make three cards equal height and light themed using CSS Grid on larger screens */
@media (min-width: 768px) {
  .donate-simple .row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
    align-items: stretch;
  }
  .donate-simple .row > [class*="col-"] { display: block; padding-bottom: 0; }
  .donate-simple .card-card,
  .donate-simple .card {
    background: #ffffff;
    color: #1d1d1d;
    border: 1px solid rgba(0,0,0,0.08);
    box-shadow: 0 8px 28px rgba(6,4,30,0.06);
    border-radius: .65rem;
    padding: 1.25rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    overflow: hidden;
  }
  .donate-simple .col-md-4:first-child .card-card,
  .donate-simple .col-md-4:first-child .card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: .6rem;
    padding: 1.6rem;
  }
  .donate-simple .col-md-4:not(:first-child) .card-card,
  .donate-simple .col-md-4:not(:first-child) .card {
    align-items: stretch;
    justify-content: flex-start;
    text-align: left;
  }
}

/* Mobile donate fallback */
@media (max-width: 767px) {
  .donate-simple .row { display: block; }
  .donate-simple .row > [class*="col-"] { display: block; }
  .donate-simple .card-card,
  .donate-simple .card {
    background: #ffffff;
    color: #1d1d1d;
    border: 1px solid rgba(0,0,0,0.08);
    box-shadow: 0 8px 28px rgba(6,4,30,0.06);
    border-radius: .65rem;
    padding: 1rem;
    height: auto;
  }
  .donate-simple .col-md-4:first-child .card-card { justify-content: center; align-items: center; }
  .donate-simple .qr-img { width: 45%; max-width: 180px; }
}

/* Donate actions */
.donate-simple .col-md-4:first-child .btn { margin-top: 1rem; align-self: center; }
.donate-simple .card-card p,
.donate-simple .card-card .small { margin-bottom: .6rem; word-break: break-word; }

/* final responsive touches */
@media (max-width: 420px) {
  .gallery-grid { grid-template-columns: 1fr; }
  .work-card img, .gallery-item img { height: 140px; }
  .prog-thumb { display:none; }
}
/* ===== Donate page: force full-width columns + true equal-height cards ===== */

/* Make the donate container comfortably wide (adjust max-width if needed) */
.donate-simple > .container,
.donate-simple .container {
  max-width: 1200px !important;
  width: 100% !important;
}

/* Strong grid with equal rows — prevents narrow columns and ensures equal heights */
@media (min-width: 768px) {
  .donate-simple .row {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important; /* ensures each column can grow/shrink */
    grid-auto-rows: 1fr !important; /* makes every grid row equal-height */
    gap: 1.25rem !important;
    align-items: stretch !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Ensure bootstrap column wrappers don't constrain width */
  .donate-simple .row > [class*="col-"] {
    display: block !important;
    width: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin: 0 !important;
  }

  /* Force card to fill the whole grid cell */
  .donate-simple .card-card,
  .donate-simple .card {
    height: 100% !important;
    min-height: 340px !important; /* tweak up/down if you want taller cards */
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    overflow: hidden !important;
  }

  /* Keep QR card content centered vertically */
  .donate-simple .col-md-4:first-child .card-card,
  .donate-simple .col-md-4:first-child .card {
    justify-content: center !important;
    align-items: center !important;
  }

  /* Prevent long paragraphs from stretching a single column */
  .donate-simple .card-card p,
  .donate-simple .card-card .small {
    margin-bottom: .6rem !important;
    overflow-wrap: break-word !important;
  }
}

/* Mobile fallback: stacked, full width */
@media (max-width: 767px) {
  .donate-simple .row { display:block !important; }
  .donate-simple .row > [class*="col-"] { display:block !important; }
  .donate-simple .card-card { height: auto !important; min-height: 0 !important; }
}

/* Ensure images never push layout wider */
.donate-simple img { max-width: 100% !important; height: auto !important; display: block; }

/* Slight spacing safety: keep whole donate area horizontally centered in page */
.donate-simple { padding-left: 1rem; padding-right: 1rem; }
@media (min-width: 1200px) {
  .donate-simple { padding-left: 2rem; padding-right: 2rem; }
}