/* Evoke ONE — Burger
 *
 * Wszystko sterowane zmiennymi, bo kontrolki elementu wpisują je przez Bricksa
 * — a to znaczy, że każdą da się ustawić OSOBNO NA BREAKPOINCIE. Wartości
 * wpisane wprost w reguły odebrałyby tę możliwość.
 *
 * Stan otwarcia czytamy z klasy `brx-open`, którą nakłada MENU (Circular
 * Menu / Offcanvas Menu) albo — w trybie samodzielnym — burger.js. Burger
 * nigdy nie decyduje sam z siebie, jak jest; on ten stan pokazuje.
 */

.evk-burger {
    --evk-burger-size: 44px;
    --evk-burger-line-width: 100%;
    --evk-burger-stroke: 2px;
    --evk-burger-gap: 7px;
    --evk-burger-radius: 0px;
    /* Długość KRÓTSZEJ kreski w stylach asymetrycznych. W procentach, więc
       trzyma proporcję przy każdym rozmiarze przycisku. */
    --evk-burger-short: 60%;
    /* Wielkość własnej ikony (źródło „ikona") i odstęp napisu od rysunku. */
    --evk-burger-icon-size: 24px;
    --evk-burger-text-gap: 8px;
    /* Kolor napisu PO OTWARCIU. `currentColor` znaczy „dziedzicz", więc
       nieustawiona nie zmienia niczego: napis trzyma kolor przycisku w obu
       stanach, tak jak przed 1.81.0. Koloru stanu zamkniętego nie dublujemy
       własną kontrolką — napis dziedziczy go z przycisku, czyli z natywnej
       typografii Bricksa, i to już działa. */
    --evk-burger-text-color-open: currentColor;
    --evk-burger-color: currentColor;
    /* Puste „po otwarciu" znaczy „ten sam co przed" — kreski zmieniają wtedy
       wyłącznie kształt. Wartość domyślna wskazująca na drugą zmienną robi to
       bez ani jednego warunku w PHP. */
    --evk-burger-color-open: var(--evk-burger-color);
    --evk-burger-time: 400ms;
    --evk-burger-ease: ease;
    /* Obrót CAŁEGO rysunku przy otwarciu — mnożnik listy stylów. Krzyżyk
       z obrotem 90° to krzyżyk stojący, daszek z obrotem 90° pokazuje w dół.
       Bez tego lista puchłaby o pozycje różniące się wyłącznie kierunkiem. */
    --evk-burger-open-rotate: 0deg;

    /* Rozsunięcie skrajnych kresek od środka. Odstęp liczy się od KRAWĘDZI,
       więc do przerwy trzeba dołożyć grubość — inaczej pogrubienie kresek
       zjadałoby przerwę mimo niezmienionego ustawienia.
       Dwukreskowe używają połowy tej wartości i dzięki temu to samo ustawienie
       daje w obu rodzinach tę samą przerwę. */
    --evk-burger-offset: calc(var(--evk-burger-gap) + var(--evk-burger-stroke));
    /* Moment, w którym rusza drugi takt ruchów dwutaktowych (patrz „złożenie”). */
    --evk-burger-beat: calc(var(--evk-burger-time) * 0.45);
    /* Margines od krawędzi pudełka do rysunku. Kreska węższa niż pole rysunku
       ma zostać WYŚRODKOWANA, a style dosuwane do krawędzi mają się trzymać
       krawędzi RYSUNKU, nie pola klikalnego. Jedna zmienna zamiast powtarzania
       tego rachunku przy każdym stylu. */
    --evk-burger-inset: calc((100% - var(--evk-burger-line-width)) / 2);

    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--evk-burger-size);
    height: var(--evk-burger-size);
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

/* Pudełko z kreskami jest KWADRATEM o boku pola klikalnego, a nie o szerokości
   kresek. Do 1.78.0 było odwrotnie i wychodziło na to samo, bo przycisk
   wyśrodkowywał węższe pudełko. Przestaje wychodzić na to samo, gdy obok stanie
   tekst: przycisk mierzy się wtedy treścią, a procent nie ma się już do czego
   odnieść — pudełko zapadłoby się do zera. Stąd bok wprost ze zmiennej,
   a szerokość kresek zeszła na same kreski. */
.evk-burger__box {
    position: relative;
    flex: 0 0 auto;
    width: var(--evk-burger-size);
    height: var(--evk-burger-size);
    /* Kolor spoczynkowy stoi TAKŻE tutaj i to nie jest powtórka: jest to
       siatka bezpieczeństwa pod kreskami. Gdy kolor po otwarciu okaże się nie
       do użycia, `color` kreski wraca do `unset`, czyli dziedziczy — a dziedziczy
       WŁAŚNIE STĄD. Bez tej linijki wpadałby na kolor dokumentu, więc kreski
       byłyby widoczne, ale w kolorze wziętym znikąd. Tak wracają dokładnie do
       tego, co miały przed otwarciem. */
    color: var(--evk-burger-color);
    transition: transform var(--evk-burger-time) var(--evk-burger-ease);
}

.evk-burger.brx-open .evk-burger__box {
    transform: rotate(var(--evk-burger-open-rotate));
}

.evk-burger__line {
    position: absolute;
    /* `left` + `width`, a NIE `left` + `right`.
       Uwaga na pozorne uzasadnienie: przypięcie do obu krawędzi wcale NIE
       unieważnia `width`. Przy trzech podanych wartościach układ jest
       nadokreślony i przeglądarka po prostu ignoruje jedną z nich — więc
       skracanie kresek działałoby i tak. Zmierzone, żeby tego nie zgadywać.
       Problem jest inny: ignorowana jest ta wartość, która odpowiada KOŃCOWI
       linijki pisma. W układzie od prawej do lewej wypada `left`, a nie
       `right` — i skrócona kreska strzałki przyklejałaby się do prawej
       krawędzi zamiast do lewej. Zmierzone: 100 px zamiast 0.
       `left` + `width` daje ten sam wynik w obu kierunkach pisma. Style dosuwane
       do PRAWEJ (zygzak, nierówne z prawej, rozstrzelone) podają `right`
       + `width` i zdejmują `left` — to nadal dwie wartości, więc układ zostaje
       jednoznaczny w obu kierunkach. */
    left: var(--evk-burger-inset);
    width: var(--evk-burger-line-width);
    /* WSZYSTKIE kreski leżą na środku, a rozsuwa je dopiero `transform`.
       To nie jest sztuczka dla oszczędności linii: dzięki temu oś obrotu przy
       składaniu krzyżyka jest środkiem pudełka dla każdej kreski z osobna,
       więc nie trzeba jej przeliczać per kreska ani poprawiać przy zmianie
       odstępu. Kreski ustawione na `top`/`bottom` obracałyby się wokół
       własnych pozycji i krzyżyk rozjeżdżałby się przy każdym innym odstępie.
       Wyjątkiem jest „złożenie”, które celowo animuje `top` — patrz niżej. */
    top: calc(50% - var(--evk-burger-stroke) / 2);
    height: var(--evk-burger-stroke);
    border-radius: var(--evk-burger-radius);
    /* Kolor przez WŁAŚCIWOŚĆ DZIEDZICZONĄ, a nie wprost we `background`.
     *
     * Wygląda na okrężną drogę i przy poprawnej wartości daje dokładnie to samo
     * — ale decyduje o tym, co się dzieje przy wartości NIE DO UŻYCIA (kolor
     * z palety Bricksa, której zmienna nie dociera do tego elementu; wartość
     * podstawiona kodem; ustawienie ze starszej wersji). Deklaracja
     * `background: var(…)` jest wtedy nieprawidłowa na etapie wartości
     * obliczonej, właściwość wraca do `unset`, a `background-color` NIE jest
     * dziedziczone — więc `unset` znaczy `transparent` i kreski ZNIKAJĄ.
     * Zmierzone: `rgba(0, 0, 0, 0)` zamiast koloru, a przez przezroczyste
     * kreski widać panel menu. Zgłoszone jako „krzyżyk zmienia kolor na inny
     * niż ustawiony i inny niż kolor zamkniętego" — bo widać to, co za nimi.
     *
     * `color` jest dziedziczone, więc ten sam błąd cofa kreski do koloru
     * rodzica: widocznego. Napis i ikona miały tę odporność od zawsze, bo obie
     * jadą na `color`; kreski były jedyną częścią przycisku malowaną
     * właściwością niedziedziczoną i jedyną, która potrafiła zniknąć.
     *
     * `var(--x, zapas)` by tego NIE załatwiło: zapas wchodzi, gdy zmienna jest
     * NIEZDEFINIOWANA, a nie gdy jest zdefiniowana wartością nie do użycia. */
    color: var(--evk-burger-color);
    background: currentColor;
    transform-origin: center center;
    /* PIĘĆ wpisów, a `transform` PIERWSZY — i tylko to jest tu naprawdę
       wiążące. Trzy style („złożenie", „po kolei", „ściągnięcie") podają
       `transition-delay` listą pozycyjną `beat, 0s, 0s, 0s, 0s`, więc
       opóźnienie trafia w pozycję pierwszą; wypchnięcie stamtąd `transform`
       zabiera im dwutakt. Kolejność pozostałych czterech nie ma znaczenia,
       bo wszystkie mają zerowe opóźnienie — sprawdzone mutacją, zamiana
       `opacity` z `color` nie zmienia niczego. Liczba wpisów już tak: krótsza
       lista rozjeżdża przypisanie opóźnień. */
    transition:
        transform var(--evk-burger-time) var(--evk-burger-ease),
        opacity   var(--evk-burger-time) var(--evk-burger-ease),
        color     var(--evk-burger-time) var(--evk-burger-ease),
        width     var(--evk-burger-time) var(--evk-burger-ease),
        top       var(--evk-burger-time) var(--evk-burger-ease);
}

.evk-burger.brx-open .evk-burger__line {
    color: var(--evk-burger-color-open);
}

/* Redukcja ruchu: kreski PRZESKAKUJĄ, ale nadal pokazują stan. Zerujemy sam
   czas, nie zmianę kształtu — burger, który przy otwartym menu wygląda jak
   przy zamkniętym, nie mówi nic i jest gorszy niż burger bez animacji.
   Znacznik nakłada burger.js, a nie `@media (prefers-reduced-motion)`, bo
   polityka ruchu tej wtyczki ma jeszcze własny przełącznik w panelu
   (patrz includes/anim/motion.php) i sam media query by go pominął. */
.evk-burger[data-evk-still] .evk-burger__line,
.evk-burger[data-evk-still] .evk-burger__box {
    transition-duration: 0s;
}

/* ══ TRZYKRESKOWE ══════════════════════════════════════════════════════
 *
 * Stan zamknięty jest dla nich wspólny: skrajne rozsunięte o `--evk-burger-offset`
 * w górę i w dół, środkowa na środku. Style różnią się WYŁĄCZNIE tym, co robią
 * po otwarciu — dlatego pozycja spoczynkowa stoi w jednej regule dla wszystkich,
 * a nie w każdym stylu z osobna.
 */
.evk-burger--cross    .evk-burger__line:nth-child(1),
.evk-burger--squeeze  .evk-burger__line:nth-child(1),
.evk-burger--arrow    .evk-burger__line:nth-child(1),
.evk-burger--plus     .evk-burger__line:nth-child(1),
.evk-burger--stack    .evk-burger__line:nth-child(1),
.evk-burger--stagger  .evk-burger__line:nth-child(1),
.evk-burger--uneven   .evk-burger__line:nth-child(1),
.evk-burger--zigzag   .evk-burger__line:nth-child(1),
.evk-burger--steps    .evk-burger__line:nth-child(1) {
    transform: translateY(calc(-1 * var(--evk-burger-offset)));
}
.evk-burger--cross    .evk-burger__line:nth-child(3),
.evk-burger--squeeze  .evk-burger__line:nth-child(3),
.evk-burger--arrow    .evk-burger__line:nth-child(3),
.evk-burger--plus     .evk-burger__line:nth-child(3),
.evk-burger--stack    .evk-burger__line:nth-child(3),
.evk-burger--stagger  .evk-burger__line:nth-child(3),
.evk-burger--uneven   .evk-burger__line:nth-child(3),
.evk-burger--zigzag   .evk-burger__line:nth-child(3),
.evk-burger--steps    .evk-burger__line:nth-child(3) {
    transform: translateY(var(--evk-burger-offset));
}

/* ── Krzyżyk: skrajne krzyżują się w środku, środkowa gaśnie ─────────── */
.evk-burger--cross.brx-open .evk-burger__line:nth-child(1) { transform: rotate(45deg); }
.evk-burger--cross.brx-open .evk-burger__line:nth-child(2) { opacity: 0; }
.evk-burger--cross.brx-open .evk-burger__line:nth-child(3) { transform: rotate(-45deg); }

/* ── Ściśnięcie: środkowa nie gaśnie, tylko ZWĘŻA SIĘ do zera ─────────
 * Różnica wobec krzyżyka jest w tym, jak znika ta jedna kreska: gaśnięcie
 * wygląda na wyblaknięcie, ściśnięcie na wciągnięcie do środka.
 */
.evk-burger--squeeze.brx-open .evk-burger__line:nth-child(1) { transform: rotate(45deg); }
.evk-burger--squeeze.brx-open .evk-burger__line:nth-child(2) { transform: scaleX(0); }
.evk-burger--squeeze.brx-open .evk-burger__line:nth-child(3) { transform: rotate(-45deg); }

/* ── Złożenie: ruch DWUTAKTOWY ────────────────────────────────────────
 *
 * Najpierw kreski zbiegają się do środka, dopiero potem skrajne rozchylają się
 * w krzyżyk. Jednej właściwości `transform` nie da się rozdzielić na dwa takty,
 * więc zjazd idzie przez `top`, a obrót przez `transform` z opóźnieniem —
 * i to jest jedyny styl, w którym kreski nie stoją na środku od początku.
 */
.evk-burger--collapse .evk-burger__line:nth-child(1) {
    top: calc(50% - var(--evk-burger-stroke) / 2 - var(--evk-burger-offset));
}
.evk-burger--collapse .evk-burger__line:nth-child(3) {
    top: calc(50% - var(--evk-burger-stroke) / 2 + var(--evk-burger-offset));
}
.evk-burger--collapse.brx-open .evk-burger__line {
    top: calc(50% - var(--evk-burger-stroke) / 2);
}
/* Opóźnienie WYŁĄCZNIE dla obrotu. Jedna wartość w `transition-delay`
   dotyczy WSZYSTKICH właściwości ze skrótu, więc czekałby też zjazd i ruch
   przestawał być dwutaktowy — wyglądałby jak zwykły krzyżyk z zadyszką.
   Lista musi trzymać kolejność z bazy: transform, opacity, color, width, top. */
.evk-burger--collapse.brx-open .evk-burger__line:nth-child(1) {
    transform: rotate(45deg);
    transition-delay: var(--evk-burger-beat), 0s, 0s, 0s, 0s;
}
.evk-burger--collapse.brx-open .evk-burger__line:nth-child(2) { opacity: 0; }
.evk-burger--collapse.brx-open .evk-burger__line:nth-child(3) {
    transform: rotate(-45deg);
    transition-delay: var(--evk-burger-beat), 0s, 0s, 0s, 0s;
}

/* ── Strzałka: skrajne SKRACAJĄ SIĘ i obracają przy lewej krawędzi ────
 *
 * Środkowa zostaje trzonem, dwie krótkie tworzą ostrze — całość pokazuje
 * w lewo. To jest ten styl, dla którego kreska musiała przestać być przypięta
 * do obu krawędzi.
 *
 * `transform-origin` ustawiony w OBU stanach, nie tylko w otwartym: przełączany
 * w połowie drogi przesuwałby kreskę skokowo w chwili startu obrotu.
 */
.evk-burger--arrow .evk-burger__line { transform-origin: left center; }
.evk-burger--arrow.brx-open .evk-burger__line:nth-child(1) {
    width: calc(var(--evk-burger-line-width) / 2);
    transform: rotate(-45deg);
}
.evk-burger--arrow.brx-open .evk-burger__line:nth-child(3) {
    width: calc(var(--evk-burger-line-width) / 2);
    transform: rotate(45deg);
}

/* ── Plus: górna gaśnie, dolna staje pionowo ─────────────────────────── */
.evk-burger--plus.brx-open .evk-burger__line:nth-child(1) { opacity: 0; }
.evk-burger--plus.brx-open .evk-burger__line:nth-child(3) { transform: rotate(90deg); }

/* ── Zsunięcie: trzy kreski zbiegają się w jedną ─────────────────────── */
.evk-burger--stack.brx-open .evk-burger__line:nth-child(1),
.evk-burger--stack.brx-open .evk-burger__line:nth-child(3) {
    transform: translateY(0);
}

/* ── Po kolei: skrajne krzyżują się JEDNA PO DRUGIEJ ──────────────────
 *
 * Ten sam krzyżyk, ale dolna kreska rusza z opóźnieniem — ruch przestaje być
 * jednym gestem i daje się prześledzić okiem. Opóźnienie musi trafić w JEDNĄ
 * pozycję listy: pojedyncza wartość w `transition-delay` dotyczy wszystkich
 * właściwości ze skrótu i wtedy czeka też gaśnięcie środkowej.
 */
.evk-burger--stagger.brx-open .evk-burger__line:nth-child(1) { transform: rotate(45deg); }
.evk-burger--stagger.brx-open .evk-burger__line:nth-child(2) { opacity: 0; }
.evk-burger--stagger.brx-open .evk-burger__line:nth-child(3) {
    transform: rotate(-45deg);
    transition-delay: var(--evk-burger-beat), 0s, 0s, 0s, 0s;
}

/* ── Nierówne: środkowa krótsza JUŻ W SPOCZYNKU ───────────────────────
 *
 * Pierwszy styl, w którym kreski nie są równe przed kliknięciem. Po otwarciu
 * krótka gaśnie, więc krzyżyk wychodzi z dwóch pełnych — asymetria jest cechą
 * stanu zamkniętego, a nie ruchu.
 */
.evk-burger--uneven .evk-burger__line:nth-child(2) { width: var(--evk-burger-short); }
.evk-burger--uneven.brx-open .evk-burger__line:nth-child(1) { transform: rotate(45deg); }
.evk-burger--uneven.brx-open .evk-burger__line:nth-child(2) { opacity: 0; }
.evk-burger--uneven.brx-open .evk-burger__line:nth-child(3) { transform: rotate(-45deg); }

/* ── Zygzak: krótka przy LEWEJ, pełna po środku, krótka przy PRAWEJ ───
 *
 * Pierwszy styl, w którym o asymetrii decyduje nie sama DŁUGOŚĆ kresek, ale to,
 * DO KTÓREJ KRAWĘDZI przylegają. Bez tego drugiego wymiaru byłby nieodróżnialny
 * od „nierównych" — dwie krótkie kreski wyśrodkowane wyglądają jak jedna cecha
 * powtórzona dwa razy.
 *
 * Dosunięcie do prawej idzie przez `right` + `width` ze zdjętym `left`. To NIE
 * jest powrót do tego, co wycięliśmy w 1.77.0: tamten problem brał się z podania
 * `left`, `right` I `width` naraz — układ był nadokreślony, a przeglądarka
 * ignorowała wartość od końca linijki pisma, więc w RTL wypadał `left`. Dwie
 * wartości są jednoznaczne w obu kierunkach.
 */
.evk-burger--zigzag .evk-burger__line:nth-child(1) { width: var(--evk-burger-short); }
.evk-burger--zigzag .evk-burger__line:nth-child(3) {
    width: var(--evk-burger-short);
    left: auto;
    right: var(--evk-burger-inset);
}
.evk-burger--zigzag.brx-open .evk-burger__line:nth-child(1) {
    width: var(--evk-burger-line-width);
    transform: rotate(45deg);
}
.evk-burger--zigzag.brx-open .evk-burger__line:nth-child(2) { opacity: 0; }
.evk-burger--zigzag.brx-open .evk-burger__line:nth-child(3) {
    width: var(--evk-burger-line-width);
    transform: rotate(-45deg);
}

/* ── Schodki: pełna, średnia, krótka — wszystkie od lewej ─────────────
 *
 * Średnia liczy się z krótkiej, a nie z osobnego pola: jedno ustawienie ma
 * sterować CAŁĄ proporcją, inaczej „schodek" przestawałby być równy przy
 * pierwszej zmianie długości.
 */
.evk-burger--steps .evk-burger__line:nth-child(2) {
    width: calc((var(--evk-burger-line-width) + var(--evk-burger-short)) / 2);
}
.evk-burger--steps .evk-burger__line:nth-child(3) { width: var(--evk-burger-short); }
.evk-burger--steps.brx-open .evk-burger__line:nth-child(1) { transform: rotate(45deg); }
.evk-burger--steps.brx-open .evk-burger__line:nth-child(2) { opacity: 0; }
.evk-burger--steps.brx-open .evk-burger__line:nth-child(3) {
    width: var(--evk-burger-line-width);
    transform: rotate(-45deg);
}

/* ══ DWUKRESKOWE ═══════════════════════════════════════════════════════
 *
 * Rozsunięte o POŁOWĘ tego, co skrajne kreski trzykreskowych — dzięki temu ten
 * sam „Odstęp między kreskami" daje w obu rodzinach tę samą przerwę. Bez tego
 * jedno ustawienie znaczyłoby dwie różne rzeczy zależnie od wybranego stylu.
 */
.evk-burger--cross-2   .evk-burger__line:nth-child(1),
.evk-burger--minus-2   .evk-burger__line:nth-child(1),
.evk-burger--chevron-2 .evk-burger__line:nth-child(1),
.evk-burger--plus-2    .evk-burger__line:nth-child(1),
.evk-burger--slide-2   .evk-burger__line:nth-child(1),
.evk-burger--pinch-2   .evk-burger__line:nth-child(1),
.evk-burger--swap-2    .evk-burger__line:nth-child(1),
.evk-burger--uneven-2  .evk-burger__line:nth-child(1),
.evk-burger--uneven-right-2 .evk-burger__line:nth-child(1),
.evk-burger--split-2   .evk-burger__line:nth-child(1) {
    transform: translateY(calc(-1 * var(--evk-burger-offset) / 2));
}
.evk-burger--cross-2   .evk-burger__line:nth-child(2),
.evk-burger--minus-2   .evk-burger__line:nth-child(2),
.evk-burger--chevron-2 .evk-burger__line:nth-child(2),
.evk-burger--plus-2    .evk-burger__line:nth-child(2),
.evk-burger--slide-2   .evk-burger__line:nth-child(2),
.evk-burger--pinch-2   .evk-burger__line:nth-child(2),
.evk-burger--swap-2    .evk-burger__line:nth-child(2),
.evk-burger--uneven-2  .evk-burger__line:nth-child(2),
.evk-burger--uneven-right-2 .evk-burger__line:nth-child(2),
.evk-burger--split-2   .evk-burger__line:nth-child(2) {
    transform: translateY(calc(var(--evk-burger-offset) / 2));
}

/* ── Krzyżyk z dwóch kresek ──────────────────────────────────────────── */
.evk-burger--cross-2.brx-open .evk-burger__line:nth-child(1) { transform: rotate(45deg); }
.evk-burger--cross-2.brx-open .evk-burger__line:nth-child(2) { transform: rotate(-45deg); }

/* ── Minus: obie zbiegają się w jedną kreskę ─────────────────────────── */
.evk-burger--minus-2.brx-open .evk-burger__line { transform: translateY(0); }

/* ── Daszek: obie skracają się i schodzą ostrzem w prawo ──────────────
 *
 * Kreska ma 60% szerokości pudełka i jest dosunięta do prawej krawędzi
 * przesunięciem o 2/3 WŁASNEJ szerokości (0,6 × 66,67% = 40% pudełka), więc
 * zajmuje odcinek 40–100%. Obrót idzie wokół jej prawego końca, czyli obie
 * spotykają się dokładnie przy prawej krawędzi.
 */
.evk-burger--chevron-2 .evk-burger__line { transform-origin: right center; }
.evk-burger--chevron-2.brx-open .evk-burger__line {
    width: calc(var(--evk-burger-line-width) * 0.6);
}
.evk-burger--chevron-2.brx-open .evk-burger__line:nth-child(1) {
    transform: translateX(66.667%) rotate(45deg);
}
.evk-burger--chevron-2.brx-open .evk-burger__line:nth-child(2) {
    transform: translateX(66.667%) rotate(-45deg);
}

/* ── Plus z dwóch kresek ─────────────────────────────────────────────── */
.evk-burger--plus-2.brx-open .evk-burger__line:nth-child(1) { transform: translateY(0); }
.evk-burger--plus-2.brx-open .evk-burger__line:nth-child(2) { transform: rotate(90deg); }

/* ── Zjazd: górna wyjeżdża bokiem i gaśnie, dolna zostaje ukośnie ────── */
.evk-burger--slide-2.brx-open .evk-burger__line:nth-child(1) {
    transform: translateX(100%);
    opacity: 0;
}
.evk-burger--slide-2.brx-open .evk-burger__line:nth-child(2) { transform: rotate(45deg); }

/* ── Ściągnięcie: najpierw ZWĘŻENIE, potem krzyżyk ────────────────────
 *
 * Dwutakt na szerokości — ten sam chwyt co „złożenie", tylko tam ruch szedł
 * przez `top`, a tu przez `width`. Opóźnienie trafia WYŁĄCZNIE w `transform`;
 * `width` ma ruszyć od razu.
 *
 * Kreski ZOSTAJĄ krótkie w stanie otwartym i to nie jest ustępstwo, tylko
 * warunek wykonalności: przejście CSS prowadzi od jednej wartości do drugiej
 * i nie umie „do zera i z powrotem". Gdyby stan końcowy miał pełną szerokość,
 * `width` nie miałoby czego animować i pierwszy takt by nie istniał.
 * Wychodzi z tego mniejszy krzyżyk niż w pozostałych stylach — i to właśnie
 * odróżnia ten styl od zwykłego dwukreskowego.
 */
.evk-burger--pinch-2 .evk-burger__line { transform-origin: center center; }
.evk-burger--pinch-2.brx-open .evk-burger__line {
    width: calc(var(--evk-burger-line-width) / 2);
    /* Wyśrodkowanie skróconej kreski: bez tego zostałaby przy lewej krawędzi
       rysunku, bo pozycję wyznacza `left`. Ćwierć szerokości kresek, więc
       środek trzyma się także przy węższym rysunku. */
    margin-left: calc(var(--evk-burger-line-width) / 4);
}
.evk-burger--pinch-2.brx-open .evk-burger__line:nth-child(1) {
    transform: rotate(45deg);
    transition-delay: var(--evk-burger-beat), 0s, 0s, 0s, 0s;
}
.evk-burger--pinch-2.brx-open .evk-burger__line:nth-child(2) {
    transform: rotate(-45deg);
    transition-delay: var(--evk-burger-beat), 0s, 0s, 0s, 0s;
}

/* ── Minięcie: górna nadrabia pełny obrót i MIJA dolną w drodze ───────
 *
 * Kąt końcowy jest ten sam co przy zwykłym krzyżyku (225° to 45° plus pełne
 * pół obrotu), ale droga zupełnie inna: kreski przechodzą przez siebie
 * zamiast zejść się najkrótszą trasą.
 */
.evk-burger--swap-2.brx-open .evk-burger__line:nth-child(1) { transform: rotate(225deg); }
.evk-burger--swap-2.brx-open .evk-burger__line:nth-child(2) { transform: rotate(-45deg); }

/* ── Nierówne: dolna krótsza JUŻ W SPOCZYNKU ──────────────────────────
 *
 * Po otwarciu obie wracają do pełnej długości i tworzą krzyżyk — asymetria
 * znika razem z otwarciem, więc widać ją tylko na zamkniętym przycisku.
 */
.evk-burger--uneven-2 .evk-burger__line:nth-child(2) { width: var(--evk-burger-short); }
.evk-burger--uneven-2.brx-open .evk-burger__line:nth-child(1) { transform: rotate(45deg); }
.evk-burger--uneven-2.brx-open .evk-burger__line:nth-child(2) {
    width: var(--evk-burger-line-width);
    transform: rotate(-45deg);
}

/* ── Nierówne z prawej: to samo, ale krótsza przylega do PRAWEJ ───────
 *
 * Różnica wobec „nierównych" jest wyłącznie w krawędzi — i właśnie dlatego ten
 * styl istnieje osobno: dosunięcie w prawo jest tym, czego dotąd nie dawało się
 * uzyskać żadnym ustawieniem.
 */
.evk-burger--uneven-right-2 .evk-burger__line:nth-child(2) {
    width: var(--evk-burger-short);
    left: auto;
    right: var(--evk-burger-inset);
}
.evk-burger--uneven-right-2.brx-open .evk-burger__line:nth-child(1) { transform: rotate(45deg); }
.evk-burger--uneven-right-2.brx-open .evk-burger__line:nth-child(2) {
    width: var(--evk-burger-line-width);
    transform: rotate(-45deg);
}

/* ── Rozstrzelone: obie krótkie, górna przy lewej, dolna przy prawej ──
 *
 * Zamknięty rysunek nie ma ani jednej pełnej kreski — po otwarciu obie dorastają
 * i schodzą się w krzyżyk, więc rozjazd znika razem z otwarciem.
 */
.evk-burger--split-2 .evk-burger__line { width: var(--evk-burger-short); }
.evk-burger--split-2 .evk-burger__line:nth-child(2) {
    left: auto;
    right: var(--evk-burger-inset);
}
.evk-burger--split-2.brx-open .evk-burger__line { width: var(--evk-burger-line-width); }
.evk-burger--split-2.brx-open .evk-burger__line:nth-child(1) { transform: rotate(45deg); }
.evk-burger--split-2.brx-open .evk-burger__line:nth-child(2) { transform: rotate(-45deg); }

/* ══ TEKST I WŁASNE IKONY ══════════════════════════════════════════════
 *
 * Obie rzeczy reagują na TĘ SAMĄ klasę `brx-open`, którą już mamy — dlatego
 * przełączanie napisów i ikon jest wyłącznie arkuszem, a `burger.js` nie musiał
 * o tej partii wiedzieć nic.
 */

/* Przycisk z tekstem mierzy się treścią. Bok pola klikalnego zostaje dolną
   granicą wysokości, żeby cel dotykowy nie zrobił się niższy niż 44 px. */
.evk-burger--z-tekstem {
    width: auto;
    height: auto;
    min-height: var(--evk-burger-size);
}
.evk-burger--tekst-przed { flex-direction: row-reverse; }
.evk-burger--tekst-nad   { flex-direction: column-reverse; }
.evk-burger--tekst-pod   { flex-direction: column; }

/* Odstęp napisu MARGINESEM, a nie `gap`.
 *
 * `gap` nie przyjmuje wartości ujemnych — cała deklaracja jest wtedy
 * nieprawidłowa i wypada, a razem z nią ustawienie. Zmierzone: przy `-12px`
 * policzony `column-gap` wychodził `normal`, a przycisk miał tę samą szerokość
 * co przy zerze. Wpisanie minusa nie robiło więc nic, nawet nie wracało do zera.
 *
 * Minus jest tu potrzebny, bo pudełko rysunku jest KWADRATEM o boku pola
 * klikalnego (od 1.79.0 — przy tekście procent nie ma się do czego odnieść).
 * Kreski węższe niż 100% zostawiają w nim pusty margines i napis stoi od nich
 * dalej, niż mówi ustawienie: zmierzone 9 px przy kreskach 60% i odstępie zero.
 * Margines ujemny pozwala to odjąć.
 *
 * Cztery reguły, a nie jedna logiczna, bo `przed` i `nad` odwracają kolejność
 * (`row-reverse` / `column-reverse`) i przerwa wypada wtedy po PRZECIWNEJ
 * stronie napisu. Właściwości logiczne idą za kierunkiem PISMA, a nie za
 * kierunkiem układu, więc tutaj by nie pomogły. */
.evk-burger--tekst-za    .evk-burger__text { margin-left:   var(--evk-burger-text-gap); }
.evk-burger--tekst-przed .evk-burger__text { margin-right:  var(--evk-burger-text-gap); }
.evk-burger--tekst-pod   .evk-burger__text { margin-top:    var(--evk-burger-text-gap); }
.evk-burger--tekst-nad   .evk-burger__text { margin-bottom: var(--evk-burger-text-gap); }

/* Oba napisy leżą NA SOBIE w jednej komórce siatki: przycisk ma wtedy szerokość
   dłuższego z nich i nie skacze przy przełączaniu — a razem z nim nie skacze
   nic, co stoi obok.
   `padding` tego slotu wpisuje kontrolka „Wewnętrzny odstęp napisu" (Bricks
   celuje wprost w ten selektor). Padding korzenia odsuwałby napis RAZEM
   z rysunkiem, więc nie da się nim ustawić jednego względem drugiego.
   Uwaga przy strojeniu w pionie: przycisk ŚRODKUJE to pudełko, więc nierówna
   góra i dół przesuwają napis o POŁOWĘ różnicy — środek treści wypada na
   `środek + (górny − dolny) / 2`. */
.evk-burger__text {
    display: grid;
    align-items: center;
    justify-items: center;
    line-height: 1;
    white-space: nowrap;
}
.evk-burger__label,
.evk-burger__icon {
    grid-area: 1 / 1;
    transition:
        opacity    var(--evk-burger-time) var(--evk-burger-ease),
        visibility var(--evk-burger-time) var(--evk-burger-ease),
        color      var(--evk-burger-time) var(--evk-burger-ease);
}

/* `visibility: hidden`, a NIE samo `opacity: 0`.
   Przezroczysty napis zostaje w DRZEWIE DOSTĘPNOŚCI i czytnik ekranu czyta
   wtedy oba naraz — „MENU ZAMKNIJ". Dopiero `visibility` wyjmuje go z drzewa.
   Przejście na obu właściwościach naraz daje przy tym poprawną kolejność:
   pokazywany napis wraca do drzewa od razu, znikający wypada dopiero po
   wygaszeniu. */
.evk-burger__label--otw,
.evk-burger__icon--otw {
    opacity: 0;
    visibility: hidden;
}
.evk-burger.brx-open .evk-burger__label--zamk,
.evk-burger.brx-open .evk-burger__icon--zamk {
    opacity: 0;
    visibility: hidden;
}
.evk-burger.brx-open .evk-burger__label--otw,
.evk-burger.brx-open .evk-burger__icon--otw {
    opacity: 1;
    visibility: visible;
}

/* Kolor napisu po otwarciu — na OBU napisach, nie tylko na widocznym.
   Znikający napis jest przez czas przejścia jeszcze widoczny i ma przenikać
   razem z resztą przycisku; pominięty zostawałby na starym kolorze przez cały
   czas gaśnięcia. `color` jest w `transition` napisu od 1.79.0. */
.evk-burger.brx-open .evk-burger__label {
    color: var(--evk-burger-text-color-open);
}

/* Własne ikony. Pudełko jest kwadratem o boku pola klikalnego — tak samo jak
   pudełko z kreskami — więc zamiana źródła nie przesuwa niczego obok. */
.evk-burger__icons {
    position: relative;
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: var(--evk-burger-size);
    height: var(--evk-burger-size);
    /* Ta sama siatka bezpieczeństwa co pod kreskami — ikona czyta tę samą parę
       zmiennych, więc dziedziczy stąd kolor spoczynkowy, gdy ten po otwarciu
       okaże się nie do użycia. */
    color: var(--evk-burger-color);
    transition: transform var(--evk-burger-time) var(--evk-burger-ease);
}
.evk-burger.brx-open .evk-burger__icons {
    transform: rotate(var(--evk-burger-open-rotate));
}
.evk-burger__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    /* Ikony Bricksa to albo font (`<i>`), albo wklejone SVG — pierwsze idzie za
       `font-size`, drugie za wymiarami. Obie drogi biorą tę samą zmienną. */
    font-size: var(--evk-burger-icon-size);
    line-height: 1;
    color: var(--evk-burger-color);
}
.evk-burger.brx-open .evk-burger__icon { color: var(--evk-burger-color-open); }
.evk-burger__icon svg {
    width: var(--evk-burger-icon-size);
    height: var(--evk-burger-icon-size);
}

/* Wypełnienie TYLKO wtedy, gdy plik ikony sam nie powiedział „bez wypełnienia".
 *
 * `fill="none"` w pliku to atrybut prezentacyjny, a te przegrywają z KAŻDĄ
 * regułą arkusza. Bezwarunkowe `fill: currentColor` (1.79.0) kasowało więc
 * `fill="none"` z korzenia `<svg>`, a wypełnienie dziedziczyło się w dół na
 * wszystkie kształty — ikona rysowana obrysem (Lucide, Feather, Tabler,
 * Heroicons outline) zalewała się na płasko. Wyglądało to jak nieusuwalne tło
 * pod ikoną i widać było głównie na ikonie OTWARTEJ: hamburger z trzech
 * `<line>` nie ma pola, więc wypełnienie nic z nim nie robiło, a X w kółku
 * owszem.
 *
 * Warunek jest wąski celowo. Szersze `svg:not([fill])` puszczałoby wolno także
 * ikony z kolorem wpisanym na sztywno, a te mają dalej słuchać kontrolek
 * koloru — tak jak w 1.79.0.
 *
 * Ikony obrysowe piszą `stroke="currentColor"`, więc kolor działa na nich dalej
 * mimo że przestajemy je wypełniać. Czego to NIE naprawi: pliku, który niesie
 * własny prostokąt tła w środku — tam tło jest treścią pliku. */
.evk-burger__icon svg:not([fill="none"]) { fill: currentColor; }

/* Redukcja ruchu obejmuje i napisy, i ikony — z tego samego powodu co kreski:
   stan ma być widoczny, ruch nie musi. */
.evk-burger[data-evk-still] .evk-burger__label,
.evk-burger[data-evk-still] .evk-burger__icon,
.evk-burger[data-evk-still] .evk-burger__icons {
    transition-duration: 0s;
}