/* =========================================================================
   VETKA — biblioteka UI v2 · menu mobilne (33b)
   =========================================================================
   Odwzorowanie handoffu `design_handoff_menu_mobile`, opcja 33b: akordeon
   z ikonami. Panel pod paskiem nagłówka, na całą szerokość okna; pięć
   wierszy pierwszego poziomu po 60 px z ikoną SVG 30×30, dwa z nich
   rozwijają płaską listę podpozycji na tle `--v2-bg-soft`; pod pozycjami
   zielony boks „Nagły przypadek", na dole para CTA.

   CO JEST POD SPODEM. Markup panelu jest nasz (inc/v2/menu-mobilne.php),
   a stan — otwarcie, akordeon, pułapka fokusu, blokada przewijania —
   niesie assets/js/v2/menu-mobilne.js. Poprzednia wersja (29b) zaginała
   w akordeon szufladę Bootstrapa razem z mega menu i panelem „O nas";
   33b rozjeżdża się z tamtym markupem w każdym punkcie, więc szuflada
   poniżej progu po prostu znika (patrz sekcja DESKTOPOWA NAWIGACJA).

   PRÓG. `max-width: 1199.98px` — dokładnie tam, gdzie motyw zwija nawigację
   (`navbar-expand-xl`). Handoff mówi o 1024 px, ale pas 1025–1199 px
   zostałby wtedy bez żadnej nawigacji: desktopowe menu jest tam już zwinięte
   przez Bootstrapa, a mobilne nie byłoby jeszcze włączone. Uzasadnienie
   przy nagłówku mobilnym w assets/css/v2/chrome.css.

   SPECYFICZNOŚĆ. Blok panelu jest nasz i nikt nie celuje w jego klasy —
   ale Elementor Kit maluje globalnie `button` i `p`
   (`.elementor-kit-5333 button`, 0,1,1): zielone tło, biały tekst i własna
   typografia. Sama klasa (0,1,0) by z tym przegrała, więc każdy selektor
   bloku niesie prefiks `body.vetka-ui` (0,2,0) — wygrywa bez `!important`
   i bez wiązania się z numerem Kitu.

   Tam, gdzie chowamy cudze warstwy, prefiks jest dłuższy:
   `body.vetka-ui #masthead` (1,2,1). Reguły motywu dla szuflady sięgają
   (0,4,1), a arkusze paneli prefiksują wszystko `#masthead` — pojedyncze
   `id` przebija dowolną liczbę klas.
   ========================================================================= */

/* Panel i stopka CTA są w markupie zawsze (widoczność nie może zależeć od
   sniffingu User-Agenta, bo strony idą z cache). Powyżej progu menu stoi
   w pasku i panel nie ma czego pokazywać.                                 */
body.vetka-ui .vk-mnav {
	display: none;
}

@media (max-width: 1199.98px) {

	/* =====================================================================
	   DESKTOPOWA NAWIGACJA — poza widokiem
	   =====================================================================
	   Szuflada motywu nadrzędnego niesie menu WordPressa razem z mega menu
	   i panelem „O nas". Poniżej progu zastępuje ją nasz panel, więc tamta
	   znika w całości — bez tego oba układy leżałyby na sobie.

	   Zostaje w DOM-ie (nie `remove()`), bo powyżej 1200 px to ona jest
	   nawigacją: ta sama strona po powiększeniu okna musi mieć pasek.
	   ===================================================================== */
	body.vetka-ui #masthead .main-navigation.offcanvas {
		display: none;
	}

	/* =====================================================================
	   PANEL
	   =====================================================================
	   Warstwa zaczepiona pod paskiem nagłówka: `top` ustawia skrypt (pasek
	   bywa przyklejony, a zalogowanemu przesuwa go jeszcze pasek
	   administracyjny WordPressa) — tutaj zostaje wartość zapasowa na
	   wypadek braku JS.

	   Zamknięty panel gasi `visibility`, a nie `display`: `visibility:
	   hidden` też wyjmuje zawartość z kolejności tabulacji i z drzewa
	   dostępności, ale — w odróżnieniu od `display` — da się animować.
	   ===================================================================== */
	body.vetka-ui .vk-mnav {
		--vk-mnav-pad: 40px;   /* margines boczny wierszy — tablet          */

		position: fixed;
		z-index: 1045;         /* nad treścią, pod paskiem nagłówka         */
		top: var(--vk-mnav-top, calc(var(--v2-header-h-m) + 1px));
		right: 0;
		bottom: 0;
		left: 0;
		display: block;
		border-top: 1px solid var(--v2-line);
		background-color: var(--v2-bg);
		opacity: 0;
		visibility: hidden;
		transform: translateY(-8px);
		transition:
			opacity     .18s ease,
			transform   .18s ease,
			visibility  0s linear .18s;
	}

	body.vetka-ui .vk-mnav.is-open {
		opacity: 1;
		visibility: visible;
		transform: none;
		transition:
			opacity    .18s ease,
			transform  .18s ease,
			visibility 0s;
	}

	/* Przewija się wnętrze panelu, nie strona pod nim. `overscroll-behavior`
	   pilnuje, żeby dojechanie do końca listy nie zaczęło przewijać
	   dokumentu (blokada na <body> zostaje, ale iOS potrafi ją obejść).   */
	body.vetka-ui .vk-mnav__scroll {
		height: 100%;
		overflow-y: auto;
		overscroll-behavior: contain;
		-webkit-overflow-scrolling: touch;
	}

	/* =====================================================================
	   WIERSZ PIERWSZEGO POZIOMU  (60 px, hairline u dołu)
	   ===================================================================== */
	body.vetka-ui .vk-mnav__list {
		margin: 0;
		padding: 0;
		list-style: none;
	}

	body.vetka-ui .vk-mnav__item {
		border-bottom: 1px solid var(--v2-line);
	}

	body.vetka-ui .vk-mnav__row {
		display: flex;
		align-items: center;
		gap: 14px;
		width: 100%;
		min-height: 60px;
		margin: 0;
		padding: 0 var(--vk-mnav-pad);
		border: 0;
		background: none;
		color: var(--v2-ink);
		font-family: var(--v2-font);
		font-size: 17px;
		font-weight: 600;
		line-height: 1.3;
		text-align: left;
		text-decoration: none;
		transition: color var(--v2-ease);
	}

	body.vetka-ui .vk-mnav__row--toggle {
		cursor: pointer;
	}

	body.vetka-ui .vk-mnav__row:hover,
	body.vetka-ui .vk-mnav__row.is-current {
		color: var(--v2-accent);
	}

	body.vetka-ui .vk-mnav__row:focus-visible,
	body.vetka-ui .vk-mnav__sublink:focus-visible,
	body.vetka-ui .vk-mnav__alert-tel:focus-visible {
		outline: 2px solid var(--v2-accent);
		outline-offset: -2px;
	}

	/* Ikona z zestawu klienta — plik jest już przebarwiony na `#6C9D7D`,
	   więc wchodzi obrazem, nie maską: nie ma czego przekolorowywać.      */
	body.vetka-ui .vk-mnav__ikona {
		flex: 0 0 auto;
		width: 30px;
		height: 30px;
	}

	body.vetka-ui .vk-mnav__tytul {
		flex: 1 1 auto;
		min-width: 0;
	}

	/* --- Znak „+ / −" ---------------------------------------------------- */
	/* Pudełko 44 px to cel dotykowy; sam znak stoi przy prawej krawędzi
	   wiersza, tak jak w makiecie.                                        */
	body.vetka-ui .vk-mnav__znak {
		display: flex;
		flex: 0 0 auto;
		align-items: center;
		justify-content: flex-end;
		width: 44px;
		height: 44px;
		color: var(--v2-ink-3);
		font-family: var(--v2-font);
		font-size: 20px;
		font-weight: 400;
		line-height: 1;
	}

	body.vetka-ui .vk-mnav__row--toggle .vk-mnav__znak::after {
		content: "+";
	}

	body.vetka-ui .vk-mnav__row--toggle[aria-expanded="true"] .vk-mnav__znak::after {
		content: "\2212";   /* minus, nie dywiz — para do „+" tej samej szerokości */
	}

	/* Wiersze bez podmenu są linkami, nie przełącznikami — handoff dopuszcza
	   przy nich strzałkę albo nic. Strzałka mówi „to prowadzi dalej",
	   a wiersz nie zostaje pusty po prawej stronie.                       */
	body.vetka-ui .vk-mnav__znak--link {
		font-size: 17px;
	}

	/* =====================================================================
	   ROZWINIĘCIE AKORDEONU
	   =====================================================================
	   Wysokość animuje się torem siatki (`0fr` → `1fr`) — jedyny sposób
	   przejścia „do wysokości treści" bez liczenia pikseli skryptem.
	   Przeglądarka bez tej interpolacji dostaje skok bez animacji, czyli
	   dokładnie to, co zwykłe pokaż/ukryj.

	   Tło i hairline siedzą na `-inner`, a nie na torze siatki: zamknięte
	   rozwinięcie ma wysokość 0, więc obramowanie z zewnątrz rysowałoby
	   drugą kreskę pod wierszem.
	   ===================================================================== */
	body.vetka-ui .vk-mnav__sub {
		display: grid;
		grid-template-rows: 0fr;
		background-color: var(--v2-bg-soft);
		transition: grid-template-rows .18s ease;
	}

	body.vetka-ui .vk-mnav__sub.is-open {
		grid-template-rows: 1fr;
		border-bottom: 1px solid var(--v2-line);
	}

	body.vetka-ui .vk-mnav__sub-inner {
		overflow: hidden;
		/* Bez tego tor `0fr` nie zszedłby poniżej wysokości treści: element
		   siatki ma domyślnie `min-height: auto`.                         */
		min-height: 0;
		/* Zamknięte rozwinięcie ma wysokość 0, ale jego linki wciąż byłyby
		   w kolejności tabulacji — `visibility` je stamtąd wyjmuje.
		   Zgaszenie czeka na koniec animacji, żeby nie ucinać zwijania.   */
		visibility: hidden;
		transition: visibility 0s linear .18s;
	}

	body.vetka-ui .vk-mnav__sub.is-open .vk-mnav__sub-inner {
		visibility: visible;
		transition: visibility 0s;
	}


	/* Odstęp pionowy z makiety (10 px) niosą MARGINESY skrajnych podpozycji,
	   a nie padding rozwinięcia — i to jest tu sedno. Padding nigdy się nie
	   ściska, więc na zwiniętym rozwinięciu zostawałby szarym paskiem 20 px
	   pod wierszem, choćby tor siatki miał zerową wysokość. Margines jest
	   częścią treści, czyli znika razem z nią pod `overflow: hidden`.     */
	body.vetka-ui .vk-mnav__sub-inner > :first-child {
		margin-top: 10px;
	}

	body.vetka-ui .vk-mnav__sub-inner > :last-child {
		margin-bottom: 10px;
	}

	body.vetka-ui .vk-mnav__sublink {
		display: flex;
		align-items: center;
		gap: 10px;
		min-height: 46px;
		/* Wcięcie z makiety: 50 px przy marginesie bocznym 20 px. Liczone,
		   a nie wpisane — na tablecie margines rośnie do 40 px i wcięcie
		   ma iść razem z nim.                                            */
		padding: 0 var(--vk-mnav-pad) 0 calc(var(--vk-mnav-pad) + 30px);
		color: var(--v2-ink-2);
		font-family: var(--v2-font);
		font-size: 15.5px;
		font-weight: 400;
		line-height: 1.3;
		text-decoration: none;
		transition: color var(--v2-ease);
	}

	body.vetka-ui a.vk-mnav__sublink:hover {
		color: var(--v2-accent);
	}

	/* Pozycja bez własnej podstrony — zostaje tekstem, nie martwym linkiem.
	   Ta sama zasada, co w panelach desktopowych (mapa `urls` w danych).  */
	body.vetka-ui .vk-mnav__sublink--pusty {
		color: var(--v2-ink-3);
		cursor: default;
	}

	/* Wiersz zbiorczy („Zobacz wszystkie (19) →") robi w płaskiej liście za
	   przegrodę między sekcjami: akcent i półgruby krój to jedyne, co
	   odróżnia go od pozycji nad nim.                                     */
	body.vetka-ui .vk-mnav__sublink--more {
		color: var(--v2-accent);
		font-weight: 500;
	}

	body.vetka-ui .vk-mnav__strzalka {
		margin-left: -4px;
	}

	/* =====================================================================
	   BOKS „NAGŁY PRZYPADEK"
	   =====================================================================
	   W 33b stoi pod pozycjami i jest widoczny zawsze — jedyne miejsce
	   w menu, w którym akcent jest tłem.
	   ===================================================================== */
	body.vetka-ui .vk-mnav__alert {
		margin: 16px var(--vk-mnav-pad) 0;
		padding: 16px 18px;
		border-radius: var(--v2-r-lg);
		background-color: var(--v2-accent);
	}

	body.vetka-ui .vk-mnav__alert-tytul {
		margin: 0 0 3px;
		color: var(--v2-on-accent);
		font-family: var(--v2-font);
		font-size: 15px;
		font-weight: 600;
		line-height: 1.3;
	}

	body.vetka-ui .vk-mnav__alert-tekst {
		margin: 0;
		color: #D7E5DC;
		font-family: var(--v2-font);
		font-size: 13px;
		font-weight: 400;
		line-height: 1.45;
	}

	body.vetka-ui .vk-mnav__alert-tel {
		color: var(--v2-on-accent);
		font-weight: 600;
		font-variant-numeric: tabular-nums;
		text-decoration: none;
		white-space: nowrap;
	}

	body.vetka-ui .vk-mnav__alert-tel:hover {
		color: var(--v2-on-accent);
		text-decoration: underline;
	}

	body.vetka-ui .vk-mnav__alert-tel:focus-visible {
		outline-color: var(--v2-focus);
		outline-offset: 2px;
	}

	/* =====================================================================
	   STOPKA PANELU — para CTA
	   =====================================================================
	   Markup: `vetka_hdrm_cta_menu()` w inc/v2/naglowek-mobilny.php.
	   ===================================================================== */
	body.vetka-ui .vk-mnav-cta {
		display: grid;
		gap: 10px;
		padding: 16px var(--vk-mnav-pad) 24px;
		border-top: 1px solid var(--v2-line);
	}

	body.vetka-ui .vk-mnav-cta__btn {
		display: flex;
		align-items: center;
		justify-content: center;
		/* Etykieta i znak (strzałka, słuchawka) są osobnymi elementami
		   układu, więc spacja z markupu między nimi przepada — odstęp
		   musi dać `gap`.                                                */
		gap: 8px;
		min-height: 48px;
		padding: 0 22px;
		border: 1px solid var(--v2-accent);
		border-radius: var(--v2-r-lg);
		background-color: var(--v2-accent);
		color: var(--v2-on-accent);
		font-family: var(--v2-font);
		font-size: 15px;
		font-weight: 600;
		line-height: 1.2;
		text-decoration: none;
		transition: background-color var(--v2-ease), border-color var(--v2-ease);
	}

	body.vetka-ui .vk-mnav-cta__btn:hover {
		background-color: var(--v2-accent-2);
		border-color: var(--v2-accent-2);
		color: var(--v2-on-accent);
	}

	body.vetka-ui .vk-mnav-cta__btn--tel {
		border-color: var(--v2-ink);
		background-color: var(--v2-bg);
		color: var(--v2-ink);
		font-variant-numeric: tabular-nums;
	}

	body.vetka-ui .vk-mnav-cta__btn--tel:hover {
		background-color: var(--v2-bg-soft);
		border-color: var(--v2-ink);
		color: var(--v2-ink);
	}

	body.vetka-ui .vk-mnav-cta__btn:focus-visible {
		outline: 2px solid var(--v2-accent);
		outline-offset: 2px;
	}

	/* Strona pod otwartym panelem stoi. Klasę dokłada skrypt — na <html>
	   i na <body>, bo przewijanym elementem bywa raz jeden, raz drugi.   */
	html.vk-mnav-otwarte,
	html.vk-mnav-otwarte body {
		overflow: hidden;
	}
}

/* =========================================================================
   MOBILE — węższy margines boczny (klatka handoffu: 390 px)
   ========================================================================= */
@media (max-width: 640px) {

	body.vetka-ui .vk-mnav {
		--vk-mnav-pad: 20px;
	}
}

/* =========================================================================
   OGRANICZONY RUCH
   =========================================================================
   Handoff dopuszcza przy panelu slide/fade ≤200 ms — to jedyne miejsce
   w bibliotece v2, w którym ruch wychodzi poza przejście koloru. Gdy system
   prosi o ograniczenie animacji, panel pojawia się i znika bez przejścia,
   a akordeon skacze do wysokości treści.
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {

	body.vetka-ui .vk-mnav,
	body.vetka-ui .vk-mnav.is-open,
	body.vetka-ui .vk-mnav__sub,
	body.vetka-ui .vk-mnav__sub-inner,
	body.vetka-ui .vk-mnav__sub.is-open .vk-mnav__sub-inner {
		transition: none;
	}

	body.vetka-ui .vk-mnav {
		transform: none;
	}
}