/*
 * Nagłówek (80:157, 80:163, 80:226) i menu mobilne (80:724).
 * Desktop: wiersz 107 px + linia 1 px, logo 142 × 24,5, menu Poppins 500 14/21,7, odstęp 27,6.
 * ≤921 px: wiersz 48 px w ramce 16 px, przycisk menu 44 px, menu w <dialog>.
 *
 * Przyklejony (decyzja Rafała 2026-10-13, w Figmie go nie ma). Po przewinięciu wariant na
 * zdjęciu przechodzi w biały: tło, zielone logo, ciemne menu (klasa z naglowek.js).
 */

:root {
	--mm-naglowek-h: 108px; /* 107 + linia */
}

/* Kotwice menu nie chowają nagłówka pod przyklejonym paskiem. */
html {
	scroll-padding-top: var(--mm-naglowek-h);
}

/* Sticky, nie fixed: #page ma container-type, więc fixed liczyłby się od #page, nie od okna.
   top z paskiem admina, gdy WordPress go pokazuje. */
.mm-naglowek {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 10;
	border-bottom: 1px solid var(--mm-line-on-light);
	background-color: var(--mm-color-bg);
	transition: background-color var(--mm-transition), border-color var(--mm-transition), box-shadow var(--mm-transition);
}

.mm-naglowek--przewiniety {
	box-shadow: var(--mm-shadow);
}

.mm-naglowek__inner {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--mm-space-m);
	height: 107px;
	padding-top: 32px;
}

.mm-naglowek__logo {
	display: block;
	flex: none;
	line-height: 0;
}

.mm-naglowek__inner > .mm-naglowek__logo {
	display: grid;
	margin-top: 6.67px; /* logo 38,67 od góry, menu 32 */
}

.mm-logo {
	width: 142px;
	height: auto;
}

/* Oba logo w jednej komórce, przenikanie przy przewinięciu. Czytnik dostaje aria-label
   linku, więc dwa alt-y nie dublują nazwy. */
.mm-naglowek .mm-logo {
	grid-area: 1 / 1;
	transition: opacity var(--mm-transition);
}

.mm-naglowek .mm-logo--biale,
.mm-naglowek--na-zdjeciu:not(.mm-naglowek--przewiniety) .mm-logo--zielone {
	opacity: 0;
}

.mm-naglowek--na-zdjeciu:not(.mm-naglowek--przewiniety) .mm-logo--biale {
	opacity: 1;
}

/* Wariant na zdjęciu: nagłówek leży na pierwszej sekcji (hero), bez tła. Ujemny margines
   wciąga hero pod nagłówek, a sticky dalej działa. */
.mm-naglowek--na-zdjeciu {
	margin-bottom: calc(-1 * var(--mm-naglowek-h));
}

.mm-naglowek--na-zdjeciu:not(.mm-naglowek--przewiniety) {
	border-bottom-color: var(--mm-line-on-dark);
	background-color: transparent;
}

/* Menu: ta sama lista w pasku i w menu mobilnym, wygląd zależy od miejsca. */
.mm-menu {
	margin: 0;
	padding: 0;
	list-style: none;
}

.mm-naglowek__nav .mm-menu {
	display: flex;
	align-items: center;
	gap: 27.6px;
	min-height: 45.69px;
}

.mm-naglowek__nav .mm-menu a {
	color: var(--mm-color-nav);
	font-size: 0.875rem;
	font-weight: 500;
	line-height: var(--mm-line-normal);
	text-decoration: none;
	text-underline-offset: 4px;
	transition: color var(--mm-transition);
}

.mm-naglowek--na-zdjeciu:not(.mm-naglowek--przewiniety) .mm-naglowek__nav .mm-menu a {
	color: #fff;
}

/* Hover nie jest w projekcie: podkreślenie, kolor bez zmian. */
.mm-naglowek__nav .mm-menu a:hover {
	text-decoration: underline;
}

.mm-menu a:focus-visible,
.mm-naglowek__burger:focus-visible,
.mm-menu-mobilne__zamknij:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

/* Pozycja z klasą mm-cta: zielona pigułka 45,69 px (80:168). */
.mm-naglowek__nav .mm-menu .mm-cta a {
	display: inline-flex;
	align-items: center;
	height: 45.69px;
	padding: 0 19px;
	border-radius: var(--mm-radius-pill);
	background-color: var(--mm-color-primary);
	color: #fff;
	transition: background-color var(--mm-transition);
}

.mm-naglowek__nav .mm-menu .mm-cta a:hover {
	background-color: var(--mm-color-primary-hover);
	text-decoration: none;
}

/* Przycisk menu: koło 44 px, trzy kreski 20 × 2 co 5 px (80:507, 80:756). */
.mm-naglowek__burger {
	display: none;
	flex: none;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 5px;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid var(--mm-color-eyebrow);
	border-radius: 50%;
	background: none;
	color: var(--mm-color-eyebrow);
	cursor: pointer;
	transition: color var(--mm-transition), border-color var(--mm-transition);
}

.mm-naglowek--na-zdjeciu:not(.mm-naglowek--przewiniety) .mm-naglowek__burger {
	border-color: rgb(255 255 255 / 70%);
	color: #fff;
}

.mm-naglowek__kreska {
	display: block;
	width: 20px;
	height: 2px;
	background-color: currentColor;
}

@media (max-width: 921px) {
	:root {
		--mm-naglowek-h: 81px; /* 80 + linia */
	}

	.mm-naglowek__inner {
		align-items: center;
		height: 80px; /* 16 + 48 + 16 (80:748) */
		padding-top: 0;
	}

	.mm-naglowek__inner > .mm-naglowek__logo {
		margin-top: 0;
	}

	.mm-naglowek__nav {
		display: none;
	}

	.mm-naglowek__burger {
		display: flex;
	}

	/* Na zdjęciu w projekcie mobilnym nie ma linii (80:500). */
	.mm-naglowek--na-zdjeciu:not(.mm-naglowek--przewiniety) {
		border-bottom-color: transparent;
	}
}

/* Menu mobilne: panel u góry ekranu, pod nim przyciemnienie (80:723–80:746). */
.mm-menu-mobilne {
	inset: 0 0 auto;
	width: 100%;
	max-width: none;
	max-height: 100dvh;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: #fff;
	overflow-y: auto;
}

/* Otwieranie i zamykanie: panel zjeżdża z góry, tło się przyciemnia. allow-discrete
   trzyma <dialog> w warstwie górnej do końca animacji zamknięcia. Przeglądarka bez
   @starting-style otwiera menu od razu, bez ruchu. */
.mm-menu-mobilne,
.mm-menu-mobilne::backdrop {
	transition: display 300ms allow-discrete, overlay 300ms allow-discrete, background-color 300ms ease;
}

.mm-menu-mobilne::backdrop {
	background-color: transparent;
}

.mm-menu-mobilne[open]::backdrop {
	background-color: var(--mm-backdrop);
}

@starting-style {
	.mm-menu-mobilne[open]::backdrop {
		background-color: transparent;
	}
}

html:has(.mm-menu-mobilne[open]) {
	overflow: hidden;
}

.mm-menu-mobilne__panel {
	display: flex;
	flex-direction: column;
	gap: 24px;
	padding: 16px 16px 32px;
	background-color: var(--mm-color-heading);
	transform: translateY(-100%);
	transition: transform 300ms var(--mm-ease-out);
}

.mm-menu-mobilne[open] .mm-menu-mobilne__panel {
	transform: none;
}

@starting-style {
	.mm-menu-mobilne[open] .mm-menu-mobilne__panel {
		transform: translateY(-100%);
	}
}

.mm-menu-mobilne__gora {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 48px;
}

.mm-menu-mobilne__gora form {
	margin: 0;
	line-height: 0;
}

/* Zamknięcie: koło 44 px, krzyżyk z dwóch kresek 22 × 2 (80:732). */
.mm-menu-mobilne__zamknij {
	position: relative;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid rgb(255 255 255 / 70%);
	border-radius: 50%;
	background: none;
	color: #fff;
	cursor: pointer;
}

.mm-menu-mobilne__zamknij::before,
.mm-menu-mobilne__zamknij::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 22px;
	height: 2px;
	margin: -1px 0 0 -11px;
	background-color: currentColor;
	transform: rotate(45deg);
}

.mm-menu-mobilne__zamknij::after {
	transform: rotate(-45deg);
}

.mm-menu-mobilne .mm-menu a {
	display: flex;
	align-items: center;
	height: 62px;
	border-bottom: 1px solid var(--mm-line-menu);
	color: #fff;
	font-size: 1.25rem;
	font-weight: 500;
	line-height: 1.5;
	text-decoration: none;
}

/* Przycisk „Gdzie kupić” pod listą: 52 px na całą szerokość, 16/24 (80:745). */
.mm-menu-mobilne .mm-menu .mm-cta {
	margin-top: 24px;
}

.mm-menu-mobilne .mm-menu .mm-cta a {
	justify-content: center;
	height: 52px;
	border: 0;
	border-radius: var(--mm-radius-pill);
	background-color: var(--mm-color-primary);
	font-size: 1rem;
}

@media (prefers-reduced-motion: reduce) {
	.mm-naglowek,
	.mm-naglowek .mm-logo,
	.mm-naglowek__nav .mm-menu a,
	.mm-naglowek__burger,
	.mm-menu-mobilne,
	.mm-menu-mobilne::backdrop,
	.mm-menu-mobilne__panel {
		transition: none;
	}
}