/* ============================================================================
   10-accessibility.css — dgayurvedic.com
   Jul 2026 review refs: DGA-034, DGA-036, DGA-107, DGA-116/117/118.

   Loads after revo/css/app-default.css and after Revo's generated
   revo_custom_css, so ordinary rules win on cascade order alone. !important
   appears only where the parent theme used it first — that is the whole reason
   DGA-034 exists — and each of those places is called out below.
   ========================================================================= */

/* ----------------------------------------------------------------------------
   Utilities
   -------------------------------------------------------------------------*/

.dga-sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ----------------------------------------------------------------------------
   DGA-107 — skip link
   -------------------------------------------------------------------------*/

.dga-skip-link {
	position: absolute;
	top: -100px;
	left: 8px;
	z-index: 100000;
	min-height: 44px;
	box-sizing: border-box;
	padding: 13px 20px;
	font: 700 15px/1.2 Arial, Helvetica, sans-serif;
	color: #ffffff;
	background: #14401a;
	border-radius: 0 0 4px 4px;
	text-decoration: none;
}

.dga-skip-link:focus {
	top: 0;
	color: #ffffff;
}

/* The skip target is given tabindex="-1" so focus actually lands there; it must
   not then paint a ring around the whole content column. */
#contents:focus,
#contents-detail:focus {
	outline: none !important;
}

/* ----------------------------------------------------------------------------
   DGA-034 — restore a visible focus indicator

   revo/css/app-default.css deletes every indicator on the site with
       *, html      { outline: none !important; }
       body input, body textarea, body button { outline: medium none !important; }
   Both are !important, so the only way back is !important with higher
   specificity. Scoped to :focus-visible, so mouse and touch users never see a
   ring — which is presumably why the theme reached for the sledgehammer.

   Colour: #b34700 rather than the brand green, because the ring has to stay
   visible ON the green buttons and the green header bar. 5.5:1 against white.
   Where the surface itself is green the ring flips to white (see below).
   -------------------------------------------------------------------------*/

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
[role="button"]:focus-visible,
[contenteditable="true"]:focus-visible {
	outline: 3px solid #b34700 !important;
	outline-offset: 2px !important;
}

/* Elements sitting on brand green need a light ring to stay visible: #b34700 on
   #228b22 is 1.25:1, i.e. invisible. */
.header-bottom a:focus-visible,
.header-bottom button:focus-visible,
.header-bottom input:focus-visible,
.header-bottom select:focus-visible,
.add_to_cart_button:focus-visible,
.single_add_to_cart_button:focus-visible,
.button-buynow:focus-visible,
.checkout-button:focus-visible,
.wc-backward:focus-visible,
.sw-quickview:focus-visible,
.dga-skip-link:focus-visible {
	outline: 3px solid #ffffff !important;
	outline-offset: 2px !important;
}

/* WooCommerce moves focus to its error summary after a failed checkout submit.
   That is a programmatic focus, which does not always satisfy :focus-visible. */
.woocommerce-error:focus,
.woocommerce-message:focus,
.woocommerce-info:focus {
	outline: 3px solid #b34700 !important;
	outline-offset: 2px !important;
}

/* ----------------------------------------------------------------------------
   DGA-036 — contrast

   The brand green stays #228b22 wherever it is decoration. Where it carries
   text, or is the background behind text, it darkens to #1b6f1b:
       #1b6f1b on #ffffff  = 6.29:1   (was 4.39:1, fails AA at 16px bold)
       #ffffff on #1b6f1b  = 6.29:1   (was 4.39:1, every buy button)
       #1b6f1b on #eeeeee  = 5.43:1   (was 3.78:1, product accordion header)
   -------------------------------------------------------------------------*/

:root {
	--dga-green-ink: #1b6f1b;
	--dga-green-ink-hover: #145614;
}

/* Revo paints almost every green surface and every green word through
   `var(--primary-color)`, declared once as
       :root { --primary-color: #228b22 !important; }
   and consumed with declarations that are themselves !important
   (e.g. `.woocommerce div.product form.cart .button`). A competing
   `background-color` rule in the child theme therefore cannot win on ordinary
   specificity, and cannot win on source order either, because the parent's
   stylesheet is printed after the child's.
   Re-declaring the CUSTOM PROPERTY on the element sidesteps both: a declaration
   on the element always beats an inherited value from :root, whatever its
   importance or where it was written. So the parent's own rule keeps applying —
   it just resolves to the darker green.
   Every selector below is a place where the green carries text or sits behind
   text. Green used purely as decoration (rules, icons, the logo bar, the
   back-to-top button) is deliberately left at #228b22. */
.header-bottom,
.woocommerce-pagination,
.single-accordion,
.tabs .panel-heading,
.item-price,
.price,
.woocommerce-Price-amount,
.products-content .price,
.sale-off,
.sw-quickview,
.add_to_cart_button,
.added_to_cart,
.single_add_to_cart_button,
.button-buynow,
.checkout-button,
.wc-backward,
.item-bottom .button,
.widget_price_filter .price_slider_amount .button,
.woocommerce #respond input#submit,
.woocommerce button.button.alt,
.woocommerce a.button.alt,
.woocommerce input.button.alt,
.woocommerce-form-login,
.woocommerce-form-register,
.lost_password,
.woocommerce-MyAccount-navigation,
.entry-content .woocommerce-message,
.entry-content .woocommerce-info {
	--primary-color: #1b6f1b;
	--e-global-color-primary: #1b6f1b;
	--rgb-primary-color: 27, 111, 27;
	/* Derived shades the theme uses for hover states. They are pinned no lighter
	   than the base so a hover can never drop back below 4.5:1. */
	--darken5: #176117;
	--darken10: #145614;
	--darken15: #124b12;
	--darken20: #0f400f;
	--lighten5: #176117;
	--lighten10: #176117;
	--lighten15: #145614;
	--lighten20: #145614;
}

/* The header "Login" link renders #464646 on the green bar — 2.15:1, the only
   genuinely illegible pair on the site. White on #1b6f1b is 6.29:1. */
.header-bottom .top-login a,
.header-bottom .top-login a span,
.header-bottom .top-login a:hover,
.header-bottom .top-login a:hover span,
.header-bottom .top-login a:focus,
.header-bottom .top-login a:focus span {
	color: #ffffff !important;
}

/* Body / sidebar grey: #7d7d7d on white is 4.12:1. #595959 is 7.00:1.
   !important because these sit in app-default.css, which prints after the child
   theme's stylesheets. */
.widget_product_categories .cat-item a,
.sidebar .cat-item a,
.product_list_widget a,
.product_detail .content_product_detail .description p,
.woocommerce-product-details__short-description,
.cat-item .count,
mark.count,
.woocommerce-loop-category__title mark.count {
	color: #595959 !important;
	background: none;
}

/* Vertical tab labels: #999999 on #fafafa is 2.73:1. */
.tab-vertical,
a.tab-vertical,
.tabs-vertical .tab-vertical {
	color: #595959 !important;
}

/* Breadcrumbs and struck-through "was" prices are the same #7d7d7d at 14px. */
.breadcrumbs a,
.breadcrumbs span,
.breadcrumbs li a,
.breadcrumbs li span,
.item-price del,
.item-price del .amount,
.item-price del bdi,
.price del,
.price del .amount,
.price del bdi,
.wcpbc-price del,
.wcpbc-price del bdi {
	color: #595959 !important;
}

/* Footer copyright: #7d7d7d on the dark footer is 3.35:1. #bdbdbd is 7.33:1. */
.copyright-text,
.copyright-text a,
.footer .copyright-text p {
	color: #bdbdbd !important;
}

/* ----------------------------------------------------------------------------
   Cross-workstream contrast, same finding (DGA-036), different authors.

   `30-conversion.css` derives its own green token from the same brand value
       :root { --dga-green: var(--primary-color, #228b22); }
   and uses it for the outline ADD TO CART, the listing buy links, the promo
   CTAs and the clinic link — all of them green text on white or near-white,
   i.e. the same 4.39:1 failure DGA-036 is about, on newer markup. A custom
   property carrying !important beats a later non-important declaration of the
   same property, so one line re-points that token without touching the file
   that owns it.
   -------------------------------------------------------------------------*/

:root {
	--dga-green: #1b6f1b !important;
}

/* 30-conversion.css turns the product-page ADD TO CART into a white outline
   button (DGA-083), but its selector is
       .product_detail .addcart-wrapper .single_add_to_cart_button.button   (0,4,0)
   which loses to revo's
       .woocommerce div.product form.cart .button                           (0,4,2)
   Both are !important, so specificity decides and the white background never
   lands: the button renders green text on a green background, 1.43:1 —
   an invisible primary CTA. This restores the intended background at a
   specificity that wins.
   REMOVE THIS BLOCK once 30-conversion.css carries the specificity itself. */
.woocommerce div.product form.cart .addcart-wrapper .single_add_to_cart_button.button {
	background-color: #ffffff !important;
}

/* ----------------------------------------------------------------------------
   DGA-118 — the product gallery loses its bogus listbox roles in JS. The one
   thing CSS has to do is stop the wrapper divs looking like controls.
   -------------------------------------------------------------------------*/

.woocommerce-product-gallery__image,
.item-thumbnail-product {
	cursor: default;
}

.woocommerce-product-gallery__image a,
.item-thumbnail-product img {
	cursor: pointer;
}

/* ----------------------------------------------------------------------------
   DGA-035 — Slider Revolution navigation.
   Autoplay is switched off in the slider's own settings (fix 060), which is what
   satisfies WCAG 2.2.2. What is left here is making the controls usable: the
   bullets ship as 12x12 squares, well under any tap-target guidance.

   prefers-reduced-motion is belt-and-braces — if anyone ever re-enables autoplay
   in the Slider Revolution UI, the transition animations still stop here.
   -------------------------------------------------------------------------*/

sr7-bullet,
sr7-arrow {
	cursor: pointer;
}

sr7-bullets sr7-bullet {
	min-width: 24px !important;
	min-height: 24px !important;
}

sr7-arrow {
	min-width: 44px !important;
	min-height: 44px !important;
}

@media (prefers-reduced-motion: reduce) {
	sr7-module *,
	sr7-module {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
	}
}

/* ----------------------------------------------------------------------------
   DGA-037 — checkout headings promoted h3 -> h2 keep their h3 appearance, so
   nothing about the page looks different.
   -------------------------------------------------------------------------*/

.woocommerce h2.dga-h3,
.woocommerce-checkout h2.dga-h3,
h2.dga-h3 {
	font-size: 18px;
	line-height: 1.4;
	margin: 0 0 14px;
}

/* ----------------------------------------------------------------------------
   Shared styling for the "Show all N categories" controls that 20-mobile.css
   introduces. Kept here because the button is a focusable control.
   -------------------------------------------------------------------------*/

.dga-more-wrap {
	list-style: none;
	margin: 0;
	padding: 0;
	float: none;
	width: 100%;
	clear: both;
}

.dga-more {
	display: block;
	width: 100%;
	min-height: 44px;
	padding: 11px 16px;
	font: 700 14px/1.4 inherit;
	color: #14401a;
	background: #f1f6f1;
	border: 1px solid #c6dcc6;
	border-radius: 3px;
	text-align: center;
	cursor: pointer;
}

.dga-more:hover,
.dga-more:focus {
	background: #e3eee3;
	color: #14401a;
}