/* Górny pasek nad nagłówkiem: tło, lekka przezroczystość, obramowanie i blur. */
.wcmw-topbar {
	position: relative;
	z-index: 1001;
	background:
		radial-gradient(circle at 8% 40%, rgba(183, 217, 167, 0.24), transparent 34%),
		radial-gradient(circle at 78% 34%, rgba(235, 177, 159, 0.20), transparent 36%),
		linear-gradient(
			90deg,
			rgba(251, 252, 246, 0.70) 0%,
			rgba(248, 252, 243, 0.62) 32%,
			rgba(255, 245, 239, 0.60) 66%,
			rgba(250, 238, 233, 0.66) 100%
		);
	border-bottom: 1px solid rgba(47, 47, 58, 0.0175);
	color: var(--wcmw-text);
	font-size: 14px;
	font-weight: 800;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}

/* Wewnętrzny układ topbara: tekst po lewej, ikonki po prawej. */
.wcmw-topbar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	min-height: 38px;
}

/* Tekst w topbarze: przygaszony kolor, pogrubienie i brak łamania wiersza. */
.wcmw-topbar__text {
	color: rgba(47, 47, 58, 0.66);
	font-weight: 800;
	white-space: nowrap;
}

/* Kontener na ikonki społecznościowe w topbarze. */
.wcmw-topbar__icons {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	min-width: 0;
}

/* Reset i ustawienie listy ikon społecznościowych z wtyczki WPZOOM / podobnych. */
.wcmw-topbar__icons ul,
.wcmw-topbar__icons .wpzoom-social-icons-list,
.wcmw-topbar__icons .zoom-social-icons-list {
	display: flex !important;
	align-items: center;
	justify-content: flex-end;
	gap: 8px;
	flex-wrap: wrap;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
}

/* Reset pojedynczych elementów listy ikon. */
.wcmw-topbar__icons li {
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

/* Styl linków ikon społecznościowych. */
.wcmw-topbar__icons a {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	text-decoration: none !important;
	box-shadow: none !important;
	border: 0 !important;
	transition: transform 0.18s ease;
}

/* Delikatny efekt uniesienia ikonki po najechaniu. */
.wcmw-topbar__icons a:hover {
	transform: translateY(-1px);
}

/* Główny nagłówek strony: sticky, tło pastelowe, cień, blur i obramowanie. */
.site-header {
	position: sticky;
	top: 0;
	z-index: 1000;
	background:
		radial-gradient(circle at 8% 30%, rgba(183, 217, 167, 0.26), transparent 34%),
		radial-gradient(circle at 74% 22%, rgba(235, 177, 159, 0.22), transparent 36%),
		linear-gradient(
			90deg,
			rgba(251, 252, 246, 0.76) 0%,
			rgba(248, 252, 243, 0.68) 32%,
			rgba(255, 245, 239, 0.66) 66%,
			rgba(250, 238, 233, 0.72) 100%
		);
	border-bottom: 1px solid rgba(47, 47, 58, 0.02);
	box-shadow: 0 8px 22px rgba(58, 45, 84, 0.028);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
}

/* Korekta sticky headera, gdy zalogowany administrator ma pasek WP u góry. */
body.admin-bar .site-header {
	top: 32px;
}

/* Wewnętrzny kontener nagłówka: szerokość zgodna z naszym kontenerem, flex, logo po lewej, menu po prawej. */
.site-header .inside-header {
	width: min(var(--wcmw-container), calc(100% - 32px));
	margin-inline: auto;
	padding: 14px 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
}

/* Logo / branding nie ma się kurczyć ani rozpychać flexem. */
.site-branding,
.site-logo {
	flex: 0 0 auto;
}

/* Styl tekstowego logo lub linku logo. */
.site-branding .main-title,
.site-branding .main-title a,
.site-logo a {
	color: var(--wcmw-text);
	text-decoration: none;
	font-weight: 950;
	letter-spacing: -0.035em;
}

/* Główna nawigacja ma zajmować dostępne miejsce i mieć przezroczyste tło. */
.main-navigation {
	flex: 1 1 auto;
	background: transparent !important;
}

/* Wewnętrzny układ nawigacji GeneratePress: ustawienie elementów do prawej. */
.main-navigation .inside-navigation {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	background: transparent !important;
}

/* Lista menu: elementy w jednym rzędzie, wyrównane do prawej, z małym odstępem. */
.main-navigation .main-nav > ul {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 4px;
}

/* Usuwa tła z elementów menu, żeby nie przebijały stylów GeneratePress. */
.main-navigation .main-nav ul li {
	background: transparent !important;
}

/* Podstawowy wygląd linków w menu. */
.main-navigation .main-nav ul li a {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 38px;
	padding: 8px 11px;
	border-radius: 999px;
	color: rgba(47, 47, 58, 0.76);
	font-size: 15px;
	font-weight: 850;
	line-height: 1.1;
	text-decoration: none;
	background: transparent;
	transition:
		background-color 0.18s ease,
		color 0.18s ease,
		transform 0.18s ease,
		box-shadow 0.18s ease;
}

/* Efekt hover dla zwykłych linków menu: gradientowy tekst, ale bez aktywnych pozycji i bez naszych ikonek/szukajki. */
.main-navigation .main-nav ul li:not(.wcmw-menu-action-item):not(.wcmw-menu-search-wrap):not(.current-menu-item):not(.current-menu-ancestor):not(.current_page_item) > a:hover {
	color: transparent;
	background:
		linear-gradient(
			135deg,
			#6f9f5f 0%,
			#9d8b68 42%,
			#c9786c 100%
		);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	transform: translateY(-1px);
}

/* Aktywna pozycja menu: aktualna strona, aktualny dział lub przodek w menu. */
.main-navigation .main-nav ul li.current-menu-item > a,
.main-navigation .main-nav ul li.current-menu-ancestor > a,
.main-navigation .main-nav ul li.current_page_item > a,
.main-navigation .main-nav ul li.wcmw-current-dzial > a {
	color: #253026;
	background: rgba(183, 217, 167, 0.62);
	box-shadow:
		0 7px 16px rgba(58, 45, 84, 0.055),
		inset 0 1px 0 rgba(255, 255, 255, 0.52);
}

/* Formularz szukajki w menu: stała szerokość i wysokość na desktopie. */
.wcmw-header-search {
	position: relative;
	width: 170px;
	height: 38px;
	display: flex;
	align-items: center;
}

/* Pole wpisywania w szukajce. */
.wcmw-header-search input[type="search"] {
	width: 100%;
	height: 38px;
	margin: 0;
	padding: 0 42px 0 14px;
	border: 1px solid rgba(47, 47, 58, 0.055);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.70);
	color: var(--wcmw-text);
	font-size: 14px;
	outline: none;
	box-shadow: 0 6px 16px rgba(58, 45, 84, 0.03);
}

/* Przycisk szukania w polu search: okrągły przycisk po prawej stronie inputa. */
.wcmw-header-search button {
	position: absolute;
	top: 3px;
	right: 3px;
	width: 32px;
	height: 32px;
	min-width: 32px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background:
		linear-gradient(
			135deg,
			rgba(183, 217, 167, 0.82),
			rgba(235, 177, 159, 0.66)
		);
	color: var(--wcmw-text);
	font-size: 0;
	line-height: 1;
	cursor: pointer;
}

/* Ikonka lupy w przycisku szukajki. */
.wcmw-header-search button::before {
	content: "🔎";
	font-size: 13px;
}

/* Elementy akcji w menu, czyli nasze ikonki: konto, logowanie, koszyk. */
.main-navigation .main-nav ul li.wcmw-menu-action-item {
	display: flex;
	align-items: center;
	margin-left: 4px;
}

/* Oddzielenie ikonki konta/logowania pionową kreską od reszty menu. */
.main-navigation .main-nav ul li.wcmw-menu-action-item--account,
.main-navigation .main-nav ul li.wcmw-menu-action-item--login {
	padding-left: 8px;
	border-left: 1px solid rgba(47, 47, 58, 0.045);
}

/* Wygląd okrągłych przycisków akcji: konto i koszyk. */
.main-navigation .main-nav ul li.wcmw-menu-action-item > a.wcmw-header-action {
	width: 38px;
	height: 38px;
	min-width: 38px;
	min-height: 38px;
	padding: 0;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.62);
	color: rgba(47, 47, 58, 0.78);
	box-shadow: 0 6px 16px rgba(58, 45, 84, 0.03);
	font-size: 16px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* Ukryty tekst etykiety dla czytników ekranu: widoczna zostaje tylko ikonka. */
.wcmw-header-action__label {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Styl przycisku hamburgera GeneratePress. */
.menu-toggle,
.main-navigation .menu-toggle {
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.72) !important;
	color: var(--wcmw-text) !important;
	box-shadow: 0 6px 16px rgba(58, 45, 84, 0.035);
}

/* Zakres pośredni: chowamy nasze dodatki w menu, żeby menu nie łamało się na dwa rzędy przed trybem mobilnym. */
@media (min-width: 913px) and (max-width: 1120px) {
	.main-navigation .wcmw-menu-search-wrap,
	.main-navigation .wcmw-menu-action-item {
		display: none !important;
	}
}

/* Widok tablet/mobile: korekty dla nagłówka i rozwijanego menu. */
@media (max-width: 912px) {

	/* Korekta pozycji sticky headera przy zalogowanym administratorze na mniejszych ekranach. */
	body.admin-bar .site-header,
	.admin-bar .site-header {
		top: 46px;
	}

	/* Niższy i ciaśniejszy topbar na tablet/mobile. */
	.wcmw-topbar__inner {
		min-height: 36px;
		padding: 6px 0;
	}

	/* Mniejszy pionowy odstęp w głównym nagłówku na tablet/mobile. */
	.site-header .inside-header {
		min-height: 68px;
		padding: 12px 0;
	}

	/* Wygląd rozwiniętego menu mobilnego: biała karta z zaokrągleniem i cieniem. */
	.main-navigation.toggled .main-nav > ul {
		margin-top: 12px;
		background: rgba(255, 255, 255, 0.94);
		border-radius: 24px;
		padding: 14px;
		box-shadow: 0 18px 45px rgba(58, 45, 84, 0.12);
	}

	/* Linki w rozwiniętym menu zajmują pełną szerokość i są wyrównane do lewej. */
	.main-navigation.toggled .main-nav ul li a {
		width: 100%;
		justify-content: flex-start;
		padding: 12px 14px;
	}

	/* Szukajka w rozwiniętym menu mobilnym pokazuje się jako pełny blok. */
	.main-navigation.toggled .main-nav ul li.wcmw-menu-search-wrap {
		display: block;
		margin: 10px 0 8px;
		width: 100%;
	}

	/* Formularz szukajki w menu mobilnym ma pełną szerokość. */
	.main-navigation.toggled .wcmw-header-search {
		width: 100%;
		height: 42px;
	}

	/* Pole wpisywania w szukajce mobilnej jest trochę wyższe niż na desktopie. */
	.main-navigation.toggled .wcmw-header-search input {
		height: 42px;
	}
}