/* ═══════════════════════════════════════════════════════════════════════════════
   MC MEGA MENU — CSS strukturalny
   Zmienne domyślne są nadpisywane przez Elementor per widget-instance.
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ─── Domyślne wartości zmiennych (fallback gdy Elementor nie nadpisze) ─── */
.mc-instance {
    --mc-root-gap:              32px;
    --mc-root-color:            #252525;
    --mc-root-color-hover:      #555555;
    --mc-root-pad-x:            0px;
    --mc-root-pad-y:            14px;
    --mc-root-transform:        none;
    --mc-root-indicator-h:      2px;
    --mc-root-indicator-color:  #252525;

    --mc-dd-bg:                 #ffffff;
    --mc-dd-radius:             10px;
    --mc-dd-min-width:          220px;
    --mc-dd-pad-x:              8px;
    --mc-dd-pad-y:              8px;
    --mc-dd-gap-top:            8px;
    --mc-dd-offset-x:           -4px;
    --mc-dd-color:              #252525;
    --mc-dd-color-hover:        #555555;
    --mc-dd-bg-hover:           #F5F5F5;
    --mc-dd-pad-x-item:         14px;
    --mc-dd-pad-y-item:         9px;
    --mc-dd-radius-item:        6px;
    --mc-dd-gap-item:           2px;
    --mc-dd-duration:           200ms;
    --mc-dd-easing:             ease;

    --mc-burger-color:          #252525;
    --mc-burger-active-color:   #252525;
    --mc-burger-width:          28px;
    --mc-burger-height:         28px;
    --mc-burger-thickness:      2px;
    --mc-burger-gap:            5px;

    --mc-overlay-bg:            rgba(0,0,0,.45);
    --mc-panel-bg:              #ffffff;
    --mc-panel-width:           100%;
    --mc-panel-duration:        280ms;
    --mc-panel-hdr-height:      56px;
    --mc-panel-hdr-bg:          #ffffff;
    --mc-panel-hdr-color:       #252525;
    --mc-panel-hdr-border-color:#E5E5E5;

    --mc-mob-link-color:        #252525;
    --mc-mob-link-hover:        #555555;
    --mc-mob-link-bg-hover:     #F9F9F9;
    --mc-mob-link-pad-y:        13px;
    --mc-mob-link-pad-x:        20px;
    --mc-mob-link-border:       #F0F0F0;

    --mc-back-bg:               #F5F5F5;
    --mc-back-color:            #252525;
    --mc-back-pad-y:            12px;
    --mc-back-pad-x:            20px;
}

/* ─── Reset ─── */
.mc-instance *,
.mc-instance *::before,
.mc-instance *::after { box-sizing: border-box; }

.mc-instance ul,
.mc-instance li { margin: 0; padding: 0; list-style: none; }

.mc-instance a { text-decoration: none; color: inherit; }

.mc-instance button { cursor: pointer; background: none; border: none; padding: 0; font: inherit; }

/* ─── Hamburger — struktura globalna (display sterowane przez media query / editor override) ─── */
.mc-hamburger {
    display:         none;   /* domyślnie ukryty; media query lub override edytora pokazuje */
    flex-direction:  column;
    align-items:     stretch;
    justify-content: center;
    gap:             var(--mc-burger-gap);
    width:           var(--mc-burger-width);
    height:          var(--mc-burger-height);
    flex-shrink:     0;
    transition:      background-color .2s ease;
    -webkit-tap-highlight-color: transparent;
}

.mc-hamburger__bar {
    display:       block;
    width:         100%;
    min-width:     0;
    height:        var(--mc-burger-thickness);
    flex-shrink:   0;
    background:    var(--mc-burger-color);
    border-radius: calc(var(--mc-burger-thickness) / 2);
    transition:    transform .25s ease, opacity .2s ease, width .2s ease, background-color .2s ease;
    transform-origin: center;
}

.mc-hamburger__label {
    display:     block;
    font-size:   12px;
    line-height: 1;
    margin-top:  2px;
    color:       var(--mc-burger-color);
}

/* Hamburger → X (3 linie) */
.mc-hamburger.is-active .mc-hamburger__bar { background: var(--mc-burger-active-color); }

.mc-hamburger[data-lines="3"].is-active .mc-hamburger__bar:nth-child(1) {
    transform: translateY(calc(var(--mc-burger-gap) + var(--mc-burger-thickness))) rotate(45deg);
}
.mc-hamburger[data-lines="3"].is-active .mc-hamburger__bar--mid {
    opacity: 0;
    width:   0;
}
.mc-hamburger[data-lines="3"].is-active .mc-hamburger__bar:last-of-type {
    transform: translateY(calc(-1 * (var(--mc-burger-gap) + var(--mc-burger-thickness)))) rotate(-45deg);
}

/* Hamburger → X (2 linie) */
.mc-hamburger[data-lines="2"].is-active .mc-hamburger__bar:first-child {
    transform: translateY(calc(var(--mc-burger-gap) / 2 + var(--mc-burger-thickness) / 2)) rotate(45deg);
}
.mc-hamburger[data-lines="2"].is-active .mc-hamburger__bar:last-child {
    transform: translateY(calc(-1 * (var(--mc-burger-gap) / 2 + var(--mc-burger-thickness) / 2))) rotate(-45deg);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   DESKTOP ≥ 1025px
   ═══════════════════════════════════════════════════════════════════════════════ */
@media (min-width: 1025px) {

    /* Hamburger + overlay + mobile panel — ukryte na desktop */
    .mc-hamburger,
    .mc-overlay,
    .mc-mobile { display: none !important; }

    /* ── Belka główna ── */
    .mc-menu--root {
        display:     flex;
        align-items: center;
        gap:         var(--mc-root-gap);
    }

    .mc-menu__item--root { position: relative; }

    /* ── Linki root ── */
    .mc-menu__link--root {
        display:         flex;
        align-items:     center;
        gap:             6px;
        padding:         var(--mc-root-pad-y) var(--mc-root-pad-x);
        color:           var(--mc-root-color);
        text-transform:  var(--mc-root-transform);
        white-space:     nowrap;
        position:        relative;
        transition:      color var(--mc-dd-duration) var(--mc-dd-easing);
    }

    .mc-menu__link--root::after {
        content:          '';
        position:         absolute;
        bottom:           0; left: 0; right: 0;
        height:           var(--mc-root-indicator-h);
        background:       var(--mc-root-indicator-color);
        transform:        scaleX(0);
        transform-origin: center;
        transition:       transform var(--mc-dd-duration) var(--mc-dd-easing);
        border-radius:    var(--mc-root-indicator-h);
    }

    .mc-menu__link--root:hover,
    .mc-menu__item--root:hover   > .mc-menu__link--root,
    .mc-menu__item.current-menu-item     > .mc-menu__link--root,
    .mc-menu__item.current-menu-ancestor > .mc-menu__link--root {
        color: var(--mc-root-color-hover);
    }

    .mc-menu__link--root:hover::after,
    .mc-menu__item--root:hover   > .mc-menu__link--root::after,
    .mc-menu__item.current-menu-item     > .mc-menu__link--root::after,
    .mc-menu__item.current-menu-ancestor > .mc-menu__link--root::after {
        transform: scaleX(1);
    }

    /* ── Podmenu — kontener ── */
    .mc-menu--sub {
        position:    absolute;
        background:  var(--mc-dd-bg);
        border-radius: var(--mc-dd-radius);
        min-width:   var(--mc-dd-min-width);
        padding:     var(--mc-dd-pad-y) var(--mc-dd-pad-x);
        z-index:     9999;
        white-space: nowrap;

        opacity:        0;
        visibility:     hidden;
        pointer-events: none;
    }

    /* L1 — poniżej linku root */
    .mc-menu--root > .mc-menu__item--has-children > .mc-menu--sub {
        top:  calc(100% + var(--mc-dd-gap-top));
        left: 0;
    }

    /* L2+ — po prawej stronie */
    .mc-menu--sub > .mc-menu__item--has-children > .mc-menu--sub {
        top:  0;
        left: calc(100% + var(--mc-dd-offset-x));
    }

    /* ── Animacja: slide (domyślna) ── */
    .mc-instance[data-dd-anim="slide"] .mc-menu--root > .mc-menu__item--has-children > .mc-menu--sub {
        transform:  translateY(8px);
        transition: opacity var(--mc-dd-duration) var(--mc-dd-easing),
                    visibility var(--mc-dd-duration) var(--mc-dd-easing),
                    transform var(--mc-dd-duration) var(--mc-dd-easing);
    }
    .mc-instance[data-dd-anim="slide"] .mc-menu--sub > .mc-menu__item--has-children > .mc-menu--sub {
        transform:  translateX(8px);
        transition: opacity var(--mc-dd-duration) var(--mc-dd-easing),
                    visibility var(--mc-dd-duration) var(--mc-dd-easing),
                    transform var(--mc-dd-duration) var(--mc-dd-easing);
    }

    /* ── Animacja: scale ── */
    .mc-instance[data-dd-anim="scale"] .mc-menu--sub {
        transform:  scale(0.95) translateY(4px);
        transition: opacity var(--mc-dd-duration) var(--mc-dd-easing),
                    visibility var(--mc-dd-duration) var(--mc-dd-easing),
                    transform var(--mc-dd-duration) var(--mc-dd-easing);
    }

    /* ── Animacja: fade ── */
    .mc-instance[data-dd-anim="fade"] .mc-menu--sub {
        transform:  none;
        transition: opacity var(--mc-dd-duration) var(--mc-dd-easing),
                    visibility var(--mc-dd-duration) var(--mc-dd-easing);
    }

    /* ── Pokaż podmenu ── */
    .mc-menu__item--has-children:hover      > .mc-menu--sub,
    .mc-menu__item--has-children.js-open    > .mc-menu--sub {
        opacity:        1;
        visibility:     visible;
        pointer-events: auto;
        transform:      none !important;
    }

    /* ── Linki w podmenu ── */
    .mc-menu__link--sub {
        display:        flex;
        align-items:    center;
        justify-content:space-between;
        gap:            6px;
        padding:        var(--mc-dd-pad-y-item) var(--mc-dd-pad-x-item);
        color:          var(--mc-dd-color);
        border-radius:  var(--mc-dd-radius-item);
        transition:     background var(--mc-dd-duration) var(--mc-dd-easing),
                        color var(--mc-dd-duration) var(--mc-dd-easing);
        white-space:    nowrap;
    }

    .mc-menu__item--sub + .mc-menu__item--sub { margin-top: var(--mc-dd-gap-item); }

    .mc-menu__link--sub:hover,
    .mc-menu__item.current-menu-item > .mc-menu__link--sub {
        color:      var(--mc-dd-color-hover);
        background: var(--mc-dd-bg-hover);
    }

    /* ── Chevron ── */
    .mc-menu__chevron { flex-shrink: 0; transition: transform var(--mc-dd-duration) var(--mc-dd-easing); }

    .mc-menu__item--has-children:hover > .mc-menu__link--root .mc-menu__chevron--down,
    .mc-menu__item--has-children.js-open > .mc-menu__link--root .mc-menu__chevron--down {
        transform: rotate(180deg);
    }

    /* ── Back button ukryty na desktop ── */
    .mc-menu__item--back { display: none; }
}


/* ═══════════════════════════════════════════════════════════════════════════════
   MOBILE ≤ 1024px
   ═══════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {

    /* Desktop nav ukryta (źródło HTML zostaje w DOM dla JS) */
    .mc-nav-wrapper { display: none; }

    /* ── Hamburger — aktywny na mobile ── */
    .mc-hamburger { display: flex; }

    /* ── Overlay ── */
    .mc-overlay {
        position:   fixed;
        inset:      0;
        background: var(--mc-overlay-bg);
        z-index:    99998;
        opacity:    0;
        visibility: hidden;
        transition: opacity var(--mc-panel-duration) ease, visibility var(--mc-panel-duration) ease;
    }
    .mc-overlay.is-open { opacity: 1; visibility: visible; }

    /* ── Panel mobilny ── */
    .mc-mobile {
        position:       fixed;
        top:            0;
        bottom:         0;
        left:           0;
        width:          var(--mc-panel-width);
        max-width:      100vw;
        background:     var(--mc-panel-bg);
        z-index:        99999;
        display:        flex;
        flex-direction: column;
        overflow:       hidden;
        transition:     transform var(--mc-panel-duration) ease,
                        opacity   var(--mc-panel-duration) ease;
    }

    /* Animacja: slide-left (domyślna) */
    .mc-instance[data-mobile-anim="slide-left"] .mc-mobile {
        transform: translateX(-100%);
    }
    .mc-instance[data-mobile-anim="slide-left"] .mc-mobile.is-open {
        transform: translateX(0);
    }

    /* Animacja: slide-up */
    .mc-instance[data-mobile-anim="slide-up"] .mc-mobile {
        top:       auto;
        bottom:    0;
        left:      0;
        right:     0;
        width:     100%;
        height:    90vh;
        max-width: none;
        transform: translateY(100%);
        border-radius: 16px 16px 0 0;
    }
    .mc-instance[data-mobile-anim="slide-up"] .mc-mobile.is-open {
        transform: translateY(0);
    }

    /* Animacja: fade */
    .mc-instance[data-mobile-anim="fade"] .mc-mobile {
        opacity:   0;
        transform: none;
    }
    .mc-instance[data-mobile-anim="fade"] .mc-mobile.is-open {
        opacity:   1;
        transform: none;
    }

    /* ── Nagłówek panelu ── */
    .mc-mobile__header {
        display:       flex;
        align-items:   center;
        height:        var(--mc-panel-hdr-height);
        padding:       0 16px;
        background:    var(--mc-panel-hdr-bg);
        border-bottom: 1px solid var(--mc-panel-hdr-border-color);
        flex-shrink:   0;
        gap:           12px;
    }

    .mc-mobile__title {
        flex:        1;
        color:       var(--mc-panel-hdr-color);
        font-weight: 600;
        white-space: nowrap;
        overflow:    hidden;
        text-overflow: ellipsis;
    }

    .mc-mobile__close {
        width:           36px;
        height:          36px;
        display:         flex;
        align-items:     center;
        justify-content: center;
        color:           #1F1F1F !important;
        border-radius:   50%;
        flex-shrink:     0;
        transition:      background .15s ease;
        -webkit-tap-highlight-color: transparent;
    }
    .mc-mobile__close:hover { background: #F0F0F0 !important; }

    /* ── Track (kontener paneli wsuwanych) ── */
    .mc-mobile__track {
        position: relative;
        flex:     1;
        overflow: hidden;
    }

    /* ── Pojedynczy panel ── */
    .mc-panel {
        position:   absolute;
        inset:      0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        background: var(--mc-panel-bg);
        transform:  translateX(100%);
        transition: transform var(--mc-panel-duration) ease;
    }

    .mc-panel.is-active  { transform: translateX(0); }
    .mc-panel.is-leaving { transform: translateX(-30%); pointer-events: none; }

    /* ── Back button ── */
    .mc-panel-back {
        display:       flex !important;
        align-items:   center !important;
        gap:           8px !important;
        width:         100% !important;
        padding:       var(--mc-back-pad-y) var(--mc-back-pad-x) !important;
        background:    var(--mc-back-bg) !important;
        border-bottom: 1px solid var(--mc-mob-link-border) !important;
        color:         var(--mc-back-color) !important;
        font-weight:   600 !important;
        text-align:    left !important;
        transition:    background .15s ease !important;
		text-transform:uppercase;
        -webkit-tap-highlight-color: transparent !important;

    }
    .mc-panel-back:hover { background: #EBEBEB !important; }

    /* ── Pozycja w panelu ── */
    .mc-panel-item { display: block; border-bottom: 1px solid var(--mc-mob-link-border); }

    .mc-panel-link {
        display:         flex;
        align-items:     center;
        justify-content: space-between;
        padding:         var(--mc-mob-link-pad-y) var(--mc-mob-link-pad-x);
        color:           var(--mc-mob-link-color);
        text-decoration: none;
        min-height:      48px;
        transition:      background .15s ease, color .15s ease;
        -webkit-tap-highlight-color: transparent;
		text-transform: uppercase;
    }

    .mc-panel-link:hover,
    .mc-panel-link:active {
        color:      var(--mc-mob-link-hover);
        background: var(--mc-mob-link-bg-hover);
    }

    .mc-panel-link--parent { font-weight: 500; }

    .mc-panel-arrow { flex-shrink: 0; color: #AAAAAA; }
}


/* ═══════════════════════════════════════════════════════════════════════════════
   FOCUS — dostępność
   ═══════════════════════════════════════════════════════════════════════════════ */
.mc-menu__link:focus-visible,
.mc-menu__back:focus-visible,
.mc-panel-link:focus-visible,
.mc-panel-back:focus-visible,
.mc-mobile__close:focus-visible,
.mc-hamburger:focus-visible {
    outline:        2px solid var(--mc-root-indicator-color, #252525);
    outline-offset: 2px;
    border-radius:  4px;
}