/*
 * Belka PDM (Figma 18:6 i 28:4, spec-strona-glowna D1 i D2). Komputer od 75em: menu po lewej, logo w osi
 * strony, po prawej telefon i jasny przycisk do Kontaktu; wysokość 96, margines 32. Telefon: logo po lewej,
 * „Zadzwoń” i hamburger, wysokość 72, margines 16.
 *
 * Belka zawsze widoczna (klient 24.07 zgłosił znikający nagłówek jako błąd; klient.php pasek_wraca = false)
 * i zawsze stoi na ciemnym: na starcie przezroczysta nad zdjęciem hero albo nagłówkiem podstrony (granat 900),
 * po ruszeniu strony (is-zwiniety z nav.js) dostaje tło granat 900. Nie odwracamy jej na jasną nad białymi
 * sekcjami: Figma tego stanu nie ma, logo jasne zostaje jedno.
 *
 * Poniżej progu wzorzec „arkusz menu” z motyw-start (zasady 60 i 61), w kolorach PDM: arkusz granat 900,
 * pozycje poziomu 1 krojem Lora, panel podmenu wsuwa się z prawej, na dole „Zadzwoń: <numer>”.
 * Mechanika arkusza bez zmian względem motyw-start (nav.js ten sam plik).
 */

@layer components {
	.c-header {
		--ruch-wyjscie: cubic-bezier(0.22, 1, 0.36, 1);
		--c-fokus-na-tle: var(--brand-white);
		--naglowek-wys: 4.5rem;   /* 72 px poniżej progu */
		position: fixed;
		inset: var(--wp-admin--admin-bar--height, 0px) 0 auto;
		z-index: 50;
		color: var(--c-on-dark);
		background: transparent;
		transition: background-color 0.3s ease-out;
	}
	.c-header.is-zwiniety,
	:root.is-menu-otwarte .c-header { background: var(--c-deep); }

	.c-header__inner {
		display: grid;
		grid-template-columns: auto 1fr auto;
		grid-template-areas: "logo . prawa";
		align-items: center;
		min-height: var(--naglowek-wys);
		padding-inline: var(--gutter);
	}

	.c-header__logo { grid-area: logo; display: block; }
	.c-header__logo img { width: auto; height: 2.5rem; }   /* 40 px na telefonie */
	.c-header__logo:focus-visible,
	.c-header a:focus-visible,
	.c-header button:focus-visible { outline: 2px solid var(--brand-white); outline-offset: 2px; }

	.c-header__prawa { grid-area: prawa; display: flex; align-items: center; gap: 0.5rem; }
	.c-header__tel,
	.c-header__kontakt { display: none; }

	/* „Zadzwoń” w pasku telefonu (zasada 60): obrys biel 40%, napis biały, ikona słuchawki. */
	.c-header__zadzwon {
		display: inline-flex;
		align-items: center;
		gap: 0.5rem;
		min-height: var(--touch);
		padding: 0 0.875rem;
		color: var(--c-on-dark);
		font-size: var(--txt-menu);
		font-weight: 500;
		text-decoration: none;
		border: 1px solid rgb(255 255 255 / 0.4);
		border-radius: var(--radius-ui);
		transition: background-color 0.2s ease-out;
	}
	.c-header__zadzwon:hover { background: rgb(255 255 255 / 0.12); }
	.c-header__zadzwon .c-icon { width: 1.125rem; height: 1.125rem; }
	@media (max-width: 23.75em) { /* poniżej 380 px sama ikona, napis tylko dla czytnika */
		.c-header__zadzwon span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
	}

	/* Hamburger 48 x 48: biel 12%, obrys biel 20%, promień 8 (szkic telefonu 21:9). */
	.c-nav__toggle {
		display: grid;
		place-items: center;
		width: var(--touch);
		height: var(--touch);
		padding: 0;
		background: rgb(255 255 255 / 0.12);
		color: var(--c-on-dark);
		border: 1px solid rgb(255 255 255 / 0.2);
		border-radius: var(--radius-ui);
		cursor: pointer;
		transition: background-color 0.2s ease-out;
	}
	.c-nav__toggle:hover { background: rgb(255 255 255 / 0.2); }
	.c-nav__toggle[hidden] { display: none; }
	.c-nav__bars,
	.c-nav__bars::before,
	.c-nav__bars::after {
		display: block;
		width: 1.25rem;
		height: 2px;
		background: currentColor;
		transition: transform 0.32s var(--ruch-wyjscie), background-color 0.2s;
	}
	.c-nav__bars { position: relative; }
	.c-nav__bars::before, .c-nav__bars::after { content: ""; position: absolute; left: 0; top: 0; }
	.c-nav__bars::before { transform: translateY(-6px); }
	.c-nav__bars::after { transform: translateY(6px); }
	.c-nav__toggle[aria-expanded="true"] .c-nav__bars { background-color: transparent; }
	.c-nav__toggle[aria-expanded="true"] .c-nav__bars::before { transform: rotate(45deg); }
	.c-nav__toggle[aria-expanded="true"] .c-nav__bars::after { transform: rotate(-45deg); }

	/* Lista bez JavaScriptu (telefon): zwykła lista pod belką. */
	.c-arkusz { grid-column: 1 / -1; }
	.c-nav__list a {
		display: flex;
		align-items: center;
		min-height: var(--touch);
		color: var(--c-on-dark);
		text-decoration: none;
	}
	.c-nav__rozwin {
		display: none;
		place-items: center;
		width: var(--touch);
		min-height: var(--touch);
		padding: 0;
		background: transparent;
		color: var(--c-on-dark);
		border: 0;
		cursor: pointer;
	}
	:root.js-naglowek .c-nav__rozwin { display: grid; }
	.c-nav__glowa,
	.c-arkusz__akcje { display: none; }

	/* ================= Telefon i tablet z JavaScriptem: arkusz menu ================= */
	@media (max-width: 74.999em) { /* poniżej progu jednego rzędu */
		:root.js-naglowek .c-arkusz {
			position: fixed;
			inset: var(--arkusz-gora, 4.5rem) 0 0;
			z-index: 49;
			display: flex;
			flex-direction: column;
			background: var(--c-deep);
			visibility: hidden;
			clip-path: inset(0 0 100% 0);
			transition: clip-path 0.42s var(--ruch-wyjscie), visibility 0s linear 0.42s;
		}
		:root.is-menu-otwarte .c-arkusz {
			visibility: visible;
			clip-path: inset(0);
			transition: clip-path 0.42s var(--ruch-wyjscie), visibility 0s;
		}
		:root.is-menu-otwarte,
		:root.is-menu-otwarte body { overflow: hidden; }

		:root.js-naglowek .c-arkusz .c-nav { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; }
		:root.js-naglowek .c-nav__list {
			height: 100%;
			margin: 0;
			padding-block: 0.5rem 1.5rem;
			overflow-y: auto;
			overscroll-behavior: contain;
		}
		:root.js-naglowek .c-nav__list > li {
			display: flex;
			align-items: center;
			margin-inline: var(--gutter);
			border-block-end: 1px solid rgb(255 255 255 / 0.16);
		}
		:root.js-naglowek .c-nav__list > li > a {
			flex: 1;
			position: relative;
			min-height: 4rem;
			padding: 1rem 0;
			font-family: var(--font-heading);
			font-size: 1.75rem;   /* Lora 28/32 (spec D2) */
			line-height: 1.15;
			letter-spacing: -0.02em;
		}
		:root.js-naglowek .c-nav__list > :is(.current-menu-item, .current-menu-ancestor, .current_page_parent) > a::before,
		:root.js-naglowek .c-nav__list > li > a[aria-current]::before {
			content: "";
			position: absolute;
			left: 0;
			bottom: 0.625rem;
			width: 1.5rem;
			height: 2px;
			background: var(--brand-white);
		}
		:root.js-naglowek .c-arkusz .c-nav__rozwin { margin-inline-end: -0.75rem; }
		:root.js-naglowek .c-arkusz .c-nav__rozwin::before {
			content: "";
			width: 0.625rem;
			height: 0.625rem;
			border-block-start: 2px solid currentColor;
			border-inline-end: 2px solid currentColor;
			transform: translateX(-0.125rem) rotate(45deg);
		}

		/* Panele poziomu 2 i 3: wsunięte z prawej nad poprzedni. */
		:root.js-naglowek .c-arkusz .sub-menu {
			position: absolute;
			inset: 0;
			z-index: 1;
			display: block;
			padding: 0 0 1.5rem;
			overflow-y: auto;
			overscroll-behavior: contain;
			background: var(--c-deep);
			transform: translateX(100%);
			visibility: hidden;
			transition: transform 0.38s var(--ruch-wyjscie), visibility 0s linear 0.38s;
		}
		:root.js-naglowek .c-arkusz .is-otwarte > .sub-menu {
			transform: translateX(0);
			visibility: visible;
			transition: transform 0.38s var(--ruch-wyjscie), visibility 0s;
		}
		:root.js-naglowek .c-arkusz :is(.c-nav__list, .sub-menu):has(> li.is-otwarte) > li:not(.is-otwarte),
		:root.js-naglowek .c-arkusz li.is-otwarte > :is(a, .c-nav__rozwin) {
			visibility: hidden;
			transition: visibility 0s linear 0.38s;
		}
		:root.js-naglowek .c-arkusz .sub-menu > li:not(.c-nav__glowa-pozycja) {
			display: flex;
			align-items: center;
			margin-inline: var(--gutter);
			border-block-end: 1px solid rgb(255 255 255 / 0.16);
		}
		:root.js-naglowek .c-arkusz .sub-menu > li > a {
			flex: 1;
			min-height: 3.5rem;
			padding: 0.5rem 0;
			font-size: 1.25rem;   /* Figtree 20/28 (spec D2) */
			line-height: 1.4;
		}
		:root.js-naglowek .c-arkusz .sub-menu a[aria-current] { text-decoration: underline; text-underline-offset: 0.3em; }

		:root.js-naglowek .c-arkusz .c-nav__glowa-pozycja { position: sticky; top: 0; z-index: 1; }
		:root.js-naglowek .c-arkusz .c-nav__glowa {
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: 1rem;
			min-height: 3.5rem;
			padding: 0 var(--gutter);
			background: var(--c-deep);
			border-block-end: 1px solid rgb(255 255 255 / 0.16);
		}
		.c-nav__wstecz {
			display: inline-flex;
			align-items: center;
			gap: 0.75rem;
			min-height: var(--touch);
			margin-inline-start: -0.5rem;
			padding: 0 0.5rem;
			background: transparent;
			color: var(--c-on-dark);
			font-family: var(--font-text);
			font-size: 1rem;
			font-weight: 500;
			border: 0;
			cursor: pointer;
		}
		.c-nav__wstecz::before {
			content: "";
			width: 0.625rem;
			height: 0.625rem;
			border-block-end: 2px solid currentColor;
			border-inline-start: 2px solid currentColor;
			transform: translateX(0.125rem) rotate(45deg);
		}
		:root.js-naglowek .c-arkusz .c-nav__glowa .c-nav__wszystkie {
			display: inline-flex;
			align-items: center;
			gap: 0.375rem;
			min-height: var(--touch);
			padding: 0;
			color: var(--c-on-dark);
			font-size: 1rem;
			font-weight: 500;
			white-space: nowrap;
		}
		.c-nav__wszystkie::after { content: "→"; }
		:root.js-naglowek .c-arkusz :is(.c-nav__list, .sub-menu) > li:last-child { border-block-end: 0; }

		/* Strefa akcji: przypięta do dołu arkusza, biały przycisk „Zadzwoń: <numer>” na całą szerokość. */
		:root.js-naglowek .c-arkusz .c-arkusz__akcje {
			flex: none;
			display: grid;
			padding: 1rem var(--gutter) max(1rem, env(safe-area-inset-bottom));
			border-block-start: 1px solid rgb(255 255 255 / 0.16);
		}
		:root.js-naglowek .c-arkusz__zadzwon { min-height: 3.5rem; }
		:root.js-naglowek .c-arkusz__zadzwon .c-icon { width: 1.25rem; height: 1.25rem; }
		:root.is-menu-otwarte .c-header__zadzwon { visibility: hidden; }
	}

	/* ================= Komputer (próg jednego rzędu 75em, ten sam w nav.js przez klient.php) ================= */
	@media (min-width: 75em) {
		.c-header { --naglowek-wys: var(--avg-naglowek-wys, 6rem); }
		.c-header__inner {
			grid-template-columns: 1fr auto 1fr;
			grid-template-areas: "nav logo prawa";
			column-gap: 2rem;
		}
		.c-header__logo img { height: 3.125rem; }   /* 109 x 50 (Figma) */
		.c-header.is-zwiniety .c-header__inner { min-height: 4.5rem; }

		.c-arkusz { display: contents; }
		.c-nav { grid-area: nav; justify-self: start; }
		.c-nav__list { display: flex; align-items: center; gap: 0 2rem; }
		.c-nav__list > li { position: relative; display: flex; align-items: center; }
		.c-nav__list > li > a {
			position: relative;
			min-height: 2.75rem;
			font-size: var(--txt-menu);
			font-weight: 500;
			line-height: 1.33;
			white-space: nowrap;
		}
		/* Kontakt jest przyciskiem po prawej; pozycja menu z klasą c-nav__tylko-arkusz zostaje dla arkusza. */
		.c-nav__list > .c-nav__tylko-arkusz { display: none; }
		.c-nav__list > li > a::after {
			content: "";
			position: absolute;
			inset-inline: 0;
			bottom: 0.5rem;
			height: 1px;
			background: currentColor;
			transform: scaleX(0);
			transform-origin: left;
			transition: transform 0.3s var(--ruch-wyjscie);
		}
		.c-nav__list > li > a:hover::after,
		.c-nav__list > :is(.current-menu-item, .current-menu-ancestor, .current_page_parent) > a::after,
		.c-nav__list > li > a[aria-current]::after { transform: scaleX(1); }

		.c-header__prawa { justify-self: end; gap: 1.5rem; }
		.c-header__tel {
			display: inline-flex;
			align-items: center;
			min-height: var(--touch);
			color: var(--c-on-dark);
			font-size: var(--txt-menu);
			font-weight: 500;
			text-decoration: none;
			white-space: nowrap;
		}
		.c-header__tel:hover { text-decoration: underline; text-underline-offset: 0.3em; }
		.c-header__kontakt { display: inline-flex; white-space: nowrap; }
		.c-nav__toggle,
		.c-header__zadzwon { display: none; }

		/* Podmenu „Oferta”: biały panel pod pozycją, promień 12, pozycje Figtree 16/26 granat (spec D1). */
		.c-nav__rozwin { width: 1.5rem; min-height: 2.75rem; }
		.c-nav__rozwin::before {
			content: "";
			width: 0.4375rem;
			height: 0.4375rem;
			border-block-end: 1.5px solid currentColor;
			border-inline-end: 1.5px solid currentColor;
			transform: translateY(-0.125rem) rotate(45deg);
			transition: transform 0.2s ease-out;
		}
		.c-nav__rozwin[aria-expanded="true"]::before { transform: translateY(0.125rem) rotate(-135deg); }
		.c-nav__list .sub-menu {
			position: absolute;
			top: calc(100% + 0.5rem);
			left: -1.5rem;
			z-index: 60;
			display: none;
			min-width: 20rem;
			padding: 0.75rem;
			background: var(--c-bg);
			border-radius: var(--radius);
		}
		.c-nav__list .is-otwarte > .sub-menu { display: block; }
		.c-nav__list .sub-menu > li { display: flex; align-items: center; }
		.c-nav__list .sub-menu a {
			flex: 1;
			min-height: 2.75rem;
			padding: 0.5rem 0.75rem;
			color: var(--c-text);
			font-size: 1rem;
			line-height: 1.625;
			border-radius: var(--radius-ui);
		}
		.c-nav__list .sub-menu a:hover { background: var(--c-bg-soft); }
		.c-nav__list .sub-menu a[aria-current] { background: var(--c-bg-soft); }
		.c-nav__list .sub-menu a:focus-visible { outline-color: var(--c-focus); outline-offset: -2px; }
	}

	/* Zasłona pod rozwiniętym menu (komputer): przyciemnienie 8% jak „nav_bg” w Avenir, bez rozmycia
	   (Marcin 22.10: rozmycie tła pod menu tu nie pasuje; wyjątek od zasady 68 dla PDM). */
	@media (min-width: 75em) {
		body::after {
			content: "";
			position: fixed;
			inset: 0;
			z-index: 40;
			background: rgb(38 38 69 / 0.08);
			opacity: 0;
			visibility: hidden;
			pointer-events: none;
			transition: opacity 0.3s ease, visibility 0.3s;
		}
		body:has(.c-nav .c-nav__rozwin[aria-expanded="true"])::after { opacity: 1; visibility: visible; pointer-events: auto; }
	}

	/* Kotwice lądują pod belką (pasek WP + belka + zapas). */
	:root { scroll-padding-top: calc(var(--wp-admin--admin-bar--height, 0px) + 4.5rem + 1rem); }
	@media (min-width: 75em) {
		:root { scroll-padding-top: calc(var(--wp-admin--admin-bar--height, 0px) + 4.5rem + 1.5rem); }
	}
}

/* CookieYes: poza warstwą (styl wstrzykiwany skryptem, motyw-start). Przy otwartym arkuszu ikona znika. */
@media (max-width: 74.999em) {
	.cky-btn-revisit-wrapper { left: 0.5rem !important; bottom: 0.5rem !important; transform: scale(0.72); transform-origin: left bottom; }
}
:root.is-menu-otwarte .cky-btn-revisit-wrapper { display: none !important; }