/*
 * cdob-giving.css | v0.3.0 | 2026-10-26 | Generated by Claude, session CDOB-CHAR-S2
 * (v0.1.0 same day, first draft; v0.2.0 accessibility review; v0.3.0 hides the
 * wallet slot and the ACH pane on the recurring tabs and applies the second
 * accessibility review)
 *
 * The /support/ giving page: the cadence tab strip, the four level cards, the
 * status sentence and the hiding rule for the gift fields
 * (includes/cdob-giving.php, js/cdob-giving.js). Enqueued only on a page that
 * carries [cdob_support_giving].
 *
 * Reuse over copy: the tabs are the theme's own light-surface ghost button
 * (.cdob-btn .cdob-btn--ghost-dk, css/cdob-core.css), so their size, border,
 * type, hover and focus ring come from the theme. This sheet adds only the
 * current state, which the theme button has no concept of.
 *
 * Colors: tokens only, and NO new color pair. Every text/background pair here
 * is one the theme already uses: navy on paper, paper on navy, ink on paper.
 * The pairs are re-derived by the a11y review for this version, not carried
 * from this comment (lesson 3): navy/paper and paper/navy 10.397:1, ink/paper
 * 16.483:1. Two edges are decorative and carry no state, so they are not UI
 * boundaries that need 3:1: the level-card edge (--cdob-ui-border over paper,
 * about 1.44:1; the card text carries the information, the same posture as
 * cdob-directories.css and cdob-submissions.css "decorative card edge") and the
 * flame stripe on the status sentence (3.51:1, never used as text).
 *
 * Specificity: every rule is anchored under .cdob-giving so the winner never
 * depends on print order against the Charitable stylesheet.
 *
 * The gift-field rule near the end is load-bearing: the browser script shows a
 * gift field by adding .cdob-giving-shown. Without the script the fields stay
 * hidden and a donation completes with gift status "choose_later", by design.
 */

.cdob-giving {
	font-family: var(--cdob-ff-sans);
	color: var(--cdob-ink);
	margin: 0 0 2rem;
}

/* Cadence tabs: ordinary links, one form on the page at a time. */
.cdob-giving .cdob-giving__tabs ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	list-style: none;
	margin: 0 0 1.5rem;
	padding: 0;
}

.cdob-giving .cdob-giving__tabs li {
	margin: 0;
}

/* The current cadence: navy fill and paper text (the theme button's own hover
   look) plus an underline, so the current tab is not told apart by fill alone
   (WCAG 1.4.1) and the cue survives forced-colors mode, which drops fills. */
.cdob-giving .cdob-giving__tab[aria-current="page"] {
	background: var(--cdob-navy);
	color: var(--cdob-paper);
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* The four level cards. */
.cdob-giving .cdob-giving__levels {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
	gap: 1rem;
	list-style: none;
	margin: 0 0 1.5rem;
	padding: 0;
}

/* Decorative card edge, about 1.44:1, no state (see the header). */
.cdob-giving .cdob-giving__level {
	border: 2px solid var(--cdob-ui-border);
	border-radius: 4px;
	background: var(--cdob-paper);
	padding: 1rem;
	margin: 0;
}

.cdob-giving .cdob-giving__level-name {
	margin: 0 0 0.25rem;
	color: var(--cdob-navy);
	font-size: var(--fs-500);
}

.cdob-giving .cdob-giving__level-price {
	margin: 0 0 0.5rem;
	color: var(--cdob-navy);
	font-size: var(--fs-500);
	font-weight: 700;
}

.cdob-giving .cdob-giving__level-gift {
	margin: 0;
	color: var(--cdob-ink);
	font-size: var(--fs-400);
}

.cdob-giving .cdob-giving__once,
.cdob-giving .cdob-giving__notice {
	margin: 0 0 1.5rem;
	color: var(--cdob-ink);
	font-size: var(--fs-400);
}

/* The one-sentence "what you are choosing" status the script writes. It is a
   live region that is always rendered; with no text it collapses to nothing. */
.cdob-giving .cdob-giving__gift-note {
	margin: 0.75rem 0;
	padding: 0.75rem 1rem;
	border-left: 4px solid var(--cdob-flame);
	background: var(--cdob-paper);
	color: var(--cdob-ink);
	font-size: var(--fs-400);
	font-weight: 600;
}

.cdob-giving .cdob-giving__gift-note:empty {
	margin: 0;
	padding: 0;
	border: 0;
}

/* Gift fields: hidden until the script reveals the ones the level carries.
   Wrapper divs only: the inputs inside carry ids with the same prefix
   (charitable_field_cdob_gift_shirt_size_element), so the selector names the
   wrapper's own class to leave them alone. */
.cdob-giving div.charitable-form-field[id^="charitable_field_cdob_gift_"]:not(.cdob-giving-shown) {
	display: none;
}

/* The wallet buttons (Apple Pay, Google Pay) and the bank-debit option (ACH)
   make a single charge, so they are not offered on the three recurring tabs.
   The server takes them out of the form and refuses the request too
   (includes/cdob-giving.php section 4b); this removes the empty wallet slot and
   its "Or Pay By Card" divider, and hides the ACH tab and pane if the vendor
   prints them anyway. !important because the vendor's script sets an inline
   display when it mounts a pane or switches a tab, which would beat this rule. */
.cdob-giving[data-cadence="periodic"] #charitable_stripe_express_checkout_field,
.cdob-giving[data-cadence="periodic"] .charitable-payment-divider,
.cdob-giving[data-cadence="periodic"] .charitable-gateway-tab[data-gateway-id="stripe_ach_direct_debit"],
.cdob-giving[data-cadence="periodic"] #charitable-gateway-fields-stripe_ach_direct_debit {
	display: none !important;
}

/* The vendor's radio and checkbox labels are about 17px tall (a 1em line box
   in an inline-block list item). Give each a 24px minimum target (WCAG 2.5.8)
   without changing how it reads. */
.cdob-giving .charitable-radio-list li {
	display: block;
	margin: 0 0 0.25rem;
}

.cdob-giving .charitable-radio-list label,
.cdob-giving .charitable-form-field.charitable-form-field-checkbox label {
	display: inline-block;
	min-height: var(--cdob-tap-min-aa);
	padding-block: 0.25rem;
	line-height: 1.4;
}