/**
 * Mega menu „Zakres usług" — CiyaCare Child.
 *
 * Redesign wg handoffu `design_handoff_mega_menu` (warianty 2a / 3a / 3b),
 * spójny z biblioteką UI v2: hairline'y zamiast kafli, akcent marki użyty
 * jako tło dokładnie raz (przycisk „Dzwoń teraz"). Bez ikon w treści paneli —
 * jedyne znaki to trzy ikony z zestawu klienta przy nazwach sekcji w railu.
 *
 * Wartości pochodzą z tokenów v2 (assets/css/v2/tokens.css), a w `var()`
 * zostawiony jest fallback z handoffu — arkusz działa też, gdyby ktoś
 * podłączył go bez warstwy tokenów.
 *
 * SPECYFICZNOŚĆ: każdy selektor zaczyna się od `#masthead`. Reguły podmenu
 * w motywie nadrzędnym sięgają (0,5,1) i mają miejscami `!important`
 * (`display: flex` na panelu), a pojedyncze `id` przebija dowolną liczbę
 * klas — jeden prefiks zdejmuje więc cały problem, zamiast punktowych
 * `!important` rozsianych po pliku.
 *
 * PEŁNA SZEROKOŚĆ: panel jest pozycjonowany absolutnie, więc jego szerokość
 * bierze się z bloku zawierającego. Zamiast rozpychać go poza kontener
 * nawigacji ujemnymi marginesami (tak było wcześniej), zdejmujemy
 * pozycjonowanie z trzech opakowań w nagłówku. Blokiem zawierającym staje się
 * wtedy `#masthead` — element szerokości okna — i wystarczy `left: 0; right: 0`.
 */

/* =========================================================================
   KONTEKST POZYCJONOWANIA
   ========================================================================= */
@media screen and (min-width: 1200px) {

	/* Motyw wymusza `position: relative !important` na kontenerze nawigacji
	   właśnie po to, żeby zakotwiczyć w nim mega menu — my kotwiczymy wyżej.
	   Pozostałe pozycje menu mają własne `position: relative` na <li>, więc
	   ich dropdowny to nie dotyczy.                                          */
	#masthead .main-navigation {
		position: static !important;
	}

	#masthead > .container-fluid,
	#masthead > .container,
	#masthead .navbar {
		position: static;
	}
}

/* =========================================================================
   POZYCJA MENU W NAGŁÓWKU  ·  WSPÓLNA DLA OBU PANELI
   =========================================================================
   Otwarta pozycja: tekst 600 i podkreślenie 2 px przy dolnej krawędzi paska.
   Podkreślenie rysuje `::before`, bo `::after` należy do strzałki dropdownu
   z motywu. Link rozciąga się na pełną wysokość paska (`align-self: stretch`),
   więc `bottom: 0` wypada dokładnie nad dolnym hairline'em nagłówka.

   Selektor celuje w `.vetka-hdr-item`, nie w `.vetka-hdr-item`: tę samą
   oprawę ma pozycja „O nas" z kompaktowym dropdownem (assets/css/dropdown-o-nas.css),
   a handoff wprost mówi „jak przy Zakresie usług". Klasę dokłada walker obu
   pozycjom (inc/class-vetka-mega-menu-walker.php). Klasy stanu `is-open` /
   `is-closed` też są wspólne — ustawia je jeden skrypt (assets/js/mega-menu.js).
   ========================================================================= */
@media screen and (min-width: 1200px) {

	body.vetka-ui #masthead .vetka-hdr-item > a.nav-link {
		position: relative;
		align-self: stretch;
		display: flex;
		align-items: center;
	}

	body.vetka-ui #masthead .vetka-hdr-item > a.nav-link::before {
		content: "";
		position: absolute;
		right: 0;
		bottom: 0;
		left: 0;
		height: 2px;
		background-color: var(--v2-accent, #1B5E43);
		opacity: 0;
		transition: opacity var(--v2-ease, .15s ease);
	}

	body.vetka-ui #masthead .vetka-hdr-item:hover > a.nav-link,
	body.vetka-ui #masthead .vetka-hdr-item:focus-within > a.nav-link,
	body.vetka-ui #masthead .vetka-hdr-item.is-open > a.nav-link {
		color: var(--v2-ink, #121512);
		font-weight: 600;
	}

	body.vetka-ui #masthead .vetka-hdr-item:hover > a.nav-link::before,
	body.vetka-ui #masthead .vetka-hdr-item:focus-within > a.nav-link::before,
	body.vetka-ui #masthead .vetka-hdr-item.is-open > a.nav-link::before {
		opacity: 1;
	}

	/* Esc i klik poza panelem zamykają menu mimo trwającego hoveru — reguła
	   musi więc stać PO regułach otwarcia i mieć tę samą specyficzność.      */
	body.vetka-ui #masthead .vetka-hdr-item.is-closed > a.nav-link::before {
		opacity: 0;
	}
}

/* =========================================================================
   PANEL
   ========================================================================= */
#masthead .vetka-mega,
#masthead .vetka-mega * {
	box-sizing: border-box;
}

#masthead .vetka-mega {
	font-family: var(--v2-font, "Inter", system-ui, sans-serif);
	color: var(--v2-ink, #121512);
}

#masthead .vetka-mega ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

#masthead .vetka-mega li {
	display: block;
	margin: 0;
	padding: 0;
}

#masthead .vetka-mega p {
	margin: 0;
}

/* Motyw dokleja do linków podmenu strzałki pseudo-elementami. */
#masthead .vetka-mega a::before,
#masthead .vetka-mega a::after {
	content: normal !important;
	display: none !important;
}

@media screen and (min-width: 1200px) {

	#masthead .vetka-mega.dropdown-menu {
		display: block !important;   /* motyw wymusza tu `flex !important` */
		position: absolute;
		right: 0;
		left: 0;
		top: 100%;
		z-index: 999;
		width: auto;
		min-width: 0;
		max-width: none;
		margin: 0;
		padding: 0 !important;
		background-color: var(--v2-bg, #FFFFFF);
		border: 0;
		/* Panel siada na dolnej krawędzi nagłówka (blokiem zawierającym jest
		   jego padding-box, więc `top: 100%` wypada NAD tą krawędzią) i zakrył
		   jej hairline białym tłem. Własna górna linia oddaje go z powrotem. */
		border-top: 1px solid var(--v2-line, #E4E6E1);
		border-bottom: 1px solid var(--v2-line, #E4E6E1);
		border-radius: 0;
		box-shadow: 0 16px 28px -24px rgba(18, 21, 18, .35);
		/* Bez wjazdu z góry: budżet ruchu biblioteki v2 dopuszcza tylko
		   przejście koloru, a tu wyjątkowo krótkie wygaszenie panelu.        */
		transition: opacity .15s ease, visibility .15s ease;
	}

	#masthead .vetka-mega-item > .vetka-mega {
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
	}

	#masthead .vetka-mega-item:hover > .vetka-mega,
	#masthead .vetka-mega-item:focus-within > .vetka-mega,
	#masthead .vetka-mega-item.is-open > .vetka-mega {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
	}

	#masthead .vetka-mega-item.is-closed > .vetka-mega {
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
	}

	#masthead .vetka-mega .vetka-mega-inner {
		display: grid;
		grid-template-columns: 300px 1fr;
		/* 1200 px z projektu, ale nigdy na styk z krawędzią okna: poniżej
		   ~1264 px kontener oddaje 24 px z każdej strony. Ta sama miara co
		   `--vk-home-pad` na stronie głównej, więc panel i treść pod nim
		   trzymają jedną linię także na węższych desktopach.               */
		width: min(var(--v2-wrap, 1200px), 100% - 48px);
		margin: 0 auto;
	}
}

/* =========================================================================
   LEWY RAIL
   ========================================================================= */
#masthead .vetka-mega .vetka-mega-rail {
	padding: 24px 0;
	border-right: 1px solid var(--v2-line, #E4E6E1);
}

#masthead .vetka-mega .vetka-mega-rail__item {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	padding: 16px 24px;
	border: 0;
	border-radius: 0;
	background-color: transparent;
	color: inherit;
	font: inherit;
	text-align: left;
	text-decoration: none;
	cursor: pointer;
	/* Bez `box-shadow` w przejściu: budżet ruchu biblioteki v2 dopuszcza
	   wyłącznie kolor, więc pasek aktywnej zakładki pojawia się od razu.   */
	transition: background-color var(--v2-ease, .15s ease);
}

/* Ikona z zestawu klienta — plik jest już przebarwiony na `#6C9D7D`, więc
   wchodzi obrazem, nie maską: nie ma czego przekolorowywać. 28 px, nie 30 jak
   w szufladzie mobilnej: wiersz raila jest niższy od dotykowego.            */
#masthead .vetka-mega .vetka-mega-rail__ikona {
	flex: none;
	width: 28px;
	height: 28px;
}

#masthead .vetka-mega .vetka-mega-rail__text {
	/* Bez tego dłuższy podtytuł rozpycha kolumnę zamiast się złamać. */
	min-width: 0;
}

#masthead .vetka-mega .vetka-mega-rail__head {
	display: flex;
	align-items: center;
	gap: 8px;
}

#masthead .vetka-mega .vetka-mega-rail__title {
	font-size: 16px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--v2-ink, #121512);
}

#masthead .vetka-mega .vetka-mega-rail__sub {
	display: block;
	margin-top: 2px;
	font-size: 13px;
	font-weight: 400;
	line-height: 1.35;
	color: var(--v2-ink-3, #6B7268);
}

#masthead .vetka-mega .vetka-mega-rail__badge {
	flex: none;
	padding: 1px 8px;
	border: 1px solid var(--v2-line, #E4E6E1);
	border-radius: 999px;
	background-color: var(--v2-bg-soft, #F6F6F4);
	font-size: 12px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	line-height: 1.5;
	color: var(--v2-ink, #121512);
	transition: background-color var(--v2-ease, .15s ease), border-color var(--v2-ease, .15s ease), color var(--v2-ease, .15s ease);
}

#masthead .vetka-mega .vetka-mega-rail__item:hover {
	background-color: var(--v2-bg-soft, #F6F6F4);
}

#masthead .vetka-mega .vetka-mega-rail__item.is-active {
	background-color: var(--v2-bg-soft, #F6F6F4);
	/* Pasek 2 px przy lewej krawędzi — jedyny znacznik aktywnej sekcji. */
	box-shadow: inset 2px 0 0 var(--v2-accent, #1B5E43);
}

#masthead .vetka-mega .vetka-mega-rail__item.is-active .vetka-mega-rail__badge {
	border-color: var(--v2-accent, #1B5E43);
	background-color: var(--v2-accent, #1B5E43);
	color: var(--v2-on-accent, #FFFFFF);
}

/* =========================================================================
   PRAWA KOLUMNA
   ========================================================================= */
#masthead .vetka-mega .vetka-mega-panes {
	padding: 32px 0 32px 48px;
}

#masthead .vetka-mega .vetka-mega-pane {
	display: block;
}

#masthead .vetka-mega .vetka-mega-pane[hidden] {
	display: none;
}

/* --- Nadtytuł ----------------------------------------------------------- */
#masthead .vetka-mega .vetka-mega-eyebrow {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 20px;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .08em;
	line-height: 1.2;
	text-transform: uppercase;
	color: var(--v2-ink-3, #6B7268);
}

#masthead .vetka-mega .vetka-mega-eyebrow__marker {
	flex: none;
	width: 8px;
	height: 8px;
	border-radius: 1px;
	background-color: var(--v2-accent, #1B5E43);
}

/* --- Siatka linków ------------------------------------------------------ */
#masthead .vetka-mega .vetka-mega-links {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 14px 32px;
}

#masthead .vetka-mega .vetka-mega-links--desc {
	gap: 20px 32px;
}

#masthead .vetka-mega .vetka-mega-link {
	display: block;
	padding: 0;
	background: none;
	text-decoration: none;
	transition: color var(--v2-ease, .15s ease);
}

#masthead .vetka-mega .vetka-mega-link__title {
	display: block;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.35;
	color: var(--v2-ink, #121512);
	transition: color var(--v2-ease, .15s ease);
}

#masthead .vetka-mega .vetka-mega-link__desc {
	display: block;
	margin-top: 3px;
	font-size: 13px;
	font-weight: 400;
	line-height: 1.45;
	color: var(--v2-ink-3, #6B7268);
}

#masthead .vetka-mega a.vetka-mega-link:hover .vetka-mega-link__title {
	color: var(--v2-accent, #1B5E43);
}

/* Pozycja bez własnej podstrony — nazwa zostaje, ale nie obiecuje linku. */
#masthead .vetka-mega .vetka-mega-link--wkrotce .vetka-mega-link__title {
	color: var(--v2-ink-3, #6B7268);
}

/* --- Stopka panelu ------------------------------------------------------ */
#masthead .vetka-mega .vetka-mega-more {
	margin-top: 28px;
	padding-top: 18px;
	border-top: 1px solid var(--v2-line, #E4E6E1);
}

#masthead .vetka-mega .vetka-mega-more__link {
	display: inline-block;
	padding: 0;
	background: none;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--v2-accent, #1B5E43);
	text-decoration: none;
	transition: color var(--v2-ease, .15s ease);
}

#masthead .vetka-mega .vetka-mega-more__link:hover {
	color: var(--v2-accent-2, #12432F);
}

/* =========================================================================
   ZAKŁADKA „NAGŁY PRZYPADEK"
   ========================================================================= */
#masthead .vetka-mega .vetka-mega-alert {
	display: flex;
	align-items: center;
	gap: 24px;
	padding: 24px 28px;
	border: 1px solid var(--v2-line, #E4E6E1);
	border-radius: var(--v2-r, 4px);
}

#masthead .vetka-mega .vetka-mega-alert__body {
	flex: 1 1 auto;
	min-width: 0;
}

#masthead .vetka-mega .vetka-mega-alert__title {
	font-size: 17px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--v2-ink, #121512);
}

#masthead .vetka-mega .vetka-mega-alert__text {
	margin-top: 4px;
	font-size: 15px;
	font-weight: 400;
	line-height: 1.5;
	color: var(--v2-ink-2, #3A3F39);
}

/* Jedyne wystąpienie akcentu jako tła w całym menu. */
#masthead .vetka-mega .vetka-mega-alert__btn {
	flex: none;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 52px;
	padding: 0 26px;
	border-radius: var(--v2-r-lg, 8px);
	background-color: var(--v2-accent, #1B5E43);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--v2-on-accent, #FFFFFF);
	text-decoration: none;
	white-space: nowrap;
	transition: background-color var(--v2-ease, .15s ease);
}

#masthead .vetka-mega .vetka-mega-alert__btn:hover {
	background-color: var(--v2-accent-2, #12432F);
	color: var(--v2-on-accent, #FFFFFF);
}

#masthead .vetka-mega .vetka-mega-alert__ico {
	font-size: 17px;
	line-height: 1;
}

/* --- Trzy komórki na hairline'ach --------------------------------------- */
#masthead .vetka-mega .vetka-mega-facts {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin-top: 16px;
	border: 1px solid var(--v2-line, #E4E6E1);
	border-radius: var(--v2-r, 4px);
}

#masthead .vetka-mega .vetka-mega-facts__cell {
	padding: 22px 28px;
}

#masthead .vetka-mega .vetka-mega-facts__cell + .vetka-mega-facts__cell {
	border-left: 1px solid var(--v2-line, #E4E6E1);
}

#masthead .vetka-mega .vetka-mega-facts__label {
	display: block;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .08em;
	line-height: 1.2;
	text-transform: uppercase;
	color: var(--v2-ink-3, #6B7268);
}

#masthead .vetka-mega .vetka-mega-facts__value {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 8px;
	font-size: 20px;
	font-weight: 500;
	line-height: 1.3;
	color: var(--v2-ink, #121512);
}

/* Cyfry na stałej szerokości — tylko tam, gdzie wartość jest liczbą. Adres
   z tego nie korzysta: w Inter tabularny myślnik jest szerszy od zwykłego
   i „Warszawa-Białołęka" rozjeżdżałoby się na oczach. */
#masthead .vetka-mega .vetka-mega-facts__value--num {
	font-variant-numeric: tabular-nums;
}

/* Numer telefonu jest odnośnikiem `tel:`, ale zostaje w kolorze i wadze
   wartości: gdyby dostał zieleń, panel miałby dwa akcenty obok siebie
   (numer i „Nawiguj"). Podkreślenie pojawia się dopiero pod kursorem.     */
#masthead .vetka-mega .vetka-mega-facts__tel {
	color: inherit;
	text-decoration: none;
}

#masthead .vetka-mega .vetka-mega-facts__tel:hover,
#masthead .vetka-mega .vetka-mega-facts__tel:focus-visible {
	text-decoration: underline;
	text-underline-offset: 3px;
}

#masthead .vetka-mega .vetka-mega-facts__dot {
	flex: none;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: var(--v2-accent, #1B5E43);
}

#masthead .vetka-mega .vetka-mega-facts__desc {
	display: block;
	margin-top: 4px;
	font-size: 13px;
	font-weight: 400;
	line-height: 1.45;
	color: var(--v2-ink-3, #6B7268);
}

#masthead .vetka-mega .vetka-mega-facts__link {
	display: inline-block;
	margin-top: 6px;
	padding: 0;
	background: none;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--v2-accent, #1B5E43);
	text-decoration: none;
	transition: color var(--v2-ease, .15s ease);
}

#masthead .vetka-mega .vetka-mega-facts__link:hover {
	color: var(--v2-accent-2, #12432F);
}

/* =========================================================================
   FOCUS
   ========================================================================= */
#masthead .vetka-mega a:focus-visible,
#masthead .vetka-mega button:focus-visible {
	outline: 2px solid var(--v2-accent, #1B5E43);
	outline-offset: 2px;
}

/* =========================================================================
   PONIŻEJ 1200 px — NIC
   =========================================================================
   Ten arkusz jest wyłącznie desktopowy. Poniżej progu motyw zwija nawigację,
   a menu przejmuje osobny panel na własnym markupie (handoff
   `design_handoff_menu_mobile`, 33b — assets/css/v2/menu-mobilne.css). Ten
   sam arkusz chowa tam całą szufladę motywu razem z mega menu, więc reguły
   poniżej progu nie miałyby czego dotyczyć.
   ========================================================================= */

/* =========================================================================
   REDUKCJA RUCHU
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {

	#masthead .vetka-mega,
	#masthead .vetka-mega *,
	#masthead .vetka-hdr-item > a.nav-link::before {
		transition: none !important;
	}
}