/* =========================================================================
   Barek Ogrodowy — menu / nagłówek
   --------------------------------------------------------------------
   Layout: Logo (left) | Nav (center) | Cart + CTA (right)
   Mobile: Logo (left) | (hidden) | Cart + Burger (right)
   Wszystkie wartości pochodzą z variables.css.
   ========================================================================= */

.barek-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: var(--barek-header-height);
    background: var(--barek-header-bg-90);
    border-bottom: 1px solid transparent;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: var(--barek-header-z);
    font-family: var(--barek-font-body);
    color: var(--barek-text);
    transition:
        height var(--barek-duration) var(--barek-ease),
        background var(--barek-duration) var(--barek-ease),
        box-shadow var(--barek-duration) var(--barek-ease),
        border-color var(--barek-duration) var(--barek-ease);
}

/* WP admin bar (zalogowany user na froncie) — pchamy header w dół o wysokość
   paska, żeby się nie nakładały. Bez tego nasz header z wyższym z-indexem
   przykrywa admin bar (a w nim m.in. przycisk "Włącz Visual Builder" Divi). */
body.admin-bar .barek-header {
    top: 32px;
}
@media screen and (max-width: 782px) {
    body.admin-bar .barek-header {
        top: 46px;
    }
}

/* Divi Visual Builder — ukrywamy nasz fixed header w trybie edycji.
   UWAGA: nie używamy `body.et_pb_pagebuilder_layout` — to klasa którą Divi
   dodaje do KAŻDEJ strony zbudowanej w Divi na froncie (nie tylko w VB),
   przez co nasz header by zniknął globalnie.
   Klasa `barek-divi-vb` jest dodawana przez nasz JS (header.js) gdy wykryje
   tryb edycji po URL `?et_fb=1` lub klasie body `et-fb`. */
body.barek-divi-vb .barek-header,
body.barek-divi-vb .barek-mobile-nav {
    display: none !important;
}

.barek-header.is-scrolled {
    height: var(--barek-header-height-scrolled);
    background: var(--barek-header-bg);
    box-shadow: var(--barek-shadow-sm);
    border-bottom-color: var(--barek-line);
}

.barek-header__inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: var(--barek-space-6);
    height: 100%;
    /* max-width / margin / padding-x: definiowane raz w main.css (shared container) */
}

/* ---------- Logo po lewej ---------- */
.barek-header__logo {
    justify-self: start;
    display: inline-flex;
    align-items: baseline;
    gap: var(--barek-space-2);
    text-decoration: none;
    color: var(--barek-orange);
    line-height: 1;
    flex-shrink: 0;
    transition: transform var(--barek-duration) var(--barek-ease);
}

.barek-header__logo:hover {
    transform: translateY(-1px);
}

.barek-header__logo-mark {
    font-family: var(--barek-font-script);
    /* Po Fazie 1 (header 64 px) zmniejszone z 38 → 30 px żeby logo nie
       wypełniało całej wysokości headera. */
    font-size: 30px;
    font-weight: 400;
    /* !important — Divi/motyw może wymuszać kolor na `.menu a span` */
    color: var(--barek-orange) !important;
    letter-spacing: 0;
    line-height: 1;
}

.barek-header__logo-rest {
    font-family: var(--barek-font-body);
    font-size: var(--barek-text-sm);
    font-weight: 500;
    /* !important — bez tego Divi'owe reguły anchorów w mobile menu robią
       biały tekst i "ogrodowy" znika na białym tle headera */
    color: var(--barek-text) !important;
    text-transform: lowercase;
    letter-spacing: 2px;
    margin-left: -2px;
}

.barek-header.is-scrolled .barek-header__logo-mark {
    font-size: 24px;
}

.barek-header.is-scrolled .barek-header__logo-rest {
    font-size: var(--barek-text-xs);
}

/* ---------- Nawigacja desktop (środek) ---------- */
.barek-nav {
    justify-self: center;
}

.barek-nav__list {
    display: flex;
    align-items: center;
    gap: 0;
}

.barek-nav__item {
    position: relative;
    display: flex;
    align-items: center;
}

/* Pionowe separatory między pozycjami menu */
.barek-nav__item:not(:last-child)::after {
    content: '';
    display: inline-block;
    width: 1px;
    height: 12px;
    margin: 0 var(--barek-space-4);
    background: var(--barek-line);
}

.barek-nav__link {
    position: relative;
    display: inline-block;
    padding: var(--barek-space-2) 0;
    font-family: var(--barek-font-body);
    /* Faza 3 — desktop nav czytelniejsze: sm (13) zamiast xs (11) */
    font-size: var(--barek-text-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.6px;
    text-decoration: none;
    color: var(--barek-text);
    transition: color var(--barek-duration) var(--barek-ease);
}

.barek-nav__link::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 0;
    height: 2px;
    background: var(--barek-orange);
    border-radius: 2px;
    transition: width var(--barek-duration) var(--barek-ease);
}

.barek-nav__link:hover,
.barek-nav__link:focus-visible,
.barek-nav__link.is-active {
    color: var(--barek-orange);
}

.barek-nav__link:hover::after,
.barek-nav__link:focus-visible::after,
.barek-nav__link.is-active::after {
    width: 100%;
}

/* ---------- Akcje (koszyk + CTA + burger) ---------- */
.barek-header__actions {
    justify-self: end;
    display: flex;
    align-items: center;
    gap: var(--barek-space-3);
    flex-shrink: 0;
}

/* Ikona koszyka z licznikiem.
   UWAGA: selector `a.barek-cart` (nie samo `.barek-cart`) — żeby reguły
   border-radius:50% / hover-background nie spadały na <section class="barek-cart">
   (strona koszyka), gdzie tworzyłyby gigantyczną pomarańczową elipsę. */
a.barek-cart {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    color: var(--barek-text);
    border-radius: 50%;
    transition: color var(--barek-duration) var(--barek-ease),
                background var(--barek-duration) var(--barek-ease);
    text-decoration: none;
}

a.barek-cart:hover,
a.barek-cart:focus-visible {
    color: var(--barek-orange);
    background: var(--barek-orange-soft);
}

.barek-cart__icon {
    display: inline-flex;
    width: 22px;
    height: 22px;
}

.barek-cart__icon svg {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.barek-cart__count {
    position: absolute;
    top: 4px;
    right: 2px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: var(--barek-radius-pill);
    background: var(--barek-orange);
    color: var(--barek-white);
    font-size: 10px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    transform: scale(0);
    transition: transform 220ms var(--barek-ease);
    pointer-events: none;
}

.barek-cart__count.has-items {
    transform: scale(1);
}

/* CTA Zamów — pill button (primary) */
.barek-cta {
    display: inline-flex;
    align-items: center;
    height: 40px;
    padding: 0 var(--barek-space-5);
    background: var(--barek-orange);
    color: var(--barek-white);
    font-family: var(--barek-font-body);
    font-size: var(--barek-text-xs);
    font-weight: 600;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: var(--barek-radius-pill);
    transition: background var(--barek-duration) var(--barek-ease),
                transform var(--barek-duration-fast) var(--barek-ease);
}

.barek-cta:hover,
.barek-cta:focus-visible {
    background: var(--barek-orange-hover);
    transform: translateY(-1px);
    color: var(--barek-white);
}

.barek-cta:active {
    transform: translateY(0);
}

.barek-header.is-scrolled .barek-cta {
    height: 36px;
    padding: 0 var(--barek-space-4);
    font-size: 11px;
}

/* ---------- Burger (mobile only) ---------- */
.barek-burger {
    display: none;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    color: var(--barek-text);
    cursor: pointer;
    border-radius: var(--barek-radius-sm);
    padding: 0;
    transition: background var(--barek-duration) var(--barek-ease);
}

.barek-burger:hover,
.barek-burger:focus-visible {
    background: var(--barek-orange-soft);
    color: var(--barek-orange);
}

.barek-burger__open,
.barek-burger__close {
    display: inline-flex;
    width: 24px;
    height: 24px;
}

.barek-burger__open svg,
.barek-burger__close svg {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
}

.barek-burger__close {
    display: none;
}

.barek-burger.is-open .barek-burger__open {
    display: none;
}
.barek-burger.is-open .barek-burger__close {
    display: inline-flex;
}

/* ---------- Mobilne menu (drawer) ----------
   Panel rozwijany spod nagłówka. Auto-wysokość (rozmiar zgodny z liczbą
   pozycji menu), nie blokuje strony pod sobą — user może scrollować,
   drawer pozostaje fixed pod headerem. Solidne białe tło + cień. */
.barek-mobile-nav {
    position: fixed;
    top: var(--barek-header-height);
    left: 0;
    right: 0;
    /* bez bottom — drawer auto-wysokość, nie zajmuje całego viewportu */
    max-height: calc(100vh - var(--barek-header-height) - var(--barek-space-4));
    overflow-y: auto;
    background: #ffffff !important;
    background-color: #ffffff !important;
    background-image: none !important;
    padding: var(--barek-space-5) var(--barek-space-6) var(--barek-space-6);
    z-index: calc(var(--barek-header-z) - 1);
    box-shadow: 0 8px 24px rgba(17, 22, 28, 0.08);
    transform: translateY(-12px);
    opacity: 0;
    visibility: hidden;
    transition:
        transform var(--barek-duration) var(--barek-ease),
        opacity var(--barek-duration) var(--barek-ease),
        visibility var(--barek-duration) var(--barek-ease);
}

/* Drawer jest CHILD-em <header>, nie sibling — descendant selector. */
.barek-header.is-scrolled .barek-mobile-nav {
    top: var(--barek-header-height-scrolled);
    max-height: calc(100vh - var(--barek-header-height-scrolled) - var(--barek-space-4));
}

/* Gdy drawer otwarty — header solidnie biały (zamiast półprzezroczystego),
   żeby przejście header → drawer było jednolite. */
body.barek-no-scroll .barek-header,
.barek-header:has(.barek-mobile-nav.is-open) {
    background: #ffffff !important;
}

.barek-mobile-nav.is-open {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
}

.barek-mobile-nav__list {
    display: flex;
    flex-direction: column;
    gap: var(--barek-space-1);
}

.barek-mobile-nav__list li {
    border-bottom: 1px solid var(--barek-line);
}

.barek-mobile-nav__list li:last-child {
    border-bottom: 0;
    margin-top: var(--barek-space-4);
}

.barek-mobile-nav__link {
    display: block;
    padding: var(--barek-space-4) var(--barek-space-1);
    font-family: var(--barek-font-body);
    font-size: var(--barek-text-xl);
    font-weight: 600;
    color: var(--barek-text);
    text-decoration: none;
    transition: color var(--barek-duration) var(--barek-ease),
                padding-left var(--barek-duration) var(--barek-ease);
}

.barek-mobile-nav__link:hover,
.barek-mobile-nav__link.is-active {
    color: var(--barek-orange);
    padding-left: var(--barek-space-2);
}

.barek-mobile-nav__link--cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    padding: 0 var(--barek-space-5) !important;
    background: var(--barek-orange) !important;
    color: #ffffff !important;
    border-radius: var(--barek-radius-pill);
    font-family: var(--barek-font-body);
    font-size: var(--barek-text-sm);
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.barek-mobile-nav__link--cta:hover,
.barek-mobile-nav__link--cta:focus-visible {
    background: var(--barek-orange-hover) !important;
    color: #ffffff !important;
    padding-left: var(--barek-space-5) !important;
}

/* ============================================================
   BREAKPOINTY — Tablet (≤1024) i Mobile (≤640)
   ============================================================ */

/* Tablet */
@media (max-width: 1024px) {
    .barek-header__inner {
        gap: var(--barek-space-5);
        /* padding-x: w main.css */
    }
    .barek-nav__item:not(:last-child)::after {
        margin: 0 var(--barek-space-3);
    }
}

/* Mobile — nav i CTA znikają, burger pojawia się.
   Przełączamy na flex z space-between żeby gwarantowanie mieć
   logo po lewej, a koszyk + burger po prawej (cart + burger w tej kolejności
   w kontenerze __actions, więc burger jest na prawym brzegu). */
@media (max-width: 880px) {
    .barek-header__inner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--barek-space-3);
    }
    .barek-nav,
    .barek-cta {
        display: none;
    }
    .barek-burger {
        display: inline-flex;
    }
    .barek-header__logo {
        flex-shrink: 0;
        margin-right: auto; /* wypycha actions do prawej krawędzi */
    }
    .barek-header__actions {
        flex-shrink: 0;
    }
    .barek-header__logo-mark {
        font-size: 26px;
    }
    .barek-header__logo-rest {
        font-size: 10px;
        letter-spacing: 1.4px;
    }
}

/* @media (max-width: 640px) — padding-x w main.css */

@media (max-width: 480px) {
    .barek-header__logo-mark {
        font-size: 22px;
    }
    .barek-header__logo-rest {
        /* Pozostaje widoczne — mniejsza czcionka i ciaśniejszy letter-spacing,
           żeby zmieścić się obok ikon koszyka i burgera. */
        display: inline-block;
        font-size: 9px;
        letter-spacing: 1px;
    }
    .barek-header__actions {
        gap: var(--barek-space-1);
    }
}

/* Reduced motion — wyłącz animacje */
@media (prefers-reduced-motion: reduce) {
    .barek-header,
    .barek-nav__link::after,
    .barek-cart,
    .barek-cta,
    .barek-mobile-nav,
    .barek-cart__count,
    .barek-header__logo,
    .barek-burger {
        transition: none;
    }
}