/*
 * HD Accessibility - alternate colour set with high contrast.
 *
 * Active while <html> has the class "hdacc-contrast". Every text/background pair
 * is forced to white on black (links yellow, visited links light pink), which is
 * 21:1, 14:1 and 11:1. The ":not(#hdacc-x)" prefix lifts specificity above theme
 * rules; "!important" beats inline styles of page builders. Images, video,
 * iframes and SVG are left untouched (no filters).
 */

html.hdacc-contrast:not(#hdacc-x) {
	color-scheme: dark;
	background: #000 !important;
	color: #fff !important;
}

/* Base: every element except media. :where() keeps this layer at the lowest specificity. */
html.hdacc-contrast:not(#hdacc-x) :where(body, body *:not(img, video, iframe, canvas, picture, source, object, embed, svg, svg *)) {
	border-color: #fff !important;
	color: #fff !important;
	text-shadow: none !important;
	box-shadow: none !important;
	filter: none !important;
	backdrop-filter: none !important;
	mix-blend-mode: normal !important;
	-webkit-text-fill-color: currentcolor !important;
	-webkit-background-clip: border-box !important;
	background-clip: border-box !important;
	scrollbar-color: #fff #000;
	/* A near-zero duration (not "none"): transitionend must still fire, or carousels (Swiper loop) stall. */
	transition-duration: 0.001ms !important;
	transition-delay: 0s !important;
}

/*
 * Backgrounds: text containers get black. An EMPTY element with a background is an icon,
 * logo, swatch, bullet or bar: it keeps its colour and image because they carry information.
 */
html.hdacc-contrast:not(#hdacc-x) :where(body, body *:not(img, video, iframe, canvas, picture, source, object, embed, svg, svg *, :empty, .woocommerce-product-gallery__trigger)) {
	background-color: #000 !important;
	background-image: none !important;
}

/* Decorative pseudo-elements: the colour is forced; the background is cleared only on text containers. */
html.hdacc-contrast:not(#hdacc-x) body *::before,
html.hdacc-contrast:not(#hdacc-x) body *::after {
	color: #fff !important;
	border-color: #fff !important;
}

html.hdacc-contrast:not(#hdacc-x) body :is(p, span, a, li, ul, ol, h1, h2, h3, h4, h5, h6, td, th, label, div, section, article, header, footer, nav, main, aside, figure, blockquote):not(:is(input[type="checkbox"], input[type="radio"]) + *, .woocommerce-product-gallery__trigger)::before,
html.hdacc-contrast:not(#hdacc-x) body :is(p, span, a, li, ul, ol, h1, h2, h3, h4, h5, h6, td, th, label, div, section, article, header, footer, nav, main, aside, figure, blockquote):not(:is(input[type="checkbox"], input[type="radio"]) + *, .woocommerce-product-gallery__trigger)::after {
	background-color: transparent !important;
	background-image: none !important;
}

/* A custom checkbox or radio drawn by the next element's pseudo-element keeps its fill and gets a white edge. */
html.hdacc-contrast:not(#hdacc-x) body :is(input[type="checkbox"], input[type="radio"]) + *::before,
html.hdacc-contrast:not(#hdacc-x) body :is(input[type="checkbox"], input[type="radio"]) + *::after {
	border-color: #fff !important;
	outline: 1px solid #fff;
}

/* State carried by shapes: WooCommerce stars (empty dimmed, filled yellow), bullets, dots, bars, swatches. */
html.hdacc-contrast:not(#hdacc-x) body .star-rating::before {
	color: #8a8a8a !important;
}

html.hdacc-contrast:not(#hdacc-x) body .star-rating span::before {
	color: #ffd400 !important;
}

html.hdacc-contrast:not(#hdacc-x) body .swiper-pagination-bullet,
html.hdacc-contrast:not(#hdacc-x) body .flickity-page-dots .dot {
	background-color: transparent !important;
	border: 2px solid #fff !important;
	opacity: 1 !important;
}

html.hdacc-contrast:not(#hdacc-x) body .swiper-pagination-bullet-active,
html.hdacc-contrast:not(#hdacc-x) body .flickity-page-dots .dot.is-selected {
	background-color: #ffd400 !important;
	border-color: #ffd400 !important;
}

html.hdacc-contrast:not(#hdacc-x) body .ui-slider-range,
html.hdacc-contrast:not(#hdacc-x) body .elementor-progress-bar {
	background-color: #ffd400 !important;
}

html.hdacc-contrast:not(#hdacc-x) body .woocommerce-product-gallery__trigger {
	background-color: #fff !important;
	border: 2px solid #fff !important;
}

html.hdacc-contrast:not(#hdacc-x) body .woocommerce-product-gallery__trigger::before,
html.hdacc-contrast:not(#hdacc-x) body .woocommerce-product-gallery__trigger::after {
	border-color: #000 !important;
	color: #000 !important;
}

html.hdacc-contrast:not(#hdacc-x) body .swatch,
html.hdacc-contrast:not(#hdacc-x) body .variable-item,
html.hdacc-contrast:not(#hdacc-x) body [class*="swatch"]:empty {
	border: 2px solid #fff !important;
}

/* Media keeps its own pixels; only filters and opacity tricks are removed. */
html.hdacc-contrast:not(#hdacc-x) img,
html.hdacc-contrast:not(#hdacc-x) video,
html.hdacc-contrast:not(#hdacc-x) iframe,
html.hdacc-contrast:not(#hdacc-x) canvas {
	filter: none !important;
	opacity: 1 !important;
}

/* Links: yellow and underlined; visited links are visibly different. */
html.hdacc-contrast:not(#hdacc-x) a,
html.hdacc-contrast:not(#hdacc-x) a *:not(img, svg, svg *) {
	color: #ffd400 !important;
	text-decoration: underline !important;
}

html.hdacc-contrast:not(#hdacc-x) a:visited,
html.hdacc-contrast:not(#hdacc-x) a:visited *:not(img, svg, svg *) {
	color: #ffb3ff !important;
}

/* Controls: black, white text, 2px white border. */
html.hdacc-contrast:not(#hdacc-x) button,
html.hdacc-contrast:not(#hdacc-x) input:not([type="checkbox"], [type="radio"], [type="range"], [type="image"], [type="hidden"], [type="color"]),
html.hdacc-contrast:not(#hdacc-x) select,
html.hdacc-contrast:not(#hdacc-x) textarea,
html.hdacc-contrast:not(#hdacc-x) [role="button"],
html.hdacc-contrast:not(#hdacc-x) summary,
html.hdacc-contrast:not(#hdacc-x) .button,
html.hdacc-contrast:not(#hdacc-x) .wp-block-button__link {
	background-color: #000 !important;
	color: #fff !important;
	border: 2px solid #fff !important;
	text-decoration: none !important;
	outline-color: #ffd400;
}

/* A link styled as a button keeps its button look but remains a link in colour terms. */
html.hdacc-contrast:not(#hdacc-x) a.button,
html.hdacc-contrast:not(#hdacc-x) a.wp-block-button__link,
html.hdacc-contrast:not(#hdacc-x) a[role="button"] {
	color: #ffd400 !important;
	border: 2px solid #fff !important;
	text-decoration: underline !important;
}

html.hdacc-contrast:not(#hdacc-x) input[type="checkbox"],
html.hdacc-contrast:not(#hdacc-x) input[type="radio"],
html.hdacc-contrast:not(#hdacc-x) input[type="range"] {
	accent-color: #ffd400;
	outline: 1px solid #fff;
}

html.hdacc-contrast:not(#hdacc-x) ::placeholder {
	color: #ddd !important;
	-webkit-text-fill-color: #ddd !important;
	opacity: 1 !important;
}

html.hdacc-contrast:not(#hdacc-x) :disabled {
	color: #ddd !important;
	border-style: dashed !important;
}

/* Visible separators and table borders. */
html.hdacc-contrast:not(#hdacc-x) hr {
	border: 0 !important;
	border-top: 2px solid #fff !important;
	height: 0 !important;
}

html.hdacc-contrast:not(#hdacc-x) :where(table, th, td, fieldset, blockquote, details) {
	border-color: #fff !important;
}

/* Highlight and selection stay readable. */
html.hdacc-contrast:not(#hdacc-x) mark {
	background-color: #ffd400 !important;
	color: #000 !important;
}

/* Focus ring. */
html.hdacc-contrast:not(#hdacc-x) :focus-visible {
	outline: 3px solid #ffd400 !important;
	outline-offset: 2px !important;
}