/* ============================================================================
   Korban — shop header and footer, copied 1:1 from the front (dev3).
   Korban — nagłówek i stopka sklepu, przeniesione 1:1 z frontu (dev3).

   Source / Źródło:
     korban/headless/src/components/site-header.tsx   (inline styles + Tailwind)
     korban/headless/src/components/site-footer.tsx
     korban/headless/src/components/przelacznik-jezyka.tsx
     korban/headless/src/components/koszyk/koszyk-w-naglowku.tsx
     korban/headless/src/styles/motyw-krem.css         (dark bands: [data-pasmo])
     korban/headless/src/app/globals.css               (:focus-visible, .kp-skip-link)

   Every selector is scoped under .kp-naglowek, .kp-stopka or .kp-pomin, so nothing
   leaks into the WooCommerce forms (tests/woo/test_naglowek_sklepu.py checks it).
   Każdy selektor siedzi pod .kp-naglowek, .kp-stopka albo .kp-pomin, żeby nic nie
   wyciekło na formularze WooCommerce (pilnuje tego test).

   Colours: the front flips its aliases per band with data-pasmo="ciemne"/"stopka".
   The shop does not rely on tokeny.css carrying those blocks — each band sets its own
   private --kpn-* variables from the theme primitives (--kp-krem, --kp-grafit, --kp-roz,
   --kp-stopka), with the front's literal values as fallbacks. #B8AA9B and #A69A8C are
   literals in motyw-krem.css too; they have no token name to point at.
   Kolory: front przestawia aliasy per pasmo przez data-pasmo. Sklep nie zakłada, że
   tokeny.css niesie te bloki — każde pasmo ustawia własne zmienne --kpn-* z prymitywów
   motywu, z wartościami frontu jako zapasem. #B8AA9B i #A69A8C są literałami także
   w motyw-krem.css; nie mają nazwy tokenu, na którą dałoby się wskazać.

   Breakpoints = Tailwind defaults on the front: sm 640px, md 768px, lg 1024px.
   Progi = domyślne Tailwinda na froncie: sm 640px, md 768px, lg 1024px.
   ============================================================================ */

/* ---- Bands / Pasma ------------------------------------------------------- */

.kp-naglowek,
.kp-stopka {
  --kpn-grafit: var(--kp-grafit, #272421);
  --kpn-ink: var(--kp-krem, #F5F0E8);        /* 13,61:1 on graphite / na graficie */
  --kpn-text: #B8AA9B;                       /* 6,81:1 on graphite, 7,55:1 on footer */
  --kpn-muted: #A69A8C;                      /* 5,60:1 */
  --kpn-akcent: var(--kp-roz, #F17DB1);      /* accent on dark bands / akcent na ciemnym */
  --kpn-font-naglowek: var(--kp-font-heading, 'Montserrat', Helvetica, Arial, sans-serif);
  --kpn-font-tresc: var(--kp-font-body, 'Montserrat', Helvetica, Arial, sans-serif);
  --kpn-przejscie: 150ms cubic-bezier(0.4, 0, 0.2, 1); /* Tailwind transition-colors */

  font-family: var(--kpn-font-tresc);
  font-size: 15px;          /* --kp-text-body on the front / na froncie */
  line-height: 1.6;         /* --kp-leading-body */
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
}

/* Local preflight: Tailwind resets these on the front; WordPress/WooCommerce do not.
   :where() keeps the resets at one class of specificity, so the component classes
   below (declared later) win without !important.
   Lokalny preflight: na froncie zeruje je Tailwind; WordPress i WooCommerce nie.
   :where() trzyma resety na specyficzności jednej klasy, więc klasy komponentów
   niżej (zadeklarowane później) wygrywają bez !important. */
.kp-naglowek *,
.kp-naglowek *::before,
.kp-naglowek *::after,
.kp-stopka *,
.kp-stopka *::before,
.kp-stopka *::after {
  box-sizing: border-box;
}

.kp-naglowek :where(ul),
.kp-stopka :where(ul) {
  list-style: none;
  margin: 0;
  padding: 0;
}

.kp-naglowek :where(li),
.kp-stopka :where(li) {
  margin: 0;
  padding: 0;
}

.kp-naglowek :where(a),
.kp-stopka :where(a) {
  color: inherit;
  text-decoration: inherit;
  background: none;
  box-shadow: none;
}

.kp-stopka :where(h2, p) {
  margin: 0;
}

/* Focus ring: globals.css :focus-visible, with the dark-band accent (pink).
   Pierścień fokusu: :focus-visible z globals.css, z akcentem pasma ciemnego (róż). */
.kp-naglowek :focus-visible,
.kp-stopka :focus-visible {
  outline: 3px solid var(--kpn-akcent);
  outline-offset: 2px;
  border-radius: var(--kp-radius-sm, 0);
}

/* ---- Skip link (.kp-skip-link on the front) / Odnośnik „Przejdź do treści" --- */

.kp-pomin {
  position: fixed;
  top: -100%;
  left: 8px;
  z-index: 100;
  background: var(--kp-accent, #F17DB1);
  color: var(--kp-on-accent, #272421);
  font-family: var(--kp-font-heading, 'Montserrat', Helvetica, Arial, sans-serif);
  font-size: 14px;
  font-weight: var(--kp-weight-bold, 700);
  line-height: 1.6;
  padding: 12px 20px;
  text-decoration: none;
}

.kp-pomin:focus-visible,
.kp-pomin:focus {
  top: 8px;
  outline: 3px solid var(--kp-accent, #F17DB1);
  outline-offset: 2px;
}

/* ---- Header / Nagłówek ---------------------------------------------------- */

/* z-index 1035, NOT the front's 50. The shop has overlays the front does not.
   While the checkout recalculates, WooCommerce lays jQuery blockUI over #order_review with an
   inline z-index of 1000 (message 1011); at 50 the grey rectangle slid OVER the sticky header
   once the page was scrolled. The value sits in the gap between that and every overlay that
   must cover the header — read from plugin code on dev and live stylesheets, 2026-09-22:

     1000 / 1011   blockUI overlay / message (WooCommerce)        → header ABOVE
     1040 / 1045   Bootstrap offcanvas backdrop / panel (P24)     → header below
     1050 / 1055   Bootstrap modal backdrop / modal (P24)         → header below
     1051          select2 dropdown — the country list, appended to <body>  → header below
     9999          P24 3-D Secure modal, Furgonetka Portmonetka   → header below
     100000/100001 Furgonetka pickup-point map (furgonetka.pl map.js)       → header below
     99999         WordPress admin bar                           → header below
     ≥ 999999      CookieYes banner, preferences, overlay         → header below

   The proposed 1100 would have covered the open country list and a P24 modal backdrop.

   z-index 1035, NIE 50 jak na froncie. Sklep ma nakładki, których front nie ma. Podczas
   przeliczania kasy WooCommerce kładzie blockUI na #order_review z inline z-index 1000
   (komunikat 1011); przy 50 szary prostokąt po przewinięciu wchodził NA przyklejony
   nagłówek. Wartość siedzi w luce między tym a każdą nakładką, która ma przykryć nagłówek
   (tabela wyżej, odczyt z kodu wtyczek na dev i z żywych arkuszy, 2026-09-22). Proponowane
   1100 przykryłoby rozwiniętą listę krajów (select2) i tło modala P24. */
.kp-naglowek {
  position: sticky;
  top: 0;
  z-index: 1035;
}

/* WordPress admin bar (only for logged-in staff in preview) — keep the header below it.
   Pasek administratora WP (tylko dla zalogowanych w podglądzie) — nagłówek pod nim. */
body.admin-bar .kp-naglowek {
  top: 32px;
}

@media (max-width: 782px) {
  body.admin-bar .kp-naglowek {
    top: 46px;
  }
}

@media (max-width: 600px) {
  body.admin-bar .kp-naglowek {
    top: 0; /* the admin bar scrolls away here / tu pasek administratora odjeżdża */
  }
}

/* Black strip: 11px caps, tracking 1px, padding 7px 16px → 32px tall.
   Czarny pasek: 11px wersalikami, tracking 1px, padding 7px 16px → 32 px. */
.kp-naglowek__pasek {
  background: #000;
  color: var(--kpn-text);
  font-family: var(--kpn-font-naglowek);
  font-size: 11px;
  letter-spacing: 1px;
  padding: 7px 16px;
  text-align: center;
  text-transform: uppercase;
}

/* Graphite bar: flex, gap-6, px-4 py-3, md:px-8 → 55px tall.
   Belka grafitowa: flex, gap-6, px-4 py-3, md:px-8 → 55 px. */
.kp-naglowek__belka {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 12px 16px;
  background: var(--kpn-grafit);
  color: var(--kpn-text);
}

.kp-naglowek__logo {
  display: inline-block;
  flex-shrink: 0;
  line-height: 0;
}

.kp-naglowek__logo img {
  display: block;
  height: 26px;
  width: auto;
  max-width: none;
}

/* Main menu: flex-1, gap-5 / md:gap-7, scrolls sideways on a phone — no burger, like the front.
   Menu główne: flex-1, gap-5 / md:gap-7, na telefonie przewija się w bok — bez hamburgera, jak front. */
.kp-naglowek__menu {
  display: flex;
  flex: 1 1 0%;
  gap: 20px;
  min-width: 0;
  overflow-x: auto;
}

.kp-naglowek__link {
  font-family: var(--kpn-font-naglowek);
  font-size: 12px;
  font-weight: var(--kp-weight-medium, 500);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--kpn-text);
  transition: color var(--kpn-przejscie);
}

.kp-naglowek__menu .kp-naglowek__link {
  padding: 6px 0;
}

.kp-naglowek__link--akcent {
  color: var(--kpn-akcent);
}

/* No hover colour, on purpose. The front's `hover:text-white` never fires on these links:
   each one carries `color` as an INLINE style, and an inline declaration beats any class
   rule, :hover included. Copying the class instead of the behaviour would make the shop
   the only place where the menu lights up white.
   Celowo bez koloru na hover. `hover:text-white` frontu nigdy się na tych linkach nie
   odpala: każdy niesie `color` jako styl INLINE, a deklaracja inline wygrywa z każdą
   regułą klasy, także z :hover. Skopiowanie klasy zamiast zachowania sprawiłoby, że menu
   rozjaśnia się na biało wyłącznie w sklepie. */

.kp-naglowek__szukaj {
  display: none;
  align-items: center;
  gap: 16px;
}

.kp-naglowek__narzedzia {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 8px;
}

/* Language switcher / Przełącznik języka */
.kp-naglowek__jezyki {
  display: flex;
  align-items: center;
}

.kp-naglowek__jezyki-rzad {
  display: none;
  align-items: center;
}

.kp-naglowek__jezyk {
  font-family: var(--kpn-font-naglowek);
  font-weight: var(--kp-weight-medium, 500);
  color: var(--kpn-muted);
  transition: color var(--kpn-przejscie);
}

.kp-naglowek__jezyk--biezacy {
  color: var(--kpn-ink);
}

/* Row from md: each code a 24px+ target (WCAG 2.2 SC 2.5.8).
   Rząd od md: każdy kod celem 24 px+ (WCAG 2.2 SC 2.5.8). */
.kp-naglowek__jezyki-rzad .kp-naglowek__jezyk {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  min-width: 24px;
  padding: 4px 6px;
  font-size: 12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

/* Below md: native <details> / Poniżej md: natywne <details> */
.kp-naglowek__jezyki-lista {
  position: relative;
}

.kp-naglowek__jezyki-lista > summary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 44px;
  min-width: 44px;
  padding: 0 8px;
  cursor: pointer;
  list-style: none;
  font-family: var(--kpn-font-naglowek);
  font-size: 12px;
  font-weight: var(--kp-weight-medium, 500);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--kpn-ink);
}

.kp-naglowek__jezyki-lista > summary::-webkit-details-marker {
  display: none;
}

.kp-naglowek__jezyki-lista > summary::marker {
  content: "";
}

.kp-naglowek__jezyki-lista > ul {
  position: absolute;
  right: 0;
  top: 100%;
  z-index: 10;
  margin-top: 4px;
  min-width: 160px;
  padding: 4px 0;
  background: var(--kpn-grafit);
  border: 1px solid var(--kpn-muted);
}

.kp-naglowek__jezyki-lista .kp-naglowek__jezyk {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  font-size: 14px;
}

/* Cart: "Koszyk" + count badge, as the hydrated front button.
   Koszyk: „Koszyk" + plakietka z liczbą, jak przycisk frontu po hydratacji. */
.kp-naglowek__koszyk {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 24px;
  font-family: var(--kpn-font-naglowek);
  font-size: 12px;
  font-weight: var(--kp-weight-medium, 500);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--kpn-text);
  transition: color var(--kpn-przejscie);
}

.kp-naglowek__licznik {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  background: var(--kp-cta-bg, var(--kpn-akcent));
  color: var(--kp-cta-fg, var(--kpn-grafit));
  border-radius: var(--kp-radius-pill, 0);
  font-size: 11px;
  letter-spacing: 0;
}

/* Live region for cart-count announcements — Tailwind's `sr-only`, as on the front.
   Region ogłoszeń liczby w koszyku — `sr-only` Tailwinda, jak na froncie. */
.kp-naglowek__ogloszenie {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

@media (min-width: 768px) {
  .kp-naglowek__belka {
    padding-left: 32px;
    padding-right: 32px;
  }

  .kp-naglowek__menu {
    gap: 28px;
  }

  .kp-naglowek__szukaj {
    display: flex;
  }

  .kp-naglowek__narzedzia {
    gap: 16px;
  }

  .kp-naglowek__jezyki-rzad {
    display: flex;
  }

  .kp-naglowek__jezyki-lista {
    display: none;
  }
}

/* ---- Footer / Stopka ------------------------------------------------------ */

.kp-stopka {
  background: var(--kp-stopka, #1E1B19);
  color: var(--kpn-text);
  margin-top: 64px;
}

/* grid gap-8 px-4 py-12, sm:2 cols, lg:4 cols, md:px-8, max-width --kp-container-web (1200px).
   Siatka gap-8 px-4 py-12, sm: 2 kolumny, lg: 4, md:px-8, szerokość do 1200 px. */
.kp-stopka__kolumny {
  display: grid;
  gap: 32px;
  max-width: var(--kp-container-web, 1200px);
  margin: 0 auto;
  padding: 48px 16px;
}

.kp-stopka__tytul {
  font-family: var(--kpn-font-naglowek);
  font-size: var(--kp-text-caption, 11px);
  font-weight: var(--kp-weight-bold, 700);
  letter-spacing: var(--kp-tracking-caption, 2px);
  line-height: 1.6;
  text-transform: uppercase;
  color: var(--kpn-ink);
}

.kp-stopka__lista {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 16px;
}

.kp-stopka__link {
  font-size: var(--kp-text-body-small, 14px);
  color: var(--kpn-text);
}

.kp-stopka__link:hover {
  text-decoration: underline;
}

.kp-stopka__wkrotce {
  margin-left: 8px;
  font-size: 11px;
  letter-spacing: var(--kp-tracking-caption, 2px);
  text-transform: uppercase;
  color: var(--kpn-muted);
}

.kp-stopka__firma {
  max-width: var(--kp-container-web, 1200px);
  margin: 0 auto;
  padding: 0 16px 40px;
}

.kp-stopka__dane {
  font-size: var(--kp-text-caption, 11px);
  line-height: 1.7;
  color: var(--kpn-muted);
}

.kp-stopka__dane a {
  color: var(--kpn-text);
}

.kp-stopka__obsluga {
  margin-top: 16px;
}

.kp-stopka__podkreslony {
  text-decoration: underline;
}

@media (min-width: 640px) {
  .kp-stopka__kolumny {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 768px) {
  .kp-stopka__kolumny,
  .kp-stopka__firma {
    padding-left: 32px;
    padding-right: 32px;
  }
}

@media (min-width: 1024px) {
  .kp-stopka__kolumny {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  .kp-naglowek__link,
  .kp-naglowek__jezyk,
  .kp-naglowek__koszyk {
    transition: none;
  }
}