/* Storefront accessibility fixes from the Fieldtrip audit.

   Deliberately a separate file from foosales-a11y.css. That file comments with
   double slashes, which CSS has no syntax for, so the parser consumes each
   comment plus the rule after it and the browser reports zero rules from the
   whole stylesheet. Rules added there never apply. Fixing it would activate
   ~10KB of styling that has never been live, so it is reported rather than
   silently switched on. Everything here uses block comments and does apply. */

/* Screen-reader-only. The identical rule in foosales-a11y.css never applies,
   for the parsing reason above, so anything relying on it is visible text. */
.tde-a11y-sr-only {
	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;
	white-space: nowrap !important;
	border: 0 !important;
}

/* PD-9906 — the visible Remember me box is drawn as a ::before on the label's
   <span>. The real checkbox is display:none, which is why Tab skips it and a
   screen reader never finds it; only a mouse can use it, by clicking the label.

   So the fix is NOT to draw a checkbox — one is already there. It is to make the
   real control focusable without drawing a second one: overlay it on the custom
   box at zero opacity, and show focus on the box people can actually see.

   opacity:0 is chosen over the clipped screen-reader-only idiom deliberately.
   This plugin's own tab-order pass treats a clipped element as hidden and
   withdraws it, but explicitly does NOT do that to a native control that is
   opacity:0 with real dimensions. Clipping it here would re-break it. */
html .woocommerce-form-login__rememberme {
	position: relative;
}

/* !important on display only: whatever sets display:none on this input could not
   be found in any of the 38 readable stylesheets and is not an inline style, so
   it cannot be out-specified by selector. This plugin reserves !important for
   exactly this kind of last-resort override. */
html .woocommerce-form-login__rememberme .woocommerce-form__input-checkbox {
	display: inline-block !important;
	position: absolute;
	left: 0;
	top: 0;
	width: 1.5rem;
	height: 1.5rem;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

html .woocommerce-form-login__rememberme:has(.woocommerce-form__input-checkbox:focus-visible) span::before {
	outline: 3px solid #0b0b0b;
	outline-offset: 3px;
}

/* PD-9902 — the Edit control on the saved address card is the same colour as
   the address text beside it, at a lighter weight, with no underline, border or
   icon. Contrast between the control and that text is 1:1, so nothing marks it
   as something you can activate; it reads as part of the address. An underline
   is the simplest cue that does not depend on colour at all. */
html .wc-block-components-address-card__edit {
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* PD-9904 — the utility bar drew its focus ring in the bar's own near-black,
   a 1:1 ratio. White clears the 3:1 that WCAG 2.2 SC 1.4.11 requires.

   border-radius is reset because an outline follows it, and the bar's icon
   buttons carry border-radius: 9999px, which drew the ring as a circle. Those
   buttons have a transparent background and no border, so the radius has no
   other visible effect and squaring it changes nothing else. */
html .dot-utility-bar .wc-block-customer-account__link:focus-visible,
html .dot-utility-bar .wc-block-mini-cart__button:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 2px;
	border-radius: 0;
}