/* phx-header – nagłówek witryny; kolory z kontekstu (.phx-ctx-light, pasek górny .phx-ctx-dark) */
.phx-header {
  position: relative;
  z-index: 50;
  background: var(--phx-bg);
  color: var(--phx-fg);
  border-bottom: 1px solid var(--phx-border);
  font-family: var(--wp--preset--font-family--body);
  transition: box-shadow 0.2s ease;
}
/* część szablonu: bez odstępu blockGap między nagłówkiem a treścią */
:where(.wp-site-blocks) > .wp-block-template-part:has(> .phx-header) + * { margin-block-start: 0; }

/* przyklejony nagłówek nie zasłania celu kotwicy ani elementu z fokusem (WCAG 2.4.11); wysokość mierzy view.js */
html:has(.phx-header--sticky) { scroll-padding-top: calc(var(--phx-header-h, 5rem) + var(--wp-admin--admin-bar--height, 0px)); }
@media (max-width: 600px) {
  html:has(.phx-header--sticky) { scroll-padding-top: var(--phx-header-h, 5rem); }
}

/* przyklejenie: na wrapperze części szablonu (header wewnątrz niego nie może się przykleić do strony) */
.phx-header--sticky,
.wp-block-template-part:has(> .phx-header--sticky) {
  position: sticky;
  top: var(--wp-admin--admin-bar--height, 0px);
  z-index: 50;
}
@media (max-width: 600px) {
  /* pasek admina na wąskich ekranach nie jest przyklejony */
  .phx-header--sticky,
  .wp-block-template-part:has(> .phx-header--sticky) { top: 0; }
}
.phx-header.is-scrolled { box-shadow: var(--wp--custom--derived--shadow--raised); }

/* link „Przejdź do treści” – ukryty wizualnie, widoczny po fokusie */
.phx-skip-link {
  position: absolute;
  top: var(--wp--preset--spacing--10);
  inset-inline-start: var(--wp--preset--spacing--10);
  z-index: 100;
  padding: var(--wp--preset--spacing--10) var(--wp--preset--spacing--20);
  background: var(--wp--preset--color--inverse);
  color: var(--wp--preset--color--on-inverse);
  border-radius: var(--wp--custom--derived--radius--button);
  text-decoration: underline;
}
.phx-skip-link:not(:focus) {
  width: 1px;
  height: 1px;
  overflow: hidden;
  padding: 0;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- Pasek górny ---------- */
.phx-header__topbar {
  background: var(--phx-bg);
  color: var(--phx-fg);
  font-size: var(--wp--preset--font-size--xs);
}
.phx-header__topbar-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--wp--preset--spacing--10) var(--wp--preset--spacing--30);
  padding-block: var(--wp--preset--spacing--10);
}
.phx-header__topbar-text { margin: 0; }
.phx-header__topbar-aside { display: flex; flex-wrap: wrap; align-items: center; gap: var(--wp--preset--spacing--10) var(--wp--preset--spacing--30); }
.phx-header__contact,
.phx-header__topbar-list,
.phx-header__social {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--wp--preset--spacing--10) var(--wp--preset--spacing--20);
  margin: 0;
  padding: 0;
  list-style: none;
}
.phx-header__topbar a { color: inherit; text-decoration: none; }
.phx-header__topbar a:hover { text-decoration: underline; }
/* link w tekście paska: podkreślony (ten sam kolor co tekst – WCAG 1.4.1) */
.phx-header__topbar-text a { text-decoration: underline; text-underline-offset: 0.2em; }
.phx-header__topbar-text a:hover { text-decoration-thickness: 2px; }
/* telefon/e-mail i linki menu paska w jednym rzędzie: te same pudełka (flex), bez linii bazowej i odstępu pod inline-flex */
.phx-header__contact > li,
.phx-header__topbar .phx-nav__item { display: flex; }
.phx-header__contact-link,
.phx-header__topbar .phx-nav__link,
.phx-header__topbar .phx-nav__label,
.phx-header__social-link { display: inline-flex; align-items: center; gap: var(--wp--preset--spacing--10); min-width: 1.5rem; min-height: 1.5rem; }
.phx-header__topbar .phx-svg { width: 1rem; height: 1rem; }
.phx-header__topbar .phx-nav__link[aria-current="page"] { text-decoration: underline; }
@media (max-width: 781px) {
  .phx-header__topbar-inner,
  .phx-header__topbar-aside,
  .phx-header__contact,
  .phx-header__topbar-list,
  .phx-header__social { justify-content: center; text-align: center; }
  /* na telefonie telefon i e-mail jako same ikony (nazwa dostępna dla czytników ekranu) */
  .phx-header__contact-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .phx-header__contact-link,
  .phx-header__social-link { justify-content: center; min-width: 2rem; min-height: 2rem; }
  /* opcje „Ukryj … na telefonie”; pasek bez widocznej zawartości znika w całości */
  .phx-header__hide-mobile { display: none; }
  .phx-header__topbar-aside:not(:has(> :not(.phx-header__hide-mobile))),
  .phx-header__topbar:not(:has(.phx-header__topbar-text)):not(:has(.phx-header__topbar-aside > :not(.phx-header__hide-mobile))) { display: none; }
}

/* ---------- Pasek główny ---------- */
.phx-header__bar {
  display: flex;
  align-items: center;
  gap: var(--wp--preset--spacing--30);
  min-height: 4.5rem;
  padding-block: var(--wp--preset--spacing--10);
}
.phx-header__brand {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  margin-inline-end: auto;
  color: inherit;
  text-decoration: none;
}
.phx-header__logo { display: block; width: auto; height: auto; max-height: 3rem; max-width: min(14rem, 55vw); }
.phx-header__site-name {
  font-family: var(--wp--preset--font-family--heading);
  font-weight: var(--wp--custom--type--heading--weight);
  font-size: var(--wp--preset--font-size--m);
  line-height: 1.2;
}
.phx-header__cta .phx-button { white-space: nowrap; }

/* CTA i sklep: bez własnego pudełka (dzieci są elementami paska); w logo-center od 1024 px jedna komórka „cta” */
.phx-header__actions { display: contents; }

/* narzędzia: konto (link albo menu) i mini-koszyk (WooCommerce) – także < 1024 px, obok przycisku menu */
.phx-header__tools { display: flex; flex: none; align-items: center; gap: var(--wp--preset--spacing--20); }
.phx-header__account {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding: 0;
  background: transparent;
  color: var(--phx-fg);
  border: 0;
  border-radius: var(--wp--custom--derived--radius--button);
  cursor: pointer;
}
.phx-header__account:hover,
.phx-header__account[aria-expanded="true"] { color: var(--phx-link); }
.phx-header__account .phx-svg { width: 1.5rem; height: 1.5rem; }

/* menu konta: panel pod ikoną, przy prawej krawędzi (jak podmenu w pasku) */
.phx-header__account-menu { position: relative; }
.phx-header__account-panel {
  position: absolute;
  top: 100%;
  inset-inline-end: 0;
  z-index: 10;
  min-width: 14rem;
  max-width: calc(100vw - 2rem);
  padding: var(--wp--preset--spacing--10) 0;
  background: var(--phx-bg);
  border: 1px solid var(--phx-border);
  border-radius: var(--wp--custom--derived--radius--element);
  box-shadow: var(--wp--custom--derived--shadow--raised);
}
.phx-header__account-panel[hidden] { display: none; }
.phx-header__account-list { margin: 0; padding: 0; list-style: none; }
.phx-header__account-list .phx-nav__link { display: block; padding: var(--wp--preset--spacing--10) var(--wp--preset--spacing--20); }
.phx-header__logout { border-top: 1px solid var(--phx-border); }
.phx-header__account-list > .phx-header__logout:first-child { border-top: 0; }

/* minimal: logo i telefon na końcach paska */
.phx-header--minimal .phx-header__bar { justify-content: space-between; }
.phx-header__phone { color: inherit; text-decoration: none; font-weight: var(--wp--custom--type--button--weight); }
.phx-header__phone:hover { color: var(--phx-link); text-decoration: underline; }
.phx-header__phone .phx-svg { width: 1.25rem; height: 1.25rem; }

/* przycisk menu (< 1024 px) i zamknięcia szuflady */
.phx-header__menu-button,
.phx-header__close {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  background: transparent;
  color: inherit;
  border: 1px solid var(--phx-border);
  border-radius: var(--wp--custom--derived--radius--button);
  cursor: pointer;
}

/* ---------- Menu (wspólne: pasek i szuflada) ---------- */
.phx-nav__list,
.phx-nav__submenu { margin: 0; padding: 0; list-style: none; }
.phx-nav__submenu[hidden] { display: none; }
.phx-nav__item { position: relative; }
.phx-nav__link { color: inherit; text-decoration: none; font-weight: var(--wp--custom--type--button--weight); }
.phx-nav__link:hover { color: var(--phx-link); text-decoration: underline; text-underline-offset: 0.3em; }
.phx-nav__link[aria-current="page"] { color: var(--phx-link); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.3em; }
.phx-nav__toggle {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  background: transparent;
  color: inherit;
  border: 0;
  border-radius: var(--wp--custom--derived--radius--button);
  cursor: pointer;
}
.phx-nav__toggle .phx-svg { width: 1rem; height: 1rem; transition: transform 0.15s ease; }
.phx-nav__toggle[aria-expanded="true"] .phx-svg { transform: rotate(180deg); }
/* przycisk przylega do linku pozycji – obrys fokusu do wewnątrz, żeby nie zasłaniał tekstu linku */
.phx-nav__toggle:focus-visible { outline-offset: -2px; }
/* pozycja bez linku: etykieta jest przyciskiem podmenu (tekst + strzałka), wygląda jak link pozycji */
.phx-nav__label { font-weight: var(--wp--custom--type--button--weight); }
.phx-nav__toggle--label {
  gap: var(--wp--preset--spacing--10);
  width: auto;
  height: auto;
  min-height: 2rem;
  font: inherit;
  font-weight: var(--wp--custom--type--button--weight);
  text-align: start;
}
.phx-nav__toggle--label:hover,
.phx-nav__toggle--label[aria-expanded="true"],
.phx-nav__item.is-current-ancestor > .phx-nav__toggle--label { color: var(--phx-link); }
.phx-nav__toggle--label:focus-visible { outline-offset: 2px; }

/* menu w pasku – od 1024 px */
.phx-header__nav,
.phx-header.has-menu .phx-header__cta { display: none; }
@media (min-width: 1024px) {
  .phx-header__nav,
  .phx-header.has-menu .phx-header__cta { display: block; }
  .phx-header__menu-button { display: none; }
}
.phx-header__nav .phx-nav__list { display: flex; flex-wrap: wrap; align-items: center; gap: var(--wp--preset--spacing--10) var(--wp--preset--spacing--30); }
.phx-header__nav .phx-nav__list > .phx-nav__item { display: flex; align-items: center; min-height: 2.75rem; }
.phx-header__nav .phx-nav__submenu {
  position: absolute;
  top: 100%;
  inset-inline-start: 0;
  z-index: 10;
  min-width: 14rem;
  padding: var(--wp--preset--spacing--10) 0;
  background: var(--phx-bg);
  border: 1px solid var(--phx-border);
  border-radius: var(--wp--custom--derived--radius--element);
  box-shadow: var(--wp--custom--derived--shadow--raised);
}
.phx-header__nav .phx-nav__list > .phx-nav__item:last-child > .phx-nav__submenu { inset-inline: auto 0; }
.phx-header__nav .phx-nav__submenu .phx-nav__link,
.phx-header__nav .phx-nav__submenu .phx-nav__label { display: block; padding: var(--wp--preset--spacing--10) var(--wp--preset--spacing--20); }

/* logo-center: logo wyśrodkowane, menu w rzędzie pod nim (od 1024 px) */
@media (min-width: 1024px) {
  .phx-header--logo-center .phx-header__bar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    grid-template-areas: ". brand cta" "nav nav nav";
    row-gap: var(--wp--preset--spacing--10);
    padding-block: var(--wp--preset--spacing--20) var(--wp--preset--spacing--10);
  }
  .phx-header--logo-center .phx-header__brand { grid-area: brand; justify-self: center; margin-inline-end: 0; }
  .phx-header--logo-center .phx-header__actions {
    display: flex;
    grid-area: cta;
    justify-self: end;
    align-items: center;
    gap: var(--wp--preset--spacing--30);
  }
  .phx-header--logo-center .phx-header__nav { grid-area: nav; justify-self: center; }
  .phx-header--logo-center .phx-header__nav .phx-nav__list { justify-content: center; }
}

/* ---------- Szuflada (< 1024 px) ---------- */
.phx-header__drawer {
  position: fixed;
  inset: 0 0 0 auto;
  box-sizing: border-box;
  width: min(24rem, 100vw);
  max-width: 100vw;
  height: 100dvh;
  max-height: 100dvh;
  margin: 0;
  padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
  background: var(--phx-bg);
  color: var(--phx-fg);
  border: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.phx-header__drawer[open] { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--30); animation: phx-drawer-in 0.2s ease-out; }
.phx-header__drawer::backdrop { background: color-mix(in srgb, var(--wp--preset--color--inverse) 60%, transparent); }
@keyframes phx-drawer-in {
  from { transform: translateX(100%); }
  to { transform: none; }
}
.phx-header__drawer-head { display: flex; justify-content: flex-end; }
.phx-nav--drawer .phx-nav__item { display: flex; flex-wrap: wrap; align-items: center; border-bottom: 1px solid var(--phx-border); }
.phx-nav--drawer .phx-nav__link { flex: 1 1 0; min-width: 0; padding-block: var(--wp--preset--spacing--20); font-size: var(--wp--preset--font-size--m); }
.phx-nav--drawer .phx-nav__toggle { width: 2.75rem; height: 2.75rem; }
.phx-nav--drawer .phx-nav__label { flex: 1 1 0; min-width: 0; padding-block: var(--wp--preset--spacing--20); font-size: var(--wp--preset--font-size--m); }
/* pozycja bez linku w szufladzie: cały wiersz jest przyciskiem, strzałka przy prawej krawędzi */
.phx-nav--drawer .phx-nav__toggle--label {
  flex: 1 1 0;
  justify-content: space-between;
  min-width: 0;
  width: auto;
  height: auto;
  min-height: 2.75rem;
  padding-block: var(--wp--preset--spacing--20);
  font-size: var(--wp--preset--font-size--m);
}
/* strzałka w osi strzałek pozycji z linkiem (środek przycisku 2.75rem) */
.phx-nav--drawer .phx-nav__toggle--label .phx-svg { position: relative; inset-inline-end: 0.875rem; }
.phx-nav--drawer .phx-nav__submenu { flex-basis: 100%; padding: 0 0 var(--wp--preset--spacing--10) var(--wp--preset--spacing--20); }
.phx-nav--drawer .phx-nav__submenu .phx-nav__item { border-bottom: 0; }
.phx-nav--drawer .phx-nav__submenu .phx-nav__link,
.phx-nav--drawer .phx-nav__submenu .phx-nav__label { padding-block: var(--wp--preset--spacing--10); font-size: var(--wp--preset--font-size--s); }
.phx-header__drawer-cta .phx-button { box-sizing: border-box; width: 100%; justify-content: center; }
/* blokada przewijania strony przy otwartej szufladzie */
html.phx-scroll-locked { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .phx-header,
  .phx-header *,
  .phx-header *::backdrop { transition: none !important; animation: none !important; }
}