/*
 * Donate page — ported unchanged from site.legacy.css's donation-panel
 * system, vision-progress strip, giving-methods and this page's own
 * .campaign-hero::before / institution-card overrides (base .campaign-hero
 * rules live in global/sections.css since the Urgent Help page reuses the
 * same component). Loaded only on this page via inc/enqueue/styles.php's
 * page-slug matching (page-donate.php -> donate.css).
 *
 * Selectors originally scoped under body.page-donate are flattened
 * directly onto the base selector here, same as waqf.css does — since
 * this stylesheet only ever loads on this one page anyway, a literal
 * "page-donate" body class from WordPress's body_class() isn't needed.
 */

.campaign-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(8,29,51,.98) 0%, rgba(8,29,51,.9) 43%, rgba(8,29,51,.32) 70%, rgba(8,29,51,.08) 100%),
        var(--campaign-image) 76% center / cover;
}
.donation-appeal blockquote { max-width: 650px; margin: 28px 0 0; padding-left: 22px; border-left: 2px solid #9ed2bd; color: rgba(255,255,255,.9); font: italic 1.12rem/1.7 var(--serif); }
.donation-appeal cite { display: block; margin-top: 7px; color: #b9e0d0; font: 800 .7rem/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; }

/* Eight-path progress strip */
.vision-progress { padding: 30px 0; background: white; border-bottom: 1px solid rgba(8,29,51,.08); }
.vision-progress .container { display: grid; grid-template-columns: 280px 1fr; align-items: center; gap: 42px; }
.vision-progress span { color: var(--forest); font-size: .7rem; font-weight: 900; letter-spacing: .11em; text-transform: uppercase; }
.vision-progress strong { display: block; color: var(--navy); font: 700 2rem/1.15 var(--serif); }
.vision-progress p { font-size: .82rem; }
.vision-progress ol { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; list-style: none; }
.vision-progress li { position: relative; padding: 24px 6px 9px; border-top: 4px solid #dce8e3; color: var(--slate); font-size: .68rem; font-weight: 800; text-align: center; }
.vision-progress li::before { content: ""; position: absolute; top: -8px; left: 50%; width: 12px; height: 12px; border: 3px solid white; border-radius: 50%; background: #c5d7cf; transform: translateX(-50%); }
.vision-progress li.is-live { border-color: var(--green); }
.vision-progress li.is-live::before { background: var(--green); }

/* Guided donation panel */
.donation-wrap { position: relative; z-index: 5; display: grid; grid-template-columns: .72fr 1.28fr; gap: 28px; margin-top: 0; align-items: start; }
.donation-assurance, .donation-panel { border-radius: var(--radius); background: var(--white); box-shadow: var(--shadow-lg); }
.donation-assurance { padding: 36px; }
.donation-assurance h2 { font-size: 1.7rem; }
.section-navy .donation-assurance h2, .section-navy .donation-panel h2 { color: var(--navy); }
.assurance-list { display: grid; gap: 22px; margin-top: 28px; }
.assurance-item { display: grid; grid-template-columns: 38px 1fr; gap: 14px; }
.assurance-item .icon { width: 22px; height: 22px; color: var(--forest); }
.assurance-item strong { color: var(--navy); }
.assurance-item p { margin-top: 3px; color: var(--slate); font-size: .88rem; }
.donation-panel { padding: clamp(28px, 5vw, 52px); }
.donation-progress { display: flex; gap: 8px; margin-bottom: 38px; }
.donation-progress span { height: 5px; flex: 1; border-radius: 999px; background: var(--stone); transition: background .25s; }
.donation-progress span.is-active { background: var(--green); }
.donation-step[hidden] { display: none; }
.donation-step h2 { font-size: clamp(2rem, 4vw, 3.2rem); }
.donation-step > p { margin-top: 12px; color: var(--slate); }
.choice-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 28px; }
.choice { position: relative; }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice label { display: flex; min-height: 76px; align-items: center; justify-content: space-between; gap: 12px; padding: 19px 20px; border: 2px solid var(--stone); border-radius: 18px; color: var(--navy); font-weight: 800; cursor: pointer; transition: border-color .2s, background .2s, transform .2s; }
.choice label:hover { transform: translateY(-2px); border-color: var(--green); }
.choice input:focus-visible + label { outline: 3px solid rgba(45,111,159,.28); outline-offset: 2px; }
.choice input:checked + label { border-color: var(--forest); background: var(--sage); }
.amount-grid { grid-template-columns: repeat(3, 1fr); }
.custom-amount { margin-top: 14px; }
.custom-amount label { display: block; margin-bottom: 8px; color: var(--navy); font-weight: 800; }
.input-prefix { position: relative; }
.input-prefix span { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); color: var(--slate); font-weight: 900; }
.input-prefix input { width: 100%; min-height: 56px; padding: 14px 18px 14px 36px; border: 2px solid var(--stone); border-radius: 16px; background: var(--white); color: var(--navy); }
.input-prefix input:focus { outline: 0; border-color: var(--blue); box-shadow: 0 0 0 4px rgba(45,111,159,.12); }
.donation-actions { display: flex; justify-content: space-between; gap: 12px; margin-top: 34px; }
.button-back { border-color: var(--stone); background: transparent; color: var(--navy); box-shadow: none; }
.donation-summary { display: grid; gap: 1px; overflow: hidden; margin-top: 28px; border: 1px solid var(--stone); border-radius: 18px; background: var(--stone); }
.summary-row { display: flex; justify-content: space-between; gap: 20px; padding: 17px 20px; background: var(--white); }
.summary-row span { color: var(--slate); }
.secure-note { display: flex; align-items: center; gap: 10px; margin-top: 18px; color: var(--slate); font-size: .84rem; }
.secure-note .icon { width: 18px; color: var(--forest); }

/* Five-way giving-purpose card grid */
.section-gradient .institution-grid { grid-template-columns: repeat(5, 1fr); }
.section-gradient .institution-card { min-width: 0; }
.section-gradient .card-body { padding: 22px; }
.section-gradient .institution-card h3 { font-size: 1.2rem; }
.section-gradient .institution-card {
    border-color: rgba(8,29,51,.1);
    background: rgba(255,255,255,.94);
    color: var(--slate);
    box-shadow: 0 16px 40px rgba(8,29,51,.08);
}
.section-gradient .institution-card:hover {
    border-color: rgba(95,155,133,.5);
    background: var(--white);
    box-shadow: 0 24px 54px rgba(8,29,51,.14);
}
.section-gradient .institution-card h3 { color: var(--navy); }
.section-gradient .institution-card p { color: var(--slate); }

/* Development journey stages — this page's Waqf variant */
/* All four "Priority by priority" cards now use the same navy-to-green
   gradient .is-waqf already had (the base .campaign-stage rule in
   global/sections.css was a near-transparent white that blended into
   this section's own dark green background, and .is-active stood out as
   solid white) — matching the same fix applied to the Waqf page's
   priority-stage cards. Donate-scoped since .campaign-stage is shared
   with Home and Projects, which keep their original styling. */
.campaign-stage {
    background: linear-gradient(145deg, rgba(8,29,51,.78), rgba(95,155,133,.28));
    border-color: rgba(158,210,189,.45);
}
.campaign-stage.is-active {
    background: linear-gradient(145deg, rgba(8,29,51,.78), rgba(95,155,133,.28));
    border-color: rgba(158,210,189,.45);
    box-shadow: none;
}
.campaign-stage.is-active > span { color: #b9e0d0; }
.campaign-stage.is-active h3 { color: white; }
.campaign-stage.is-active p { color: rgba(255,255,255,.72); }
/* Matches .section-forest .card-link's own color (global/sections.css)
   — the same color the non-active cards' links already use in this
   section, now consistent since is-active no longer overrides it. */
.campaign-stage.is-active .card-link { color: #c4e6d8; }

/* Other ways to give */
.giving-methods { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.giving-methods article { min-height: 280px; padding: 32px; border: 1px solid rgba(8,29,51,.09); border-radius: var(--radius); background: #f7faf8; transition: .3s var(--ease); }
.giving-methods article:hover { transform: translateY(-7px); box-shadow: var(--shadow-lg); background: white; }
.giving-methods h3 { margin: 42px 0 12px; }

/* Card icons — same green-badge/white-icon treatment used across the
   institution/urgent-help pages. Page-scoped since .icon-badge and
   .giving-methods .icon are shared classes used elsewhere with their
   original lighter/plain styles. */
.section-gradient .institution-card .icon-badge,
.giving-methods .icon-wrap {
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: var(--forest);
}
.giving-methods .icon-wrap { width: 46px; height: 46px; margin-bottom: 20px; }
.giving-methods .icon-wrap .icon { width: 22px; height: 22px; color: white; }
.section-gradient .institution-card .icon-badge .icon,
.section-gradient .institution-card .icon-badge { color: white; }

/* --- Scale-down pass, same as the other converted pages ---
   Deliberately does NOT touch .donation-assurance h2 or
   .donation-panel/.donation-step h2 above — that's the legacy guided
   donation form (still active, separate from and on hold pending
   approval to switch to DonateFlow — see M9 from the theme audit), and
   this pass only touches the page's surrounding content sections
   (hero, sticky-title, the 3x section-head instances, closing
   service-photo-copy, final CTA, FAQ). */
.campaign-hero h1 {
    font-size: clamp(2.25rem, 3.4vw, 3.4rem);
}

.sticky-title h2,
.section-head h2,
.service-photo-copy h2,
.cta-inner h2,
.faq-intro h2 {
    font-size: clamp(1.75rem, 2.6vw, 2.5rem);
}

.section-head .lead {
    margin-top: 18px;
}

@media (max-width: 1060px) {
    .institution-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 980px) {
    .donation-wrap { grid-template-columns: 1fr; }
    .donation-assurance { order: 2; }
    .section-gradient .institution-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 820px) {
    .vision-progress .container { grid-template-columns: 1fr; gap: 24px; }
    .section-gradient .institution-grid { grid-template-columns: repeat(2, 1fr); }
    .service-roadmap, .giving-methods { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 600px) {
    .campaign-hero::before {
        background:
            linear-gradient(90deg, rgba(8,29,51,.94), rgba(8,29,51,.62)),
            var(--campaign-image) 62% center / cover;
    }
    .vision-progress ol { grid-template-columns: repeat(4, 1fr); row-gap: 18px; }
    .donation-actions { flex-direction: column-reverse; }
    .donation-actions .button { width: 100%; }
    .giving-methods { grid-template-columns: 1fr; }
    .giving-methods article { min-height: 0; padding: 24px; }
    .giving-methods h3 { margin-top: 28px; }
    .section-gradient .institution-grid { grid-template-columns: 1fr; }
}