/*
 * Donor-facing (design system): a piece that asks for money or membership uses terracotta, teal and
 * gold, Source Sans 3 throughout and no navy. Headlines are ink, labels terracotta, rules terracotta then
 * gray. The logo stays as it is: navy on white, white over terracotta. Loaded on the donate site.
 *
 * Terracotta text (#C1542B, 4.6:1) carries small text and white on colour: buttons, links, labels,
 * the footer band. Terracotta (#D25B2F, 4.0:1) is for rules and large type only.
 */

body.sppi-donor {
	/* Navy's roles go to terracotta and the serif's to Source Sans 3. The theme's own tokens are set again
	   here because they were worked out from WordPress's at the root. */
	--wp--preset--color--navy: var(--wp--preset--color--terracotta-text);
	--wp--preset--color--accent: var(--wp--preset--color--terracotta-text); /* The old theme's accent was navy too. */
	--sppi-navy: var(--wp--preset--color--terracotta-text);
	--sppi-hair-navy: 1px solid var(--wp--preset--color--terracotta);
	--wp--preset--font-family--serif: var(--wp--preset--font-family--sans);
	--sppi-serif: var(--wp--preset--font-family--sans);
	--wp--preset--font-size--normal: 18px; /* Source Sans 3 sets larger than Crimson Pro at the same size. */
}

/* Headlines in ink, bold and upright; section heads (h2) stay tracked caps as terracotta labels */
body.sppi-donor :is(h1, h3, h4, h5, h6, .wp-block-post-title) { color: var(--sppi-ink); font-weight: 700; font-style: normal; }
body.sppi-donor :is(h1, .wp-block-post-title) { font-size: var(--wp--preset--font-size--x-large); line-height: 1.1; letter-spacing: -0.01em; }
body.sppi-donor h2 { font-weight: 700; }
body.sppi-donor :is(.wp-block-quote, .wp-block-pullquote) { font-style: normal; }

/* The front page ("Your Gift") is a centred column, so its title is centred over it. The spacer the
   old theme needed above the first heading is left out: the title brings its own space. */
body.sppi-donor.home .sppi-page > .wp-block-post-title { text-align: center; }
body.sppi-donor .wp-block-post-content > .wp-block-spacer:first-child { display: none; }

/* Gifts: amounts and totals in ink, as on the donor sheet */
/* (WooCommerce puts its .woocommerce class on <body> on some pages, so these don't ask for it as an ancestor.) */
body.sppi-donor div.product :is(p.price, span.price),
body.sppi-donor :is(ul.products li.product .woocommerce-loop-product__title, table.shop_table .order-total th, table.shop_table .order-total td) { color: var(--sppi-ink); }

/* Checkout sections open like the membership form's: a terracotta rule, then a terracotta label */
body.sppi-donor form.checkout #customer_details { padding-top: 16px; border-top: 1px solid var(--wp--preset--color--terracotta); }
body.sppi-donor :is(#customer_details h3, #order_review_heading, .cart_totals h2, .woocommerce-order-details__title, .woocommerce-column__title) {
	font: 700 14px/1.35 var(--sppi-sans);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--terracotta-text);
}

/* Notices: teal for information and confirmations, terracotta for problems */
body.sppi-donor :is(.woocommerce-message, .woocommerce-info),
body.sppi-donor .wc-block-components-notice-banner:is(.is-info, .is-success, .is-default) { border-top-color: var(--wp--preset--color--teal); }
body.sppi-donor .wc-block-components-notice-banner:is(.is-info, .is-success, .is-default) > svg { fill: var(--sppi-ink); background: var(--wp--preset--color--teal); } /* Ink on teal: 5.5:1; white would fail. */
body.sppi-donor :is(.woocommerce-message, .woocommerce-info)::before { color: var(--wp--preset--color--teal); }