/* ==========================================================================
   Site updates  (client feedback)  -  loaded last.
   ========================================================================== */

/* Page-transition loader logo — bigger & more visible (client request) */
.handle-preloader .preloader-logo { max-width: 270px; height: auto; display: block; margin: 0 auto; }

/* Bigger, more visible header logo across the whole site (client request) */
.main-header .logo-box .logo img { width: 300px !important; height: auto !important; display: block; }
.main-header .sticky-header .logo-box .logo img { width: 255px !important; height: auto !important; }

/* Fix the green accent panel behind the logo: it was a fixed 100px, so the
   enlarged logo left an empty strip under it. Make it match the header height
   and tighten the logo padding so the logo sits cleanly with no gap. */
.main-header .logo-box .logo { padding: 6px 0 !important; }
.main-header.style-one .logo__shape { height: 100% !important; }

@media only screen and (max-width: 600px) {
  .main-header .logo-box .logo img { width: 195px !important; }
  .main-header .logo-box .logo { padding: 4px 0 !important; }
  .handle-preloader .preloader-logo { max-width: 210px !important; }
}

/* Top Donate button for mobile/tablet (sticky header is disabled on mobile) */
.floating-donate {
  display: none; position: fixed; top: 12px; right: 12px; z-index: 10000;
  background: #D4933A; color: #182E25 !important; font-weight: 800;
  padding: 10px 18px; border-radius: 40px; box-shadow: 0 8px 22px rgba(0,0,0,.28);
  text-decoration: none; font-size: 14px; align-items: center; gap: 7px;
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity .3s ease, transform .3s ease, visibility .3s ease;
}
.floating-donate:hover { background: #2D4A3E; color: #fff !important; }
@media only screen and (max-width: 991px) {
  .floating-donate { display: inline-flex; }
  .floating-donate.show { opacity: 1; visibility: visible; transform: translateY(0); }
}
@media only screen and (max-width: 400px) { .floating-donate { padding: 9px 15px; font-size: 13px; } }

/* Home page goal cards -> links */
a.mission-contant { text-decoration: none; color: inherit; transition: transform .25s ease, box-shadow .25s ease; }
a.mission-contant:hover { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(45,74,62,.14); }
a.mission-contant h5, a.mission-contant p { color: inherit; }
.impact-band .impact-box h2 { margin-bottom: 6px; }

/* Contact FAQ accordion */
.faq-accordion { max-width: 900px; margin: 0 auto; }
.faq-item { background: #fff; border: 1px solid rgba(45,74,62,.12); border-radius: 14px; margin-bottom: 14px; overflow: hidden; }
.faq-item summary { cursor: pointer; list-style: none; padding: 20px 54px 20px 22px; font-weight: 700; color: #2D4A3E; font-size: 17px; position: relative; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:after { content: "+"; position: absolute; right: 22px; top: 50%; transform: translateY(-50%); font-size: 24px; color: #D4933A; }
.faq-item[open] summary:after { content: "\2013"; }
.faq-item .faq-answer { padding: 0 22px 20px; }
.faq-item .faq-answer p { color: #5a5a5a; line-height: 1.7; margin: 0; }

/* Partnership opportunity $ pill */
.opp-value { display:inline-block; background:rgba(212,147,58,.15); color:#C4603A; font-weight:800; font-size:13px; padding:5px 12px; border-radius:20px; margin-bottom:10px; }

/* Form labels + checkbox groups */
.form-label { display:block; font-weight:700; color:#2D4A3E; margin:6px 0 10px; font-size:15px; }
.checkbox-grid { display:flex; flex-wrap:wrap; gap:10px 22px; margin-bottom:14px; }
.checkbox-grid label { display:flex; align-items:center; gap:8px; font-weight:500; color:#3a3a3a; cursor:pointer; margin:0; }
.checkbox-grid input { width:auto; min-height:auto; margin:0; }

/* Mobile form tap targets */
@media only screen and (max-width: 991px) {
  .contact-form-card input, .contact-form-card select,
  .form-card input, .form-card select,
  form input[type="text"], form input[type="email"], form input[type="tel"], form select { min-height: 48px; }
  .checkbox-grid input { min-height: auto; }
  .faq-item summary { font-size: 16px; padding: 16px 48px 16px 18px; }
}

/* Team cards: show bios by default on touch devices */
@media only screen and (max-width: 991px) {
  .volunteers-info {
    position: static !important; left: auto !important; bottom: auto !important;
    transform: none !important; width: 100% !important; max-height: none !important;
    margin-top: 16px !important; box-shadow: 0 10px 26px rgba(0,0,0,.10) !important;
  }
  .volunteers-media { opacity: 1 !important; visibility: visible !important; transform: none !important; }
  .volunteers-content, .volunteers-content-inner { height: auto !important; }
}

/* ---- Project pages: fundraising progress bar ---- */
.fundraiser-card { background:#fff; border:1px solid rgba(45,74,62,.12); border-radius:20px; padding:34px 30px; box-shadow:0 16px 40px rgba(45,74,62,.10); text-align:center; max-width:820px; margin:0 auto; }
.fundraiser-card h3 { color:#2D4A3E; font-size:24px; margin-bottom:22px; }
.fundraiser-card h3 span { color:#C4603A; }
.fundraiser-track { background:#eee7db; border-radius:40px; height:22px; overflow:hidden; margin-bottom:14px; }
.fundraiser-fill { background:linear-gradient(90deg,#D4933A,#C4603A); height:100%; border-radius:40px; }
.fundraiser-labels { display:flex; justify-content:space-between; font-size:14px; color:#6D6D6D; font-weight:600; margin-bottom:22px; }

/* ---- Project pages: testimonial card + citations ---- */
.testimonial-quote-card { background:linear-gradient(135deg,#2D4A3E,#182E25); color:#fff; border-radius:24px; padding:48px 40px; max-width:900px; margin:0 auto; text-align:center; }
.testimonial-quote-card .tq-eyebrow { color:#D4933A; font-weight:800; text-transform:uppercase; letter-spacing:.15em; font-size:13px; display:block; margin-bottom:18px; }
.testimonial-quote-card blockquote { font-size:20px; line-height:1.6; font-style:italic; margin:0; }
blockquote cite { display:block; margin-top:18px; font-style:normal; font-weight:700; color:#D4933A; font-size:16px; }

/* Mobile: How We Work steps + project cards single column */
@media only screen and (max-width:767px){
  .fundraiser-labels { flex-direction:column; gap:4px; align-items:center; }
  .fundraiser-card h3 { font-size:20px; }
  .testimonial-quote-card { padding:34px 22px; }
  .testimonial-quote-card blockquote { font-size:17px; }
}

/* ---- Project harmonization: metric band + How We Work steps ---- */
.metric-band .metric-item { text-align:center; padding:10px; }
.metric-band .metric-item h3 { color:#C4603A; font-size:44px; line-height:1.1; margin-bottom:6px; font-family:'Fraunces',serif; }
.metric-band .metric-item p { color:#5a5a5a; font-size:15px; margin:0; }
.hww-step { background:#fff; border:1px solid rgba(45,74,62,.10); border-radius:18px; padding:30px 26px; height:100%; box-shadow:0 10px 30px rgba(45,74,62,.06); }
.hww-step .hww-num { width:52px; height:52px; border-radius:14px; background:rgba(212,147,58,.16); color:#C4603A; font-weight:800; font-size:22px; display:flex; align-items:center; justify-content:center; margin-bottom:18px; font-family:'Fraunces',serif; }
.hww-step h3 { color:#2D4A3E; font-size:21px; margin-bottom:10px; }
.hww-step p { color:#5a5a5a; line-height:1.65; margin:0; }
@media only screen and (max-width:767px){
  .metric-band .metric-item h3 { font-size:34px; }
  .metric-band .metric-item { margin-bottom:18px; }
}

/* Opportunities heading: one line on desktop, wraps on phones (no overflow) */
@media only screen and (min-width: 768px){ .opp-oneline { white-space: nowrap; } }

/* ==========================================================================
   Change request: flat heroes + two-column layouts
   ========================================================================== */

/* Flatten hero arches on all redesigned pages (arch removed -> clean flat edge) */
.about-hero:after, .apply-hero:after, .project-hero:after, .water-hero:after,
.contact-hero:after, .donate-hero:after, .grant-hero:after, .opportunities-hero:after,
.partner-hero:after, .projects-hero:after { display: none !important; }

/* About hero: trim the empty space below the heading (the removed arch left a big gap
   before the Our Story section) — client feedback. */
.about-hero { padding-bottom: 60px !important; }

/* Donation giving tiers -> two columns on tablet/desktop */
@media only screen and (min-width: 768px) {
  .give-list { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 30px; }
  .give-list li { break-inside: avoid; }
}

/* How We Work / process steps -> two per row on tablet (instead of one) */
@media only screen and (min-width: 576px) and (max-width: 991px) {
  .journey-section [class*="col-xl-"], .dark-health [class*="col-xl-"],
  .funding-section [class*="col-xl-"], .soft-water [class*="col-xl-"],
  .provide-section [class*="col-xl-"], .wellness-section [class*="col-xl-"] {
    flex: 0 0 50%; max-width: 50%;
  }
}

/* Form submission confirmation + error panels (contact / partnership) */
.form-success-panel { display:none; background:#eaf6ef; border:1px solid #b6ddc6; border-radius:16px; padding:32px 28px; text-align:center; }
.form-success-panel.is-visible { display:block; }
.form-success-panel h3 { color:#2D4A3E; margin-bottom:10px; }
.form-success-panel p { color:#4a5a52; margin:0; line-height:1.6; }
.form-error-banner { display:none; background:#fdecec; border:1px solid #f4c2c2; color:#a12626; border-radius:12px; padding:12px 16px; margin-bottom:14px; font-weight:600; }
.form-error-banner.is-visible { display:block; }

/* ==========================================================================
   Team cards on About Us (merged Team) — mobile/tablet fix.
   The theme forces .team-container .volunteers-info to height:150px with
   overflow:hidden and the photo to 725px, which clips the bios. Release all
   of that so each card is a clean single column with the full bio visible
   (no hover needed on touch devices).
   ========================================================================== */
@media only screen and (max-width: 991px) {
  .main-team-container .volunteers-content { margin-bottom: 40px !important; width: 100% !important; }
  .main-team-container .volunteers-image { height: auto !important; }
  .main-team-container .volunteers-image img { height: 360px !important; object-fit: cover !important; }
  .main-team-container .volunteers-info,
  .main-team-container .volunteers-content:hover .volunteers-info {
    position: static !important; left: auto !important; bottom: auto !important;
    transform: none !important; width: 100% !important;
    height: auto !important; max-height: none !important; overflow: visible !important;
    margin-top: 14px !important; padding: 22px 20px !important;
  }
  .main-team-container .volunteers-media { opacity: 1 !important; visibility: visible !important; transform: none !important; }
  .main-team-container .volunteers-info-link { font-size: 24px !important; cursor: default; }
  .main-team-container .volunteers-info p { font-size: 15px !important; }
  .main-team-container .volunteers-media p { font-size: 14px !important; line-height: 1.6 !important; }
}

/* Givebutter donate button inside the project donation card */
.donate-action .gb-donate-btn { display:inline-block; margin:0 auto 26px; }

/* --- Team cards: keep the theme's clean hover-reveal (name + title by default,
   bio on hover). Just let the hover panel grow enough for long bios (e.g. Mery's),
   and lift the hovered card above its neighbours so it never overlaps them. --- */
.main-team-container .volunteers-content:hover { position: relative; z-index: 5; }
.main-team-container .volunteers-content:hover .volunteers-info { max-height: 560px !important; }

/* --- "Learn more" links must be clearly visible at ALL times, not just on hover (client requirement) --- */
.project-link,
.program-card .project-link,
.program-content .project-link {
    opacity: 1 !important;
    visibility: visible !important;
    color: var(--clay, #C4603A) !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
}
.program-card:hover .project-link,
.project-link:hover { color: var(--earth, #2D4A3E) !important; }

/* global.css has `a:hover span { color:#fff }`. The whole project card is a link,
   so its category tags (Education/Health/Water/Grants — spans) turned white and
   vanished on hover. Keep the tags their clay color on hover. */
.program-card:hover .program-tag,
a:hover .program-tag { color: var(--clay, #C4603A) !important; }

/* About team: the container had 120px top padding, leaving a big gap between the
   "Our Team" intro and the photos — close it up (client feedback). */
.main-team-container { padding-top: 30px !important; }

/* Clean Water — "The Global Water Crisis in Numbers" stat cards (client feedback) */
.water-stats-band .water-stat {
    background:#fff; border:1px solid rgba(45,74,62,.10); border-top:4px solid #C4603A;
    border-radius:16px; padding:30px 24px; height:100%; text-align:center;
    box-shadow:0 12px 34px rgba(45,74,62,.07);
}
.water-stats-band .water-stat h3 {
    color:#C4603A; font-family:'Fraunces',serif; font-size:42px; line-height:1.05; margin-bottom:12px;
}
.water-stats-band .water-stat h3 span { font-size:20px; color:#6D6D6D; }
.water-stats-band .water-stat p { color:#4a4a4a; font-size:15px; line-height:1.65; margin:0; }
@media only screen and (max-width:767px){ .water-stats-band .water-stat h3 { font-size:34px; } }

/* Grants: focus-area example lists + eligibility FAQ answer lists (client feedback) */
.grant-focus h2 { margin-bottom:12px; }
.grant-focus .grant-focus-list { color:#4a4a4a; line-height:1.7; padding-left:20px; }
.grant-focus .grant-focus-list li { margin-bottom:12px; }
.faq-item .faq-answer ul, .faq-item .faq-answer ol { color:#5a5a5a; line-height:1.7; padding-left:20px; margin:8px 0 0; }
.faq-item .faq-answer li { margin-bottom:8px; }
.faq-item .faq-answer p { margin-bottom:8px; }

/* Opportunities page: Remote / On-the-Ground toggle (client feedback) */
.opp-toggle .opp-tab {
    border:2px solid #C4603A; background:transparent; color:#C4603A; font-weight:700;
    padding:12px 34px; border-radius:40px; cursor:pointer; margin:0 6px 8px;
    transition:all .2s ease; font-size:15px;
}
.opp-toggle .opp-tab:hover { background:rgba(196,96,58,.10); }
.opp-toggle .opp-tab.is-active { background:#C4603A; color:#fff; }

/* Home video play button — same look as hv-popup-link, but redirects to YouTube instead of opening the popup player (Shorts can't play in the iframe popup) */
a.video-play-btn{
    position: relative;
    background-color: #F65024;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}
a.video-play-btn:after{
    content: '';
    position: absolute;
    border: 30px solid #F65024;
    border-radius: 50%;
    top: -20px;
    left: -20px;
    bottom: -20px;
    right: -20px;
    animation: anim 1.5s linear infinite;
    opacity: 0;
}