/**
 * Accessibility remediation styles — WCAG 2.1/2.2 AA audit, July 2026.
 * Loaded after style.css / woocommerce.css so these rules win the cascade.
 * Keep every rule scoped to a numbered fix from REMEDIATION-HANDOFF.md.
 */

/* ------------------------------------------------------------------ */
/* Fix 1 — restore keyboard focus visibility (WCAG 2.4.7)             */
/*                                                                     */
/* Two-ring indicator: a white inner ring (box-shadow) directly around */
/* the element with a dark green outline outside it. The pair is       */
/* self-contrasting, so the indicator reads on white, #f5f5f5, the     */
/* brand-green header and the dark footer alike. !important because    */
/* the theme suppresses outlines/box-shadows at up to 0,3,1            */
/* specificity (e.g. .newsletter-form … .gfield input).                */
/* ------------------------------------------------------------------ */
/* iframe:focus works in Firefox; Chromium never matches it (focus lives in
   the embedded document), so js/a11y.js flags the frame with a class. */
:is(a, button, input, select, textarea, summary,
	[tabindex], [role="button"]):focus-visible,
iframe:focus,
iframe.a11y-iframe-focused {
	outline: 2px solid #245418 !important;
	outline-offset: 2px !important;
	box-shadow: 0 0 0 2px #fff !important;
	/* The theme's transition:all 0.5s otherwise fades the ring in — the
	   indicator must appear instantly on each Tab press. */
	transition: none !important;
}

/* Wrappers with overflow:hidden clip their input's ring — show the
   indicator on the wrapper instead. */
.form-line:focus-within,
.newsletter-form .gform_wrapper.gravity-theme .gfield:focus-within {
	outline: 2px solid #245418;
	outline-offset: 2px;
	box-shadow: 0 0 0 2px #fff;
}

/* ------------------------------------------------------------------ */
/* Fix 2 — form labels (WCAG 3.3.2)                                    */
/* Standard WP/WooCommerce visually-hidden pattern; the theme doesn't  */
/* load WooCommerce core styles, so it must be defined here. Labels    */
/* stay in the accessibility tree while the design keeps its           */
/* placeholder-style look.                                             */
/* ------------------------------------------------------------------ */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	border: 0;
	white-space: nowrap;
}

/* ------------------------------------------------------------------ */
/* Fix 3 — keyboard-operable quantity stepper (WCAG 2.1.1)             */
/* quantity-input.php now renders real <button>s; style.css only       */
/* styles `.num-in span`, so mirror those rules for the buttons.       */
/* ------------------------------------------------------------------ */
.product-quantity .num-in button.minus,
.product-quantity .num-in button.plus {
	width: 35%;
	display: block;
	position: relative;
	cursor: pointer;
	padding: 1em 0.3em;
	background: none;
	border: 0;
	appearance: none;
	-webkit-appearance: none;
}

.product-quantity .num-in button.minus::before,
.product-quantity .num-in button.minus::after,
.product-quantity .num-in button.plus::before,
.product-quantity .num-in button.plus::after {
	content: '';
	position: absolute;
	background-color: var(--additional-color);
	height: 2px;
	width: 18px;
	top: 50%;
	left: 50%;
	margin-top: -1px;
	margin-left: -5px;
	transform: translateX(-4px);
}

.product-quantity .num-in button.plus::after {
	transform: rotate(90deg) translateY(4px);
}

.product-quantity .num-in button.minus::after {
	display: none;
}

/* ------------------------------------------------------------------ */
/* Fix 5 — side cart close control is now a <button> (was a span);     */
/* neutralise UA button chrome so the plugin's icon styling applies.   */
/* ------------------------------------------------------------------ */
button.xoo-wsch-close {
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
	font: inherit;
	color: inherit;
	appearance: none;
	-webkit-appearance: none;
	/* The plugin positions the close control with span-qualified selectors
	   (`span.xoo-wsch-close`) in xoo-wsc-style.css AND its generated inline
	   CSS — mirror them or the button flows inline next to the title.
	   Values match the plugin style settings (close align: right,
	   icon size: 18). */
	position: absolute;
	right: 10px;
	font-size: 18px;
}

/* ------------------------------------------------------------------ */
/* Fix 8 — skip link + heading demotions (WCAG 2.4.1/1.3.1)            */
/* ------------------------------------------------------------------ */
.skip-link.screen-reader-text:focus {
	position: fixed !important;
	top: 12px;
	left: 12px;
	z-index: 2147483647;
	width: auto;
	height: auto;
	margin: 0;
	padding: 12px 20px;
	clip: auto;
	clip-path: none;
	white-space: normal;
	background: #fff;
	color: #245418;
	font-weight: 600;
	border-radius: 6px;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
	text-decoration: none;
}

/* Price demoted from h2 to span — keep block layout. */
span.product-hero-price {
	display: block;
}

/* ------------------------------------------------------------------ */
/* P3 — motion, reflow, target sizes, footer order                     */
/* ------------------------------------------------------------------ */

/* 2.3.3/2.2.2: honour the OS reduced-motion setting for every CSS
   animation/transition the theme runs (8–13 persisted per page). */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* Pause/play toggle injected by a11y.js on the hero carousel and the
   marquee ticker (2.2.2). */
.a11y-motion-toggle {
	position: absolute;
	z-index: 30;
	right: 12px;
	bottom: 12px;
	width: 36px;
	height: 36px;
	border: 1px solid #245418;
	border-radius: 50%;
	background: #fff;
	color: #245418;
	cursor: pointer;
	font-size: 14px;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
}

.a11y-motion-toggle::before {
	content: '⏸';
}

.a11y-motion-toggle.is-paused::before {
	content: '▶';
}

.three-boxes-carousel-block {
	position: relative;
}

.s-infinite-line {
	position: relative;
}

/* 1.4.10: variations table overflows to 337px at the 320px viewport —
   stack label/value cells at narrow widths. */
@media (max-width: 480px) {
	table.variations,
	table.variations tbody,
	table.variations tr,
	table.variations th,
	table.variations td {
		display: block;
		width: 100%;
		text-align: left;
	}
}

/* 2.5.8: sub-24px targets — product meta links, footer legal links,
   header account/cart. Vertical padding only; layout unchanged. */
.product_meta a,
.product_category p a,
.product_tags p a,
.main-foot .btn-underlined,
.termListInner .btn-underlined,
.additional-terms .btn-underlined {
	display: inline-block;
	padding-top: 3px;
	padding-bottom: 3px;
}

.navbar-top-actions > a {
	display: inline-flex;
	align-items: center;
	min-height: 24px;
}

/* 2.4.3: footer DOM now reads nav → social → newsletter; pin the
   desktop grid placement so visuals stay exactly as designed. */
@media (min-width: 992px) {
	.navbar-foot-block.coll-3 .foot-signup-block {
		grid-column: 1;
		grid-row: 1;
	}

	.navbar-foot-block.coll-3 .navbar-foot-menu-wrap {
		grid-column: 2;
		grid-row: 1;
	}

	.navbar-foot-block.coll-3 .foot-social {
		grid-column: 3;
		grid-row: 1;
	}
}

/* ------------------------------------------------------------------ */
/* Fix 6 — colour contrast (WCAG 1.4.3)                                */
/* Brand green #57A445 is 3.08:1 on white — fails for text. The token  */
/* itself is NOT swapped (it's also button/border/dark-bg colour where */
/* darkening would hurt); instead the audited TEXT usages are          */
/* re-pointed at a darker text green. These element/selector overrides */
/* match style.css specificity and win by cascade order.               */
/* ------------------------------------------------------------------ */
:root {
	--additional-color-text: #3A7A2B; /* 5.25:1 white, 4.82:1 on #f5f5f5 */
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
p a,
small,
.btn-underlined,
.form-control:focus,
.navbar-top-additional strong,
.navbar-top-additional a:hover,
.product-item .product-item-name:hover,
a.page-numbers:hover,
.page-numbers.current,
.pagination-center a.active,
.pagination-center a:hover,
.navigation-btn:hover,
.checkout-order-summary-box strong,
.checkout-order-summary-item small,
.cart-total-block .checkout-order-summary-item strong,
.shop-sub-category-sidebar-item-title,
.select-menu-item-links-result a:hover,
.location-item-info-details a:hover span,
.autocomplete-header-title,
.article-tags a,
.woocommerce-product-attributes-item__value {
	color: var(--additional-color-text);
}

/* Checkout/login notices: green-on-yellow was 1.85:1 — dark text on
   the yellow keeps the component's look at 9.1:1. */
.woocommerce-info,
.woocommerce-noreviews,
p.no-comments {
	color: var(--dark);
}

.woocommerce-info a {
	color: var(--dark);
	text-decoration: underline;
}

/* Home "Special Deals!" marquee: text inherited the grey/green on
   yellow (2.15:1 measured). Dark on yellow, links included. */
.s-infinite-line,
.s-infinite-line a {
	color: var(--dark);
}

/* Affirm promo badge (plugin CSS): #4242CF on #e2e2ff was 3.84:1. */
.__apr_badge {
	color: #4343A8 !important; /* 6.56:1 on the badge lavender */
}

/* Breadcrumbs rendered at opacity .8 (composite 1.73:1 on #f5f5f5);
   full strength everywhere — on dark heroes this only raises contrast. */
.breadcrumbs-block * {
	opacity: 1;
}

/* Struck-through "was" prices at opacity .5 composited to 1.77:1;
   the line-through keeps them visually secondary. */
.price del {
	opacity: 1;
}

/* The theme's global `p { opacity: 0.8 }` composites everything inside a
   paragraph 20% toward the background: WooCommerce form rows (inputs,
   placeholders), SKU/meta, category/tag links, checkout payment text,
   the Affirm line and grey spec paragraphs all landed at 2.6–3.7:1.
   Full opacity globally — with the darkened tokens every combination
   passes, and body text gets slightly more legible rather than less. */
p,
ul,
ol {
	opacity: 1;
}

.product_meta,
.sku_wrapper,
.sku,
.product-hero-sku span,
.accordion-item-double-colls ul {
	opacity: 1;
}

/* Placeholder text: rgba(23,59,14,.5) composites to ~2.9:1. The theme
   uses vendor-prefixed selectors, which Chromium honours over the
   standard pseudo — override each form. */
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
	color: var(--general);
	opacity: 1;
}

input::-moz-placeholder,
textarea::-moz-placeholder {
	color: var(--general);
	opacity: 1;
}

input::placeholder,
textarea::placeholder,
.form-control::placeholder {
	color: var(--general);
	opacity: 1;
}

/* Account orders table: green column headers on #f5f5f5 (2.83:1) and
   half-alpha dark-green cell text on white (2.88:1). */
.table-grid-head {
	color: var(--additional-color-text);
}

.order-cell {
	color: rgba(23, 59, 14, 0.8); /* composites to ~6.5:1 on white */
}

/* Outlined/white (green-text-on-light) buttons: "View Product" cards,
   Continue Shopping, save-for-later, filter chips — 3.08:1 as text. */
.btn.btn-outlined,
.btn.btn-white,
.clear-filter-btn,
.more-filter-btn,
.our-roles-filter-panel-item.btn,
.affirm-modal-trigger {
	color: var(--additional-color-text);
}

/* "Product in cart" state fills the button green — the text-green above
   would sit on it at 1.7:1 (Toby-spotted regression). Restore the theme's
   white text; that state then falls under the documented white-on-brand-
   green exception (3.09:1) rather than a genuine regression. */
.btn.added,
.btn.btn-outlined.added {
	color: var(--white);
}

/* Marquee children (headings/links) carry their own green — keep the
   whole yellow banner dark-on-yellow. */
.s-infinite-line * {
	color: var(--dark);
}

/* Out-of-stock product-card names were dimmed to opacity .2 (1.45:1).
   Full-strength grey keeps them visually secondary at 5.2:1+. */
.product-item.outofstock .product-item-name {
	opacity: 1;
	color: var(--general);
}

/* Header product search (dgwt plugin ships its own grey). */
.dgwt-wcas-search-input,
input.dgwt-wcas-search-input {
	color: #5F6A5D !important;
}

.dgwt-wcas-search-input::placeholder {
	color: #5F6A5D !important;
	opacity: 1 !important;
}

/* ------------------------------------------------------------------ */
/* Fix 6b — compliant brand-green fills (client-approved 10 Jul)       */
/* Every fill that carries white text moves from #57A445 (3.09:1) to   */
/* the darker brand green (5.25:1). Non-text uses (outlined borders    */
/* when unfocused, icons, ticks, decorative accents) stay bright.      */
/* REVERT: set --additional-color-fill back to #57A445.                */
/* ------------------------------------------------------------------ */
:root {
	--additional-color-fill: #3A7A2B;
}

::selection,
button,
.btn,
.btn.btn-white:hover,
.btn.btn-outlined:hover,
.btn.added,
.single-show,
.navbar-top,
.navbar-top::before,
.navbar-collapse-inner-block,
header .menu-overlay,
.our-roles-filter-panel-inner .btn:hover,
.our-roles-filter-panel-inner .btn.active,
.dashboard-sidebar .btn-double-group .btn:hover,
.form-radio-button.active span,
.form-radio-button input:checked + span,
.afwc_reg_field_wrapper input[type='submit'],
.newsletter-form .gform_wrapper.gravity-theme #field_submit button:hover,
.form .gform_wrapper.gravity-theme .gfield input[type=file]:hover,
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[data-selected],
.single_add_to_cart_button.composite_add_to_cart_button,
.single_add_to_cart_button.composite_add_to_cart_button.button.alt,
.cbd-badge,
.cbd-badge--free-shipping,
.woocommerce-message,
.woocommerce-error,
.woosl-button,
.s-cart .shop_table .woosl-product-atc .button:hover,
.wwp_wholesaler_registration .button,
.wwp_requisition_list_main .modal-header,
input[name='save_tax'],
#aftax_fileupload_field:hover,
#wwp_wholesaler_file_upload:hover {
	background-color: var(--additional-color-fill);
	border-color: var(--additional-color-fill);
}

/* Restore white text where fix 6 darkened it before the fill change
   (filled buttons need light-on-dark, not dark-on-dark). */
.woosl-button,
.btn.added,
.btn.btn-outlined.added {
	color: var(--white);
}

/* Filled-button hover inverts to white bg + green text — use the
   compliant text green there too. */
.btn:hover {
	color: var(--additional-color-text);
}

/* Cart count: brand-green number on the white badge (3.08:1). */
.item-with-icon .cart-count {
	color: var(--additional-color-text);
}

/* Outlined buttons: border follows the darkened text for coherence. */
.btn.btn-outlined {
	border-color: var(--additional-color-fill);
}

/* ─────────────────────────────────────────────────────────────────────────
   Live retest 16 Jul 2026 — gaps the dev audit's page/product sample
   couldn't surface (see docs/a11y-audit/LIVE-RETEST-16JUL.md).
   ───────────────────────────────────────────────────────────────────────── */

/* Low-stock "Only N left in stock" used WooCommerce's default green #0f834d,
   which is 4.4:1 on the #f5f5f5 product panel — 0.1 short of AA. Only shows at
   low stock, so the audit's sampled products didn't trigger it. Use the
   compliant text green (4.82:1 on #f5f5f5, 5.25:1 on white). */
.stock.in-stock {
	color: var(--additional-color-text);
}

/* "Follow Our <City> Store" heading sits on the yellow (#f7d649) promo block,
   where the global heading green #3A7A2B is only 3.66:1. Use near-black like the
   other yellow contexts (Woo notices, marquee) → ~9:1. Scoped to the block so
   other .title-section headings on light/dark grounds are untouched. */
.follow-store-block .title-section {
	color: var(--dark);
}

/* Subpage-hero title on the "dark-color" (= dark text, light ground) variant —
   used by the information-center/blog heroes. style.css ~2289 sets it to
   var(--additional-color) (brand green #57A445) = 2.83:1 on #f5f5f5: it fails
   even the 3:1 large-text bar on desktop, and 4.5:1 on mobile where it renders
   at 19.5px. Fix 6's global h1–h6 remap couldn't reach it — that rule is four
   classes deep (0-4-0) and out-specifies a bare `h1`. Same selector here, and
   a11y.css loads after style.css, so it wins on source order. Uses the same
   compliant text green as every other green-text usage (fix 6b) → 4.82:1.
   Scoped to .dark-color so hero variants with light text on dark/image grounds
   are untouched. */
.s-subpage-hero.dark-color .subpage-hero-info .title-page {
	color: var(--additional-color-text);
}