/**
 * Dropdown „O nas" w nagłówku — CiyaCare Child.
 *
 * Wariant 10a z handoffu `design_handoff_menu_o_nas`: kompaktowy panel
 * 340 px zakotwiczony pod pozycją menu. Przeciwieństwo mega menu „Zakres
 * usług", które idzie na pełną szerokość okna — dlatego osobny arkusz,
 * a nie kolejna sekcja w mega-menu.css.
 *
 * WSPÓLNE Z MEGA MENU: oprawa samej pozycji w pasku (waga 600 i zielone
 * podkreślenie przy dolnej krawędzi nagłówka) stoi w assets/css/mega-menu.css,
 * w sekcji „POZYCJA MENU W NAGŁÓWKU", na klasie `.vetka-hdr-item`, którą
 * walker dokłada obu pozycjom. Tutaj jej nie powtarzamy.
 *
 * SPECYFICZNOŚĆ: każdy selektor zaczyna się od `#masthead` — tak samo jak
 * w mega-menu.css i z tego samego powodu. Reguły podmenu w motywie nadrzędnym
 * sięgają (0,5,1), a pojedyncze `id` przebija dowolną liczbę klas.
 *
 * KOTWICZENIE: `<li>` pozycji menu ma z motywu `position: relative` i wysokość
 * całego paska, więc panel wystarczy oprzeć na nim. `top: calc(100% + 1px)`
 * przepuszcza dolny hairline nagłówka pod panelem — inaczej białe tło zakryłoby
 * go na 340 px, a projekt chce, żeby panel do tej linii tylko przylegał.
 */

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

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

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

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

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

	#masthead .vetka-onas.dropdown-menu {
		display: block !important;
		position: absolute;
		top: calc(100% + 1px);
		left: 0;
		right: auto;
		z-index: 999;
		/* 380, nie 340 px z handoffu: ikona zjada 28 px szerokości plus odstęp,
		   a zdania opisu mają nadal mieścić się w jednej linii.              */
		width: 380px;
		min-width: 0;
		max-width: none;
		margin: 0;
		padding: 0 !important;
		background-color: var(--v2-bg, #FFFFFF);
		border: 1px solid var(--v2-line, #E4E6E1);
		border-top: 0;   /* górna krawędź przylega do hairline'u nagłówka */
		border-radius: 0 0 var(--v2-r-lg, 8px) var(--v2-r-lg, 8px);
		/* Jedyny cień dopuszczony w systemie — panel wisi nad treścią strony
		   i bez niego zlewałby się z białym tłem sekcji pod nagłówkiem.     */
		box-shadow: 0 8px 24px rgba(15, 26, 20, .06);
		/* Bez wjazdu z góry: budżet ruchu biblioteki v2 dopuszcza tylko
		   przejście koloru i to krótkie wygaszenie panelu.                  */
		transition: opacity .15s ease, visibility .15s ease;
	}

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

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

	/* 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ść.     */
	#masthead .vetka-onas-item.is-closed > .vetka-onas {
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
	}
}

/* =========================================================================
   POZYCJE
   ========================================================================= */
#masthead .vetka-onas .vetka-onas__item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 16px 22px;
	color: var(--v2-ink, #121512);
	text-decoration: none;
	background-color: transparent;
	transition: background-color var(--v2-ease, .15s ease);
}

/* Rozdzielenie pozycji, ale bez linii nad pierwszą: tam rolę kreski pełni
   dolny hairline nagłówka, do którego panel przylega.                      */
#masthead .vetka-onas .vetka-onas__item + .vetka-onas__item {
	border-top: 1px solid var(--v2-line, #E4E6E1);
}

#masthead .vetka-onas a.vetka-onas__item:hover,
#masthead .vetka-onas a.vetka-onas__item:focus-visible {
	background-color: var(--v2-bg-soft, #F6F6F4);
	color: var(--v2-ink, #121512);
}

/* Ikona z zestawu klienta — plik jest już przebarwiony na `#6C9D7D`, więc
   wchodzi obrazem, nie maską: nie ma czego przekolorowywać. Ten sam rozmiar,
   co w railu mega menu (assets/css/mega-menu.css).                          */
#masthead .vetka-onas .vetka-onas__ikona {
	flex: none;
	width: 28px;
	height: 28px;
}

#masthead .vetka-onas .vetka-onas__text {
	/* Bez tego dłuższy opis rozpycha panel zamiast się złamać. */
	min-width: 0;
}

#masthead .vetka-onas .vetka-onas__title {
	display: block;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--v2-ink, #121512);
}

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

/* Pozycja bez strony docelowej — patrz mapa `urls` w inc/dropdown-o-nas/data.php.
   Wyszarzony tytuł jest jedyną różnicą: bez hoveru, bez kursora, bez linku.  */
#masthead .vetka-onas .vetka-onas__item--wkrotce .vetka-onas__title {
	color: var(--v2-ink-3, #6B7268);
}

/* =========================================================================
   STOPKA PANELU
   =========================================================================
   Godziny otwarcia — to po nie sięgano do usuniętej pozycji „Timetable".
   Element informacyjny, nie link.
   ========================================================================= */
#masthead .vetka-onas .vetka-onas__status {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 22px;
	border-top: 1px solid var(--v2-line, #E4E6E1);
	border-radius: 0 0 var(--v2-r-lg, 8px) var(--v2-r-lg, 8px);
	background-color: var(--v2-bg-soft, #F6F6F4);
	font-size: 13px;
	font-weight: 500;
	line-height: 1.4;
	color: var(--v2-ink, #121512);
}

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

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

/* =========================================================================
   AKORDEON W SZUFLADZIE MENU (< 1200px)
   =========================================================================
   Przeniesiony do assets/css/v2/menu-mobilne.css — patrz komentarz w
   assets/css/mega-menu.css. Oba panele są w szufladzie tym samym
   akordeonem, więc ich mobilna oprawa stoi w jednym pliku.
   ========================================================================= */

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

	#masthead .vetka-onas,
	#masthead .vetka-onas * {
		transition: none !important;
	}
}