/**
 * Blok: Zunifikowany arkusz stylów UI dla Menu i Drawera (AJAX & WCAG Proof)
 */

/* Wyizolowane czyszczenie paragrafów WordPress */
/* Rendered in body so the sidebar's overflow cannot clip the label. */
.addons-collapsed-menu-tooltip {
    position: fixed;
    z-index: 100000;
    max-width: min(320px, calc(100vw - 16px));
    box-sizing: border-box;
    padding: 9px 13px;
    border-radius: 8px;
    background: var(--primary, #501b36);
    color: #fff;
    box-shadow: 0 4px 16px rgb(0 0 0 / 18%);
    font-family: inherit;
    font-size: 14px;
    line-height: 1.4;
    font-weight: 500;
    overflow-wrap: anywhere;
    pointer-events: none;
}

.addons-collapsed-menu-tooltip[hidden] {
    display: none;
}

body div.wp-block-column.aside-nav p,
body div.wp-block-column.aside-nav .addons-navigation-panel p {
    display: none;
    margin: 0;
    padding: 0;
    height: 0;
    visibility: hidden;
}

/* Animacje i akceleracja sprzętowa */
body div.wp-block-column.aside-nav,
body div.wp-block-column.aside-nav .addons-navigation-panel,
#collapse-icon,
body div.wp-block-column.aside-nav .addons-btn-cta-orange {
    transition: max-width 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                background-color 0.2s ease,
                transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                gap 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                border-radius 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: max-width, transform, gap;
}

.addons-brand-text,
.main-nav__link-text,
.addons-btn-text {
    display: inline-block;
    vertical-align: middle;
    white-space: nowrap;
    opacity: 1;
    transform: translateX(0);
    transition: max-width 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.2s ease-in-out,
                transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: max-width, opacity, transform;
}

.addons-no-transition, .addons-no-transition * {
    transition: none;
}

/* Podstawowy layout bloku */
.addons-nav-block {
    display: flex;
    flex-direction: column;
    width: 100%;
    box-sizing: border-box;
    position: relative;
}

/* POZYCJONOWANIE LOGO DESKTOP */
.addons-menu-logo-desktop-container {
    display: flex;
    justify-content: flex-start;
    margin-bottom: 32px;
    flex-shrink: 0;
}
.addons-menu-logo-link {
    display: block;
    text-decoration: none;
    position: relative;
    width: 100%;
    background:none !important;
}
.addons-menu-custom-logo,
.addons-menu-custom-logo-min {
    max-height: 50px;
    width: auto;
    display: block;
}

/* Przełączanie widoczności logo pełne / minimalistyczne */
.addons-menu-logo-full {
    display: block;
    opacity: 1;
    transition: opacity 0.3s ease, visibility 0.3s;
}
.addons-menu-logo-minimal {
    display: none;
    opacity: 0;
    transition: opacity 0.3s ease, visibility 0.3s;
    align-items:center;
    justify-content:center;
}

/* UKŁAD HORYZONTALNY (DESKTOP) */
.addons-nav-block.is-layout-horizontal {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}
.addons-nav-block.is-layout-horizontal .addons-menu-logo-desktop-container {
    margin-bottom: 0;
    margin-right: 32px;
}

/* LISTY LINKÓW DESKTOP */
.addons-menu-list-desktop {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
}
.addons-nav-block.is-layout-horizontal .addons-menu-list-desktop {
    flex-direction: row;
    align-items: center;
    gap: 24px;
    width: auto;
}

.main-nav__item {
    list-style: none;
    width: 100%;
}

/* Dla układu poziomego pozycjonujemy submenu tradycyjnie pod przyciskiem */
.addons-nav-block.is-layout-horizontal .main-nav__item {
    position: relative;
    width: auto;
}

.menu-item-link-wrapper {
    display: flex;
    align-items: center;
    width: 100%;
    position: relative;
}

/* STRUKTURA LINKÓW NAWIGACJI */
.main-nav__link {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    text-decoration: none;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-weight: 500;

    color: var(--text);
    border-radius: var(--border-radius);
    box-sizing: border-box;
    width: 100%;
    transition: padding 0.3s cubic-bezier(0.4, 0, 0.2, 1), gap 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.2s ease;
}
.main-nav__link-icon svg {
    width: 20px;
    height: 20px;
    display: block;
    stroke: #9CA3AF;
    fill: none;
}

/* WYIZOLOWANE STANY AKTYWNE */
.addons-nav-block .main-nav__link.is-active,
body div.wp-block-column.aside-nav .main-nav__link.is-active {
    background-color: var(--primary);
    color: var(--everywhite);
    box-shadow: var(--addons-shadow-primary);
}
.addons-nav-block .main-nav__link.is-active .main-nav__link-icon svg,
body div.wp-block-column.aside-nav .main-nav__link.is-active .main-nav__link-icon svg {
    stroke: var(--everywhite);
}

.main-nav__link:not(.is-active):hover {
    background-color: var(--border-color);
    color: var(--text);
}
.main-nav__link:not(.is-active):hover .main-nav__link-icon svg {
    stroke: #4B5563;
}

/* PRZYCISKI SUBMENU DESKTOP */
.submenu-toggle-btn {
    background: transparent;
    border: none;
    color: inherit;
    cursor: pointer;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: 4px;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    transition: opacity 0.2s ease, visibility 0.2s;
}
.submenu-toggle-btn svg { transform: rotate(-90deg); transition: transform 0.2s ease;}

.is-active .submenu-toggle-btn svg { stroke:var(--everywhite);}

.submenu-toggle-btn[aria-expanded="true"] svg { transform: rotate(90deg); }

.addons-submenu {
    display: none;
    flex-direction: column;
    box-sizing: border-box;
}

/* Wsparcie dla standardowego podmenu w poziomie (dropdown) */
.addons-nav-block.is-layout-horizontal .addons-submenu {
    position: absolute;
    top: 100%;
    left: 0;
    width: 220px;
    background-color: var(--bg-panel, #ffffff);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: var(--border-radius, 8px);
    box-shadow: 0 8px 16px rgba(0,0,0,0.08);
    padding: 8px;
    z-index: 9999;
}
.addons-nav-block.is-layout-horizontal .main-nav__item:hover .addons-submenu,
.addons-nav-block.is-layout-horizontal .submenu-toggle-btn[aria-expanded="true"] + .addons-submenu {
    display: flex;
}

/* Podmenu nagłówek i linki */
.addons-submenu-heading {
    display: block;
    font-size: 20px;
    font-weight: 700;
    text-transform: none;
    letter-spacing: normal;
    color: var(--text);
    margin: 0 0 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border-color, #e5e5e5);
    flex-shrink: 0;
    padding:1rem;
}
.addons-submenu ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    /* gap: 20px; */
    overflow-y: auto;
}
.addons-submenu li { list-style: none; }
.addons-submenu .main-nav__link,
.addons-submenu a {
    display: flex;
    align-items: center;
    gap: 14px;
    width: auto;
    padding: 0;
    border-radius: 0;
    text-decoration: none;
    font-weight: 600;
    font-size: 16px;
    color: var(--text);
    white-space: nowrap;
    box-shadow: none;
    background: none;
    padding:1rem;
}
.addons-submenu a:hover,
.addons-submenu a.is-active {
    color: var(--primary-text, #1d4ed8);
    background: none;
    box-shadow: none;
}


.addons-submenu .submenu-link-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: color-mix(in srgb, var(--primary, #2563eb) 12%, transparent);
}
.addons-submenu .submenu-link-icon svg {
    width: 20px;
    height: 20px;
    stroke: var(--primary, #2563eb);
    fill: none;
}


.addons-submenu a.is-active .submenu-link-icon svg {
    stroke: var(--everywhite);
}

/* Kontener przycisku minimalizacji */
.addons-menu-collapse-container-desktop {
    width: 100%;
    flex-shrink: 0;
    box-sizing: border-box;
    margin-top: 16px;
}
#btn-collapse {
    cursor: pointer;
    border: none;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 12px;
    background-color: var(--card-bg, #f9fafb);
    color: var(--text, #6b7280);
    border-radius: 16px;
    transition: background-color 0.2s ease, color 0.2s ease, padding 0.3s ease;
}
#btn-collapse:hover {
    background-color: var(--border-color, #f3f4f6);
    color: #111827;
}

/* TRADYCYJNY SHORTCODE ASIDE-NAV */
body div.wp-block-column.aside-nav .addons-btn-cta-orange { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background-color: var(--secondary); color: var(--on-secondary, #111827); text-decoration: none; font-size: 15px; font-weight: 700; padding: 14px 20px; border-radius: var(--border-radius); box-shadow: var(--addons-shadow-secondary); text-align: center; box-sizing: border-box; width: 100%; height: auto; }
body div.wp-block-column.aside-nav .addons-btn-cta-orange:hover { background-color: var(--secondary); filter:brightness(.92); transform: translateY(-1px); }
body div.wp-block-column.aside-nav .addons-btn-cta-orange svg { fill: currentColor; width: 16px; height: 16px; flex-shrink: 0; }

.addons-menu-mobile-header-bar { display: none; }
.addons-menu-fullscreen-drawer { display: none; }


/* ==========================================================================
 * 🔥 1. ROZWIĄZANIE: STYLIZACJA WYŁĄCZNIE NA DESKTOP (1400px+)
 * ========================================================================== */
@media screen and (min-width: 1400px) {
    /* Rozciągamy kolumny wiersza na pełną wysokość */
    body:not(.wp-admin) .wp-block-columns {
        align-items: stretch;
    }

    /* Płynnie i bezpiecznie przyklejamy kolumnę boczną */
    body:not(.wp-admin) div.wp-block-column.aside-nav {
        position: sticky;
        top: 0;
        height: 100vh;
        min-height: 100vh;
        max-height: 100vh;
        display: flex;
        flex-direction: column;
        justify-content: stretch;
        box-sizing: border-box;
        z-index: 999;
        overflow: visible;
        
        /* Płynna przejście rozwijania / zwijania paska bocznego */
        transition: flex-basis 0.35s cubic-bezier(0.4, 0, 0.2, 1), 
                    width 0.35s cubic-bezier(0.4, 0, 0.2, 1), 
                    max-width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
        will-change: flex-basis, width;
    }

    /* Rodzice wewnątrz kolumny bocznej także dziedziczą rozciągnięcie */
    body:not(.wp-admin) div.wp-block-column.aside-nav *:has(.addons-nav-block) {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        align-self: stretch;
        box-sizing: border-box;
        width:100%;

    }

    /* Wymuszenie 100% wysokości dla menu pionowego */
    .addons-nav-block.is-layout-vertical.is-full-height {
        flex: 1 1 auto;
        height: 100%;
        min-height: 100%;
    }

    /* Odpowiednie wyrównanie pozycji linków w pionie */
    .addons-nav-block.is-layout-vertical.is-full-height .addons-menu-list-desktop {
        flex: 1 1 auto;
        min-height: 0;
    }
    .addons-nav-block.is-layout-vertical.is-full-height.align-top .addons-menu-list-desktop {
        justify-content: flex-start;
    }
    .addons-nav-block.is-layout-vertical.is-full-height.align-center .addons-menu-list-desktop {
        justify-content: center;
    }
    .addons-nav-block.is-layout-vertical.is-full-height.align-bottom .addons-menu-list-desktop {
        justify-content: flex-end;
    }

    /* Wypchnięcie slotu dolnego i przycisku minimalizacji na dół */
    .addons-nav-block.is-layout-vertical.is-full-height .addons-menu-slot-below-desktop {
        margin-top: auto;
        padding-top: 16px;
        flex-shrink: 0;
    }

    /* Usunięcie relative z pionowych linków do kaskadowego flyout na całą wysokość */
    .addons-nav-block.is-layout-vertical .main-nav__item {
        position: static;
    }

    /* Submenu kaskadowe w pionie (Medicina Flyout)
       Pozycjonowane na sztywno (position: fixed) — JS (menu.js) ustawia
       dokładny "top" (zrównany z górną krawędzią najechanej pozycji, aby
       zlikwidować pustą przestrzeń u góry), "left" (przyklejone do prawej
       krawędzi paska aside-nav, a nie do wąskiej pozycji menu) oraz
       "height" (wypełnia resztę wysokości ekranu). Wartości poniżej to
       tylko bezpieczny fallback zanim JS przeliczy pozycję. */
    .addons-nav-block.is-layout-vertical .addons-submenu {
        display: flex;
        position: fixed;
        top: 0;
        left: 100%;
        height: 100vh;
        width: 320px;
        padding: 32px 0px;
        margin: 0;
        background: var(--bg-panel, #ffffff);
        border: none;
        border-left: 1px solid var(--border-color, #e5e5e5);
        border-radius: 0;
        box-shadow: 15px 0 35px rgba(0, 0, 0, 0.05);
        z-index: 9999;
        
        opacity: 0;
        visibility: hidden;
        transform: translateX(-15px);
        transition: opacity 0.25s cubic-bezier(0.25, 1, 0.5, 1), 
                    transform 0.25s cubic-bezier(0.25, 1, 0.5, 1), 
                    visibility 0.25s;
    }

    .addons-nav-block.is-layout-vertical .addons-submenu::before {
        content: '';
        position: absolute;
        top: 0;
        left: -25px;
        width: 25px;
        height: 100%;
        background: transparent;
    }

    /* Pokazywanie kaskadowego podmenu */
    .addons-nav-block.is-layout-vertical .main-nav__item:hover > .addons-submenu,
    .addons-nav-block.is-layout-vertical .main-nav__item:focus-within > .addons-submenu {
        opacity: 1;
        visibility: visible;
        transform: translateX(0);
    }


/* 4. KLUCZOWA POPRAWKA: Wymuszenie zawijania tekstu w podmenu */
.addons-submenu .main-nav__link-text {
    white-space: normal !important; /* Nadpisuje domyślne nowrap */
    word-break: break-word;
    overflow-wrap: anywhere;
    line-height: 1.35;
}

    /* ==========================================================================
     * 🔥 2. ROZWIĄZANIE: STANY MINIMALIZACJI (WŁAŚCIWA ANIMACJA DESKTOP)
     * ========================================================================== */
   body:not(.wp-admin) div.wp-block-column.aside-nav.is-minimized-horizontal .wp-block-button__link::before{
    margin:0;
   }
    /* Zwężenie kolumny bocznej do szerokości ikon */
    body:not(.wp-admin) div.wp-block-column.aside-nav.is-minimized-horizontal {
        flex-basis:80px!important;
        width:80px!important;
        min-width:80px;
        max-width:80px;
        flex-grow:0;
        flex-shrink:0;
    }

    /* Płynne wygaszanie napisów i elementów przy minimalizacji.
       UWAGA: .main-nav__link-text jest też używane wewnątrz .addons-submenu
       (podmenu flyout) — dlatego selektor tekstu linków jest zawężony
       wyłącznie do głównych pozycji listy, aby nie chować treści podmenu. */
    body:not(.wp-admin) div.wp-block-column.aside-nav.is-minimized-horizontal .addons-menu-list-desktop > .main-nav__item > .menu-item-link-wrapper .main-nav__link-text,
    body:not(.wp-admin) div.wp-block-column.aside-nav.is-minimized-horizontal .addons-brand-text,
    body:not(.wp-admin) div.wp-block-column.aside-nav.is-minimized-horizontal .addons-menu-slot-above-desktop,
    body:not(.wp-admin) div.wp-block-column.aside-nav.is-minimized-horizontal .submenu-toggle-btn,
    body:not(.wp-admin) div.wp-block-column.aside-nav.is-minimized-horizontal .addons-menu-logo-full {
        opacity: 0;
        max-width: 0;
        padding: 0;
        margin: 0;
        overflow: hidden;
        pointer-events: none;
    }

    /* Pełne logo tylko zwęża szerokość (max-width:0) powyżej, ale wciąż
       zajmowało naturalną wysokość obrazka i spychało logo minimalistyczne
       niżej — dodatkowo zerujemy jego wysokość. */
    body:not(.wp-admin) div.wp-block-column.aside-nav.is-minimized-horizontal .addons-menu-logo-full {
        max-height: 0;
        height: 0;
        line-height: 0;
        visibility: hidden;
        transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1), max-width 0.25s ease, visibility 0.2s;
    }

    /* Logo - płynne przełączenie na wersję minimalistyczną */
    body:not(.wp-admin) div.wp-block-column.aside-nav.is-minimized-horizontal .addons-menu-logo-desktop-container {
        justify-content: center;
        margin-bottom: 20px;
        transition: margin 0.3s ease;
    }
    body:not(.wp-admin) div.wp-block-column.aside-nav.is-minimized-horizontal .addons-menu-logo-minimal {
        display: flex;
        opacity: 1;
    }

    /* Wyśrodkowanie samych ikon w zminimalizowanych linkach.
       UWAGA: zawężone do GŁÓWNEJ listy linków — flyout .addons-submenu ma
       zawsze wyglądać tak samo (rozwinięty styl), niezależnie od tego, czy
       pasek boczny jest zwinięty czy nie. Bez tego zawężenia "Oferta" w
       podmenu też się centrowała i traciła odstęp ikona/tekst. */
    body:not(.wp-admin) div.wp-block-column.aside-nav.is-minimized-horizontal .addons-menu-list-desktop > .main-nav__item > .menu-item-link-wrapper .main-nav__link {
        justify-content: center;
        padding: 14px 0;
        gap: 0;
    }

    /* Odwrócenie strzałki przycisku minimalizacji */
    body:not(.wp-admin) div.wp-block-column.aside-nav.is-minimized-horizontal #collapse-icon {
        transform: rotate(180deg);
    }

    /* Ściśnięcie przycisku do formy kwadratowego/okrągłego widgetu */
    body:not(.wp-admin) div.wp-block-column.aside-nav.is-minimized-horizontal .addons-menu-slot-below-desktop {
        display: flex;
        justify-content: center;
        width: 100%;
        transition: padding 0.3s ease;
    }

    /* Przemiana przycisku "Aplikuj" w okrągły badge z samą ikoną */
    body:not(.wp-admin) div.wp-block-column.aside-nav.is-minimized-horizontal .addons-btn-cta-orange,
    body:not(.wp-admin) div.wp-block-column.aside-nav.is-minimized-horizontal .addons-menu-slot-below-desktop .wp-block-button__link {
        width: 48px !important;
        height: 48px !important;
        min-width: 48px !important;
        padding: 0 !important;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 50% !important;
        margin: 0 auto;
        gap: 0;
        overflow: hidden;
        font-size: 0 !important;
        line-height: 0 !important;
        white-space:nowrap;
        flex-shrink:0;
        transition: background-color .2s ease, border-radius .2s ease;
    }
    
    body:not(.wp-admin) div.wp-block-column.aside-nav.is-minimized-horizontal .addons-btn-cta-orange .addons-btn-text,
    body:not(.wp-admin) div.wp-block-column.aside-nav.is-minimized-horizontal .addons-menu-slot-below-desktop .wp-block-button__link span {
        opacity: 0;
        max-width: 0;
        display: none;
    }

    /* Gdy przycisk (np. rdzenny blok "Przyciski" z InnerBlocks) nie ma
       tekstu owiniętego w <span>, powyższy selektor nic nie chowa —
       font-size/line-height: 0 na linku zeruje sam tekst, a ikona SVG
       (z jawnie ustawioną szerokością/wysokością w px poniżej) zostaje
       widoczna i wyśrodkowana. */

    body:not(.wp-admin) div.wp-block-column.aside-nav.is-minimized-horizontal .addons-btn-cta-orange svg,
    body:not(.wp-admin) div.wp-block-column.aside-nav.is-minimized-horizontal .addons-menu-slot-below-desktop .wp-block-button__link svg {
        margin: 0;
        width: 20px;
        height: 20px;
    }
    body:not(.wp-admin) div.wp-block-column.aside-nav.is-minimized-horizontal .addons-menu-slot-below-desktop .wp-block-button__link::before,
    body:not(.wp-admin) div.wp-block-column.aside-nav.is-minimized-horizontal .addons-menu-slot-below-desktop .wp-block-button__link::after {margin:0!important;flex-shrink:0}

}


/* ==========================================================================
 * 🔥 UKŁAD MOBILNY FULLSCREEN (Z-INDEX 9999999 + ZAKŁADKI 100% WIDTH)
 * ========================================================================== */
@media screen and (max-width: 1399px) {

    .aside-nav {
        flex-basis:0 !important;
    }
    .addons-menu-logo-desktop-container,
    .addons-menu-slot-above-desktop,
    .addons-menu-slot-below-desktop,
    .addons-menu-list-desktop,
    .addons-menu-collapse-container-desktop {
        display: none;
    }

    body div.wp-block-column.aside-nav { transform: none; will-change: auto; position: static; display: block; width: 100%; max-width: 100%; }
    body .addons-mobile-header { position: fixed; top: 0; left: 0; right: 0; height: 74px; background: var(--bg-panel); border-bottom: 1px solid var(--border-color); display: flex; align-items: center; justify-content: space-between; padding: 0 16px; z-index: 99999; box-sizing: border-box; }

    /* 🔥 Przypięcie całego bloku menu (wp-block-addons-menu / .addons-nav-block)
       do górnej krawędzi ekranu oraz efekt chowania/pokazywania przy scrollu.
       Poza tym blokiem, na mobile, w przepływie strony pozostaje tylko
       .addons-menu-mobile-header-bar (reszta dzieci desktopowych jest
       ukryta powyżej) — więc wysokość tego elementu odpowiada wysokości belki. */
    .addons-nav-block {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 99999;
        background: var(--bg-panel, #ffffff);
        border-bottom: 1px solid var(--border-color, #e5e7eb);
        box-sizing: border-box;
        transform: translateY(0);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .addons-nav-block.is-header-hidden {
        transform: translateY(-100%);
    }

    /* Odstęp na treść strony, żeby nie chowała się pod przypiętą belką.
       Wysokość jest nadpisywana dynamicznie przez menu.js (zmienna CSS
       --addons-mobile-header-height) na podstawie realnej wysokości belki. */

    body .addons-icon-box { background: var(--bg-panel); border: 1px solid #E5E7EB; border-radius: var(--border-radius); width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: var(--text, #1F2937); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02); padding: 0 !important; }
    body .addons-mobile-utilities { display: flex; gap: 6px; }

    /* Belka mobilna (Logo z lewej, hamburger z prawej) */
    .addons-menu-mobile-header-bar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        padding: 10px 0;
    }
    .addons-menu-logo-mobile-header .addons-menu-custom-logo {
        width:100%;
        max-height: 44px;
    }

    .addons-menu-hamburger-btn { background: transparent; border: none; cursor: pointer; padding: 10px; display: inline-flex; }
    .hamburger-box { display: inline-block; width: 24px; height: 18px; position: relative; }
    .hamburger-inner, .hamburger-inner::before, .hamburger-inner::after { width: 24px; height: 2px; background-color: currentColor; position: absolute; transition: transform 0.15s ease; }
    .hamburger-inner { top: 50%; transform: translateY(-50%); }
    .hamburger-inner::before { content: ""; top: -7px; }
    .hamburger-inner::after { content: ""; bottom: -7px; }

    .addons-menu-hamburger-btn[aria-expanded="true"] .hamburger-inner { background-color: transparent; }
    .addons-menu-hamburger-btn[aria-expanded="true"] .hamburger-inner::before { transform: translateY(7px) rotate(45deg); }
    .addons-menu-hamburger-btn[aria-expanded="true"] .hamburger-inner::after { transform: translateY(-7px) rotate(-45deg); }

    /* OVERLAY MODALNY — proste pojawianie się (fade), bez wjazdu z boku */
    .addons-nav-block .addons-menu-fullscreen-drawer {
        display: block;
        position: fixed;
        inset: 0;
        width: 100vw;
        height: 100vh;
        background-color: var(--card-bg);
        z-index: 9999999;
        opacity: 0;
        transition: opacity 0.25s ease;
        visibility: hidden;
    }

    .addons-nav-block.is-mobile-active .addons-menu-fullscreen-drawer {
        opacity: 1;
        visibility: visible;
    }

    .addons-drawer-container {
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 100%;
        padding: 32px 24px;
        box-sizing: border-box;
    }

    .addons-drawer-top-row { display: flex; justify-content: space-between; align-items: center; width: 100%; margin-bottom: 40px; }
    .addons-drawer-brand-area .addons-menu-custom-logo { width: 100%; max-height: 54px; }
    .addons-drawer-close-btn { background: transparent; border: none; font-size: 26px; cursor: pointer; color: var(--heading-color, #111); padding: 8px; line-height: 1; }

    /* Globalny przycisk "Wróć" w górnym wierszu — domyślnie ukryty */
    .addons-drawer-back-btn {
        display: none;
        align-items: center;
        gap: 8px;
        background: transparent;
        border: none;
        cursor: pointer;
        padding: 8px 0;
        color: var(--primary-text, #1d4ed8);
        font-weight: 700;
        font-size: 13px;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        font-family: inherit;
    }
    .addons-drawer-back-btn svg { flex-shrink: 0; }

    /* Gdy jesteśmy głębiej w podmenu: chowamy logo, pokazujemy "Wróć" w jego miejscu */
    .addons-nav-block.is-submenu-open .addons-drawer-brand-area {
        display: none;
    }
    .addons-nav-block.is-submenu-open .addons-drawer-back-btn {
        display: inline-flex;
    }

    /* Kontener kart — przycina karty podmenu wjeżdżające z prawej strony */
    .addons-drawer-middle-row { flex-grow: 1; overflow: hidden; position: relative; }

    /* ZAKŁADKI NA PEŁNĄ SZEROKOŚĆ (100%) Z SUBTELNYM SEPARATOREM */
    .addons-drawer-nav-list {
        list-style: none; margin: 0; padding: 0 0 8px; display: flex; flex-direction: column; width: 100%;
        height: 100%; overflow-y: auto; box-sizing: border-box;
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
    }
    /* Gdy karta podmenu jest aktywna, lista główna delikatnie chowa się w tle (efekt paralaksy) */
    .addons-drawer-nav-list.is-behind { transform: translateX(-16%); opacity: 0.35; pointer-events: none; }

    .drawer-nav-item { border-bottom: 1px solid var(--border-color2); width: 100%; box-sizing: border-box; }
    .drawer-nav-row-trigger { display: flex; align-items: center; width: 100%; box-sizing: border-box; }
    
    .drawer-nav-link {
        display: flex; align-items: center; gap: 16px; text-decoration: none; color: var(--heading-color, #111111);
        font-size: 24px; font-weight: 600; width: 100%; box-sizing: border-box; padding: 20px 0;
        padding:1rem;
        border-radius:10px;
    }
    .drawer-link-icon svg { width: 26px; height: 26px; display: block; flex-shrink: 0; }

    /* Cały wiersz z dziećmi jest przyciskiem — otwiera kartę podmenu, nie nawiguje */
    button.drawer-nav-link {
        background: transparent; border: none; cursor: pointer; text-align: left; font-family: inherit;
        justify-content: space-between;
    }
    .drawer-row-arrow { display: inline-flex; align-items: center; color: #9ca3af; flex-shrink: 0; margin-left: auto; }

    /* Tryb aktywny na mobilce */
    .drawer-nav-item.current-menu-item { background-color: rgba(0, 0, 0, 0.02); }

    /* KARTA PODMENU — wjeżdża jako kolejny "ekran" z prawej, z przyciskiem powrotu */
    .drawer-submenu-screen {
        position: absolute;
        inset: 0;
        background: var(--card-bg);
        display: flex;
        flex-direction: column;
        overflow-y: auto;
        box-sizing: border-box;
        transform: translateX(100%);
        visibility: hidden;
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.3s;
    }
    .drawer-submenu-screen.is-active-submenu { transform: translateX(0); visibility: visible; }

    .drawer-submenu-header { display: flex; align-items: center; padding: 0 0 20px; border-bottom: 1px solid var(--border-color2); margin-bottom: 8px; flex-shrink: 0; }
    .drawer-submenu-title { font-size: 20px; font-weight: 700; color: var(--heading-color, #111111); }

    .drawer-submenu { list-style: none; margin: 0; padding: 0 !important; }
    .drawer-submenu li { border-bottom: 1px solid var(--border-color2); }
    .drawer-submenu li a {
        display: flex; align-items: center; text-decoration: none;
        color: var(--heading-color, #111111); font-size: 19px; font-weight: 500; padding: 16px 0;
    }
    .drawer-submenu li a.is-active { font-weight: 700; }

    /* Link "Zobacz {rodzic}" na dole karty podmenu */
    .drawer-submenu-footer { padding: 20px 0 4px; flex-shrink: 0; }
    .drawer-submenu-view-all {
        display: inline-flex; align-items: center; gap: 6px;
        color: var(--primary-text, #1d4ed8); font-weight: 700; font-size: 13px;
        text-transform: uppercase; letter-spacing: 0.03em; text-decoration: none;
    }
    .drawer-submenu-view-all:hover { text-decoration: underline; }

    .addons-drawer-bottom-row { margin-top: auto; padding-top: 20px; width: 100%; box-sizing: border-box; }
    .addons-drawer-bottom-row .wp-block-buttons { flex-direction: column; gap: 12px; width: 100%; }
    .addons-drawer-bottom-row .wp-block-button,
    .addons-drawer-bottom-row .wp-block-button__link { width: 100%; box-sizing: border-box; text-align: center; }
}





@media screen and (max-width: 1399px) {

    /* Gdy tryb hamburgera jest WYŁĄCZONY na mobilce */
    .addons-nav-block.no-mobile-hamburger .addons-menu-mobile-header-bar,
    .addons-nav-block.no-mobile-hamburger .addons-menu-fullscreen-drawer {
        display: none !important;
    }

    .addons-nav-block.no-mobile-hamburger .addons-menu-logo-desktop-container,
    .addons-nav-block.no-mobile-hamburger .addons-menu-slot-above-desktop,
    .addons-nav-block.no-mobile-hamburger .addons-menu-slot-below-desktop,
    .addons-nav-block.no-mobile-hamburger .addons-menu-list-desktop {
        display: flex !important;
    }

    /* Dopasowanie ułożenia menu desktopowego na wąskich ekranach */
    .addons-nav-block.no-mobile-hamburger {
        position: static !important;
        transform: none !important;
    }

    .addons-nav-block.no-mobile-hamburger .addons-menu-list-desktop {
        flex-wrap: wrap; /* Włącz zawijanie pozycji menu, jeśli nie mieszczą się w jednym wierszu */
        gap: 12px;
    }

}
@media (prefers-color-scheme: dark) {

/* Custom colors saved in menu blocks are light-theme colors. */
:root:not(.theme-light):not(.block-editor-iframe__html) body:not(.wcag-high-contrast) .addons-nav-block .main-nav__link:not(.is-active),
:root:not(.theme-light):not(.block-editor-iframe__html) body:not(.wcag-high-contrast) .addons-menu-fullscreen-drawer .drawer-nav-item:not(.current-menu-item) .drawer-nav-link:not(.is-active),
:root:not(.theme-light):not(.block-editor-iframe__html) body:not(.wcag-high-contrast) .addons-menu-fullscreen-drawer .drawer-submenu li:not(.current-menu-item) a:not(.is-active) {
    color: var(--text) !important;
}
:root:not(.theme-light):not(.block-editor-iframe__html) body:not(.wcag-high-contrast) .addons-nav-block .main-nav__link-icon svg,
:root:not(.theme-light):not(.block-editor-iframe__html) body:not(.wcag-high-contrast) .addons-menu-fullscreen-drawer .drawer-link-icon svg {
    stroke: currentColor !important;
}
:root:not(.theme-light):not(.block-editor-iframe__html) .addons-menu-logo-full {
    background-color: #FFFFFF;
    color: #111827;
    padding: 6px 10px;
    border-radius: 12px;
}

}

/* Custom colors saved in menu blocks are light-theme colors. */
:root.theme-dark:not(.block-editor-iframe__html) body:not(.wcag-high-contrast) .addons-nav-block .main-nav__link:not(.is-active),
:root.theme-dark:not(.block-editor-iframe__html) body:not(.wcag-high-contrast) .addons-menu-fullscreen-drawer .drawer-nav-item:not(.current-menu-item) .drawer-nav-link:not(.is-active),
:root.theme-dark:not(.block-editor-iframe__html) body:not(.wcag-high-contrast) .addons-menu-fullscreen-drawer .drawer-submenu li:not(.current-menu-item) a:not(.is-active) {
    color: var(--text) !important;
}
:root.theme-dark:not(.block-editor-iframe__html) body:not(.wcag-high-contrast) .addons-nav-block .main-nav__link-icon svg,
:root.theme-dark:not(.block-editor-iframe__html) body:not(.wcag-high-contrast) .addons-menu-fullscreen-drawer .drawer-link-icon svg {
    stroke: currentColor !important;
}
:root.theme-dark:not(.block-editor-iframe__html) .addons-menu-logo-full {
    background-color: #FFFFFF;
    color: #111827;
    padding: 6px 10px;
    border-radius: 12px;
}

@media(prefers-color-scheme:dark){
 :root:not(.theme-light):not(.block-editor-iframe__html) body:not(.wcag-high-contrast) .addons-menu-hamburger-btn {color:var(--heading-color)!important}
}
:root.theme-dark:not(.block-editor-iframe__html) body:not(.wcag-high-contrast) .addons-menu-hamburger-btn {color:var(--heading-color)!important}

@media(prefers-reduced-motion:reduce){ body:not(.wp-admin) .aside-nav, body:not(.wp-admin) .aside-nav * {transition:none!important} }