/**
 * Naglowek - wersja minimalistyczna (POPRAWKA 2 sekcja 6).
 *
 * Pisany mobile-first: reguly bazowe opisuja telefon, a kolejne @media
 * DODAJA elementy na szerszych ekranach. Na telefonie w naglowku zostaje
 * logo, jezyk, motyw i przycisk menu - nic wiecej.
 *
 * Tlo jest przezroczyste, dopoki uzytkownik nie przewinie. Naglowek lezy
 * wtedy na wideo hero i ma byc ledwo obecny. Klase .is-compact dokłada
 * initStickyHeader() i dopiero ona wlacza rozmycie oraz obramowanie.
 * Podstrony bez hero dostaja .site-header--solid juz z PHP - tam nie ma
 * na czym lezec, wiec tlo musi byc od pierwszej klatki.
 */

.site-header {
	position: sticky;
	top: var(--admin-bar-offset);
	/* Nad nakladka menu - dzieki temu przy otwartym panelu dziala przycisk
	   zamykania, logo i przelaczniki. Patrz skala warstw w tokens.css. */
	z-index: var(--z-header);
	background: transparent;
	border-bottom: 1px solid transparent;
	/* Animujemy WYLACZNIE wlasciwosci malowane (tlo, obramowanie, rozmycie).
	   Wysokosc jest stala celowo: naglowek jest sticky, wiec kazda zmiana jego
	   wysokosci przesuwa cala tresc pod spodem. Animowana przez 350 ms dawalaby
	   ~20 klatek przeliczania ukladu przy przewijaniu i unieważniała pozycje
	   przypietych sekcji (ScrollTrigger). "Kompaktowanie" z BRIEF.md sekcja 6
	   realizujemy wiec wizualnie - tlem i zmniejszeniem logo transformem. */
	transition: background-color 0.35s ease, border-color 0.35s ease,
		backdrop-filter 0.35s ease;
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	height: 64px;
}

/* Stan po przewinieciu oraz podstrony bez hero. */
.site-header.is-compact,
.site-header--solid {
	background: color-mix(in srgb, var(--color-bg) 72%, transparent);
	backdrop-filter: blur(16px) saturate(1.4);
	-webkit-backdrop-filter: blur(16px) saturate(1.4);
	border-bottom-color: var(--color-border);
}

/* Logo kurczy sie transformem - zero wplywu na uklad strony. */
.site-header.is-compact .logo {
	transform: scale(0.88);
}

/* ---------- Logo ---------- */
.site-header__logo {
	display: flex;
	align-items: center;
	flex-shrink: 0;
	color: var(--color-text);
}

.logo {
	display: block;
	width: 58px;
	height: 29px;
	transform-origin: left center;
	transition: opacity 0.2s ease, transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.site-header__logo:hover .logo {
	opacity: 0.75;
}

/* ---------- Nawigacja ---------- */
.nav--desktop {
	display: none; /* mobile-first: pojawia sie dopiero od 900px */
}

.nav__list {
	display: flex;
	align-items: center;
	gap: var(--space-8);
	list-style: none;
	margin: 0;
	padding: 0;
}

.nav__link {
	position: relative;
	display: block;
	padding-block: var(--space-2);
	font-size: 0.875rem;
	font-weight: 450;
	letter-spacing: 0.01em;
	color: var(--color-text-muted);
	transition: color 0.22s ease;
}

/* Podkreslenie rozwijane od srodka - drobiazg, ktory odroznia "lekki"
   naglowek od zwyklego paska linkow. */
.nav__link::after {
	content: "";
	position: absolute;
	left: 50%;
	right: 50%;
	bottom: 0;
	height: 1px;
	background: var(--color-accent);
	transition: left 0.28s cubic-bezier(0.4, 0, 0.2, 1), right 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav__link:hover,
.nav__link:focus-visible {
	color: var(--color-text);
}

.nav__link:hover::after,
.nav__link:focus-visible::after {
	left: 0;
	right: 0;
}

/* ---------- Prawa strona ---------- */
.site-header__actions {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	flex-shrink: 0;
}

.site-header__contact {
	display: none; /* mobile-first: od 900px */
	padding: 9px var(--space-5);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-pill);
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--color-text);
	white-space: nowrap;
	transition: border-color 0.22s ease, background-color 0.22s ease;
}

.site-header__contact:hover,
.site-header__contact:focus-visible {
	border-color: var(--color-accent);
	background: var(--color-accent-dim);
}

.theme-toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	flex-shrink: 0;
	padding: 0;
	background: transparent;
	border: 1px solid transparent;
	border-radius: 50%;
	color: var(--color-text-muted);
	line-height: 1;
	transition: color 0.22s ease, border-color 0.22s ease;
}

.theme-toggle:hover,
.theme-toggle:focus-visible {
	color: var(--color-text);
	border-color: var(--color-border);
}

.theme-toggle__icon--sun {
	display: none;
}

[data-theme="light"] .theme-toggle__icon--sun {
	display: block;
}

[data-theme="light"] .theme-toggle__icon--moon {
	display: none;
}

@media (min-width: 900px) {
	.site-header__inner {
		height: 76px;
	}
	.nav--desktop,
	.site-header__contact {
		display: block;
	}
	.logo {
		width: 66px;
		height: 33px;
	}
}

@media (min-width: 1280px) {
	.nav__list {
		gap: var(--space-10, 2.5rem);
	}
}

@media (prefers-reduced-motion: reduce) {
	.site-header,
	.site-header__inner,
	.nav__link,
	.nav__link::after,
	.logo,
	.site-header__contact,
	.theme-toggle {
		transition: none;
	}
}