/**
 * School Store Manager — accessibility fixes.
 *
 * Loaded on every frontend page (base site + school subsites) via
 * SSM\Frontend\AccessibilityEnhancements. Keep rules here narrow and
 * documented with the WCAG success criterion each one addresses.
 */

/*
 * WCAG 1.4.3 (Contrast Minimum) — the Shoptimizer header mini-cart count
 * badge rendered at a 1.91:1 contrast ratio. Force a dark badge with white
 * text so the number clears the 4.5:1 threshold.
 */
.cart-contents .count {
	background-color: #252525 !important;
	color: #ffffff !important;
}

/*
 * WCAG 1.4.3 (Contrast Minimum) — storefront accent colours.
 *
 * Two theme-wide accents fail the 4.5:1 threshold wherever they appear:
 *   - the sale green (#3bb54a) at ~2.5:1, and
 *   - the accent gold (#dc9814) at ~2.46:1.
 * Both were measured identically on every school, so they are global theme
 * colours rather than per-school brand colours — overriding them here does
 * not touch any school's palette (which drives different elements). Each
 * replacement was verified live against the real backgrounds:
 *   green #0b7d18 ~5.0:1, gold #9a6600 ~4.9:1, muted grey #6a6d72 ~4.9:1.
 */
:root {
	--ssm-a11y-sale-green: #0b7d18;
	--ssm-a11y-accent-gold: #9a6600;
	--ssm-a11y-price-muted: #6a6d72;
}

/*
 * Sale flash comes in two forms that must be fixed differently:
 *   - a badge (white text on a green fill) in listings, blocks and the cart, and
 *   - green text on a light background inside the product summary.
 * Darkening the wrong property would invert one of them (e.g. dark text on a
 * dark fill), so the two forms are handled by separate rules.
 */

/*
 * Badge form — darken the green fill, leave the theme's white text. Bare
 * `.onsale` is the standard WooCommerce product-loop sale flash (listings,
 * cross-sells, related products); the summary text form is restored by the
 * higher-specificity `.summary .onsale` rule below, so order is irrelevant.
 */
.onsale,
.product-label,
.sale-item,
.wc-block-grid__product-onsale {
	background-color: var(--ssm-a11y-sale-green) !important;
	color: #ffffff !important;
	/*
	 * The product-block flash is 80% opaque and sits over the product image, so
	 * the image bleeds through and the effective background is indeterminate
	 * (which is why axe cannot confirm its contrast). Force it fully opaque so
	 * the fill is a solid, measurable dark green.
	 */
	opacity: 1 !important;
}

/*
 * Some badges (notably the WooCommerce product-block flash) colour their inner
 * label dark grey rather than white, which fails against the darkened green
 * fill — force the label white so it reads on the badge.
 */
.onsale *,
.wc-block-grid__product-onsale * {
	color: #ffffff !important;
}

/* Text form (product summary) — darken the green text, keep it un-filled. */
.summary .onsale,
.summary .onsale * {
	color: var(--ssm-a11y-sale-green) !important;
	background-color: transparent !important;
}

/*
 * Sale price and gold-accented prices. Covers the sale <ins> price everywhere
 * plus the variable-product price range in the summary ("$X – $Y"), whose
 * amounts and dash separator sit directly under p.price rather than in <ins>.
 */
.price ins,
.price ins *,
.summary p.price > span,
.summary p.price > span * {
	color: var(--ssm-a11y-accent-gold) !important;
}

/* Struck-through original price — a muted grey that sat just under 4.5:1. */
.price del,
.price del * {
	color: var(--ssm-a11y-price-muted) !important;
}

/* "Request a Call Back" CTA — white text on the accent gold. */
[data-trigger="callBack"] {
	background-color: var(--ssm-a11y-accent-gold) !important;
	border-color: var(--ssm-a11y-accent-gold) !important;
}