/**
 * 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;
}

/*
 * WCAG 1.3.1 / 2.4.6 — the theme hides the Shop and Cart page titles with
 * display:none, which also hides the page's only H1 from screen readers.
 * Keep them visually hidden but readable.
 */
.shop:not(.shop-heading) .woocommerce-products-header__title,
.woocommerce-cart h1.entry-title {
	display: block !important;
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/*
 * Same for the Checkout title on phones: below 992px Shoptimizer's minimal
 * checkout (cart-checkout.min.css) hides the header "Checkout" H1 with
 * display:none. Wider screens show it in the header, so only this range.
 */
@media (max-width: 992px) {
	.woocommerce-checkout.min-ck:not(.woocommerce-order-received) header h1 {
		display: block !important;
		position: absolute !important;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
		border: 0;
	}
}

/*
 * WCAG 1.3.1 (Info and Relationships), 4.1.2 (Name, Role, Value) and 4.1.3
 * (Status Messages) — screen-reader-only text must stay in the accessibility
 * tree. Shoptimizer's `.screen-reader-text, .sr-only` rule clips the text off
 * screen (correct) but also sets visibility:hidden, which hides it from screen
 * readers too. That silenced form labels (quantity, product search), price
 * range descriptions, and the live regions WooCommerce uses to announce cart
 * and variation changes. The theme's clipping still hides the text visually.
 *
 * This also covers WCAG 2.4.1 (Bypass Blocks): visibility:hidden takes the
 * skip link out of the tab order, so it must stay visible here too.
 */
.screen-reader-text,
.sr-only {
	visibility: visible !important;
}

/*
 * WCAG 2.4.7 (Focus Visible) — once visible to assistive tech, focusable
 * screen-reader-only controls (e.g. WooCommerce's no-JS "Sort" button on shop
 * pages) are back in the tab order, so reveal them while focused, as WordPress
 * core does. Elementor's stylesheet also moves `.screen-reader-text` to
 * top:-10000em, so the position is reset too. The skip link has its own focus
 * styles below.
 */
.screen-reader-text:focus:not(.skip-link),
.sr-only:focus:not(.skip-link) {
	top: 5px;
	left: 5px;
	z-index: 100000;
	width: auto;
	height: auto;
	clip: auto;
	clip-path: none;
	padding: 12px 16px;
	background: #fff;
	color: #111;
	font-weight: 600;
	white-space: normal;
	outline: 2px solid #111;
	outline-offset: 2px;
}

/*
 * WCAG 2.4.1 (Bypass Blocks) — the skip link stays off-screen until focused.
 * Elementor Canvas pages don't load the theme's skip-link styles at all, so
 * its focused state is defined here.
 */
a.skip-link.screen-reader-text:focus {
	position: fixed !important;
	top: 8px;
	left: 8px;
	z-index: 100000;
	width: auto;
	height: auto;
	clip: auto;
	clip-path: none;
	padding: 12px 16px;
	background: #fff;
	color: #111;
	font-weight: 600;
	text-decoration: underline;
	outline: 2px solid #111;
}

/* The skip link target only takes focus programmatically; no ring needed. */
#ssm-main:focus {
	outline: none;
}

/*
 * WCAG 2.5.8 (Target Size) — the login "Show password" toggle and the
 * previous/next product arrows rendered under the 24×24px minimum.
 */
.show-password-input,
.shoptimizer-product-prevnext a {
	min-width: 24px;
	min-height: 24px;
}

/*
 * WCAG 2.5.8 (Target Size) — the close button on the Zoho SalesIQ chat
 * greeting is 18–22px. It is already a flex box, so centre its icon.
 */
#zs-tip-close {
	min-width: 24px;
	min-height: 24px;
	justify-content: center;
	align-items: center;
}

/* Zoho scales the whole chat widget to 80% on small screens (same breakpoint). */
@media (max-width: 554px) {
	#zs-tip-close {
		min-width: 30px;
		min-height: 30px;
	}
}

/*
 * WCAG 2.4.11 (Focus Not Obscured) — the CookieYes consent banner covers the
 * bottom of the viewport until the visitor chooses, and tabbing could land on
 * links hidden behind it. a11y.js sets --ssm-consent-offset to the height it
 * covers; scroll padding keeps focused elements above it, and the matching
 * body padding lets the last links on the page scroll clear of it too.
 */
html.ssm-consent-open {
	scroll-padding-bottom: calc(var(--ssm-consent-offset, 0px) + 16px);
}

html.ssm-consent-open body {
	padding-bottom: var(--ssm-consent-offset, 0px);
}

/* On narrow screens the banner also covers the fixed chat button; lift it. */
html.ssm-consent-covers-chat #zsiq_float {
	bottom: calc(var(--ssm-consent-offset, 0px) + 10px) !important;
}

/*
 * WCAG 1.4.11 (Non-text Contrast) — quantity fields need a 3:1 boundary.
 * The product page input and its up/down arrow box (also in the sticky
 * add-to-cart copy) have #e2e2e2 borders, 1.3:1 on white; the Cart block's
 * selector uses a 30%-opacity border, about 1.9:1. #767676 is 4.5:1 on white
 * and 4.3:1 on the sticky bar's #f8f8f8. Keyboard focus keeps the theme's
 * outline. The `.product .cart` prefix outranks the theme's
 * `.product .cart .quantity .input-text`.
 */
.quantity input.qty:not(:focus),
.product .cart .quantity input.qty:not(:focus),
.product .cart .quantity div.quantity-nav,
.wc-block-components-quantity-selector:not(:focus-within) {
	border-color: #767676;
}

/*
 * WCAG 1.4.11 (Non-text Contrast) — CookieYes draws "off" switches in the
 * preference centre with an inline #D0D5D2 track, 1.5:1 on white. #767676 is
 * 4.5:1 against both the white panel and the white knob.
 */
.cky-switch input[type="checkbox"]:not(:checked) {
	background-color: #767676 !important;
}

/*
 * WCAG 1.3.1 (Info and Relationships) — headings in a product's short
 * description ("Details", "Care Instructions") sit directly under the product
 * title (H1), so they should be H2s. They were entered as H5s to get a smaller
 * look; this styles H2s there like those H5s, so editors can use the correct
 * level without changing the design. Scoped to the short description so the
 * page's other H2s (e.g. "Related products") keep the theme style. The
 * `.product` prefix outranks the theme's mobile `.site h2` sizing.
 */
.product .woocommerce-product-details__short-description h2 {
	margin: 0 0 8px;
	font-family: Inter, sans-serif;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: normal;
	color: #111;
	text-transform: none;
}

/*
 * Shoptimizer accordion titles ([cg_accordion]) are wrapped in an H2 inside
 * their <summary> (see AccessibilityEnhancements::add_accordion_heading) so
 * they work as headings for screen readers. The H2 takes on the summary's
 * look entirely, including over the short-description H2 rule above.
 */
.product .woocommerce-product-details__short-description summary h2.cg-accordion-heading,
summary h2.cg-accordion-heading {
	display: inline;
	margin: 0;
	padding: 0;
	font: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
	color: inherit;
}