/**
 * Donation Page template (pages/page-donation.php).
 *
 * Loaded only on that template (see inc/donation-page.php). Full-bleed bands
 * in the theme palette (--hrp-* marketing tokens + --hpf-* chrome tokens);
 * Quicksand headings / Nunito body throughout.
 *
 * @package HPF_Trickle_Up
 */

.hpf-donate { font-family: var(--hpf-font); color: var(--hpf-ink); }

/* Bands must span the full viewport even if a parent container constrains
   them — the negative-margin bleed self-neutralises when already full width. */
.hpf-donate-hero,
.hpf-donate-how,
.hpf-donate-shelters,
.hpf-donate-form,
.hpf-donate-help,
.hpf-donate-why,
.hpf-donate-faq {
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}
.hpf-donate__wrap {
	max-width: 1200px;
	margin: 0 auto;
	padding-left: clamp(16px, 4vw, 40px);
	padding-right: clamp(16px, 4vw, 40px);
}

/* Shared section headings */
.hpf-donate-sechead { text-align: center; max-width: 640px; margin: 0 auto 40px; }
.hpf-donate-sechead h2 {
	font-family: var(--hpf-font-head);
	font-size: clamp(26px, 3.6vw, 38px);
	font-weight: 800;
	line-height: 1.15;
	color: var(--hpf-ink);
	margin: 0 0 10px;
}
.hpf-donate-sechead p { font-size: 16px; line-height: 1.6; color: var(--hpf-muted); margin: 0; }
.hpf-donate-sechead--light h2,
.hpf-donate-sechead--light p { color: #fff; }
.hpf-donate-sechead--light p { opacity: .92; }

/* =====================  HERO  ===================== */
.hpf-donate-hero {
	position: relative;
	background-size: cover;
	background-position: center 30%;
	padding: clamp(70px, 11vw, 150px) 0;
}
.hpf-donate-hero__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(10, 28, 27, .55) 0%, rgba(10, 28, 27, .25) 55%, rgba(10, 28, 27, .55) 100%);
}
.hpf-donate-hero__inner { position: relative; max-width: 640px; margin-left: auto; margin-right: auto; }
.hpf-donate-hero__inner { margin-left: calc((100% - 1200px) / 2 + clamp(16px, 4vw, 40px)); }
@media (max-width: 1240px) { .hpf-donate-hero__inner { margin-left: clamp(16px, 4vw, 40px); } }
.hpf-donate-hero__title {
	font-family: var(--hpf-font-head);
	font-size: clamp(30px, 4.4vw, 46px);
	font-weight: 800;
	line-height: 1.14;
	color: #fff;
	margin: 0 0 14px;
	text-shadow: 0 2px 18px rgba(0, 0, 0, .35);
}
.hpf-donate-hero__sub {
	font-family: var(--hpf-font-head);
	font-size: clamp(17px, 2vw, 21px);
	font-weight: 700;
	color: #fff;
	margin: 0 0 14px;
	text-shadow: 0 1px 12px rgba(0, 0, 0, .35);
}
.hpf-donate-hero__text {
	font-size: 15.5px;
	line-height: 1.7;
	color: rgba(255, 255, 255, .92);
	margin: 0 0 26px;
	max-width: 480px;
}
.hpf-donate-hero__cta {
	display: inline-block;
	padding: 14px 30px;
	background: var(--hrp-gold, #E4B451);
	border-radius: 12px;
	font-family: var(--hpf-font-head);
	font-size: 15.5px;
	font-weight: 800;
	color: var(--hpf-ink);
	text-decoration: none;
	box-shadow: 0 10px 26px rgba(0, 0, 0, .28);
	transition: background .2s ease, transform .15s ease, box-shadow .2s ease;
}
.hpf-donate-hero__cta:hover {
	background: var(--hrp-gold-deep, #cf9d35);
	color: var(--hpf-ink);
	transform: translateY(-2px);
	text-decoration: none;
}

/* =====================  HOW IT WORKS (pink band)  ===================== */
.hpf-donate-how { background: var(--hrp-pink, #D46681); padding: clamp(50px, 7vw, 80px) 0; }
.hpf-donate-how__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 22px;
}
.hpf-donate-how__card {
	background: rgba(255, 255, 255, .14);
	border: 1px solid rgba(255, 255, 255, .25);
	border-radius: 16px;
	padding: 26px 24px;
	color: #fff;
	transition: transform .3s var(--hpf-ease, ease), background .3s ease;
}
.hpf-donate-how__card:hover { transform: translateY(-4px); background: rgba(255, 255, 255, .2); }
.hpf-donate-how__step {
	display: block;
	font-family: var(--hpf-font-head);
	font-size: 12.5px;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
	opacity: .85;
	margin-bottom: 16px;
}
.hpf-donate-how__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .18);
	border: 1px solid rgba(255, 255, 255, .3);
	margin-bottom: 16px;
}
.hpf-donate-how__card h3 {
	font-family: var(--hpf-font-head);
	font-size: 19px;
	font-weight: 800;
	color: #fff;
	margin: 0 0 8px;
}
.hpf-donate-how__card p { font-size: 14.5px; line-height: 1.6; color: rgba(255, 255, 255, .92); margin: 0; }
.hpf-donate-how__note {
	max-width: 760px;
	margin: 34px auto 0;
	text-align: center;
	font-size: 13.5px;
	line-height: 1.65;
	color: rgba(255, 255, 255, .92);
}
.hpf-donate-how__note strong { color: #fff; }

/* =====================  CHOOSE YOUR SHELTER  ===================== */
.hpf-donate-shelters { background: var(--hpf-white); padding: clamp(50px, 7vw, 80px) 0; }
.hpf-donate-shelters__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 20px;
}
.hpf-donate-shelter {
	display: flex;
	flex-direction: column;
	background: var(--hpf-white);
	border: 1px solid var(--hpf-border);
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 6px 20px rgba(29, 35, 39, .05);
	transition: transform .3s var(--hpf-ease, ease), box-shadow .3s var(--hpf-ease, ease), border-color .3s ease;
}
.hpf-donate-shelter:hover { transform: translateY(-4px); box-shadow: 0 16px 38px rgba(13, 95, 89, .13); }
.hpf-donate-shelter.is-selected { border-color: var(--hpf-teal); box-shadow: 0 0 0 3px rgba(97, 186, 193, .25), 0 16px 38px rgba(13, 95, 89, .13); }
.hpf-donate-shelter__media { height: 150px; background: var(--hpf-bg-soft); }
.hpf-donate-shelter__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hpf-donate-shelter__fallback { display: flex; align-items: center; justify-content: center; height: 100%; font-size: 38px; opacity: .5; }
.hpf-donate-shelter__body { display: flex; flex-direction: column; flex: 1 1 auto; padding: 16px 16px 18px; }
.hpf-donate-shelter__name {
	font-family: var(--hpf-font-head);
	font-size: 16px;
	font-weight: 800;
	line-height: 1.3;
	color: var(--hpf-ink);
	margin: 0 0 8px;
}
.hpf-donate-shelter__meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 7px;
	font-size: 12.5px;
	color: var(--hpf-muted);
	margin: 0 0 10px;
}
.hpf-donate-shelter__meta span { display: inline-flex; align-items: center; gap: 5px; }
.hpf-donate-shelter__meta svg { color: var(--hpf-teal-dark); }
.hpf-donate-shelter__desc { font-size: 13.5px; line-height: 1.6; color: var(--hpf-muted); margin: 0 0 14px; }
.hpf-donate-shelter__btn {
	margin-top: auto;
	padding: 10px 16px;
	background: var(--hpf-white);
	border: 1.5px solid var(--hpf-teal);
	border-radius: 10px;
	font-family: var(--hpf-font-head);
	font-size: 13.5px;
	font-weight: 700;
	color: var(--hpf-teal-dark);
	cursor: pointer;
	transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.hpf-donate-shelter__btn:hover { background: var(--hrp-teal-soft, #e7f4f5); }
.hpf-donate-shelter__btn-selected { display: none; align-items: center; justify-content: center; gap: 7px; }
.hpf-donate-shelter.is-selected .hpf-donate-shelter__btn { background: var(--hpf-teal-dark); border-color: var(--hpf-teal-dark); color: #fff; }
.hpf-donate-shelter.is-selected .hpf-donate-shelter__btn-label { display: none; }
.hpf-donate-shelter.is-selected .hpf-donate-shelter__btn-selected { display: inline-flex; }
.hpf-donate-shelters__none { text-align: center; color: var(--hpf-muted); }

/* =====================  DONATION FORM (image band)  ===================== */
.hpf-donate-form {
	position: relative;
	background-size: cover;
	background-position: center;
	padding: clamp(50px, 7vw, 90px) 0;
	scroll-margin-top: 90px;
}
.hpf-donate-form__overlay { position: absolute; inset: 0; background: rgba(10, 28, 27, .25); }
.hpf-donate-form__inner { position: relative; }
.hpf-donate-form__col { max-width: 560px; }
.hpf-donate-form__title {
	font-family: var(--hpf-font-head);
	font-size: clamp(24px, 3vw, 32px);
	font-weight: 800;
	line-height: 1.2;
	color: #fff;
	margin: 0 0 20px;
	text-shadow: 0 2px 14px rgba(0, 0, 0, .35);
}
/* Rein in the shortcode's fixed-width card + oversized type so it sits in
   the column and matches the design scale. */
.hpf-donate-form .donation_form_box {
	width: 100% !important;
	max-width: 520px !important;
	border-radius: 18px;
	box-shadow: 0 24px 60px rgba(0, 0, 0, .25);
}
.hpf-donate-form .subscription__buttons { margin-bottom: 20px; gap: 10px; }
.hpf-donate-form .subscription__buttons label strong { font-size: 17px; padding: 12px; border-radius: 10px; }
.hpf-donate-form .custom_quantity_box_detail p { font-size: 14.5px; line-height: 1.5; }
.hpf-donate-form .custom__quantity { font-family: var(--hpf-font-head); }
.hpf-donate-form .donate___btn {
	width: 100%;
	margin-top: 16px;
	padding: 13px 20px;
	background: var(--hpf-teal);
	border: 0;
	border-radius: 999px;
	font-family: var(--hpf-font-head);
	font-size: 15.5px;
	font-weight: 700;
	color: #fff;
	cursor: pointer;
	transition: background .2s ease, transform .15s ease;
}
.hpf-donate-form .donate___btn:hover:not(:disabled) { background: var(--hpf-teal-dark); transform: translateY(-2px); }
.hpf-donate-form .donate___btn:disabled,
.hpf-donate-form .donate___btn.is-locked {
	background: var(--hrp-pink, #D46681);
	cursor: not-allowed;
	transform: none;
}

/* =====================  HOW DONATIONS HELP  ===================== */
.hpf-donate-help { background: var(--hpf-white); padding: clamp(50px, 7vw, 80px) 0; }
.hpf-donate-help__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
	gap: clamp(28px, 5vw, 60px);
	align-items: center;
}
.hpf-donate-help__copy h2 {
	font-family: var(--hpf-font-head);
	font-size: clamp(26px, 3.4vw, 36px);
	font-weight: 800;
	line-height: 1.18;
	color: var(--hpf-ink);
	margin: 0 0 24px;
}
.hpf-donate-help__list { list-style: none; margin: 0; padding: 0; }
.hpf-donate-help__list li { display: flex; gap: 12px; margin: 0 0 16px; font-size: 15.5px; line-height: 1.65; color: var(--hpf-muted); }
.hpf-donate-help__list strong { color: var(--hpf-ink); }
.hpf-donate-help__paw { flex: 0 0 auto; font-size: 17px; line-height: 1.4; }
.hpf-donate-help__media video {
	display: block;
	width: 100%;
	max-width: 380px;
	margin: 0 auto;
	aspect-ratio: 9 / 16;
	object-fit: cover;
	background: #0f1a1a;
	border-radius: 18px;
	box-shadow: 0 18px 44px rgba(13, 95, 89, .18);
}

/* =====================  LOW-QUALITY VS PREMIUM (pink band)  ===================== */
.hpf-donate-why { background: var(--hrp-pink, #D46681); padding: clamp(50px, 7vw, 80px) 0; }
.hpf-donate-why__head {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	gap: clamp(20px, 4vw, 48px);
	align-items: center;
	margin: 0 0 36px;
}
.hpf-donate-why__head h2 {
	font-family: var(--hpf-font-head);
	font-size: clamp(24px, 3.2vw, 34px);
	font-weight: 800;
	line-height: 1.2;
	color: #fff;
	margin: 0;
}
.hpf-donate-why__head p { font-size: 15.5px; line-height: 1.65; color: rgba(255, 255, 255, .92); margin: 0; }
.hpf-donate-why__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 22px;
	max-width: 900px;
	margin: 0 auto;
}
.hpf-donate-why__card { border-radius: 16px; padding: 26px 24px; color: #fff; }
.hpf-donate-why__card--low { background: var(--hrp-teal, #60BABF); }
.hpf-donate-why__card--premium { background: var(--hrp-gold, #E4B451); color: var(--hpf-ink); }
.hpf-donate-why__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .22);
	margin-bottom: 14px;
}
.hpf-donate-why__card h3 { font-family: var(--hpf-font-head); font-size: 19px; font-weight: 800; margin: 0 0 12px; color: inherit; }
.hpf-donate-why__card ul { list-style: none; margin: 0; padding: 0; }
.hpf-donate-why__card li {
	position: relative;
	padding-left: 24px;
	margin: 0 0 9px;
	font-size: 14.5px;
	line-height: 1.55;
}
.hpf-donate-why__card li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 4px;
	width: 13px;
	height: 13px;
	border-radius: 3px;
	background: currentColor;
	opacity: .55;
	-webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="3.4" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>') center / contain no-repeat;
	mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="3.4" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>') center / contain no-repeat;
}

/* =====================  FAQ (gold band)  =====================
   Uses the reusable .hpf-faq component (main.css) — this only paints the gold
   band and skins the component to the cream-on-gold look via --hpf-faq-* vars. */
.hpf-donate-faq { background: var(--hrp-gold, #E4B451); padding: clamp(50px, 7vw, 80px) 0; }
.hpf-donate-faq .hpf-faq {
	--hpf-faq-item-bg: rgba(255, 252, 244, .45);
	--hpf-faq-item-bg-hover: rgba(255, 252, 244, .55);
	--hpf-faq-item-bg-open: rgba(255, 252, 244, .6);
	--hpf-faq-item-border: 0;
	--hpf-faq-item-shadow-open: 0 10px 26px rgba(0, 0, 0, .08);
	--hpf-faq-q-color: var(--hpf-ink);
	--hpf-faq-q-hover-bg: rgba(255, 255, 255, .4);
	--hpf-faq-q-open-bg: rgba(255, 255, 255, .55);
	--hpf-faq-num-bg: #fff;
	--hpf-faq-num-color: var(--hpf-ink);
	--hpf-faq-chev: var(--hpf-ink);
	--hpf-faq-a-color: var(--hpf-ink);
}

/* =====================  RESPONSIVE  ===================== */
@media (max-width: 1024px) {
	.hpf-donate-shelters__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.hpf-donate-help__grid { grid-template-columns: minmax(0, 1fr); }
	.hpf-donate-help__media video { max-width: 340px; }
	.hpf-donate-why__head { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
	.hpf-donate-how__grid { grid-template-columns: minmax(0, 1fr); }
	.hpf-donate-why__grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
	.hpf-donate-shelters__grid { grid-template-columns: minmax(0, 1fr); }
	.hpf-donate-faq__body p { padding-left: 18px; }
	.hpf-donate-hero { padding: 60px 0 70px; }
}