/**
 * A11Y-2 — second accessibility pass. Report: SITE-AUDIT/A9-ROUND2.md
 * PHP: inc/areas/fix-a11y2.php   JS: assets/js/areas/fix-a11y2.js
 *
 * Nothing here changes the default look. The file contains exactly three things:
 *   1. the visually-hidden live region helper the JS writes into,
 *   2. focus rings for the few new controls fix-a9-a11y.css does not reach,
 *   3. opt-in blocks (prefers-contrast / forced-colors / prefers-reduced-motion)
 *      that only apply when the visitor's own system asks for them.
 *
 * The resting 1px #E0E0E0 borders on size chips, filter pills and hub chips are
 * measured lululemon values and are NOT changed here: they fail WCAG 1.4.11
 * (1.32:1) and the smallest compliant replacement is listed in the report for
 * the owner of fix-parity.css / category-grid.css to decide on. This file only
 * makes them compliant for visitors who have asked for more contrast.
 */

/* ==========================================================================
   1. Live region (role="status"), printed by fix-a11y2.php
   ========================================================================== */

.yb-a11y2-sr {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0 0 0 0) !important;
	clip-path: inset(50%) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/* ==========================================================================
   2. Focus visible (2.4.7) on the newer controls
   fix-a9-a11y.css already rings every <button>, <select>, [role="button"] and
   <a>. These three are not covered by any of those selectors.
   ========================================================================== */

.yb .yb-sp7-map iframe:focus-visible,
.yb .woocommerce-error:focus-visible,
.yb .woocommerce-NoticeGroup .woocommerce-error:focus-visible {
	outline: 2px solid #000 !important;
	outline-offset: 2px !important;
}

/* The error panel is given tabindex="-1" and focused by the JS. Keep the ring
   off for the programmatic focus, but leave the panel visibly offset so the
   viewport scroll lands on it. */
.yb .woocommerce-error:focus:not(:focus-visible) {
	outline: none;
	scroll-margin-top: 96px;
}

/* ==========================================================================
   2b. Dismissible hover/focus content (1.4.13)
   account.css opens .yb-acc-pop from :hover / :focus-within only. fix-a11y2.js
   adds this class on Escape so the panel can be dismissed without the visitor
   having to move the pointer or the keyboard focus. Same specificity family as
   the account.css opener, plus one class, so it wins without !important.
   ========================================================================== */

.yb .wd-header-my-account.yb-has-pop.yb-a11y2-dismissed:hover > .yb-acc-pop,
.yb .wd-header-my-account.yb-has-pop.yb-a11y2-dismissed:focus-within > .yb-acc-pop {
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
}

/* ==========================================================================
   3a. prefers-contrast: more — raise the decorative hairlines to >= 3:1
   #E0E0E0 on #FFF = 1.32:1, #D5D5D5 = 1.47:1, #D3D5D7 = 1.47:1, #959595 = 3.00:1.
   #767676 on #FFF = 4.54:1 (text) and #949494 = 3.03:1 (borders).
   ========================================================================== */

@media (prefers-contrast: more) {
	.yb .product-grid-item .wd-swatches-grid .wd-swatch,
	.yb .yb-card__dot {
		box-shadow: 0 0 0 1.5px #767676 !important;
	}

	.yb .summary .wd-swatches-product .wd-swatch.wd-text,
	.yb .sidebar-container .yb-cf-panel .yb-cf-chips li a,
	.yb .yb-fix-lh3__list a,
	.yb .yb-fix-lh3-cw__swatch,
	.yb .woocommerce-cart-form .shop_table .product-quantity .quantity,
	.yb .yb-sp7-map__btn {
		border-color: #767676;
	}

	/* Sold-out size: the strike and the label both carried too little contrast. */
	.yb .summary .wd-swatches-product .wd-swatch.wd-text.wd-disabled {
		background: #fff linear-gradient(to right bottom, transparent calc(50% - 1px), #949494, transparent calc(50% + 1.5px));
		color: #767676;
	}
}

/* ==========================================================================
   3b. forced-colors (Windows High Contrast): box-shadow rings are dropped by
   the forced-colors palette, so the selected colour swatch would look the same
   as every other one. An outline is kept.
   ========================================================================== */

@media (forced-colors: active) {
	.yb .product-grid-item .wd-swatches-grid .wd-swatch,
	.yb .yb-card__dot,
	.yb .yb-fix-lh3-cw__swatch {
		forced-color-adjust: none;
		outline: 1px solid ButtonBorder;
		outline-offset: 0;
	}

	.yb .product-grid-item .wd-swatches-grid .wd-swatch.wd-active,
	.yb .yb-card__dot.is-selected,
	.yb .summary .wd-swatches-product .wd-swatch.wd-text.wd-active {
		outline: 3px solid Highlight;
		outline-offset: 1px;
	}

	/* The clamp fade over the category copy must not paint over the text. */
	.yb.yb-cat-grid .yb-cat-grid-seo__text::after {
		display: none;
	}
}

/* ==========================================================================
   3c. prefers-reduced-motion — the pieces the global A9 block cannot reach:
   the promo track is transformed, the drawer levels slide, the mega panel fades.
   The JS turns off scripted smooth scrolling as well.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.yb .yb-promo__track,
	.yb .yb-mnav__panel,
	.yb .yb-mnav__level,
	.yb .yb-mnav__overlay,
	.yb .yb-pdp-sticky,
	.yb .yb-atb-minibag__panel,
	.yb .whb-header .wd-dropdown,
	.yb .whb-header .wd-dropdown-menu {
		transition-duration: .01ms !important;
		transition-delay: 0s !important;
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
	}

	.yb .yb-cat-grid-seo__text {
		transition: none !important;
	}
}