/* Spec 45 s.6.2: the widget's document stylesheet, linked by the site in <head> next to boot.js.
   Every selector is keyed on a contract attribute on <html> and leaves the widget hosts
   (fab-a11y, fab-a11y-panel, fab-a11y-aids) alone. Spacing values match the WCAG 1.4.12 test. */

/* Line height */
html[data-a11y-line-height] body,
html[data-a11y-line-height]
	:where(
		p,
		li,
		dt,
		dd,
		td,
		th,
		caption,
		blockquote,
		figcaption,
		label,
		legend,
		summary,
		a,
		span,
		h1,
		h2,
		h3,
		h4,
		h5,
		h6,
		button,
		input,
		select,
		textarea
	):not(fab-a11y, fab-a11y-panel, fab-a11y-aids) {
	line-height: var(--a11y-line-height) !important;
}

/* Letter and word spacing */
html[data-a11y-spacing] body,
html[data-a11y-spacing] body :not(fab-a11y, fab-a11y-panel, fab-a11y-aids) {
	letter-spacing: var(--a11y-letter-spacing) !important;
	word-spacing: var(--a11y-word-spacing) !important;
}

/* Font weight */
html[data-a11y-weight='bold'] body,
html[data-a11y-weight='bold']
	:where(
		p,
		li,
		dt,
		dd,
		td,
		th,
		caption,
		blockquote,
		figcaption,
		label,
		legend,
		summary,
		a,
		span,
		h1,
		h2,
		h3,
		h4,
		h5,
		h6,
		button,
		input,
		select,
		textarea
	):not(fab-a11y, fab-a11y-panel, fab-a11y-aids) {
	font-weight: 700 !important;
}

/* Text align: start only (D-15) */
html[data-a11y-align='start']
	:where(
		p,
		li,
		dt,
		dd,
		td,
		th,
		caption,
		blockquote,
		figcaption,
		h1,
		h2,
		h3,
		h4,
		h5,
		h6,
		div,
		section,
		article
	):not(fab-a11y, fab-a11y-panel, fab-a11y-aids) {
	text-align: start !important;
}

/* Highlight links */
html[data-a11y-links] a[href]:not(fab-a11y, fab-a11y-panel, fab-a11y-aids) {
	text-decoration-line: underline !important;
	text-decoration-thickness: 0.12em !important;
	text-underline-offset: 0.15em !important;
	outline: 2px solid currentColor !important;
	outline-offset: 2px !important;
}

/* Highlight titles */
html[data-a11y-titles]
	:where(h1, h2, h3, h4, h5, h6, [role='heading']):not(fab-a11y, fab-a11y-panel, fab-a11y-aids) {
	outline: 3px dashed currentColor !important;
	outline-offset: 4px !important;
}

/* Highlight content: the hovered or focused text block */
html[data-a11y-content]
	:where(p, li, dt, dd, td, th, blockquote, figure, pre, h1, h2, h3, h4, h5, h6):not(
		fab-a11y,
		fab-a11y-panel,
		fab-a11y-aids
	):is(:hover, :focus-within) {
	outline: 3px solid currentColor !important;
	outline-offset: 3px !important;
}

/* Highlight focus: a thick two-colour ring (D-14); it wins over the link and title outlines */
html[data-a11y-focus][data-a11y] :focus-visible:not(fab-a11y, fab-a11y-panel, fab-a11y-aids) {
	outline: 3px solid #000000 !important;
	outline-offset: 3px !important;
	box-shadow: 0 0 0 3px #ffffff !important;
}

/* Big cursor: 32 x 32 with an explicit hotspot (larger images are dropped near the viewport edge) */
html[data-a11y-cursor='big'],
html[data-a11y-cursor='big']
	:not(fab-a11y, fab-a11y-panel, fab-a11y-aids, input, textarea, [contenteditable]) {
	cursor:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M3 2l24 12-10 3-4 11z' fill='%23000' stroke='%23fff' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E")
			3 2,
		auto !important;
}
html[data-a11y-cursor='big']
	:where(
		a[href],
		button,
		[role='button'],
		label,
		select,
		summary,
		input[type='checkbox'],
		input[type='radio']
	):not(fab-a11y, fab-a11y-panel, fab-a11y-aids) {
	cursor:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M11 3a2 2 0 0 1 4 0v10l2-.5a2 2 0 0 1 2 1l.5-.2a2 2 0 0 1 2.4 1l.4-.1a2 2 0 0 1 2.6 1.6L26 23c0 4-3 7-7 7h-3c-2.4 0-4-1-5.5-3L6 21a2 2 0 0 1 3-2.6l2 2z' fill='%23000' stroke='%23fff' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E")
			12 2,
		pointer !important;
}

/* Hide images: the pixels go, the element and its name stay (D-05, AC-22). Opacity would hide the
   outline too, so img and video drop their content and inline SVG hides its children. */
html[data-a11y-images='hide'] :where(img, video):not([data-a11y-keep], [data-a11y-keep] *) {
	object-position: -99999px -99999px !important;
	background: transparent !important;
	outline: 1px dashed #7a746d !important;
	outline-offset: -1px !important;
}
html[data-a11y-images='hide'] :where(svg[role='img']):not([data-a11y-keep], [data-a11y-keep] *) {
	outline: 1px dashed #7a746d !important;
	outline-offset: -1px !important;
}
html[data-a11y-images='hide']
	:where(svg[role='img']):not([data-a11y-keep], [data-a11y-keep] *)
	> * {
	opacity: 0 !important;
}

/* Stop animations: the CSS floor; JS motion is the site's part (s.6.3) */
html[data-a11y-motion='reduce'],
html[data-a11y-motion='reduce'] :not(fab-a11y, fab-a11y-panel, fab-a11y-aids),
html[data-a11y-motion='reduce'] :not(fab-a11y, fab-a11y-panel, fab-a11y-aids)::before,
html[data-a11y-motion='reduce'] :not(fab-a11y, fab-a11y-panel, fab-a11y-aids)::after {
	animation-duration: 0.001ms !important;
	animation-delay: 0s !important;
	animation-iteration-count: 1 !important;
	transition-duration: 0.001ms !important;
	transition-delay: 0s !important;
	scroll-behavior: auto !important;
}

/* Colour filters on the root (s.4): fixed descendants keep their position */
html[data-a11y-color='mono'] {
	filter: grayscale(1);
}
html[data-a11y-color='low'] {
	filter: saturate(0.5);
}
html[data-a11y-color='high'] {
	filter: saturate(1.6);
}