/* =========================================================================
   Nagłówek główny – mega menu (child theme, bez Elementora)
   Marka: zieleń #84BF2A. Akcja: czerwień #c0392b (biały tekst, kontrast 5,44:1).
   Prefiks klas: .zk-
   Desktop: rozwijanie hover/focus-within (+ .is-open). Mobile: drill-down w bok.
   ========================================================================= */

/* Tokeny --zk-*: KANON w assets/zk-ui.css (Etap 2a, 2026-07-24) —
   ładowany globalnie prio 5, więc zawsze przed tym plikiem. */

.zk-header, .zk-header * { box-sizing: border-box; }
.zk-header ul { list-style: none; margin: 0; padding: 0; }
.zk-header a { text-decoration: none; color: inherit; }
/* reset wyglądu przycisków – deterministyczne centrowanie ikon także na iOS Safari.
   :where() = specyficzność 0, więc reguły .zk-burger/.zk-sub__back swobodnie nadpisują tło/obramowanie. */
:where(.zk-header button) { font: inherit; cursor: pointer; -webkit-appearance: none; appearance: none; background: none; border: 0; padding: 0; margin: 0; color: inherit; }
/* wygaszenie domyślnego różowego „tap highlight" przeglądarki – feedback dotyku dajemy własnym :active */
.zk-header a, .zk-header button { -webkit-tap-highlight-color: transparent; }
/* Neutralizacja globalnej reguły motywu/Elementora: button:hover,button:focus{background:#c36;color:#fff}
   (#c36 = różowy). Utrzymujemy własne jasne tło i ciemny tekst w KAŻDYM stanie interakcji. */
.zk-burger:hover, .zk-burger:focus, .zk-burger:focus-visible,
.zk-sub__back:hover, .zk-sub__back:focus, .zk-sub__back:focus-visible { background: #ecefe3; }
.zk-burger:active, .zk-sub__back:active { background: #e6ebdc; }
.zk-sub__back:hover, .zk-sub__back:focus, .zk-sub__back:focus-visible, .zk-sub__back:active { color: var(--zk-ink); }
.zk-menu__link:active, .zk-leaf__link:active { background: var(--zk-bg-soft); }

.zk-header {
	position: sticky;
	top: 0;
	z-index: 999;
	background: var(--zk-bg);
	border-bottom: 1px solid var(--zk-line);
	font-family: var(--zk-font, sans-serif); /* kanon: zk-ui.css (Geist); wcześniej inherit = font kitu Elementora */
}

/* ---- Pasek USP (nad menu) ---- */
.zk-topbar { background: var(--zk-navy); color: #fff; font-size: 13px; line-height: 1.2; }
.zk-topbar__inner {
	max-width: var(--zk-max);
	margin: 0 auto;
	padding: 7px 20px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}
.zk-topbar__left { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.zk-rating { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
/* gwiazdki z częściowym wypełnieniem (np. 4,5) – złota warstwa przycięta do szerokości % */
.zk-stars { position: relative; display: inline-block; line-height: 1; letter-spacing: 1px; }
.zk-stars__bg { color: rgba(255, 255, 255, .34); }
.zk-stars__fill { position: absolute; top: 0; left: 0; overflow: hidden; white-space: nowrap; color: #ffc53d; }
.zk-rating strong { font-weight: 800; }
.zk-rating__label { opacity: .82; }
.zk-usp { display: inline-flex; align-items: center; gap: 7px; opacity: .95; white-space: nowrap; }
.zk-usp__ico { color: var(--zk-green); flex: 0 0 auto; }
.zk-usp__short { display: none; }
.zk-topbar__right { display: flex; align-items: center; gap: 20px; }
.zk-topbar__phone, .zk-topbar__email { display: inline-flex; align-items: center; gap: 7px; color: #fff; white-space: nowrap; }
.zk-topbar__phone { font-weight: 700; }
.zk-topbar__email { font-weight: 600; opacity: .92; }
.zk-topbar__phone .zk-ico, .zk-topbar__email .zk-ico { color: var(--zk-green); flex: 0 0 auto; }
.zk-topbar__phone:hover, .zk-topbar__email:hover { text-decoration: underline; opacity: 1; }

/* ---- Belka główna ---- */
.zk-header__inner {
	max-width: var(--zk-max);
	margin: 0 auto;
	min-height: var(--zk-header-h);
	padding: 8px 20px;
	display: flex;
	align-items: center;
	gap: 16px;
}

/* ---- Logo ---- */
.zk-header__brand { flex: 0 0 auto; display: flex; align-items: center; }
.zk-header__brand-link { display: inline-flex; align-items: center; }
.zk-header__logo { max-height: 42px; width: auto; height: auto; display: block; }
.zk-header__brand-text { font-size: 20px; font-weight: 800; color: var(--zk-ink); letter-spacing: -.01em; }

/* ---- Nawigacja (desktop) ---- */
.zk-nav { flex: 1 1 auto; display: flex; align-items: center; justify-content: flex-end; }
.zk-menu { display: flex; align-items: center; gap: 4px; }   /* delikatny odstęp – podświetlenia sąsiadów się nie stykają */

.zk-menu__link {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 11px 11px;
	font-size: 15px;
	font-weight: 600;
	color: var(--zk-ink);
	border-radius: var(--zk-r-control);
	line-height: 1.1;
	white-space: nowrap;
	transition: color .15s ease, background-color .15s ease;
}
.zk-menu__item > .zk-menu__link:hover,
.zk-menu__item.is-open > .zk-menu__link { color: var(--zk-green-dark); background: var(--zk-bg-soft); }

.zk-caret { transition: transform .18s ease; opacity: .65; }
.zk-menu__item.is-open > .zk-menu__link .zk-caret { transform: rotate(180deg); }

/* ---- Panel rozwijany (wspólne, desktop) ---- */
.zk-sub {
	position: absolute;
	background: var(--zk-bg);
	border: 1px solid var(--zk-line);
	border-radius: var(--zk-r-card);
	box-shadow: var(--zk-shadow);
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity .16s ease, transform .16s ease, visibility .16s;
	z-index: 1000;
}
/* otwieranie WYŁĄCZNIE klikiem (JS ustawia .is-open) – nie na hover */
.zk-menu__item.is-open > .zk-sub { opacity: 1; visibility: visible; transform: translateY(0); }

.zk-has-dropdown { position: relative; }
.zk-has-sub > .zk-sub::before { content: ""; position: absolute; top: -10px; left: 0; right: 0; height: 10px; }
.zk-sub__back { display: none; }   /* tylko mobile */

/* ---- Dropdown (1 kolumna) ---- */
.zk-sub--dropdown { top: 100%; left: 0; min-width: 288px; padding: 8px; margin-top: 8px; }
.zk-menu__item:nth-last-child(-n+3) .zk-sub--dropdown { left: auto; right: 0; }

.zk-sub__list .zk-leaf__link,
.zk-mega__list .zk-leaf__link {
	display: block;
	position: relative;
	padding: 9px 12px 9px 26px;
	border-radius: var(--zk-r-control);
	font-size: 14.5px;
	color: var(--zk-ink);
	transition: background-color .13s ease, color .13s ease;
}
.zk-sub__list .zk-leaf__link:hover,
.zk-mega__list .zk-leaf__link:hover { background: var(--zk-bg-soft); color: var(--zk-green-dark); }

/* ---- Mega menu (3 kolumny, kotwiczone do nagłówka) ---- */
.zk-sub--mega {
	top: 100%;
	left: 0;
	right: 0;
	margin: 8px auto 0;
	width: min(var(--zk-max), calc(100vw - 40px));
	padding: 22px;
}
.zk-mega { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 26px; }
.zk-mega__col { min-width: 0; }
.zk-mega__col + .zk-mega__col { padding-left: 26px; border-left: 1px solid var(--zk-line); }
.zk-mega__title {
	margin: 4px 0 8px;
	padding: 0 12px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--zk-muted);
}

/* Wyróżnienie (core biznesu): pogrubienie + zielony znacznik, bez boksu */
.zk-leaf--featured .zk-leaf__link { font-weight: 700; }
.zk-leaf--featured .zk-leaf__link::before {
	content: "";
	position: absolute;
	left: 11px;
	top: 50%;
	width: 7px; height: 7px;
	margin-top: -3.5px;
	border-radius: 50%;
	background: var(--zk-green);
	box-shadow: 0 0 0 3px rgba(132, 191, 42, .18);
}
.zk-leaf--more .zk-leaf__link { font-weight: 700; color: var(--zk-green-dark); }

/* ---- Mega „Gdzie działamy": jedna sekcja (lista w 2 kolumnach) + panel promo ---- */
.zk-mega--locations { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); }
.zk-mega--locations .zk-mega__list { column-count: 2; column-gap: 24px; column-rule: 1px solid var(--zk-line); }
.zk-mega--locations .zk-mega__list .zk-leaf { break-inside: avoid; }
.zk-mega__promo { display: flex; }   /* brak linii przed promo – oddziela tło panelu (linie między kolumnami linków zostają) */
.zk-promo {
	display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
	gap: 8px; width: 100%; padding: 20px 22px;
	border-radius: var(--zk-r-card);
	background: linear-gradient(135deg, #f2f8e6, #eaf3d8);
}
.zk-promo__map { color: var(--zk-green-dark); opacity: .55; margin-bottom: 2px; }
.zk-promo__title { margin: 0; font-size: 17px; font-weight: 800; color: var(--zk-ink); }
.zk-promo__text { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--zk-muted); }
.zk-promo__cta { margin-top: 4px; font-weight: 700; color: var(--zk-green-dark); }
.zk-promo__cta:hover { text-decoration: underline; }

/* ---- Mega „Dla firm": usługi B2B + panel wyróżników i marek ---- */
.zk-mega--business { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr) minmax(0, 1.4fr); }
.zk-promo--business { background: linear-gradient(135deg, #f4f8ee, #eef4e1); justify-content: flex-start; gap: 6px; }
.zk-promo__list { list-style: none; margin: 2px 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.zk-promo__list li { display: flex; align-items: flex-start; gap: 9px; font-size: 13.5px; line-height: 1.45; color: var(--zk-ink); }
.zk-promo__list li svg { color: var(--zk-green-dark); flex: 0 0 auto; margin-top: 2px; }
.zk-promo__brands-title { margin: 14px 0 8px; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--zk-muted); }
.zk-promo__brands { display: flex; flex-wrap: wrap; gap: 10px; }
.zk-promo__brand { display: inline-flex; align-items: center; justify-content: center; height: 46px; padding: 6px 14px; background: #fff; border: 1px solid var(--zk-line); border-radius: var(--zk-r-card); }
.zk-promo__brand img { max-height: 30px; width: auto; display: block; }

/* ---- Akcje: telefon (outline) + CTA (czerwony) ---- */
.zk-header__actions { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; }

/* Telefon jako przycisk (widoczny na tablecie/mobile; na desktopie telefon jest w pasku górnym) */
.zk-phone {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 7px 15px 7px 7px;
	background: #fff;
	border: 1.5px solid var(--zk-line);
	border-radius: var(--zk-r-pill);   /* przycisk akcji – pigułka (para z CTA) */
	color: var(--zk-ink);
	font-weight: 700;
	white-space: nowrap;
	transition: background-color .15s ease;
}
.zk-phone:hover { background: var(--zk-bg-soft); }
/* kółko – dopasowane do kształtu pigułki przycisku telefonu (wyjątek kształtu, jak kropka wyróżnienia) */
.zk-phone__badge { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: var(--zk-bg-soft); flex: 0 0 auto; }
.zk-phone__badge .zk-ico { color: var(--zk-green-dark); }
.zk-phone__txt { font-size: 15px; }
@media (min-width: 1201px) { .zk-header__actions .zk-phone { display: none; } }   /* desktop: telefon w pasku górnym */

.zk-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 11px 20px;
	background: var(--zk-red);
	color: #ffffff;
	font-weight: 800;
	font-size: 14.5px;
	border-radius: var(--zk-r-pill);
	white-space: nowrap;
	box-shadow: 0 8px 18px -9px rgba(192, 57, 43, .75);
	transition: background-color .15s ease, transform .05s ease;
}
.zk-cta__icon { flex: 0 0 auto; }
.zk-cta:hover { background: var(--zk-red-dark); color: #fff; }
.zk-cta:active { transform: translateY(1px); }
/* podniesienie specyficzności ponad reset .zk-header a{color:inherit} */
.zk-header a.zk-cta { color: #fff; }
.zk-header a.zk-cta:hover { color: #fff; }
.zk-header a.zk-phone { color: var(--zk-ink); }

/* ---- Burger (ukryty na desktopie) ---- */
.zk-burger { display: none; }

/* =========================================================================
   MOBILE / TABLET  (<= 1024px)
   ========================================================================= */
@media (max-width: 1200px) {
	/* Sticky na mobile: cały nagłówek jest sticky (baza), a JS ustawia ujemny top = wysokość
	   paska USP, dzięki czemu pasek USP odjeżdża, a reszta nagłówka pinuje się do góry ekranu. */
	.zk-header__inner { gap: 12px; flex-wrap: wrap; }
	.zk-header__actions { display: flex; margin-left: auto; }   /* telefon + CTA w wierszu z logo/burgerem */
	.zk-header__actions .zk-cta { padding: 11px 18px; }

	/* Pasek USP – kompaktowo, wyśrodkowany, skrócone hasła */
	.zk-topbar__inner { justify-content: center; padding: 6px 14px; gap: 14px; }
	.zk-topbar__right { display: none; }
	.zk-topbar__left { justify-content: center; gap: 12px; font-size: 12px; }
	.zk-usp__full { display: none; }
	.zk-usp__short { display: inline; }

	/* Burger – wycentrowana ikona */
	.zk-burger {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 46px; height: 44px;
		padding: 0;
		margin-left: 12px;
		flex: 0 0 auto;
		background: var(--zk-bg-soft);
		border: 1px solid var(--zk-line);
		border-radius: var(--zk-r-control);
		-webkit-tap-highlight-color: transparent;
	}
	/* Ikona rysowana na środku pudełka; środkowa kreska wyśrodkowana przez top:50% + translateY. */
	.zk-burger__box { position: relative; width: 24px; height: 16px; flex: 0 0 auto; }
	.zk-burger__bar, .zk-burger__bar::before, .zk-burger__bar::after {
		content: ""; position: absolute; left: 0; right: 0; height: 2.4px;
		background: var(--zk-ink); border-radius: 2px;
	}
	.zk-burger__bar { top: 50%; transform: translateY(-50%); transition: background-color .2s ease; }
	.zk-burger__bar::before, .zk-burger__bar::after { transition: transform .2s ease, top .2s ease; }
	.zk-burger__bar::before { top: -7px; }
	.zk-burger__bar::after { top: 7px; }
	.zk-header.is-nav-open .zk-burger__bar { background: transparent; }
	.zk-header.is-nav-open .zk-burger__bar::before { top: 0; transform: rotate(45deg); }
	.zk-header.is-nav-open .zk-burger__bar::after { top: 0; transform: rotate(-45deg); }

	/* Panel nawigacji – viewport dla drill-down */
	.zk-nav {
		position: absolute;
		top: 100%; left: 0; right: 0;
		display: block;
		background: var(--zk-bg);
		border-top: 1px solid var(--zk-line);
		box-shadow: var(--zk-shadow);
		height: calc(100vh - 210px);          /* nadpisywane przez JS na dokładną wartość */
		overflow: hidden;
		transform: translateY(-8px);
		opacity: 0;
		visibility: hidden;
		transition: opacity .18s ease, transform .18s ease, visibility .18s;
	}
	.zk-header.is-nav-open .zk-nav { opacity: 1; visibility: visible; transform: translateY(0); }

	.zk-menu { position: absolute; inset: 0; display: block; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 4px 0 20px; }
	.zk-menu__item { border-bottom: 1px solid var(--zk-line); }
	.zk-menu__link { justify-content: space-between; width: 100%; padding: 16px 18px; font-size: 16px; border-radius: 0; }
	.zk-menu__item > .zk-menu__link:hover,
	.zk-menu__item.is-open > .zk-menu__link { background: transparent; }
	/* strzałka wskazuje „w bok" (drill-down) */
	.zk-menu__link .zk-caret { transform: rotate(-90deg); opacity: .5; }
	.zk-menu__item:hover > .zk-menu__link .zk-caret,
	.zk-menu__item.is-open > .zk-menu__link .zk-caret { transform: rotate(-90deg); }

	/* Dropdown musi kotwiczyć się do .zk-nav (nie do pozycji) */
	.zk-has-dropdown { position: static; }

	/* Submenu jako panel wysuwany w bok (białe tło) */
	.zk-sub {
		position: absolute; inset: 0;
		display: block;
		background: var(--zk-bg);
		border: 0; border-radius: 0; box-shadow: none;
		width: auto; min-width: 0; margin: 0;
		opacity: 1; visibility: visible;
		transform: translateX(100%);
		transition: transform .28s cubic-bezier(.4, 0, .2, 1);
		overflow-y: auto; -webkit-overflow-scrolling: touch;
		z-index: 3;
		padding: 0 0 20px;
	}
	.zk-menu__item.is-open > .zk-sub { transform: translateX(0); }
	.zk-has-sub > .zk-sub::before { display: none; }

	/* Przycisk „Wróć" (sticky u góry panelu) */
	.zk-sub__back {
		display: flex; align-items: center; gap: 8px;
		position: sticky; top: 0; z-index: 1;
		width: 100%;
		padding: 15px 18px;
		background: var(--zk-bg-soft);
		border: 0; border-bottom: 1px solid var(--zk-line);
		font-size: 15px; font-weight: 700; color: var(--zk-ink);
		text-align: left;
	}
	.zk-sub__back-ico { font-size: 22px; line-height: 1; color: var(--zk-green-dark); }

	.zk-sub--dropdown, .zk-sub--mega { top: 0; }
	/* drill-down pełną szerokością także dla dropdownów – nadpisuje desktopowe prawe wyrównanie (nth-last-child) */
	.zk-sub--dropdown,
	.zk-menu__item:nth-last-child(-n+3) .zk-sub--dropdown { left: 0; right: 0; min-width: 0; }
	.zk-mega { grid-template-columns: 1fr; gap: 0; padding: 0; }
	.zk-mega__col + .zk-mega__col { padding-left: 0; border-left: 0; border-top: 1px solid var(--zk-line); margin-top: 4px; padding-top: 4px; }
	.zk-mega__title { padding: 12px 18px 4px; }
	.zk-mega--locations .zk-mega__list { column-count: 1; }   /* na mobile lista miast w jednej kolumnie */
	.zk-mega__promo { padding: 12px 16px 4px; border-left: 0; }
	.zk-promo { padding: 18px 18px; }
	.zk-sub__list { padding: 4px 8px; }
	.zk-sub__list .zk-leaf__link,
	.zk-mega__list .zk-leaf__link { padding: 13px 16px 13px 30px; font-size: 15px; border-radius: var(--zk-r-control); }
	.zk-leaf--featured .zk-leaf__link::before { left: 13px; }

	body.zk-nav-lock { overflow: hidden; }
}

/* Telefony (≤700px): logo + burger w wierszu 1, telefon + CTA w wierszu 2 (CTA dominujące) */
@media (max-width: 700px) {
	.zk-header { border-bottom: 0; }               /* dolną krawędź rysuje przyklejany pasek akcji */
	/* boczny padding przenosimy z kontenera na elementy, aby pasek akcji szedł na CAŁĄ szerokość (bez „ramki") */
	.zk-header__inner { padding: 8px 0 0; }
	.zk-header__brand { order: 1; padding-left: 16px; }
	.zk-burger { order: 2; margin-left: auto; margin-right: 16px; }
	/* Pasek akcji (telefon + CTA) – jedyna część sticky; pełna szerokość + border i cień odcinający od treści */
	.zk-header__actions {
		order: 3; flex: 1 1 100%;
		margin-left: 0; margin-top: 8px; gap: 10px;
		padding: 8px 16px 10px;
		background: var(--zk-bg);
		border-bottom: 1px solid var(--zk-line);
		box-shadow: 0 6px 10px -7px rgba(20, 32, 4, .22);
	}
	.zk-header__actions .zk-phone { flex: 0 0 auto; }
	.zk-header__actions .zk-cta { flex: 1 1 auto; padding: 13px 16px; font-size: 15px; }
}

@media (max-width: 560px) {
	.zk-header__logo { max-height: 40px; }
}
@media (max-width: 520px) {
	.zk-usp { display: none; }   /* na bardzo wąskich zostaje sama ocena Google */
}

/* ---- Dostępność ---- */
.zk-header a:focus-visible,
.zk-header button:focus-visible {
	outline: 2px solid var(--zk-green-dark);
	outline-offset: 2px;
	/* bez własnego radiusa – nowoczesne przeglądarki prowadzą outline po kształcie elementu */
}

@media (prefers-reduced-motion: reduce) {
	.zk-header *, .zk-sub, .zk-caret, .zk-nav { transition: none !important; }
}