/* =========================================================
   KATOWICE – mobile menu
   WERSJA BARDZIEJ JAK POPRZEDNIO
   ========================================================= */

@media (max-width: 991px) {

    /* =========================================
       OGÓLNY OVERLAY
       ========================================= */

    .wcag-mobile-menu {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        z-index: 10010;
        min-height: 100%;
        padding-top: 56px;
        background: rgba(0, 0, 0, 0.50) !important;
        overflow-y: auto;
        overflow-x: hidden;
    }

    body.wcag-mobile-open {
        overflow: hidden;
    }

    /* =========================================
       STARY HAMBURGER
       ========================================= */

    .wcag-mobile-toggle {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 10030;

        width: 70px;
        height: 56px;
        padding: 0 !important;
        margin: 0 !important;

        border: 0 !important;
        background: rgba(0, 0, 0, 0.35) !important;
        color: #fff !important;
        cursor: pointer;
        box-shadow: none !important;
        font-size: 0 !important;
    }

    .wcag-mobile-toggle::before {
        content: "☰";
        display: block;
        color: #fff;
        font-size: 34px;
        line-height: 56px;
        text-align: center;
        font-weight: 300;
    }

    .wcag-mobile-toggle[aria-expanded="true"] {
        display: none !important;
    }

    .wcag-mobile-toggle:focus,
    .wcag-mobile-toggle:focus-visible {
        outline: 3px solid #ffffff !important;
        outline-offset: -3px !important;
    }

    /* =========================================
       GÓRNY PASEK – JAK W STARYM MENU
       ========================================= */

    .wcag-mobile-header {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 56px;
        background: #333739;
        border-top: 1px solid rgba(255,255,255,0.08);
        border-bottom: 1px solid #4f5458;
        z-index: 10020;
    }

    .wcag-mobile-close {
        position: absolute;
        left: 0;
        top: 0;

        width: 70px;
        height: 56px;
        padding: 0 !important;
        margin: 0 !important;

        border: 0 !important;
        background: transparent !important;
        color: #fff !important;
        cursor: pointer;
        box-shadow: none !important;
        font-size: 0 !important;
    }

    .wcag-mobile-close::before {
        content: "✕";
        display: block;
        text-align: center;
        line-height: 56px;
        font-size: 30px;
        font-weight: 300;
        color: #fff;
    }

    .wcag-mobile-close:focus,
    .wcag-mobile-close:focus-visible {
        outline: 3px solid #ffffff !important;
        outline-offset: -3px !important;
    }

    .wcag-mobile-brand {
        position: absolute;
        top: 0;
        left: 70px;
        right: 0;
        height: 56px;

        background-image: url("/assets/images/katowice_logo_menu.png");
        background-repeat: no-repeat;
        background-position: center center;
        background-size: auto 28px;

        pointer-events: none;
    }

    /* =========================================
       LISTA GŁÓWNA
       ========================================= */

    .wcag-mobile-sections,
    .wcag-mobile-level {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .wcag-mobile-section,
    .wcag-mobile-item {
        margin: 0;
        padding: 0;
    }

    /* =========================================
       WIERSZE MENU
       ========================================= */

    .wcag-mobile-row {
        display: flex;
        align-items: stretch;
        width: 100%;
        min-height: 52px;
        background: #6b6f74;
        border-bottom: 1px solid #7d8287;
    }

    .wcag-mobile-root-row {
        background: #6b6f74;
    }

    /* =========================================
       LINKI
       ========================================= */

    .wcag-mobile-link {
        flex: 1 1 auto;
        display: flex;
        align-items: center;

        min-height: 52px;
        padding: 13px 16px;

        color: #ffffff !important;
        text-decoration: none !important;
        font-family: 'Titillium Web', sans-serif;
        font-size: 16px;
        font-weight: 300;
        line-height: 1.25;
        background: transparent !important;
    }

    .wcag-mobile-link:hover,
    .wcag-mobile-link:focus,
    .wcag-mobile-link:focus-visible {
        background: #4a4e53 !important;
        color: #ffffff !important;
        outline: none !important;
        text-decoration: none !important;
    }

    /* =========================================
       GŁÓWNE PRZYCISKI SEKCJI
       ========================================= */

    .wcag-mobile-section-button {
        flex: 1 1 auto;
        display: flex;
        align-items: center;
        justify-content: space-between;

        width: 100%;
        min-height: 52px;
        padding: 13px 16px;

        border: 0 !important;
        background: #6b6f74 !important;
        color: #ffffff !important;

        font-family: 'Titillium Web', sans-serif;
        font-size: 16px;
        font-weight: 300;
        line-height: 1.25;
        text-align: left;
        cursor: pointer;
        box-shadow: none !important;
    }

    .wcag-mobile-section-button:hover,
    .wcag-mobile-section-button:focus,
    .wcag-mobile-section-button:focus-visible {
        background: #4a4e53 !important;
        outline: none !important;
    }

    .wcag-mobile-section-label {
        display: inline-block;
        padding-right: 12px;
    }

    /* =========================================
       PRZYCISK PLUS – BARDZIEJ JAK STARY
       ========================================= */

    .wcag-mobile-expand {
        flex: 0 0 54px;
        width: 54px;
        min-height: 52px;

        display: flex;
        align-items: center;
        justify-content: center;

        padding: 0 !important;
        margin: 0 !important;

        border: 0 !important;
        border-left: 1px solid #7d8287 !important;
        background: transparent !important;
        box-shadow: none !important;
        cursor: pointer;
    }

    .wcag-mobile-expand::before {
        content: "";
        display: block;
        width: 28px;
        height: 28px;
        background: #4b4f53;
        border-radius: 1px;
        position: absolute;
    }

    .wcag-mobile-expand:hover::before,
    .wcag-mobile-expand:focus::before,
    .wcag-mobile-expand:focus-visible::before {
        background: #3d4044;
    }

    .wcag-mobile-plus {
        position: relative;
        z-index: 2;
        display: block;
        font-size: 28px;
        line-height: 1;
        font-weight: 600;
        color: #f1c40f;
        transform: translateY(-1px);
    }

    .wcag-mobile-section-button .wcag-mobile-plus {
        font-size: 28px;
        margin-left: 10px;
    }

    /* =========================================
       PODPOZIOMY
       ========================================= */

    .wcag-mobile-level[hidden] {
        display: none !important;
    }

    .wcag-mobile-level .wcag-mobile-row {
        background: #6b6f74;
    }

    .wcag-mobile-level .wcag-mobile-level .wcag-mobile-row {
        background: #63676c;
    }

    .wcag-mobile-level .wcag-mobile-level .wcag-mobile-link,
    .wcag-mobile-level .wcag-mobile-level .wcag-mobile-section-button {
        padding-left: 26px;
    }

    .wcag-mobile-level .wcag-mobile-level .wcag-mobile-level .wcag-mobile-row {
        background: #5a5e63;
    }

    .wcag-mobile-level .wcag-mobile-level .wcag-mobile-level .wcag-mobile-link,
    .wcag-mobile-level .wcag-mobile-level .wcag-mobile-level .wcag-mobile-section-button {
        padding-left: 38px;
        font-size: 15px;
    }

    /* =========================================
       FOCUS
       ========================================= */

    .wcag-mobile-link:focus-visible,
    .wcag-mobile-section-button:focus-visible,
    .wcag-mobile-expand:focus-visible {
        outline: 3px solid #ffffff !important;
        outline-offset: -3px !important;
    }

    /* =========================================
       UKRYCIE STAREGO MENU
       ========================================= */

    .wcag-mobile-ready .main-menu.mobile-mega-menu,
    .wcag-mobile-ready a.main-menu-toggle,
    .wcag-mobile-ready a.mmm.main-menu-toggle {
        display: none !important;
    }
}






/* ==================================================
   MENU WCAG – przyciemnienie tylko pod menu
   ================================================== */

@media (max-width: 991px) {

    /* Nie używamy pseudo-elementu body jako nakładki */
    body.wcag-mobile-open::before {
        content: none !important;
    }

    /* Menu stanowi pełnoekranową warstwę */
    .wcag-mobile-menu:not([hidden]) {
        position: fixed !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100dvh !important;
        padding: 0 !important;

        z-index: 2147483000 !important;

        background: rgba(0, 0, 0, 0.55) !important;

        overflow-y: auto !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }

    /* Pasek z logo pozostaje całkowicie nieprzezroczysty */
    .wcag-mobile-header {
        position: relative !important;
        z-index: 2 !important;
        background: #333739 !important;
    }

    /* Lista menu nie jest przyciemniana */
    .wcag-mobile-sections {
        position: relative !important;
        z-index: 1 !important;
        background: transparent !important;
    }

    /* Belki menu zachowują swoje oryginalne kolory */
    .wcag-mobile-row {
        background: #666a6f !important;
    }

    .wcag-mobile-root-row,
    .wcag-mobile-section-button {
        background: #666a6f !important;
    }

    /* Blokada przewijania strony w tle */
    body.wcag-mobile-open {
        overflow: hidden !important;
    }
}





/* ============================================
   WCAG MOBILE – JEDNOLITE PLUSY I MINUSY
   ============================================ */

@media (max-width: 991px) {

    /* Wspólne pozycjonowanie ikon */
    .wcag-mobile-section-button,
    .wcag-mobile-expand {
        position: relative;
    }

    /* Główne sekcje – miejsce na ikonę */
    .wcag-mobile-section-button {
        padding-right: 70px !important;
    }

    /* Wspólny wygląd plusów i minusów */
    .wcag-mobile-section-button .wcag-mobile-plus,
    .wcag-mobile-expand .wcag-mobile-plus {
        display: flex !important;
        align-items: center;
        justify-content: center;

        position: relative;
        z-index: 1;

        width: 28px !important;
        height: 28px !important;
        min-width: 28px;

        padding: 0 !important;
        margin: 0 !important;

        background: #4b4f53 !important;
        border-radius: 2px;

        color: #f1c40f !important;
        font-size: 26px !important;
        font-weight: 700 !important;
        line-height: 1 !important;

        transform: none !important;
    }

    /* Główne sekcje – ikona w prawym rogu */
    .wcag-mobile-section-button .wcag-mobile-plus {
        position: absolute;
        right: 24px;
        top: 50%;
        transform: translateY(-50%) !important;
    }

    /* Podmenu – wyłączamy poprzedni kwadrat z ::before */
    .wcag-mobile-expand::before {
        content: none !important;
    }

    /* Plusy podmenu w tej samej formie */
    .wcag-mobile-expand .wcag-mobile-plus {
        position: relative;
        top: auto;
        right: auto;
    }

    /* Stan rozwinięty – minus taki sam jak plus */
    .wcag-mobile-section-button[aria-expanded="true"] .wcag-mobile-plus,
    .wcag-mobile-expand[aria-expanded="true"] .wcag-mobile-plus {
        background: #4b4f53 !important;
        color: #f1c40f !important;
    }

    /* Fokus pozostaje widoczny */
    .wcag-mobile-section-button:focus-visible,
    .wcag-mobile-expand:focus-visible {
        outline: 3px solid #ffffff !important;
        outline-offset: -3px !important;
    }
}

/* WCAG – wyśrodkowanie znaków + i − */

@media (max-width: 991px) {

    .wcag-mobile-plus {
        font-family: Arial, sans-serif !important;
        font-size: 26px !important;
        font-weight: 700 !important;
        line-height: 28px !important;
        text-align: center !important;

        /* Korekta optycznego położenia znaku */
        padding-bottom: 3px !important;
        box-sizing: border-box !important;
    }

    /* Wyśrodkowanie całego kwadratu w wierszu */
    .wcag-mobile-expand {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Zachowanie położenia kwadratu w głównych sekcjach */
    .wcag-mobile-section-button .wcag-mobile-plus {
        top: 50% !important;
        transform: translateY(-50%) !important;
    }
}