/* ═══════════════════════════════════════════════════════════════════════
   VOLUNTEER JOIN — page-specific additions ONLY
   Depends on css/vp-shell.css (loaded first). Only styles the .vp shell does
   not provide. Everything scoped under .vj so it never leaks to other .vp pages.
   Palette matches vp-shell: primary #2f7d4d / hover #276741 / dark #1c3a2a /
   mint #95d5b2 / borders #dce9df/#dfe8e1/#e5eae6 / text #2f2f2f/#48534c.
   ═══════════════════════════════════════════════════════════════════════ */

/* Idealist/source acknowledgement line */
.vp.vj .vj-src-note {
	background: #f1f8e9 !important; border: 1px solid #dcedc8 !important; border-radius: 8px !important;
	padding: 10px 14px !important; font-size: 14px !important; color: #33691e !important; margin: 0 0 18px !important;
}

/* ── HERO (split, image-rich) ── */
.vp.vj .vj-hero { display: grid !important; grid-template-columns: 1.05fr .95fr !important; gap: 34px !important; align-items: center !important; padding: 40px 44px !important; }
.vp.vj .vj-hero-copy { min-width: 0 !important; }
.vp.vj .vj-script { color: #2f7d4d !important; font-family: "Segoe Script", "Bradley Hand", "Brush Script MT", cursive !important; font-weight: 700 !important; white-space: nowrap !important; }
.vp.vj .vj-cta { gap: 12px !important; margin-top: 4px !important; }
.vp.vj .vj-micro { font-size: 13px !important; color: #48534c !important; margin: 12px 0 0 !important; }
.vp.vj .vj-trust { margin-top: 16px !important; gap: 8px !important; }

.vp.vj .vj-hero-media { position: relative !important; min-width: 0 !important; }
.vp.vj .vj-hero-photo { border-radius: 12px !important; overflow: hidden !important; box-shadow: 0 6px 24px rgba(28,58,42,.14) !important; aspect-ratio: 4 / 3 !important; background: #eef4ef !important; }
.vp.vj .vj-hero-photo img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; }

/* Floating "We've got you covered" card */
.vp.vj .vj-cover {
	position: absolute !important; right: 10px !important; bottom: 10px !important; max-width: 236px !important;
	background: rgba(255,255,255,.97) !important; border: 1px solid #dfe8e1 !important; border-radius: 10px !important;
	padding: 12px 14px !important; box-shadow: 0 6px 18px rgba(0,0,0,.12) !important;
}
.vp.vj .vj-cover-shield { font-size: 20px !important; display: block !important; margin-bottom: 2px !important; }
.vp.vj .vj-cover strong { display: block !important; font-size: 13px !important; color: #1c3a2a !important; margin-bottom: 6px !important; }
.vp.vj .vj-cover ul { list-style: none !important; margin: 0 !important; padding: 0 !important; }
.vp.vj .vj-cover li { font-size: 12.5px !important; color: #48534c !important; line-height: 1.5 !important; padding-left: 18px !important; position: relative !important; }
.vp.vj .vj-cover li::before { content: "✓" !important; position: absolute !important; left: 0 !important; color: #2f7d4d !important; font-weight: 700 !important; }

/* ── LIVE IMPACT stat cards ── */
/* Adapt to the live card count (2, 3, or 4 — ledger cards are conditional) instead of a fixed 3-col. */
.vp.vj .vj-stats { grid-template-columns: repeat(var(--vj-n, 2), minmax(0, 1fr)) !important; max-width: none !important; }
.vp.vj .vj-stats .vp-card { text-align: center !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: flex-start !important; }
.vp.vj .vj-stat-ico { font-size: 24px !important; line-height: 1 !important; margin-bottom: 6px !important; }
.vp.vj .vj-num { font-size: clamp(28px, 4.5vw, 38px) !important; font-weight: 700 !important; color: #2f7d4d !important; line-height: 1 !important; margin-bottom: 6px !important; text-align: center !important; }
.vp.vj .vj-num .mow-count { display: inline !important; }
.vp.vj .vj-lbl { font-size: 13px !important; color: #48534c !important; line-height: 1.35 !important; text-align: center !important; max-width: 200px !important; }
.vp.vj .vj-statnote, .vp.vj .vj-fine { font-size: 13px !important; color: #5f6a63 !important; margin-top: 12px !important; } /* #5f6a63 ≈ 5.4:1 on white — WCAG AA */
.vp.vj .vj-statnote { text-align: center !important; }

/* ── "Neighbors waiting" stories widget — extra breathing room inside cards ── */
.vp.vj .mow-stories-grid { gap: 22px !important; }
.vp.vj .mow-story-card { padding: 26px 24px 24px !important; }
.vp.vj .mow-story-headline { margin-bottom: 10px !important; line-height: 1.35 !important; }
.vp.vj .mow-story-text { line-height: 1.65 !important; margin-bottom: 14px !important; }
.vp.vj .mow-story-chips { gap: 8px !important; }

/* ── Clickable hero image → signup ── */
.vp.vj .vj-hero-imglink { display: block !important; width: 100% !important; height: 100% !important; position: relative !important; }
.vp.vj .vj-hero-imglink:focus-visible { outline: 3px solid #95d5b2 !important; outline-offset: 3px !important; }
.vp.vj .vj-hero-imgcue { position: absolute !important; right: 10px !important; bottom: 10px !important; background: rgba(47,125,77,.95) !important; color: #fff !important; font-size: 13px !important; font-weight: 700 !important; padding: 7px 12px !important; border-radius: 999px !important; opacity: 0 !important; transform: translateY(4px) !important; transition: opacity .18s, transform .18s !important; pointer-events: none !important; }
.vp.vj .vj-hero-imglink:hover .vj-hero-imgcue, .vp.vj .vj-hero-imglink:focus-visible .vj-hero-imgcue { opacity: 1 !important; transform: translateY(0) !important; }
.vp.vj .vj-section-cta { margin-top: 22px !important; }
@media (prefers-reduced-motion: reduce) { .vp.vj .vj-hero-imgcue { transition: none !important; } }

/* ── Clickable split-section images (app / privacy) — visible cue + focus ── */
.vp.vj .vj-media-link { display: block !important; text-decoration: none !important; }
.vp.vj .vj-media-link .vj-media-cue { display: inline-block !important; margin-top: 10px !important; font-size: 14px !important; font-weight: 700 !important; color: #2f7d4d !important; }
.vp.vj .vj-media-link:hover .vj-media-cue { text-decoration: underline !important; }
.vp.vj .vj-media-link:focus-visible { outline: 3px solid #95d5b2 !important; outline-offset: 3px !important; border-radius: 12px !important; }

/* ── VOLUNTEER TOOLKIT IN ACTION — clickable card tray ── */
.vp.vj .vj-tools { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 18px !important; }
.vp.vj .vj-tool { display: flex !important; flex-direction: column !important; background: #fff !important; border: 1px solid #dfe8e1 !important; border-radius: 12px !important; overflow: hidden !important; text-decoration: none !important; box-shadow: 0 1px 3px rgba(0,0,0,.03) !important; transition: transform .15s, box-shadow .15s !important; }
.vp.vj .vj-tool:hover { transform: translateY(-2px) !important; box-shadow: 0 6px 18px rgba(28,58,42,.12) !important; }
.vp.vj .vj-tool:focus-visible { outline: 3px solid #95d5b2 !important; outline-offset: 2px !important; }
.vp.vj .vj-tool-media { display: block !important; aspect-ratio: 16 / 9 !important; background: #eef4ef !important; overflow: hidden !important; }
.vp.vj .vj-tool-media img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; }
.vp.vj .vj-tool-ico { font-size: 30px !important; line-height: 1 !important; padding: 22px 20px 4px !important; }
.vp.vj .vj-tool-title { font-size: 16px !important; font-weight: 700 !important; color: #1c3a2a !important; padding: 16px 18px 0 !important; }
.vp.vj .vj-tool-media + .vj-tool-title { padding-top: 14px !important; }
.vp.vj .vj-tool-desc { font-size: 14px !important; color: #48534c !important; line-height: 1.5 !important; padding: 6px 18px 0 !important; flex: 1 1 auto !important; }
.vp.vj .vj-tool-cue { font-size: 13.5px !important; font-weight: 700 !important; color: #2f7d4d !important; padding: 12px 18px 18px !important; }
.vp.vj .vj-tool:hover .vj-tool-cue { text-decoration: underline !important; }
@media (max-width: 900px) { .vp.vj .vj-tools { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 640px) {
	.vp.vj .vj-tools { display: flex !important; overflow-x: auto !important; scroll-snap-type: x mandatory !important; gap: 14px !important; padding-bottom: 8px !important; -webkit-overflow-scrolling: touch !important; }
	.vp.vj .vj-tool { flex: 0 0 80% !important; scroll-snap-align: start !important; }
}

/* ── SPLIT sections (copy + real screenshot) ── */
.vp.vj .vj-split { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 30px !important; align-items: center !important; }
.vp.vj .vj-split-copy { min-width: 0 !important; }
.vp.vj .vj-split-media { min-width: 0 !important; }
.vp.vj .vj-split-media img { width: 100% !important; height: auto !important; max-width: 420px !important; margin: 0 auto !important; display: block !important; border-radius: 12px !important; border: 1px solid #e5eae6 !important; box-shadow: 0 4px 18px rgba(28,58,42,.10) !important; background: #fff !important; }
.vp.vj .vj-split--rev .vj-split-copy { order: 2 !important; }
.vp.vj .vj-split--rev .vj-split-media { order: 1 !important; }
.vp.vj .vj-check { list-style: none !important; margin: 6px 0 0 !important; padding: 0 !important; }
.vp.vj .vj-check li { position: relative !important; padding-left: 26px !important; margin-bottom: 8px !important; font-size: 15px !important; color: #48534c !important; line-height: 1.5 !important; }
.vp.vj .vj-check li::before { content: "✓" !important; position: absolute !important; left: 0 !important; top: 0 !important; color: #2f7d4d !important; font-weight: 700 !important; }

/* ── AS SEEN ON marquee (re-scoped from the homepage's vetted .hp-trust-bar) ── */
.vp.vj .vj-media { display: flex !important; align-items: center !important; gap: 20px !important; overflow: hidden !important; }
.vp.vj .vj-media-label { font-size: 11px !important; font-weight: 600 !important; color: #5f6a63 !important; text-transform: uppercase !important; letter-spacing: .08em !important; text-decoration: none !important; white-space: nowrap !important; flex-shrink: 0 !important; }
.vp.vj .vj-media-label:hover { color: #2f7d4d !important; }
.vp.vj .vj-marquee { overflow: hidden !important; flex: 1 !important; position: relative !important;
	-webkit-mask-image: linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%) !important;
	mask-image: linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%) !important; }
.vp.vj .vj-marquee-track { display: flex !important; align-items: center !important; gap: 48px !important; width: max-content !important; animation: vj-marquee 62s linear infinite !important; }
.vp.vj .vj-marquee:hover .vj-marquee-track { animation-play-state: paused !important; }
.vp.vj .vj-media-item { display: inline-flex !important; align-items: center !important; height: 28px !important; flex-shrink: 0 !important; }
.vp.vj .vj-media-item img { height: 28px !important; width: auto !important; max-width: 120px !important; object-fit: contain !important; filter: grayscale(100%) !important; opacity: .45 !important; mix-blend-mode: multiply !important; transition: opacity .4s ease, filter .4s ease !important; }
.vp.vj .vj-media-item img:hover { filter: grayscale(0%) !important; opacity: .85 !important; }
@keyframes vj-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ── SHARE block ── */
.vp.vj .vj-share-btns { gap: 10px !important; margin-bottom: 14px !important; }
.vp.vj .vj-share-btns .vp-btn { cursor: pointer !important; }
.vp.vj .vj-share-label { display: block !important; font-size: 13px !important; font-weight: 700 !important; color: #1c3a2a !important; margin-bottom: 6px !important; }
.vp.vj .vj-share-text { width: 100% !important; box-sizing: border-box !important; border: 1px solid #cfe2d3 !important; border-radius: 8px !important; padding: 12px 14px !important; font-size: 14px !important; line-height: 1.5 !important; color: #2f2f2f !important; background: #f7faf8 !important; resize: vertical !important; font-family: inherit !important; }
.vp.vj .vj-copy-live { display: inline-flex !important; align-items: center !important; margin-left: 10px !important; font-size: 14px !important; font-weight: 600 !important; color: #2f7d4d !important; }
.vp.vj button.vp-btn--secondary { border: 1px solid #cfe2d3 !important; } /* scoped so primary Copy button keeps borderless shell style */

/* ── FAQ (native <details>) ── */
.vp.vj .vj-faq details { background: #fff !important; border: 1px solid #dfe8e1 !important; border-radius: 10px !important; margin-bottom: 10px !important; box-shadow: 0 1px 3px rgba(0,0,0,.03) !important; }
.vp.vj .vj-faq summary { list-style: none !important; cursor: pointer !important; padding: 16px 44px 16px 18px !important; font-size: 16px !important; font-weight: 700 !important; color: #1c3a2a !important; position: relative !important; }
.vp.vj .vj-faq summary::-webkit-details-marker { display: none !important; }
.vp.vj .vj-faq summary::after { content: "+" !important; position: absolute !important; right: 18px !important; top: 50% !important; transform: translateY(-50%) !important; font-size: 22px !important; color: #2f7d4d !important; line-height: 1 !important; }
.vp.vj .vj-faq details[open] summary::after { content: "\2013" !important; }
.vp.vj .vj-faq details p { margin: 0 !important; padding: 0 18px 16px !important; color: #48534c !important; font-size: 15px !important; line-height: 1.6 !important; }

/* ── FINAL login line + BOTTOM trust strip ── */
.vp.vj .vj-final-login { margin-top: 14px !important; font-size: 14px !important; color: rgba(255,255,255,.75) !important; }
.vp.vj .vj-final-login a { color: #95d5b2 !important; font-weight: 600 !important; }
.vp.vj .vj-bottomtrust .vp-grid-3 { grid-template-columns: repeat(5, 1fr) !important; gap: 12px !important; }
.vp.vj .vj-bt { text-align: center !important; font-size: 13px !important; font-weight: 600 !important; color: #48534c !important; line-height: 1.4 !important; }
.vp.vj .vj-bt span { display: block !important; font-size: 22px !important; margin-bottom: 6px !important; }

/* ── Accessible focus for buttons/links/summary/share ── */
.vp.vj a:focus-visible, .vp.vj button:focus-visible, .vp.vj summary:focus-visible, .vp.vj textarea:focus-visible {
	outline: 3px solid #95d5b2 !important; outline-offset: 2px !important;
}

/* ── Sticky mobile CTA ── */
.vj-sticky { display: none !important; position: fixed !important; left: 0 !important; right: 0 !important; bottom: 0 !important; z-index: 40 !important;
	padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px)) !important; background: rgba(255,255,255,.96) !important;
	border-top: 1px solid #dfe8e1 !important; box-shadow: 0 -2px 10px rgba(0,0,0,.06) !important; text-align: center !important; }
.vj-sticky .vp-btn { display: block !important; width: 100% !important; max-width: 480px !important; margin: 0 auto !important; }

/* ── RESPONSIVE ── */
@media (max-width: 900px) {
	.vp.vj .vj-hero { grid-template-columns: 1fr !important; padding: 28px 24px !important; }
	.vp.vj .vj-stats { grid-template-columns: repeat(2, 1fr) !important; }
	.vp.vj .vj-hero-media { margin-top: 8px !important; }
	.vp.vj .vj-cover { position: static !important; max-width: none !important; margin-top: 12px !important; box-shadow: 0 1px 3px rgba(0,0,0,.06) !important; }
	.vp.vj .vj-split { grid-template-columns: 1fr !important; }
	.vp.vj .vj-split--rev .vj-split-copy { order: 1 !important; }
	.vp.vj .vj-split--rev .vj-split-media { order: 2 !important; }
	.vp.vj .vj-bottomtrust .vp-grid-3 { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 720px) {
	.vj-sticky { display: block !important; }
	/* clear the fixed CTA on the TRUE last element (bottom trust strip), not .vp-final */
	.vp.vj .vj-bottomtrust { padding-bottom: 84px !important; }
	.vp.vj .vj-script { white-space: normal !important; }
}
@media (max-width: 600px) {
	.vp.vj .vj-media { flex-direction: column !important; gap: 12px !important; }
	.vp.vj .vj-marquee-track { gap: 32px !important; animation-duration: 48s !important; }
	.vp.vj .vj-media-item, .vp.vj .vj-media-item img { height: 22px !important; }
	.vp.vj .vj-media-item img { max-width: 90px !important; }
}

/* ── Reduced motion: stop the marquee + button transforms ── */
@media (prefers-reduced-motion: reduce) {
	.vp.vj .vp-btn { transition: none !important; }
	.vp.vj .vp-btn:hover { transform: none !important; }
	.vp.vj .vj-marquee { overflow-x: auto !important; }
	.vp.vj .vj-marquee-track { animation: none !important; }
}