/* Reguły celują w nasze własne klasy (`is-mega`, `c-mega`), nie w kontener motywu —
   dzięki temu ta sama geometria działa pod Elementorem i pod natywnym menu OceanWP.
   Kontener jest potrzebny tylko jako kotwica pozycjonowania. */

/* ── Kotwica panelu ───────────────────────────────────────────── */
.elementor-nav-menu--main,
#site-navigation-wrap {
    position: relative;
}

/* Liczba kolumn wjeżdża klasą z walkera — bez inline `style`. */
ul.c-mega--cols-2 {
    --mega-cols: 2;
}
ul.c-mega--cols-3 {
    --mega-cols: 3;
}
ul.c-mega--cols-4 {
    --mega-cols: 4;
}
ul.c-mega--cols-5 {
    --mega-cols: 5;
}

/* Wszystko poniżej dotyczy WYŁĄCZNIE desktopu. Poniżej 1025px zostawiamy
   menu mobilne Elementora nietknięte — panel w kolumnach nie ma tam sensu. */
@media (min-width: 1025px) {
    /* `<li>` musi zostać `static`, żeby blokiem zawierającym panelu było całe
       `ul.elementor-nav-menu` (SmartMenus daje mu `position: relative`), a nie
       pojedyncza pozycja menu — inaczej panel ma szerokość swojego `<li>`.
       Selektor musi być mocny: Elementor/SmartMenus stylują `li` przez
       3-klasowe selektory i wygrywają ze zwykłym `li.is-mega`. */
    .elementor-nav-menu > li.is-mega,
    #site-navigation-wrap .dropdown-menu > li.is-mega {
        position: static !important;
    }

    /* ── Panel: TYLKO geometria. Show/hide (inline `display`) zostawiamy
       SmartMenus/Superfishowi. `!important` jest konieczne, bo SmartMenus
       pod Elementor Pro wpisuje top/left/width prosto w atrybut style. ── */
    li.is-mega > ul.c-mega {
        top: 100% !important;
        left: 0 !important;
        right: 0 !important;
        inset-inline: 0 !important;

        /* KLUCZOWE: 100%, nie `auto`. Coś w stosie Elementor/SmartMenus wymusza
           `left: auto` i wygrywa z naszym `left: 0 !important` — przy `width: auto`
           szerokość leci wtedy shrink-to-fit z zawartości, a panel dokleja się do
           prawej. `right: 0` przechodzi (potwierdzone wartością użytą), więc
           sztywne 100% wymusza `left: 0` arytmetyką: left + width + right zawsze
           równa się szerokości bloku zawierającego. Kto psuje `left` — bez znaczenia. */
        width: 100% !important;
        box-sizing: border-box !important; /* `width: 100%` musi objąć padding panelu */
        min-width: 0 !important;
        max-width: none !important;
        margin: 0 !important;

        max-height: min(70vh, 620px);
        overflow-y: auto;
        overscroll-behavior: contain;

        columns: var(--mega-cols, 4);
        column-gap: 2.5rem;
        padding: 1.75rem 1.5rem 1.25rem;
        box-shadow: 0 16px 32px rgba(0, 0, 0, 0.08);
    }

    li.is-mega > ul.c-mega > li {
        break-inside: avoid;
        float: none; /* OceanWP floatuje itemy dropdownu */
        width: auto;
        position: relative;
    }
    /* `padding` celowo NIEUSTAWIONE — zostaje przy Elementorze (Style → Dropdown
       → Padding), bo jego reguła hoveru ma pseudoklasę i tak czy siak nas bije.
       Nadpisanie tylko stanu spoczynku dawało skok szerokości pod kursorem. */
    li.is-mega > ul.c-mega > li > a {
        line-height: 1.35;
        border: 0;
    }
    li.is-mega > ul.c-mega > li.menu-item-has-children > a {
        font-weight: 600;
    }

    /* Strzałki rozwijania przy nagłówku kolumny — zbędne, bo trzeci poziom
       jest już rozwinięty. `.sub-arrow` = SmartMenus, `.nav-arrow` = OceanWP. */
    li.is-mega > ul.c-mega .sub-arrow,
    li.is-mega > ul.c-mega .nav-arrow {
        display: none !important;
    }

    /* ── Trzeci poziom: statyczna lista pod nagłówkiem, bez rozwijania.
       `!important` z tego samego powodu — SmartMenus trzyma je na display:none. ── */
    li.is-mega ul.c-mega__sub {
        display: block !important;
        position: static !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        margin: 0 0 1.25rem !important;
        padding: 0;
        box-shadow: none;
        border: 0;
        background: none;
        transform: none;
    }
    li.is-mega ul.c-mega__sub > li > a {
        padding: 0.25rem 0;
        font-size: 0.875rem;
        opacity: 0.78;
        border: 0;
    }
}

/* full-bleed — wymaga `overflow-x: clip` na <body>, inaczej poziomy scroll
@media (min-width: 1025px) {
    li.is-mega > ul.c-mega {
        left: 50% !important; right: auto !important;
        width: 100vw !important; margin-left: -50vw !important;
        padding-inline: max(1.5rem, calc((100vw - 1200px) / 2));
    }
}
*/