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

/* PD-10083 — the footer is the primary (near-black) preset, and the global
   :focus-visible ring is var(--focus), the same near-black: 1:1, so every
   footer link focused invisibly. The footer's own text colour is the base
   preset, so the ring takes that: whatever the footer declares legible against
   its background is, by construction, visible against it too. */
html .dot-footer :focus-visible {
	outline-color: var(--wp--preset--color--base, #fff);
}

/* PD-10098 — the featured ticket card is filled with var(--ink), and its CTA's
   dashed ring (var(--focus-outline), black) is offset 2px onto that fill: 1:1.
   The CTA itself is var(--bg), so the ring matches the button it surrounds.
   Tokens rather than literals because the dark preference theme swaps
   --ink and --bg, and a literal white would then be the invisible one. */
html .dot-ticket-card--featured .dot-ticket-card__cta.btn:focus,
html .dot-ticket-card--featured .dot-ticket-card__cta.btn:focus-visible {
	outline-color: var(--bg);
}

/* PD-10098, "check other instances site-wide": the CTA band block (rendered
   on /tickets/) is the other var(--ink) surface carrying a button, and it drew
   the global var(--focus) ring on itself, 1:1. Same token, same reason. */
html .dot-cta-band :focus-visible,
html .dot-cta-band .dot-cta-band__button.btn:focus {
	outline-color: var(--bg);
}

/* PD-10087 follow-up — the message shown when Save is pressed with a password
   that does not yet meet the requirements. Bold text with an "Error:" prefix,
   so it does not rely on colour to read as an error. */
html .tde-a11y-password-error {
	margin: 0.5rem 0 0;
	font-weight: 700;
}