/* ═══════════════════════════════════════════════════════════════════════════════
   MC NAVIGATION — wielopoziomowe menu
   Autor: Marcin Cija

   ╔═══════════════════════════════════════════════════════════════╗
   ║  EDYCJA: zmień zmienne CSS na początku .mc-nav-wrapper        ║
   ║  Wystarczy edytować tylko tę jedną sekcję — reszta sama się   ║
   ║  dostosuje.                                                    ║
   ╚═══════════════════════════════════════════════════════════════╝
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────────────
   ZMIENNE — EDYTUJ TUTAJ
   ───────────────────────────────────────────────────────────────────────────── */
.mc-nav-wrapper {

    /* Czcionka */
    --mc-font:                  'Red Hat Display', sans-serif;

    /* ── Poziom 0 — główna belka ── */
    --mc-root-gap:              32px;       /* odstęp między pozycjami */
    --mc-root-color:            #252525;
    --mc-root-color-hover:      #EB8125;
    --mc-root-color-active:     #EB8125;
    --mc-root-size:             16px;
    --mc-root-weight:           500;
    --mc-root-line-height:      24px;
    --mc-root-transform:        none;       /* uppercase / capitalize / none */
    --mc-root-spacing:          0em;
    --mc-root-pad-x:            0px;
    --mc-root-pad-y:            14px;
    --mc-root-underline:        none;       /* underline lub none */
    --mc-root-indicator-h:      2px;        /* grubość paska aktywności pod linkiem (0 = brak) */
    --mc-root-indicator-color:  #EB8125;

    /* ── Dropdown — kontener ── */
    --mc-dd-bg:                 #ffffff;
    --mc-dd-shadow:             0 8px 32px rgba(0,0,0,.12);
    --mc-dd-radius:             10px;
    --mc-dd-border:             1px solid transparent;
    --mc-dd-border-color:       #E5E5E5;
    --mc-dd-min-width:          220px;
    --mc-dd-pad-x:              8px;
    --mc-dd-pad-y:              8px;
    --mc-dd-gap-top:            8px;        /* odległość L1 dropdown od belki */
    --mc-dd-offset-x:           -4px;       /* L2+ poziome przesunięcie (ujemne = zakryj border) */

    /* ── Dropdown — linki ── */
    --mc-dd-color:              #252525;
    --mc-dd-color-hover:        #EB8125;
    --mc-dd-color-active:       #EB8125;
    --mc-dd-bg-hover:           #F5F5F5;
    --mc-dd-bg-active:          #FFF3E8;
    --mc-dd-size:               14px;
    --mc-dd-weight:             400;
    --mc-dd-weight-parent:      500;        /* waga linku z podkategorią */
    --mc-dd-line-height:        22px;
    --mc-dd-pad-x:              14px;
    --mc-dd-pad-y:              9px;
    --mc-dd-radius-item:        6px;
    --mc-dd-gap-item:           2px;        /* odstęp między pozycjami */
    --mc-dd-transform:          none;
    --mc-dd-spacing:            0em;

    /* ── Separator między grupami ── */
    --mc-dd-sep-color:          #E5E5E5;
    --mc-dd-sep-width:          1px;
    --mc-dd-sep-margin:         6px 14px;

    /* ── Chevron (strzałka) ── */
    --mc-chevron-gap:           6px;
    --mc-chevron-color:         currentColor;
    --mc-chevron-transition:    transform .2s ease;

    /* ── Animacja dropdown ── */
    --mc-dd-transition:         .2s ease;

    /* ── Hamburger (mobile trigger) ── */
    --mc-burger-color:          #252525;
    --mc-burger-size:           24px;
    --mc-burger-thickness:      2px;
    --mc-burger-gap:            5px;
    --mc-burger-radius:         2px;
    --mc-burger-active-color:   #EB8125;

    /* ── Mobile nav — overlay ── */
    --mc-mobile-overlay-bg:     rgba(0,0,0,.45);
    --mc-mobile-z:              99999;

    /* ── Mobile nav — panel ── */
    --mc-panel-bg:              #ffffff;
    --mc-panel-width:           100%;       /* lub np. 340px dla bocznej szuflady */
    --mc-panel-shadow:          4px 0 24px rgba(0,0,0,.15);
    --mc-panel-transition:      .28s ease;

    /* ── Mobile nav — nagłówek panelu ── */
    --mc-panel-hdr-height:      56px;
    --mc-panel-hdr-bg:          #ffffff;
    --mc-panel-hdr-border:      1px solid #E5E5E5;
    --mc-panel-hdr-color:       #252525;
    --mc-panel-hdr-size:        16px;
    --mc-panel-hdr-weight:      600;

    /* ── Mobile nav — linki ── */
    --mc-panel-link-color:      #252525;
    --mc-panel-link-hover-color:#EB8125;
    --mc-panel-link-active-color:#EB8125;
    --mc-panel-link-bg-hover:   #F9F9F9;
    --mc-panel-link-size:       15px;
    --mc-panel-link-weight:     400;
    --mc-panel-link-weight-parent: 500;
    --mc-panel-link-pad-x:      20px;
    --mc-panel-link-pad-y:      13px;
    --mc-panel-link-border:     1px solid #F0F0F0;

    /* ── Mobile nav — back button ── */
    --mc-back-bg:               #F5F5F5;
    --mc-back-color:            #252525;
    --mc-back-size:             14px;
    --mc-back-weight:           600;
    --mc-back-pad-x:            20px;
    --mc-back-pad-y:            12px;
    --mc-back-gap:              8px;
}

/* ─────────────────────────────────────────────────────────────────────────────
   RESET
   ───────────────────────────────────────────────────────────────────────────── */
.mc-nav-wrapper *,
.mc-nav-wrapper *::before,
.mc-nav-wrapper *::after { box-sizing: border-box; }

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

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


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

    /* Wrapper */
    .mc-nav-wrapper {
        position: relative;
    }

    /* ── Poziom 0 — pozioma belka ── */
    .mc-menu--root {
        display: flex;
        align-items: center;
        gap: var(--mc-root-gap);
    }

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

    .mc-menu__link--root {
        font-family:     var(--mc-font);
        font-size:       var(--mc-root-size);
        font-weight:     var(--mc-root-weight);
        line-height:     var(--mc-root-line-height);
        color:           var(--mc-root-color);
        text-transform:  var(--mc-root-transform);
        letter-spacing:  var(--mc-root-spacing);
        text-decoration: var(--mc-root-underline);
        padding:         var(--mc-root-pad-y) var(--mc-root-pad-x);
        display:         flex;
        align-items:     center;
        gap:             var(--mc-chevron-gap);
        white-space:     nowrap;
        position:        relative;
        transition:      color .2s ease;
    }

    /* Pasek aktywności pod linkiem */
    .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);
        transition:       transform .2s ease;
        transform-origin: center;
        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 — wspólne ── */
    .mc-menu--sub {
        position:        absolute;
        background:      var(--mc-dd-bg);
        box-shadow:      var(--mc-dd-shadow);
        border-radius:   var(--mc-dd-radius);
        border:          var(--mc-dd-border);
        border-color:    var(--mc-dd-border-color);
        min-width:       var(--mc-dd-min-width);
        padding:         var(--mc-dd-pad-y) var(--mc-dd-pad-x);
        z-index:         9999;
        white-space:     nowrap;

        /* Ukryj — stan domyślny */
        opacity:         0;
        visibility:      hidden;
        pointer-events:  none;
        transform:       translateY(6px);
        transition:      opacity var(--mc-dd-transition),
                         visibility var(--mc-dd-transition),
                         transform var(--mc-dd-transition);
    }

    /* L1: poniżej rodzica */
    .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));
        transform: translateX(6px);
        transition: opacity var(--mc-dd-transition),
                    visibility var(--mc-dd-transition),
                    transform var(--mc-dd-transition);
    }

    /* Pokaż podmenu — hover lub js-open */
    .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:      translateY(0);
    }

    .mc-menu--sub .mc-menu__item--has-children:hover > .mc-menu--sub,
    .mc-menu--sub .mc-menu__item--has-children.js-open > .mc-menu--sub {
        opacity:        1;
        visibility:     visible;
        pointer-events: auto;
        transform:      translateX(0);
    }

    /* ── Linki w dropdown ── */
    .mc-menu__link--sub {
        font-family:    var(--mc-font);
        font-size:      var(--mc-dd-size);
        font-weight:    var(--mc-dd-weight);
        line-height:    var(--mc-dd-line-height);
        color:          var(--mc-dd-color);
        text-transform: var(--mc-dd-transform);
        letter-spacing: var(--mc-dd-spacing);
        display:        flex;
        align-items:    center;
        justify-content:space-between;
        gap:            var(--mc-chevron-gap);
        padding:        var(--mc-dd-pad-y) var(--mc-dd-pad-x);
        border-radius:  var(--mc-dd-radius-item);
        transition:     background .15s ease, color .15s ease;
        white-space:    nowrap;
    }

    .mc-menu__link--sub.mc-menu__link--parent {
        font-weight: var(--mc-dd-weight-parent);
    }

    .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);
    }

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

    /* Separator — <li class="mc-menu__item--separator"> */
    .mc-menu__item--separator {
        border-top:  var(--mc-dd-sep-width) solid var(--mc-dd-sep-color);
        margin:      var(--mc-dd-sep-margin);
        height:      0;
        pointer-events: none;
    }

    /* ── Chevron ── */
    .mc-menu__chevron {
        flex-shrink: 0;
        color:       var(--mc-chevron-color);
        transition:  var(--mc-chevron-transition);
    }

    .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; }

    /* ── Hamburger ukryty na desktop ── */
    .mc-hamburger { display: none; }

    /* ── Mobile overlay ukryty na desktop ── */
    .mc-mobile-overlay { display: none !important; }
}


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

    /* Desktopowe podmenu ukryte */
    .mc-nav-wrapper .mc-menu--sub { display: none; }

    /* ── Hamburger ── */
    .mc-hamburger {
        display:        flex;
        flex-direction: column;
        justify-content:center;
        gap:            var(--mc-burger-gap);
        width:          var(--mc-burger-size);
        height:         var(--mc-burger-size);
        background:     none;
        border:         none;
        cursor:         pointer;
        padding:        0;
        -webkit-tap-highlight-color: transparent;
    }

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

    /* Hamburger → X gdy aktywny */
    .mc-hamburger.is-active .mc-hamburger__bar:nth-child(1) {
        transform: translateY(calc(var(--mc-burger-gap) + var(--mc-burger-thickness))) rotate(45deg);
    }
    .mc-hamburger.is-active .mc-hamburger__bar:nth-child(2) {
        opacity: 0;
        width:   0;
    }
    .mc-hamburger.is-active .mc-hamburger__bar:nth-child(3) {
        transform: translateY(calc(-1 * (var(--mc-burger-gap) + var(--mc-burger-thickness)))) rotate(-45deg);
    }

    /* ── Overlay (przyciemnienie) ── */
    .mc-mobile-overlay {
        position:   fixed;
        inset:      0;
        background: var(--mc-mobile-overlay-bg);
        z-index:    calc(var(--mc-mobile-z) - 1);
        opacity:    0;
        visibility: hidden;
        transition: opacity var(--mc-panel-transition), visibility var(--mc-panel-transition);
    }

    .mc-mobile-overlay.is-open {
        opacity:    1;
        visibility: visible;
    }

    /* ── Panel główny ── */
    .mc-mobile-nav {
        position:   fixed;
        top:        0;
        left:       0;
        bottom:     0;
        width:      var(--mc-panel-width);
        max-width:  100vw;
        background: var(--mc-panel-bg);
        box-shadow: var(--mc-panel-shadow);
        z-index:    var(--mc-mobile-z);
        display:    flex;
        flex-direction: column;
        overflow:   hidden;
        transform:  translateX(-100%);
        transition: transform var(--mc-panel-transition);
    }

    .mc-mobile-nav.is-open {
        transform: translateX(0);
    }

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

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

    .mc-panel-close {
        width:      36px;
        height:     36px;
        display:    flex;
        align-items:center;
        justify-content:center;
        background: none;
        border:     none;
        cursor:     pointer;
        color:      var(--mc-panel-hdr-color);
        border-radius: 50%;
        flex-shrink: 0;
        transition: background .15s ease;
        -webkit-tap-highlight-color: transparent;
        padding:    0;
    }
    .mc-panel-close:hover { background: #F0F0F0; }

    /* ── Panele (suwaki) ── */
    .mc-panels-track {
        position: relative;
        flex:     1;
        overflow: hidden;
    }

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

    .mc-panel.is-active {
        transform: translateX(0);
    }

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

    /* ── Back button (w panelu) ── */
    .mc-panel-back {
        display:     flex;
        align-items: center;
        gap:         var(--mc-back-gap);
        width:       100%;
        padding:     var(--mc-back-pad-y) var(--mc-back-pad-x);
        background:  var(--mc-back-bg);
        border:      none;
        border-bottom: var(--mc-panel-link-border);
        color:       var(--mc-back-color);
        font-family: var(--mc-font);
        font-size:   var(--mc-back-size);
        font-weight: var(--mc-back-weight);
        cursor:      pointer;
        text-align:  left;
        -webkit-tap-highlight-color: transparent;
        transition:  background .15s ease;
    }
    .mc-panel-back:hover { background: #EBEBEB; }

    /* ── Linki w panelu ── */
    .mc-panel-item {
        display:       block;
        border-bottom: var(--mc-panel-link-border);
    }

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

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

    .mc-panel-link--parent {
        font-weight: var(--mc-panel-link-weight-parent);
    }

    /* Strzałka w prawo przy elementach z dziećmi */
    .mc-panel-arrow {
        flex-shrink: 0;
        color:       #AAAAAA;
    }
}


/* ═══════════════════════════════════════════════════════════════════════════════
   DOSTĘPNOŚĆ — focus styles
   ═══════════════════════════════════════════════════════════════════════════════ */
.mc-menu__link:focus-visible,
.mc-menu__back:focus-visible,
.mc-panel-link:focus-visible,
.mc-panel-back:focus-visible,
.mc-panel-close:focus-visible,
.mc-hamburger:focus-visible {
    outline:        2px solid #EB8125;
    outline-offset: 2px;
    border-radius:  4px;
}