/*
 * /donate hero band (T-203 §1) — chips, recurring toggle, dominant DONATE.
 *
 * Composes 40-hero.css `.is-style-isjac-hero` + 40-buttons.css variants.
 * Chips are real <a>s so they degrade to working PayPal links without JS.
 * Tokens only. No raw hex, no !important.
 */

/* Donate hero shares the homepage Honors photo so the brand experience is
 * continuous between landing surfaces. The Customizer's site-wide default
 * already points at this image; we restate it here so the donate page is
 * not silently broken if a future Customizer change clears the global. */
body.page-id-25207 {
	--isjac-hero-bg-image: url('/wp-content/media/2025/04/upscaledISJACFinal-131topaz.jpg');
	/* Match the homepage default (00-tokens.css = 0.7). The previous 0.55
	 * ran the hero too bright — chip + paragraph contrast against the photo
	 * was below the homepage parallel and made the trustline read washed-out. */
	--isjac-hero-overlay-opacity: 0.7;
}

.entry-content > .alignfull.is-style-isjac-hero.isjac-donate-hero {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--isjac-pad-md);
}

/* Specificity must beat 40-hero.css's `.entry-content > .alignfull.is-style-isjac-hero p`
 * (0,3,2) which paints all hero `<p>` at the lead-text size. Mirroring that
 * selector chain plus the per-element class wins via pure source-order on
 * higher specificity. Same shape used for __cta__tertiary and __anchor below. */
.entry-content > .alignfull.is-style-isjac-hero p.isjac-donate-hero__trustline {
	margin: 0;
	font-size: var(--isjac-font-size-small);
	font-weight: var(--isjac-font-weight-medium);
	letter-spacing: 0.04em;
	color: var(--isjac-color-paper);
	opacity: 0.92;
}

/* ---------- Recurring toggle ---------- */
.entry-content .isjac-donate-toggle {
	display: inline-flex;
	gap: 0;
	padding: 4px;
	border-radius: 9999px; /* TODO T-203-FU-1: add --isjac-radius-pill token (Q-Z-3a) */
	background: rgba(255, 250, 252, 0.12);
	border: 1px solid rgba(255, 250, 252, 0.35);
}

.entry-content .isjac-donate-toggle__btn {
	min-height: var(--isjac-button-min-height);
	padding: 0 var(--isjac-space-5);
	border: 0;
	background: transparent;
	color: var(--isjac-color-paper);
	font-family: var(--isjac-font-family);
	font-weight: var(--isjac-font-weight-medium);
	font-size: var(--isjac-font-size-small);
	letter-spacing: 0.02em;
	text-transform: uppercase;
	border-radius: 9999px;
	cursor: pointer;
	transition: background-color 150ms ease-out, color 150ms ease-out;
}

.entry-content .isjac-donate-toggle__btn[aria-checked="true"] {
	background: var(--isjac-color-brand-deep);
	color: var(--isjac-color-paper);
}

.entry-content .isjac-donate-toggle__btn:focus-visible {
	outline: 2px solid var(--isjac-color-paper);
	outline-offset: 2px;
}

/* ---------- Chip row ---------- */
.entry-content .isjac-donate-chips {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, auto));
	gap: var(--isjac-space-3);
	margin: var(--isjac-space-3) 0 0;
	padding: 0;
	list-style: none;
}

.entry-content .isjac-donate-chips__item { margin: 0; }

.entry-content .isjac-donate-chip { min-width: 5rem; }

/* Selected chip on the dark hero. The dark-surface secondary rule in
 * 40-buttons.css uses an :is() compound that reaches (0,5,0) specificity;
 * we match it with .entry-content + .is-style-isjac-hero + .isjac-btn +
 * .isjac-donate-chip + [aria-pressed] and let source order seal the win. */
.entry-content .is-style-isjac-hero .isjac-donate-chips .isjac-btn.isjac-donate-chip[aria-pressed="true"] {
	background: var(--isjac-color-paper);
	color: var(--isjac-color-brand-deep);
	border-color: var(--isjac-color-paper);
}

/* "Other" inline numeric input — JS reveals via data-open.
 * Width is bounded so the input is large enough for a 5-digit amount and the
 * Continue button reads on one line; max-width keeps it from spanning the
 * full hero on desktop where the chip row is narrow. */
.entry-content .isjac-donate-other {
	display: none;
	margin: var(--isjac-space-3) 0 0;
	gap: var(--isjac-space-2);
	align-items: stretch;
	width: 100%;
	max-width: 22rem;
}

.entry-content .isjac-donate-other[data-open="true"] { display: flex; }

.entry-content .isjac-donate-other__input {
	flex: 1 1 auto;
	min-width: 0;
	min-height: var(--isjac-input-min-height);
	padding: 0 var(--isjac-input-padding-x);
	font-family: var(--isjac-font-family);
	font-size: var(--isjac-font-size-base);
	background: var(--isjac-color-paper);
	color: var(--isjac-color-ink);
	border: 1.5px solid var(--isjac-color-paper);
	border-radius: var(--isjac-radius-sm);
}

.entry-content .isjac-donate-other__input:focus {
	outline: 2px solid var(--isjac-color-paper);
	outline-offset: 2px;
}

/* Continue button must stay on a single line; the base .isjac-btn rule
 * doesn't set white-space, and inside a constrained flex parent the
 * uppercase label otherwise wraps to three rows. */
.entry-content .isjac-donate-other__submit {
	flex: 0 0 auto;
	white-space: nowrap;
}

/* ---------- Hero DONATE button — visually dominant ---------- */
.entry-content .isjac-donate-cta {
	margin: var(--isjac-space-4) 0 0;
	font-size: var(--isjac-font-size-lg);
	min-height: calc(var(--isjac-button-min-height) * 1.25);
	padding: 0 var(--isjac-space-6);
}

.entry-content > .alignfull.is-style-isjac-hero p.isjac-donate-cta__tertiary {
	margin: var(--isjac-space-3) 0 0;
	font-size: var(--isjac-font-size-small);
	color: var(--isjac-color-paper);
	opacity: 0.85;
	max-width: 56ch;
}

.entry-content > .alignfull.is-style-isjac-hero p.isjac-donate-anchor {
	margin: var(--isjac-space-5) 0 0;
	font-size: var(--isjac-font-size-base);
}

/* Specificity must beat 20-typography.css's
 * `.entry-content a:not(.wp-block-button__link):not(.page-numbers):not(.wp-element-button):not(.isjac-btn):not(.kb-button):not(:has(> img)):not(:has(> figure))`
 * which paints all entry-content links Brand Mid. Mirror its :not chain
 * so we clear the same specificity bar, then source-order (40 > 20) seals
 * the win. Same paper-on-navy treatment as the homepage hero anchor. */
.entry-content .is-style-isjac-hero .isjac-donate-anchor a:not(.wp-block-button__link):not(.page-numbers):not(.wp-element-button):not(.isjac-btn):not(.kb-button) {
	color: var(--isjac-color-paper);
	text-decoration: underline;
	text-decoration-color: rgba(255, 250, 252, 0.5);
	text-underline-offset: 0.3em;
	font-weight: var(--isjac-font-weight-medium);
}

.entry-content .is-style-isjac-hero .isjac-donate-anchor a:not(.wp-block-button__link):not(.page-numbers):not(.wp-element-button):not(.isjac-btn):not(.kb-button):hover,
.entry-content .is-style-isjac-hero .isjac-donate-anchor a:not(.wp-block-button__link):not(.page-numbers):not(.wp-element-button):not(.isjac-btn):not(.kb-button):focus-visible {
	text-decoration-color: var(--isjac-color-paper);
}

/* ---------- Mobile (<640px) — chips collapse to 2-col, Other full-width ---------- */
@media (max-width: 640px) {
	.entry-content .isjac-donate-chips { grid-template-columns: 1fr 1fr; }
	.entry-content .isjac-donate-chips__item:last-child { grid-column: 1 / -1; }
	.entry-content .isjac-donate-chip { width: 100%; min-width: 0; }
	.entry-content .isjac-donate-other { max-width: none; }
	.entry-content .isjac-donate-cta { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.entry-content .isjac-donate-toggle__btn { transition: none; }
}