/* =========================================================
   SITE ADDITIONS — Caritas of Hope public site
   New, standalone file. Does NOT edit public.css.
   Covers: cookie consent banner, homepage "Active Campaigns"
   teaser, homepage partner logos strip, FAQ accordion page,
   and the One-time/Monthly toggle on the Donate page.
   ========================================================= */

/* ---------- Cookie consent banner (footer.php) ---------- */
.cookie-consent-banner {
  position: fixed;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  z-index: 999;
  background: var(--D, #1F2937);
  color: #fff;
  border-radius: 14px;
  padding: 1rem 1.25rem;
  display: none;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  box-shadow: 0 8px 30px rgba(0,0,0,0.25);
  max-width: 720px;
  margin: 0 auto;
}
.cookie-consent-banner p {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.5;
  flex: 1 1 260px;
}
.cookie-consent-banner p a { color: var(--ML, #F5A8E5); text-decoration: underline; }
.cookie-consent-banner .btn { flex-shrink: 0; }
@media (max-width: 480px) {
  .cookie-consent-banner { left: 0.6rem; right: 0.6rem; bottom: 0.6rem; padding: 0.9rem 1rem; }
}

/* ---------- Homepage Active Campaigns teaser ---------- */
.camp-progress-track { background: #E2E8F0; border-radius: 6px; height: 8px; overflow: hidden; margin: 0.6rem 0 0.5rem; }
.camp-progress-fill { background: linear-gradient(90deg, var(--M), var(--S)); height: 100%; }
.camp-countdown { color: var(--M); font-weight: 700; }

/* ---------- Homepage partner logos strip ---------- */
.partners-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 2.25rem;
}
.partners-strip-logo {
  display: block;
  filter: grayscale(1) opacity(0.6);
  transition: filter 0.15s ease;
}
.partners-strip-logo:hover { filter: grayscale(0) opacity(1); }
.partners-strip-logo img {
  height: 48px;
  width: auto;
  max-width: 140px;
  object-fit: contain;
}
@media (max-width: 640px) {
  .partners-strip { gap: 1.5rem; }
  .partners-strip-logo img { height: 36px; max-width: 110px; }
}

/* ---------- FAQ accordion (views/public/faq.php) ---------- */
.faq-group { margin-bottom: 2.5rem; }
.faq-group-title { font-size: 1.3rem; margin-bottom: 1rem; }
.faq-item {
  background: #fff;
  border: 1px solid var(--GLT);
  border-radius: 12px;
  padding: 0.2rem 1.1rem;
  margin-bottom: 0.75rem;
}
.faq-item summary {
  cursor: pointer;
  font-weight: 700;
  padding: 0.9rem 0;
  list-style: none;
  position: relative;
  padding-right: 2rem;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+';
  position: absolute;
  right: 0;
  top: 0.9rem;
  font-size: 1.2rem;
  color: var(--M);
}
.faq-item[open] summary::after { content: '−'; }
.faq-answer { padding: 0 0 1rem; color: var(--GR); line-height: 1.7; }

/* ---------- Testimonials / Stories of Impact ---------- */
.testimonial-card { text-align: center; padding: 2rem 1.5rem; }
.testimonial-photo {
  width: 72px; height: 72px; border-radius: 50%; object-fit: cover;
  margin: 0 auto 1.1rem; display: block; box-shadow: 0 2px 10px rgba(0,0,0,0.12);
}
.testimonial-photo-placeholder {
  background: var(--M); color: #fff; font-weight: 800; font-size: 1.6rem;
  display: flex; align-items: center; justify-content: center;
}
.testimonial-quote {
  margin: 0 0 1.1rem; font-style: italic; color: var(--D, #1F2937);
  line-height: 1.7; font-size: 0.98rem;
}
.testimonial-byline strong { display: block; font-size: 0.92rem; }
.testimonial-byline span { display: block; font-size: 0.8rem; color: var(--GR); margin-top: 0.15rem; }

/* ---------- Financial transparency callout ---------- */
.transparency-callout {
  background: var(--MX); border: 1px solid var(--ML); border-radius: 14px;
  padding: 1.1rem 1.3rem; display: flex; align-items: center; gap: 1rem;
  margin-bottom: 1.5rem; flex-wrap: wrap;
}
.transparency-callout .transparency-icon { font-size: 1.6rem; flex-shrink: 0; }
.transparency-callout p { margin: 0; font-size: 0.85rem; color: var(--MD); flex: 1 1 260px; }
.transparency-callout a { font-weight: 700; color: var(--M); white-space: nowrap; }

/* ---------- Homepage hero background ----------
   Was a single smooth 4-stop diagonal sweep (navy -> purple -> magenta) —
   the generic templated/AI-gradient look. First pass replaced it with two
   off-center glows, but that pulled the hero mostly dark navy instead of
   magenta. This version goes flat: solid magenta (--MD, dark enough for
   the light-pink title and white body text to stay readable), with only
   a barely-visible dot-grain texture for a touch of depth — no visible
   color blend anywhere. */
.hero {
  background-color: var(--M);
  background-image: radial-gradient(circle, rgba(255,255,255,0.06) 1px, transparent 1px);
  background-size: 24px 24px;
  position: relative;
}
/* v3: --MD was still reading as dark purple/navy rather than clearly
   magenta — switched to the true brand --M, and brightened the title
   (previously the light-pink --ML, too close in tone to --M itself) to
   plain white so it keeps good contrast against the brighter background. */
.hero .hero-title { color: #fff; }

/* ---------- Mobile menu: scrolling + the squeezed Donate button ----------
   Two separate bugs in the ☰ dropdown:
   1. .mobile-nav had no max-height/overflow, so on a real phone the open
      list (11+ links) could run off the bottom of the screen with nothing
      to scroll — items below "Trainings" were simply unreachable.
   2. On narrow phones the header row (logo + search icon + Donate +☰) ran
      out of room, so the Donate button got visually compressed. The search
      icon is the one safe thing to drop here — "Search" is already one of
      the links inside this same menu. */
.mobile-nav.open {
  max-height: calc(100vh - 68px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
@media (max-width: 400px) {
  .site-header .search-toggle { display: none; }
  .site-header .header-cta { gap: 0.45rem; }
}

/* ---------- Header "Get Involved" dropdown ---------- */
.site-header .nav-dropdown { position: relative; }
.site-header .nav-dropdown > a::after { content: ' ▾'; font-size: 0.7em; opacity: 0.7; }
.site-header .nav-dropdown-menu {
  position: absolute; top: 100%; left: 0; background: #fff;
  border-radius: 10px; box-shadow: 0 12px 32px rgba(15,27,53,0.16);
  min-width: 190px; padding: 0.5rem; opacity: 0; visibility: hidden;
  transform: translateY(6px); transition: all 0.15s ease; z-index: 50;
}
.site-header .nav-dropdown:hover .nav-dropdown-menu,
.site-header .nav-dropdown:focus-within .nav-dropdown-menu {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.site-header .nav-dropdown-menu a {
  display: block; padding: 0.55rem 0.75rem !important; border-radius: 7px;
  font-size: 0.85rem; white-space: nowrap;
}
.site-header .nav-dropdown-menu a:hover { background: var(--OW); }
.dnp-freq-row { display: flex; gap: 0.5rem; margin-bottom: 1.25rem; }
.dnp-freq-btn {
  flex: 1 1 50%; text-align: center; background: var(--OW); border: 2px solid transparent;
  padding: 0.65rem 0.5rem; border-radius: 12px; font-weight: 700; font-size: 0.88rem;
  cursor: pointer; color: var(--GR); transition: all .15s;
}
.dnp-freq-btn.active { background: var(--M); border-color: var(--M); color: #fff; }
.dnp-freq-note {
  background: var(--MX); border-radius: 10px; padding: 0.7rem 0.9rem;
  font-size: 0.82rem; color: var(--MD); margin-bottom: 1.1rem; display: none;
}
.dnp-freq-note.visible { display: block; }