/* ==========================================================================
   Widżet dostępności WCAG — efekty nakładane na stronę sklepu
   Ładowany w <head>. Każda reguła jest uśpiona za atrybutem na <html>,
   więc dopóki użytkownik nic nie włączy, koszt sprowadza się do parsowania.

   WAŻNE: żaden filtr CSS nie jest nakładany na <html> ani na <body>.
   Filtr na przodku tworzy blok zawierający dla position:fixed, przez co
   przycisk widżetu (i każdy sticky element motywu) odrywa się od okna
   i wędruje razem ze stroną. Dlatego tryb ciemny realizujemy podmianą
   kolorów, a inwersję nakładamy dopiero na bezpośrednie dzieci <body>.
   ========================================================================== */

:root {
    --wcagw-lh: 1.5;
    --wcagw-ls: 0em;
    --wcagw-ws: 0em;
}

/* Na czas przełączania kosztownej opcji wyłączamy przejścia i animacje
   motywu. Bez tego przeglądarka animuje zmianę koloru na tysiącach
   elementów naraz i efekt pojawia się z wyraźnym opóźnieniem. */
html[data-wcagw-freeze] *:not(.wcagw-ui) {
    transition: none !important;
    animation-duration: 0s !important;
    animation-delay: 0s !important;
}

/* Kontener widżetu musi pozostać nietknięty przez cokolwiek — nasze własne
   efekty, motyw, inne wtyczki. Każda z tych właściwości na przodku tworzy
   blok zawierający dla position:fixed i odrywa przycisk od okna. */
#wcagw-root {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    filter: none !important;
    backdrop-filter: none !important;
    transform: none !important;
    perspective: none !important;
    contain: none !important;
    content-visibility: visible !important;
    clip-path: none !important;
    mask: none !important;
    isolation: auto !important;
    position: static !important;
    max-width: none !important;
    max-height: none !important;
    overflow: visible !important;
    zoom: 1 !important;
}

/* --------------------------------------------------------------------------
   1. Typografia
   --------------------------------------------------------------------------
   Rozmiar tekstu ustawia JavaScript bezpośrednio na elementach — to jedyny
   sposób, który działa w motywach opartych na px, a takich jest większość.
   -------------------------------------------------------------------------- */

html[data-wcagw-lh] :where(body p, body li, body dd, body dt, body td, body th,
body blockquote, body figcaption, body label, body h1, body h2, body h3,
body h4, body h5, body h6, body a, body span) {
    line-height: var(--wcagw-lh) !important;
}

html[data-wcagw-ls] :where(body p, body li, body dd, body dt, body td, body th,
body blockquote, body figcaption, body label, body h1, body h2, body h3,
body h4, body h5, body h6, body a, body button, body span) {
    letter-spacing: var(--wcagw-ls) !important;
}

html[data-wcagw-ws] :where(body p, body li, body dd, body dt, body td, body th,
body blockquote, body figcaption, body label, body h1, body h2, body h3,
body h4, body h5, body h6, body a, body span) {
    word-spacing: var(--wcagw-ws) !important;
}

/* Czcionka czytelna. Nie dołączamy żadnego pliku fontu — stos systemowy ma
   zerowy koszt sieciowy i nie wprowadza kwestii licencyjnych. */
html[data-wcagw-font] body,
html[data-wcagw-font] body :where(p, li, a, span, h1, h2, h3, h4, h5, h6,
td, th, label, button, input, textarea, select, dd, dt, blockquote) {
    font-family: "Atkinson Hyperlegible", "OpenDyslexic", Verdana, Tahoma,
        "Trebuchet MS", "Segoe UI", sans-serif !important;
}

/* Bez justowania — likwiduje „rzeki” bieli w tekście. WCAG 1.4.8. */
html[data-wcagw-align] body :where(p, li, dd, blockquote, td, th, figcaption) {
    text-align: start !important;
    hyphens: none !important;
}

/* --------------------------------------------------------------------------
   2. Odnośniki i nagłówki
   -------------------------------------------------------------------------- */

html[data-wcagw-links] body a:not([role="button"]):not(.btn) {
    text-decoration: underline !important;
    text-underline-offset: 0.18em !important;
    text-decoration-thickness: 0.08em !important;
}

html[data-wcagw-links] body a[target="_blank"]::after {
    content: " \2197";
}

html[data-wcagw-titles] body :where(h1, h2, h3, h4, h5, h6) {
    outline: 2px dashed currentColor !important;
    outline-offset: 4px !important;
}

/* --------------------------------------------------------------------------
   3. Kontrast — realizowany podmianą kolorów, bez filtrów
   -------------------------------------------------------------------------- */

/* Ciemny */
html[data-wcagw-contrast="dark"] body,
html[data-wcagw-contrast="dark"] body *:not(.wcagw-ui) {
    background-color: #10151c !important;
    background-image: none !important;
    color: #e8edf3 !important;
    border-color: #3a4552 !important;
    text-shadow: none !important;
    box-shadow: none !important;
}

html[data-wcagw-contrast="dark"] body a:not(.wcagw-ui) {
    color: #7cc0ff !important;
}

html[data-wcagw-contrast="dark"] body :where(img, video, picture):not(.wcagw-ui) {
    filter: brightness(0.88) contrast(1.05);
}

/* Jasny */
html[data-wcagw-contrast="light"] body,
html[data-wcagw-contrast="light"] body *:not(.wcagw-ui) {
    background-color: #ffffff !important;
    background-image: none !important;
    color: #111111 !important;
    border-color: #444444 !important;
    text-shadow: none !important;
    box-shadow: none !important;
}

html[data-wcagw-contrast="light"] body a:not(.wcagw-ui) {
    color: #0b3d91 !important;
}

/* Wysoki — czarne tło, żółty tekst, cyjanowe odnośniki. */
html[data-wcagw-contrast="high"] body,
html[data-wcagw-contrast="high"] body *:not(.wcagw-ui) {
    background-color: #000000 !important;
    background-image: none !important;
    color: #ffff00 !important;
    border-color: #ffff00 !important;
    text-shadow: none !important;
    box-shadow: none !important;
}

html[data-wcagw-contrast="high"] body a:not(.wcagw-ui) {
    color: #00ffff !important;
}

html[data-wcagw-contrast="high"] body :where(button, input[type="submit"], .btn):not(.wcagw-ui) {
    border: 2px solid #ffff00 !important;
}

/* --------------------------------------------------------------------------
   4. Filtry barwne — wyłącznie na bezpośrednich dzieciach <body>,
   nigdy na <html>, żeby nie zepsuć pozycjonowania fixed.
   -------------------------------------------------------------------------- */

html[data-wcagw-invert] body > *:not(.wcagw-ui) {
    filter: invert(1) hue-rotate(180deg);
}

html[data-wcagw-invert] {
    background: #000000;
}

html[data-wcagw-sat="low"] body > *:not(.wcagw-ui) {
    filter: saturate(0.5);
}

html[data-wcagw-sat="high"] body > *:not(.wcagw-ui) {
    filter: saturate(1.9);
}

html[data-wcagw-sat="mono"] body > *:not(.wcagw-ui) {
    filter: grayscale(1);
}

html[data-wcagw-cvd="prot"] body > *:not(.wcagw-ui) {
    filter: url(#wcagw-prot);
}

html[data-wcagw-cvd="deut"] body > *:not(.wcagw-ui) {
    filter: url(#wcagw-deut);
}

html[data-wcagw-cvd="trit"] body > *:not(.wcagw-ui) {
    filter: url(#wcagw-trit);
}

/* --------------------------------------------------------------------------
   5. Media i ruch
   -------------------------------------------------------------------------- */

html[data-wcagw-nomedia] body :where(img, picture, video, iframe, canvas,
[style*="background-image"]):not(.wcagw-ui) {
    visibility: hidden !important;
    background-image: none !important;
}

/* WCAG 2.2.2 Pause, Stop, Hide + 2.3.1 Three Flashes. */
html[data-wcagw-noanim] *:not(.wcagw-ui) {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
}

/* --------------------------------------------------------------------------
   6. Fokus i kursor
   -------------------------------------------------------------------------- */

html[data-wcagw-focus] body :where(a, button, input, select, textarea,
summary, [tabindex]):focus,
html[data-wcagw-focus] body :where(a, button, input, select, textarea,
summary, [tabindex]):focus-visible {
    outline: 4px solid #ff8a00 !important;
    outline-offset: 3px !important;
    border-radius: 2px !important;
    box-shadow: 0 0 0 7px rgba(0, 0, 0, 0.85) !important;
}

html[data-wcagw-cursor="black"] body,
html[data-wcagw-cursor="black"] body * {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24'%3E%3Cpath d='M4 2l16 9-7 1.5L9.5 20z' fill='%23000' stroke='%23fff' stroke-width='1.2'/%3E%3C/svg%3E") 4 2, auto !important;
}

html[data-wcagw-cursor="white"] body,
html[data-wcagw-cursor="white"] body * {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24'%3E%3Cpath d='M4 2l16 9-7 1.5L9.5 20z' fill='%23fff' stroke='%23000' stroke-width='1.2'/%3E%3C/svg%3E") 4 2, auto !important;
}

/* --------------------------------------------------------------------------
   7. Elementy własne widżetu poza Shadow DOM
   -------------------------------------------------------------------------- */

.wcagw-skip {
    /* Ukrycie przez clip zamiast wyrzucania w lewo — pozycja poza ekranem
       potrafi w niektórych motywach rozszerzyć obszar przewijania. */
    position: absolute;
    left: 0;
    top: 0;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    z-index: 2147483001;
    padding: 14px 22px;
    background: #0f172a;
    color: #ffffff;
    font: 600 16px/1.3 system-ui, sans-serif;
    text-decoration: underline;
    border-radius: 0 0 10px 0;
}

.wcagw-skip:focus {
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
    clip-path: none;
}

.wcagw-guide {
    position: fixed;
    left: 0;
    width: 100%;
    height: 0;
    border-top: 3px solid #ff8a00;
    border-bottom: 3px solid #ff8a00;
    box-sizing: border-box;
    pointer-events: none;
    z-index: 2147482000;
}

.wcagw-mask-top,
.wcagw-mask-bottom {
    position: fixed;
    left: 0;
    width: 100%;
    background: rgba(4, 8, 14, 0.8);
    pointer-events: none;
    z-index: 2147482000;
}

@media print {
    #wcagw-root,
    .wcagw-guide,
    .wcagw-mask-top,
    .wcagw-mask-bottom,
    .wcagw-skip {
        display: none !important;
    }
}