/*
 * Header navigation, mobile-first. Wymiary z Figmy (patrz --u w tokens.css):
 * poniżej 900px logo + hamburger i pełnoekranowy overlay menu, od 900px
 * logo, linki, ikony konta/koszyka i przełącznik języka w jednym rzędzie.
 */

.site-nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 100%;
}

/* Logo: mobile 79x16, desktop 143x29. z-index jak .site-nav__toggle — logo
   zostaje widoczne nad otwartym overlayem menu. */
.site-nav__logo {
	position: relative;
	z-index: 1001;
	display: block;
	flex: none;
	width: calc(79 * var(--u));
}

.site-nav__logo svg {
	width: 100%;
	height: auto;
}

/* Hamburger: pole 40x40, trzy kreski na obszarze 27x18 (Figma mobile). */
.site-nav__toggle {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: flex-end;
	width: calc(40 * var(--u));
	height: calc(40 * var(--u));
	padding: calc(11 * var(--u)) calc(6.5 * var(--u));
	/* position:relative dodane, bo z-index (patrz hierarchia warstw przy
	   .site-nav__menu) nie ma żadnego efektu na niepozycjonowanym elemencie —
	   bez tego przycisk zostawał wizualnie/klikalnie POD otwartym overlayem. */
	position: relative;
	z-index: 1001;
}

.site-nav__toggle-bar {
	display: block;
	width: 100%;
	height: calc(1.5 * var(--u));
	background-color: currentColor;
	transition: width 0.2s ease;
}

.site-nav.is-open .site-nav__toggle-bar:nth-child(2) {
	width: 70%;
}

/*
 * Hierarchia warstw mobile menu — motyw nie ma tokenów/zmiennych CSS dla
 * z-index (sprawdzone: brak jakiegokolwiek --z-* w tokens.css), więc
 * wartości niżej są jawną, jednorazową, udokumentowaną skalą lokalną dla
 * TEGO komponentu — nie łatką pod konkretną treść/wtyczkę:
 *
 *   treść strony (dowolny z-index wewnątrz .site-main)
 *     < 1000 — .site-nav__menu (overlay mobile nawigacji; .site-nav__aside jest w nim)
 *       < 1001 — .site-nav__logo / .site-nav__toggle
 *
 * 1000 na overlayu jest konieczne, bo position:fixed samo w sobie NIE
 * gwarantuje bycia "na wierzchu" — bez jawnego z-index (auto) overlay
 * przegrywa z KAŻDYM elementem strony, który ma choćby z-index:1 (np.
 * dialog/modal wtyczki WooCommerce renderujący się w .site-main).
 * 1001 na toggle musi być WYŻEJ niż 1000, żeby przycisk hamburgera został
 * widoczny i klikalny, gdy overlay jest otwarty — jedyny sposób zamknięcia
 * menu dotykiem to ponowne kliknięcie tego samego przycisku (patrz
 * assets/js/main.js, brak obsługi "klik poza menu").
 */
.site-nav__menu {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	background-color: var(--color-brand-red); /* ten sam token co .site-header, żeby header + overlay tworzyły jedną czerwoną powierzchnię */
	color: var(--color-white);
	padding: var(--space-9) var(--space-6) var(--space-6);
	transform: translateX(100%);
	transition: transform 0.25s ease;
	overflow-y: auto;
}

.site-nav.is-open .site-nav__menu {
	transform: translateX(0);
}

/* Blokada scrolla dokumentu tylko na czas otwartego mobile menu — klasa
   dodawana/usuwana na <body> w openMenu()/closeMenu() (assets/js/main.js),
   więc wszystkie 3 sposoby zamknięcia (toggle/link/Escape) automatycznie ją
   zdejmują. Scoped do <900px, żeby desktop (gdzie toggle/overlay się nie
   renderują) nie mógł tego odziedziczyć nawet przy nietypowym resize. */
@media (max-width: 899px) {
	body.menu-open {
		overflow: hidden;
	}
}

.site-nav__list {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-5);
}

.site-nav__list a {
	font-size: var(--text-nav);
	font-weight: var(--font-weight-book);
}

.site-nav__aside {
	display: flex;
	align-items: center;
	gap: var(--space-5);
}

.site-nav__lang {
	display: flex;
	align-items: center;
	gap: 0.3em;
	font-size: var(--text-nav);
	font-weight: var(--font-weight-book);
}

.site-nav__icon-link {
	display: inline-flex;
	width: 1.75rem;
	height: 1.75rem;
}

.site-nav__icon-link svg {
	width: 100%;
	height: 100%;
}

/*
 * Mobile: w pasku tylko logo + hamburger (Figma). Otwarte menu (Figma nie ma
 * projektu): od góry, pod paskiem nagłówka (50u) - linki, separator, grupa
 * konto / koszyk / język. Jedna lewa oś z logo (17u, jak padding nagłówka),
 * zwykły przepływ - nic nie jest przypięte do dołu ekranu.
 *
 * Rytm 32px: tekst linków co 32px (gap 16 + 2 x 8 obszaru klikalnego),
 * separator 32px pod ostatnim linkiem i 32px nad ikonami. Home zaczyna się
 * ok. 98-108px od góry ekranu (50u nagłówka + 40px + 8px obszaru linku).
 * Obszary klikalne mają padding pionowy (ikony 44x44), a lewa krawędź treści
 * zostaje na osi logo. Safe area: env() = 0, dopóki viewport nie ma
 * viewport-fit=cover (bez niego przeglądarka sama omija wcięcia ekranu).
 */
@media (max-width: 899px) {
	.site-nav__menu {
		flex-direction: column;
		align-items: flex-start;
		padding:
			calc(50 * var(--u) + var(--space-6) + var(--space-2) + env(safe-area-inset-top, 0px))
			calc(17 * var(--u) + env(safe-area-inset-right, 0px))
			calc(var(--space-7) + env(safe-area-inset-bottom, 0px))
			calc(17 * var(--u) + env(safe-area-inset-left, 0px));
	}

	.site-nav__list {
		gap: var(--space-4);
	}

	.site-nav__list a {
		display: block;
		padding-block: var(--space-2);
	}

	.site-nav__aside {
		align-self: stretch;
		gap: var(--space-4);
		margin-top: var(--space-5);
		padding-top: var(--space-5);
		border-top: 1px solid rgba(255, 255, 255, 0.35);
	}

	/* 44x44 z ikoną 28x28 w środku; pierwsza ikona cofnięta o padding, żeby
	   rysunek stał na osi linków. */
	.site-nav__icon-link {
		width: calc(1.75rem + 2 * var(--space-2));
		height: calc(1.75rem + 2 * var(--space-2));
		padding: var(--space-2);
	}

	.site-nav__aside > :first-child {
		margin-left: calc(-1 * var(--space-2));
	}

	.site-nav__lang-link {
		display: inline-block;
		padding-block: var(--space-2);
	}

	/* Licznik w tym samym miejscu względem ikony co bez paddingu (selektor
	   z rodzicem - bazowa reguła licznika stoi niżej w pliku). */
	.site-nav__icon-link--cart .site-nav__cart-count {
		top: calc(var(--space-2) - 0.3rem);
		right: calc(var(--space-2) - 0.35rem);
	}
}

/*
 * Licznik sztuk w koszyku — krążek nad ikoną, pozycjonowany względem samego
 * linku koszyka (modyfikator, nie .site-nav__icon-link) tak, by nie ruszać
 * linku konta. [hidden] jawnie nadpisany na display:none, bo bez tego
 * reguła display niżej (ta sama specyficzność co domyślne [hidden] w
 * arkuszu UA, ale ładowana później) wygrywałaby i licznik zostawałby
 * widoczny przy pustym koszyku.
 */
.site-nav__icon-link--cart {
	position: relative;
}

.site-nav__cart-count {
	position: absolute;
	top: -0.3rem;
	right: -0.35rem;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 1.1rem;
	height: 1.1rem;
	padding: 0 0.25rem;
	border-radius: 999px;
	background-color: var(--color-white);
	color: var(--color-brand-red);
	font-size: 0.625rem;
	font-weight: 700;
	line-height: 1;
}

.site-nav__cart-count[hidden] {
	display: none;
}

/*
 * Desktop (Figma 1728): logo 143x29, pierwszy link 82px za logo, linki co
 * 70px, Stolzl Book 20/38. Ikony 28x28: konto -> koszyk 23px, koszyk ->
 * języki 58px.
 */
@media (min-width: 900px) {
	.site-nav {
		justify-content: flex-start;
	}

	.site-nav__logo {
		width: calc(143 * var(--u));
	}

	.site-nav__toggle {
		display: none;
	}

	/* flex: 1 - .site-nav__aside jest w środku menu, a margin-left:auto ma go
	   dosunąć do prawej krawędzi paska, jak wcześniej. */
	.site-nav__menu {
		flex: 1;
		position: static;
		background: none;
		color: inherit;
		padding: 0;
		margin-left: calc(82 * var(--u));
		transform: none;
		transition: none;
		overflow: visible;
	}

	.site-nav__list {
		flex-direction: row;
		align-items: center;
		gap: calc(70 * var(--u));
	}

	.site-nav__list a,
	.site-nav__lang {
		font-size: calc(20 * var(--u));
		line-height: calc(38 * var(--u));
	}

	/* Podkreślenie aktywnej pozycji menu (Figma: linia 0.8px pod "Shop").
	   Na stronie produktu WordPress oznacza "Shop" klasą current_page_parent,
	   nie current-menu-item - w Figmie PDP "Shop" też jest podkreślony. */
	.site-nav__list .current-menu-item > a,
	.site-nav__list .current_page_parent > a,
	.site-nav__list a:hover,
	.site-nav__list a:focus-visible {
		text-decoration: underline;
		text-decoration-thickness: 0.8px;
		text-underline-offset: calc(6 * var(--u));
	}

	.site-nav__aside {
		margin-left: auto;
		gap: calc(23 * var(--u));
	}

	.site-nav__icon-link {
		width: calc(28 * var(--u));
		height: calc(28 * var(--u));
	}

	.site-nav__lang {
		margin-left: calc(35 * var(--u));
	}
}