/*
 * AKnet Dostępność — reguły nakładane na stronę.
 *
 * Każda reguła działa tylko przy klasie akd-* na <html> (ustawia ją
 * skrypt startowy albo widżet). Hosty widżetu (akd-widget, akd-skip) są
 * wyłączone z selektorów: ich zawartość żyje w Shadow DOM i ma własne style,
 * a gdyby host dostał np. line-height !important ze strony, odziedziczyłby go
 * panel.
 */

/* ---------- Tekst ---------- */

html.akd-font-readable body :not(akd-widget):not(akd-skip):not(i):not(code):not(pre):not(kbd):not(samp):not([class*="icon"]):not([class*="fa-"]):not(.fa):not(.fas):not(.far):not(.fab):not(.material-icons):not([aria-hidden="true"]) {
  font-family: Verdana, Tahoma, "Segoe UI", "DejaVu Sans", sans-serif !important;
}

html.akd-lh-1 body,
html.akd-lh-1 body :not(akd-widget):not(akd-skip) {
  line-height: 1.5 !important;
}

html.akd-lh-2 body,
html.akd-lh-2 body :not(akd-widget):not(akd-skip) {
  line-height: 2 !important;
}

html.akd-sp-1 body,
html.akd-sp-1 body :not(akd-widget):not(akd-skip) {
  letter-spacing: 0.06em !important;
  word-spacing: 0.1em !important;
}

/* Wartości z WCAG 2.1, kryterium 1.4.12 (odstępy w tekście). */
html.akd-sp-2 body,
html.akd-sp-2 body :not(akd-widget):not(akd-skip) {
  letter-spacing: 0.12em !important;
  word-spacing: 0.16em !important;
}

html.akd-sp-2:not(.akd-lh-2) body,
html.akd-sp-2:not(.akd-lh-2) body :not(akd-widget):not(akd-skip) {
  line-height: 1.5 !important;
}

html.akd-sp-2 body p {
  margin-bottom: 2em !important;
}

html.akd-align-left body,
html.akd-align-left body :is(p, li, dd, dt, blockquote, figcaption, caption, h1, h2, h3, h4, h5, h6, td, th, article, section, main, div) {
  text-align: start !important;
}

/* ---------- Kolory ---------- */

html.akd-contrast-dark,
html.akd-contrast-dark body,
html.akd-contrast-dark body :not(akd-widget):not(akd-skip) {
  background-color: #000 !important;
  background-image: none !important;
  color: #fff !important;
  border-color: #fff !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

html.akd-contrast-dark body a[href],
html.akd-contrast-dark body a[href] :not(akd-widget) {
  color: #ffeb3b !important;
}

html.akd-contrast-dark body :is(button, input, select, textarea) {
  border: 2px solid #fff !important;
}

html.akd-contrast-dark body ::placeholder {
  color: #d0d0d0 !important;
  opacity: 1 !important;
}

html.akd-contrast-light,
html.akd-contrast-light body,
html.akd-contrast-light body :not(akd-widget):not(akd-skip) {
  background-color: #fff !important;
  background-image: none !important;
  color: #000 !important;
  border-color: #000 !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

html.akd-contrast-light body a[href],
html.akd-contrast-light body a[href] :not(akd-widget) {
  color: #0033b3 !important;
  text-decoration: underline !important;
}

html.akd-contrast-light body :is(button, input, select, textarea) {
  border: 2px solid #000 !important;
}

html.akd-contrast-light body ::placeholder {
  color: #4a4a4a !important;
  opacity: 1 !important;
}

/*
 * Filtry kolorów idą przez warstwę z backdrop-filter zamiast `filter` na
 * <html>/<body>: `filter` na przodku zamienia mu elementy position: fixed
 * w zwykłe (przyklejone nagłówki szablonu by zjechały ze strony).
 * Panel widżetu leży nad warstwą (z-index o jeden wyżej), więc zostaje czytelny.
 */
html.akd-invert { --akd-f-invert: invert(1) hue-rotate(180deg); }
html.akd-sat-low { --akd-f-sat: saturate(0.4); }
html.akd-sat-high { --akd-f-sat: saturate(2); }
html.akd-sat-gray { --akd-f-sat: grayscale(1); }

html.akd-filter::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 2147483646;
  pointer-events: none;
  -webkit-backdrop-filter: var(--akd-f-invert, ) var(--akd-f-sat, );
  backdrop-filter: var(--akd-f-invert, ) var(--akd-f-sat, );
}

/* ---------- Orientacja ---------- */

html.akd-links body a[href] {
  background-color: #fff176 !important;
  color: #000 !important;
  text-decoration: underline !important;
  text-decoration-thickness: 2px !important;
  text-underline-offset: 0.15em !important;
  outline: 2px solid #000 !important;
  outline-offset: 1px !important;
}

html.akd-links body a[href] :not(akd-widget) {
  color: #000 !important;
}

html.akd-headings body :is(h1, h2, h3, h4, h5, h6, [role="heading"]) {
  outline: 2px dashed #b00020 !important;
  outline-offset: 3px !important;
}

html.akd-headings body :is(h1, h2, h3, h4, h5, h6, [role="heading"])::before {
  display: inline-block !important;
  margin-inline-end: 0.5em !important;
  padding: 2px 6px !important;
  border-radius: 3px !important;
  background: #b00020 !important;
  color: #fff !important;
  font: 700 13px/1.2 system-ui, -apple-system, "Segoe UI", sans-serif !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  vertical-align: middle !important;
}

html.akd-headings body h1::before { content: "H1" !important; }
html.akd-headings body h2::before { content: "H2" !important; }
html.akd-headings body h3::before { content: "H3" !important; }
html.akd-headings body h4::before { content: "H4" !important; }
html.akd-headings body h5::before { content: "H5" !important; }
html.akd-headings body h6::before { content: "H6" !important; }
html.akd-headings body [role="heading"]::before { content: "H" attr(aria-level) !important; }

/* Czarny obrys wewnątrz, żółty na zewnątrz — widać go na każdym tle. */
html.akd-focus body :focus-visible:not(akd-widget):not(akd-skip) {
  outline: 3px solid #000 !important;
  outline-offset: 0 !important;
  box-shadow: 0 0 0 7px #ffd400 !important;
}

html.akd-cursor-black,
html.akd-cursor-black body :not(akd-widget):not(akd-skip) {
  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 3v36l9-9 6 14 6-2.6-6-13.4h13z' fill='%23000' stroke='%23fff' stroke-width='2.5' stroke-linejoin='round'/%3E%3C/svg%3E") 6 3, auto !important;
}

html.akd-cursor-white,
html.akd-cursor-white body :not(akd-widget):not(akd-skip) {
  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 3v36l9-9 6 14 6-2.6-6-13.4h13z' fill='%23fff' stroke='%23000' stroke-width='2.5' stroke-linejoin='round'/%3E%3C/svg%3E") 6 3, auto !important;
}

/* ---------- Ruch i obrazy ---------- */

/*
 * Nie `animation: none`: element, który wjeżdża animacją z opacity 0,
 * zostałby niewidoczny. Bardzo krótki czas przenosi go od razu do stanu
 * końcowego.
 */
html.akd-stop-motion *,
html.akd-stop-motion *::before,
html.akd-stop-motion *::after {
  animation-delay: 0s !important;
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-delay: 0s !important;
  transition-duration: 0.001ms !important;
  scroll-behavior: auto !important;
}

html.akd-hide-img body :is(img, picture, video, canvas, svg[role="img"]) {
  visibility: hidden !important;
}

html.akd-hide-img body :not(akd-widget):not(akd-skip) {
  background-image: none !important;
}

/* ---------- Znaczniki widżetu na stronie ---------- */

body .akd-reading {
  outline: 3px solid #6d28d9 !important;
  outline-offset: 2px !important;
  background-color: rgba(109, 40, 217, 0.12) !important;
}

body .akd-target {
  outline: 4px solid #6d28d9 !important;
  outline-offset: 4px !important;
}