/*
 * a11y-kit page rules. Classes and custom properties are set on <html> by core.js (boot snippet)
 * and widget.js. The widget itself lives in a shadow root under .a11yk-host and is excluded here.
 * These rules are a visitor preference layer; they never replace accessible markup.
 */

/* ---- text and display */
html.a11yk-font {
  font-size: var(--a11yk-font) !important;
}

html.a11yk-ls body *:not(.a11yk-host) {
  letter-spacing: var(--a11yk-ls) !important;
  word-spacing: var(--a11yk-ws) !important;
}

html.a11yk-lh body *:not(.a11yk-host) {
  line-height: var(--a11yk-lh) !important;
}

html.a11yk-zoom body > *:not(.a11yk-host) {
  zoom: var(--a11yk-zoom);
}

html.a11yk-align-right body *:not(.a11yk-host) {
  text-align: right !important;
}

html.a11yk-align-left body *:not(.a11yk-host) {
  text-align: left !important;
}

html.a11yk-align-center body *:not(.a11yk-host) {
  text-align: center !important;
}

html.a11yk-readable body *:not(.a11yk-host) {
  font-family: Arial, 'Noto Sans Hebrew', Tahoma, sans-serif !important;
}

html.a11yk-headings :is(h1, h2, h3, h4, h5, h6, [role='heading']) {
  outline: 2px solid currentColor !important;
  outline-offset: 6px !important;
  text-decoration: underline !important;
  text-decoration-thickness: 3px !important;
  text-underline-offset: 6px !important;
}

html.a11yk-links a[href]:not(.a11yk-skip) {
  text-decoration: underline !important;
  text-decoration-thickness: 2px !important;
  text-underline-offset: 4px !important;
  font-weight: 700 !important;
  outline: 2px dashed currentColor !important;
  outline-offset: 2px !important;
}

/* ---- custom colours */
html.a11yk-hc :is(h1, h2, h3, h4, h5, h6, [role='heading']),
html.a11yk-hc :is(h1, h2, h3, h4, h5, h6, [role='heading']) * {
  color: var(--a11yk-hc) !important;
}

html.a11yk-tc body *:not(.a11yk-host):not(:is(h1, h2, h3, h4, h5, h6, [role='heading'])):not(:is(h1, h2, h3, h4, h5, h6, [role='heading']) *) {
  color: var(--a11yk-tc) !important;
}

/* Transparent see-through layers (toast and notification containers, portals: fixed and
   pointer-events: none) must stay transparent: painted, they would cover the page. The widget marks
   them [data-a11yk-overlay] at runtime; known libraries are listed so there is no flash before it
   loads. Images are skipped too: their own background is never content, and a site filter on
   a logo (invert for dark modes) would otherwise invert a painted box. Background rules only. */
html.a11yk-bg body,
html.a11yk-bg body *:not(.a11yk-host):not(:is([data-a11yk-overlay], img, .Vue-Toastification__container, [data-sonner-toaster])) {
  background-color: var(--a11yk-bg) !important;
}

/* ---- contrast modes */
html.a11yk-contrast-dark body,
html.a11yk-contrast-dark body *:not(.a11yk-host):not(:is([data-a11yk-overlay], img, .Vue-Toastification__container, [data-sonner-toaster])) {
  background-color: #121212 !important;
}

html.a11yk-contrast-light body,
html.a11yk-contrast-light body *:not(.a11yk-host):not(:is([data-a11yk-overlay], img, .Vue-Toastification__container, [data-sonner-toaster])) {
  background-color: #ffffff !important;
}

html.a11yk-contrast-high body,
html.a11yk-contrast-high body *:not(.a11yk-host):not(:is([data-a11yk-overlay], img, .Vue-Toastification__container, [data-sonner-toaster])) {
  background-color: #000000 !important;
}

html.a11yk-contrast-dark body,
html.a11yk-contrast-dark body *:not(.a11yk-host) {
  color: #f2f2f2 !important;
  border-color: #6b6b6b !important;
}

html.a11yk-contrast-dark body a[href] {
  color: #9cc3ff !important;
}

html.a11yk-contrast-light body,
html.a11yk-contrast-light body *:not(.a11yk-host) {
  color: #111111 !important;
  border-color: #767676 !important;
}

html.a11yk-contrast-light body a[href] {
  color: #0645ad !important;
}

html.a11yk-contrast-high body,
html.a11yk-contrast-high body *:not(.a11yk-host) {
  color: #ffffff !important;
  border-color: #ffffff !important;
}

html.a11yk-contrast-high body :is(a[href], a[href] *, button, button *, h1, h2, h3, h4, h5, h6) {
  color: #ffeb3b !important;
}

html:is(.a11yk-contrast-dark, .a11yk-contrast-light, .a11yk-contrast-high) body *:not(.a11yk-host) {
  text-shadow: none !important;
  box-shadow: none !important;
  /* -webkit-text-fill-color wins over color: gradient text (background-clip: text) sets it to
     transparent or white, which left the text invisible on the forced ground. */
  -webkit-text-fill-color: currentColor !important;
}

/* Decorative gradients and CSS background pictures stay painted under the forced colours and
   leave light patches; contrast modes are about one uniform ground. Content images (<img>) are
   untouched. Opt out per element with data-a11yk-keep-bg. */
html:is(.a11yk-contrast-dark, .a11yk-contrast-light, .a11yk-contrast-high) body *:not(.a11yk-host):not([data-a11yk-keep-bg]),
html:is(.a11yk-contrast-dark, .a11yk-contrast-light, .a11yk-contrast-high) body *:not(.a11yk-host):not([data-a11yk-keep-bg])::before,
html:is(.a11yk-contrast-dark, .a11yk-contrast-light, .a11yk-contrast-high) body *:not(.a11yk-host):not([data-a11yk-keep-bg])::after {
  background-image: none !important;
}

/* Buttons lose their fill when every element gets the same background: outline them so they
   still read as buttons. */
html:is(.a11yk-contrast-dark, .a11yk-contrast-light, .a11yk-contrast-high) body :is(button, [role='button'], input[type='submit'], input[type='button']):not(.a11yk-host) {
  outline: 2px solid currentColor !important;
  outline-offset: -2px;
}

/* Icon fonts drawn as CSS masks (Iconify, Nuxt UI, UnoCSS icons) paint with background-color:
   currentColor; the forced background would paint them in the page colour, i.e. invisible.
   Doubled class: more specific than the contrast rules above. */
html:is(.a11yk-contrast-dark, .a11yk-contrast-light, .a11yk-contrast-high) body :is(.iconify.iconify, [data-a11yk-icon][data-a11yk-icon]) {
  background-color: currentColor !important;
}

/* filter on the root element does not break position: fixed (unlike on any other element) */
html.a11yk-sat-high {
  filter: saturate(2);
}

html.a11yk-sat-low {
  filter: saturate(0.4);
}

html.a11yk-sat-mono {
  filter: grayscale(1);
}

/* ---- cursor */
html.a11yk-cursor-black,
html.a11yk-cursor-black * {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M6 3v37l10-9 7 15 7-3-7-15h14z' fill='black' stroke='white' stroke-width='2.5' stroke-linejoin='round'/%3E%3C/svg%3E") 6 3, auto !important;
}

html.a11yk-cursor-white,
html.a11yk-cursor-white * {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M6 3v37l10-9 7 15 7-3-7-15h14z' fill='white' stroke='black' stroke-width='2.5' stroke-linejoin='round'/%3E%3C/svg%3E") 6 3, auto !important;
}

/* ---- media and motion */
html.a11yk-noimg body :is(img, picture, video, canvas, svg image, [role='img']:not(svg)) {
  visibility: hidden !important;
}

html.a11yk-noimg body *:not(.a11yk-host) {
  background-image: none !important;
}

/* Animations finish instantly (rather than `none`) so elements end in their final, visible state. */
html.a11yk-nomotion *,
html.a11yk-nomotion *::before,
html.a11yk-nomotion *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  animation-delay: 0s !important;
  transition-duration: 0.001ms !important;
  transition-delay: 0s !important;
  scroll-behavior: auto !important;
}

/* ---- keyboard navigation: an unmistakable focus indicator */
html.a11yk-kbd body *:focus {
  outline: 3px solid #ffbf47 !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 6px #0b0c0c !important;
}

/* ---- text to speech: show that text is clickable, and mark what is being read */
html.a11yk-tts:not(.a11yk-cursor-black):not(.a11yk-cursor-white) body :is(p, li, h1, h2, h3, h4, h5, h6, td, th, label, figcaption, blockquote, dd, dt) {
  cursor: help;
}

/* More specific than the contrast background rules, so it still shows in contrast modes. */
html body .a11yk-reading.a11yk-reading.a11yk-reading:not(.a11yk-host) {
  outline: 3px solid #ffbf47 !important;
  outline-offset: 3px !important;
  background-color: rgba(255, 191, 71, 0.18) !important;
}