/* ======================================================
   Menu Mega Bridge — VIP FINAL (mega + submenus)
   ====================================================== */

/* Referencja: dropdown liczy się od całego #primary-menu */
.main-navigation #primary-menu{
    position: relative !important;
}

/* KLUCZ: top-level LI nie może być relative */
.main-navigation #primary-menu > li{
    position: static !important;
}

/* Reset wpływu motywu na UL/UL (motyw ma ul ul absolute/left:-999em/background) */
.main-navigation #primary-menu ul,
.main-navigation #primary-menu ul ul{
    float: none !important;
    position: static !important;
    left: auto !important;
    right: auto !important;
}

/* ================= DESKTOP ================= */
@media (min-width: 901px){

    /* Panel mega: zawsze szerokość paska menu (#primary-menu) */
    .main-navigation #primary-menu > li > .mmb-dropdown{
        position: absolute !important;
        left: 0 !important;
        top: 100% !important;
        width: 100% !important;
        z-index: 9999 !important;

        display: none;
        background: #fff !important;                 /* <-- wycina czerwony motywu */
        box-shadow: 0 12px 30px rgba(0,0,0,.18) !important;
        padding: 0 !important;
    }

    /* Otwieranie */
    .main-navigation #primary-menu > li:hover > .mmb-dropdown,
    .main-navigation #primary-menu > li:focus-within > .mmb-dropdown{
        display: block !important;
    }

    /* Wnętrze */
    .main-navigation #primary-menu > li > .mmb-dropdown > .mmb-inner{
        display: block !important;
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 22px 26px !important;
        box-sizing: border-box !important;

        background: #fff !important;                 /* <-- pewniak na tło */
    }

    /* UL mega top-level jako GRID */
    .main-navigation #primary-menu > li > .mmb-dropdown ul.mmb-menu{
        display: grid !important;
        width: 100% !important;
        max-width: none !important;

        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;

        gap: 14px 34px !important;
        align-items: start !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;

        background: transparent !important;          /* <-- wycina czerwony motywu */
    }

    /* Kolumny sterowane klasą na .mmb-dropdown */
    .main-navigation #primary-menu > li > .mmb-dropdown.mmb-cols-1 ul.mmb-menu{ grid-template-columns: repeat(1, minmax(0,1fr)) !important; }
    .main-navigation #primary-menu > li > .mmb-dropdown.mmb-cols-2 ul.mmb-menu{ grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
    .main-navigation #primary-menu > li > .mmb-dropdown.mmb-cols-3 ul.mmb-menu{ grid-template-columns: repeat(3, minmax(0,1fr)) !important; }
    .main-navigation #primary-menu > li > .mmb-dropdown.mmb-cols-4 ul.mmb-menu{ grid-template-columns: repeat(4, minmax(0,1fr)) !important; }
    .main-navigation #primary-menu > li > .mmb-dropdown.mmb-cols-5 ul.mmb-menu{ grid-template-columns: repeat(5, minmax(0,1fr)) !important; }
    .main-navigation #primary-menu > li > .mmb-dropdown.mmb-cols-6 ul.mmb-menu{ grid-template-columns: repeat(6, minmax(0,1fr)) !important; }

    /* Top-level LI */
    .main-navigation #primary-menu > li > .mmb-dropdown ul.mmb-menu > li{
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        width: auto !important;
        max-width: none !important;
        display: block !important;
    }

    /* Top-level LINK */
    .main-navigation #primary-menu > li > .mmb-dropdown ul.mmb-menu > li > a{
        display: block !important;
        width: 100% !important;
        box-sizing: border-box !important;

        margin: 0 !important;
        padding: 8px 10px !important;

        background: transparent !important;
        border-radius: 0 !important;
        box-shadow: none !important;

        color: #222 !important;
        text-align: left !important;
        text-transform: none !important;

        font-size: 14px !important;
        font-weight: 700 !important;
        line-height: 1.25 !important;

        white-space: normal !important;
        text-decoration: none !important;
    }

    .main-navigation #primary-menu > li > .mmb-dropdown ul.mmb-menu > li > a:hover{
        background: rgba(0,0,0,.06) !important;
        text-decoration: none !important;
    }

    /* Ukryj "ptaszki/strzałki" z motywu dla top-level w mega */
    .main-navigation #primary-menu > li > .mmb-dropdown ul.mmb-menu > li.menu-item-has-children > a::after,
    .main-navigation #primary-menu > li > .mmb-dropdown ul.mmb-menu > li > a::before,
    .main-navigation #primary-menu > li > .mmb-dropdown ul.mmb-menu > li > a::after{
        content: none !important;
    }

    /* ===== SUBMENU (2. poziom) w mega: ma być widoczne pod rodzicem ===== */

    .main-navigation #primary-menu > li > .mmb-dropdown ul.mmb-menu > li > ul.sub-menu{
        display: block !important;              /* <-- klucz: pokazujemy */
        position: static !important;
        left: auto !important;
        top: auto !important;

        margin: 8px 0 0 0 !important;
        padding: 8px 0 0 0 !important;
        list-style: none !important;

        background: transparent !important;     /* <-- nie czerwone */
        border-top: 2px solid #b63213 !important; /* <-- delikatna kreska */
    }

    /* Elementy submenu */
    .main-navigation #primary-menu > li > .mmb-dropdown ul.mmb-menu > li > ul.sub-menu > li{
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
    }

    /* Linki submenu: wcięcie + cieńszy font */
    .main-navigation #primary-menu > li > .mmb-dropdown ul.mmb-menu > li > ul.sub-menu > li > a{
        display: block !important;
        padding: 6px 10px 6px 18px !important;  /* <-- wcięcie */
        margin: 0 !important;

        font-size: 13px !important;
        font-weight: 500 !important;
        line-height: 1.25 !important;

        color: #222 !important;
        text-decoration: none !important;

        background: transparent !important;
    }

    .main-navigation #primary-menu > li > .mmb-dropdown ul.mmb-menu > li > ul.sub-menu > li > a:hover{
        text-decoration: underline !important;
        background: rgba(0,0,0,.04) !important;
    }

    /* Jeśli submenu ma swoje dzieci (3 poziom) — ukryj (żeby nie robić drzewa) */
    .main-navigation #primary-menu > li > .mmb-dropdown ul.mmb-menu > li > ul.sub-menu ul{
        display: none !important;
    }
}

/* ================= MOBILE (akordeon) ================= */
@media (max-width: 900px){

    .main-navigation #primary-menu > li > .mmb-dropdown{
        position: static !important;
        width: auto !important;
        display: none;
        background: transparent !important;
        box-shadow: none !important;
        padding: 0 !important;
    }

    .main-navigation #primary-menu > li.mmb-open > .mmb-dropdown{
        display: block !important;
    }

    .main-navigation #primary-menu > li > .mmb-dropdown > .mmb-inner{
        padding: 0 0 0 16px !important;
        background: transparent !important;
    }

    /* Mobile: lista w dół */
    .main-navigation #primary-menu > li > .mmb-dropdown ul.mmb-menu{
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
    }

    .main-navigation #primary-menu > li > .mmb-dropdown ul.mmb-menu > li > a{
        padding: 10px 0 !important;
        color: #222 !important;
        background: transparent !important;
    }

    /* Mobile: pokaż 2 poziom pod rodzicem również */
    .main-navigation #primary-menu > li > .mmb-dropdown ul.mmb-menu > li > ul.sub-menu{
        display: block !important;
        margin: 6px 0 10px 0 !important;
        padding: 6px 0 0 0 !important;
        border-top: 2px solid #b63213 !important;
        background: transparent !important;
    }

    .main-navigation #primary-menu > li > .mmb-dropdown ul.mmb-menu > li > ul.sub-menu > li > a{
        padding: 8px 0 8px 14px !important;
        font-size: 13px !important;
        font-weight: 500 !important;
    }

    /* 3 poziom ukryty */
    .main-navigation #primary-menu > li > .mmb-dropdown ul.mmb-menu > li > ul.sub-menu ul{
        display: none !important;
    }
}
/* ======================================================
   VIP polish: układ + typografia + wyrównania
   ====================================================== */

/* Mega: wszystko wyrównane do lewej */
.main-navigation #primary-menu > li > .mmb-dropdown,
.main-navigation #primary-menu > li > .mmb-dropdown *{
    text-align: left !important;
}

/* Wewnętrzny padding i maksymalna wysokość (żeby nie przykrywać pół strony) */
@media (min-width: 901px){
    .main-navigation #primary-menu > li > .mmb-dropdown{
        max-height: calc(100vh - 160px);
        overflow: auto;
    }

    .main-navigation #primary-menu > li > .mmb-dropdown > .mmb-inner{
        padding: 18px 22px !important;
    }

    /* Grid: lepiej “oddycha” i nie robi wielkich pustek */
    .main-navigation #primary-menu > li > .mmb-dropdown ul.mmb-menu{
        gap: 18px 40px !important;
        align-items: start !important;
    }

    /* Responsywne kolumny (w ramach 930px menu) */
    .main-navigation #primary-menu > li > .mmb-dropdown.mmb-cols-4 ul.mmb-menu{
        grid-template-columns: repeat(4, minmax(0,1fr)) !important;
    }
    @media (max-width: 1100px){
        .main-navigation #primary-menu > li > .mmb-dropdown.mmb-cols-4 ul.mmb-menu{
            grid-template-columns: repeat(3, minmax(0,1fr)) !important;
        }
    }
    @media (max-width: 980px){
        .main-navigation #primary-menu > li > .mmb-dropdown.mmb-cols-4 ul.mmb-menu{
            grid-template-columns: repeat(2, minmax(0,1fr)) !important;
        }
    }

    /* Top-level jako “nagłówek kolumny” */
    .main-navigation #primary-menu > li > .mmb-dropdown ul.mmb-menu > li > a{
        padding: 0 0 8px 0 !important;
        font-size: 14px !important;
        font-weight: 800 !important;
        line-height: 1.25 !important;
        background: transparent !important;
    }

    /* Hover nagłówka delikatny (bez kafla) */
    .main-navigation #primary-menu > li > .mmb-dropdown ul.mmb-menu > li > a:hover{
        background: transparent !important;
        text-decoration: underline !important;
    }

    /* Submenu: lista pod nagłówkiem */
    .main-navigation #primary-menu > li > .mmb-dropdown ul.mmb-menu > li > ul.sub-menu{
        margin: 10px 0 0 0 !important;
        padding: 10px 0 0 0 !important;
        border-top: 2px solid #b63213 !important; /* kreska tylko dla grup z submenu */
    }

    /* Elementy submenu */
    .main-navigation #primary-menu > li > .mmb-dropdown ul.mmb-menu > li > ul.sub-menu > li > a{
        padding: 6px 0 !important;            /* bez wielkiego wcięcia */
        margin: 0 !important;
        font-size: 13px !important;
        font-weight: 500 !important;
        line-height: 1.3 !important;
        opacity: .95;
    }

    /* Hover submenu subtelny */
    .main-navigation #primary-menu > li > .mmb-dropdown ul.mmb-menu > li > ul.sub-menu > li > a:hover{
        background: transparent !important;
        text-decoration: underline !important;
    }

    /* Usuwamy “ptaszki” w mega (dla pozycji z dziećmi) */
    .main-navigation #primary-menu > li > .mmb-dropdown ul.mmb-menu > li.menu-item-has-children > a::after{
        content: none !important;
    }
}
/* ===========================
   MOBILE FIX: wygląd + padding + strzałka
   =========================== */
@media (max-width: 900px){

    /* Mega dropdown w mobile – białe tło jak panel */
    .main-navigation #primary-menu > li > .mmb-dropdown{
        background: #fff !important;
    }

    /* Wewnętrzny padding */
    .main-navigation #primary-menu > li > .mmb-dropdown > .mmb-inner{
        padding: 10px 16px 14px 16px !important;
    }

    /* Lista główna (top-level mega) */
    .main-navigation #primary-menu > li > .mmb-dropdown ul.mmb-menu > li{
        border-bottom: 1px solid rgba(0,0,0,.08) !important;
        padding: 0 !important;
    }

    .main-navigation #primary-menu > li > .mmb-dropdown ul.mmb-menu > li > a{
        padding: 12px 36px 12px 8px !important; /* <-- LEWY PADDING + miejsce na strzałkę */
        color: #222 !important;
        background: transparent !important;
        position: relative !important;
    }

    /* Strzałka: po PRAWEJ i wyśrodkowana */
    .main-navigation #primary-menu > li > .mmb-dropdown ul.mmb-menu > li.menu-item-has-children > a::after{
        content: "▾" !important;
        position: absolute !important;
        right: 10px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        font-size: 16px !important;
        line-height: 1 !important;
        color: #b63213 !important;
    }

    /* Submenu w mobile: wcięcie + mniejszy font + kreska akcentu */
    .main-navigation #primary-menu > li > .mmb-dropdown ul.mmb-menu > li > ul.sub-menu{
        border-top: 2px solid #b63213 !important;
        margin: 0 !important;
        padding: 8px 0 10px 0 !important;
        background: transparent !important;
    }

    .main-navigation #primary-menu > li > .mmb-dropdown ul.mmb-menu > li > ul.sub-menu > li > a{
        padding: 10px 8px 10px 18px !important; /* <-- wcięcie submenu */
        font-size: 13px !important;
        font-weight: 500 !important;
        color: #222 !important;
    }

    /* Usuń czerwone tła motywu (ul ul) w obrębie mega */
    .main-navigation #primary-menu > li > .mmb-dropdown ul,
    .main-navigation #primary-menu > li > .mmb-dropdown ul ul,
    .main-navigation #primary-menu > li > .mmb-dropdown a{
        background: transparent !important;
    }
}
@media (max-width: 640px){

    /* wrapper zawierający: #masthead + #sidebar + #content */
    #content-wrapper{
        display: grid !important;
        grid-template-columns: 1fr !important;
        grid-template-areas:
      "masthead"
      "content"
      "sidebar" !important;
    }

    /* HEADER ma zostać na górze */
    #content-wrapper #masthead{
        grid-area: masthead !important;
        width: 100% !important;
        margin: 0 !important;
    }

    /* CONTENT jako pierwszy blok treści */
    #content-wrapper #content{
        grid-area: content !important;
        float: none !important;
        width: 100% !important;
        margin: 0 !important;
    }

    /* SIDEBAR pod treścią */
    #content-wrapper #sidebar{
        grid-area: sidebar !important;
        float: none !important;
        width: 100% !important;
        margin-top: 24px !important;
    }

    /* clear floatów z desktopu – w gridzie niepotrzebne */
    #content-wrapper .clear{
        display: none !important;
    }

    /* Każda tabela w treści */
    table{
        display: block;
        max-width: 100%;
        overflow-x: auto;

        /* smooth scroll na mobile */
        -webkit-overflow-scrolling: touch;

        /* wizualnie */
        border-collapse: collapse;
    }

    /* Zachowaj realną szerokość tabeli (żeby było co scrollować) */
    table tbody{
        display: table;
        width: max-content;
        min-width: 100%;
    }

    /* Komórki – nie łamiemy liczb */
    table td,
    table th{
        white-space: nowrap;
        padding: 10px 12px;
        box-sizing: border-box;
    }

    /* Pierwsza kolumna MOŻE się łamać (opisy, nazwy) */
    table td:first-child,
    table th:first-child{
        white-space: normal;
    }

    /* Usuń agresywne inline width */
    table,
    table td,
    table th{
        width: auto !important;
        max-width: none !important;
    }
    .entry-content table{
        max-width: 100% !important;
        width: 100% !important;          /* nadpisuje inline width */
        box-sizing: border-box !important;
    }

    /* 2) Scroll robimy na "zewnętrznej powłoce" = display:block,
          ALE musimy też odciąć wpływ na layout */
    .entry-content table{
        display: block !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch;

        /* kluczowe: odcina wpływ na szerokość layoutu w wielu przypadkach */
        contain: layout paint !important;
    }

    /* 3) W środku tabela ma mieć naturalną szerokość (żeby było co przewijać) */
    .entry-content table > tbody{
        display: table !important;
        width: max-content !important;
        min-width: 100% !important;
    }

    /* 4) Reset inline width na komórkach */
    .entry-content table td,
    .entry-content table th{
        width: auto !important;
        max-width: none !important;
        white-space: nowrap;
        padding: 10px 12px;
    }

    .entry-content table td:first-child,
    .entry-content table th:first-child{
        white-space: normal;
    }
}