/*
 * Header — pozycjonowanie (sticky/nakładka na hero), zachowanie przy scrollu,
 * tło i dwa warianty logo. Kolory/rozmiary linków nawigacji i przycisków-
 * -ikon są w osobnych plikach (navigation.css, header-icons.css).
 *
 * Sticky musi siedzieć na zewnętrznym wrapperze template-parta (pełna
 * wysokość strony), a nie na .site-header — inaczej kontener sticky ma
 * dokładnie taką samą wysokość jak jego zawartość i nie ma się gdzie
 * "przykleić".
 *
 * Na stronach z hero header startuje jako nakładka (position: absolute, żeby
 * nie zajmował miejsca w layoucie) i dopiero po przewinięciu poza zdjęcie
 * (html.is-scrolled, ustawiane przez assets/js/header.js) zamienia się w
 * przypięty position: fixed — żeby nawigacja została dostępna przy scrollu.
 */
header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 40;
	/* Miękkie wyhamowanie (ease-out o długim ogonie) zamiast liniowego ease —
	 * pasek "wpływa" na miejsce i chowa się bez szarpnięcia. */
	transition: transform 0.4s cubic-bezier(0.32, 0.72, 0, 1);
}

body.has-hero-header header.wp-block-template-part {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
}

html.is-scrolled body.has-hero-header header.wp-block-template-part {
	position: fixed;
}

/* Przewijanie w dół poniżej wysokości samego paska (próg pilnuje
 * assets/js/header.js) — pasek chowa się nad krawędzią ekranu, żeby oddać
 * całą wysokość treści. Przy przewijaniu w górę wraca (klasa zdejmowana).
 *
 * Tylko od 783px wzwyż: na mobile header ma być zawsze widoczny/sticky,
 * nigdy się nie chować — mniej ruchu na małym ekranie, nawigacja zawsze pod
 * ręką. Ten sam próg co chowanie telefonu/social w header-icons.css. */
@media (min-width: 783px) {
	html.is-header-hidden header.wp-block-template-part {
		transform: translateY(-100%);
	}
}

@media (prefers-reduced-motion: reduce) {
	header.wp-block-template-part {
		transition: none;
	}
}

/* Zalogowany użytkownik widzi u góry pasek admina WordPressa (#wpadminbar) —
 * nasz sticky/fixed header musi się zatrzymywać pod nim, a nie pod nim
 * znikać. WP sam wystawia zmienną --wp-admin--admin-bar--height (32px na
 * desktopie, 46px ≤782px).
 *
 * Poniżej 601px pasek admina przestaje być position:fixed i staje się
 * position:absolute (przewija się razem ze stroną) — ale to nie znaczy, że
 * offset jest tam zbędny! Nadal siedzi na samej górze DOKUMENTU (y=0..46),
 * dokładnie tam gdzie zaczyna się nasz header na stronach z hero
 * (position:absolute, ten sam punkt odniesienia) — bez tej reguły admin bar
 * (wyższy z-index) rysuje się NA WIERZCHU górnej części nagłówka/logo,
 * wizualnie je "ucinając". Na zwykłych stronach (position:sticky) problemu
 * nie ma, bo sticky w spoczynku i tak siedzi w normalnym flow, popchnięty
 * przez html.admin-bar w dół razem z resztą treści.
 */
@media (min-width: 601px) {
	body.admin-bar header.wp-block-template-part {
		top: var(--wp-admin--admin-bar--height, 32px);
	}
}

body.admin-bar.has-hero-header header.wp-block-template-part {
	top: var(--wp-admin--admin-bar--height, 32px);
}

/* ...ale po przewinięciu nagłówek na hero jest position:fixed (liczony od
 * okna, nie od dokumentu), a pasek admina poniżej 601px odjechał już razem
 * ze stroną — offset zostawiłby 46px szpary nad paskiem, przez którą
 * prześwituje treść. Przypięty nagłówek ma wtedy stać przy samej górze. */
@media (max-width: 600px) {
	html.is-scrolled body.admin-bar.has-hero-header header.wp-block-template-part {
		top: 0;
	}
}

/* Dwa warianty nagłówka, wybierane wyłącznie po typie strony (body.has-hero-header),
 * NIE po scrollu — to świadomy wybór: strony z sekcją hero na starcie mają zawsze
 * bezbarwny, przezroczysty nagłówek z jasnym logo/tekstem, a wszystkie pozostałe
 * strony zawsze pełny, biały pasek. Scroll (html.is-scrolled, assets/js/header.js)
 * odpowiada już tylko za cień i — na hero — za przypięcie nagłówka do góry po
 * przewinięciu poza zdjęcie (position: fixed, wyżej), nie za kolor. */
.site-header {
	/* 80px wysokości przy logo 45px — jak na foto-lady.pl (Kadence). */
	padding-top: 17.5px;
	padding-bottom: 17.5px;
	background-color: var(--wp--preset--color--white);
	transition: box-shadow 0.3s ease, background-color 0.3s ease;
}

.site-header > .wp-block-group {
	padding-left: 1.5rem;
	padding-right: 1.5rem;
}

.site-header.is-scrolled {
	box-shadow: 0 8px 24px -14px rgba(24, 22, 20, 0.35);
}

body.has-hero-header .site-header {
	background-color: transparent;
	box-shadow: none;
}

/* templates/page(-no-title).html dają <main> padding-top: 3rem, żeby zwykła
 * treść nie zaczynała się pod krawędzią ekranu. Na stronach z hero to ten
 * sam odstęp tworzy szparę między górą strony a zdjęciem hero — nad nim
 * widać zwykłe tło strony zamiast zdjęcia, mimo że header (position:
 * absolute) nakłada się tylko na sam hero. Na tych stronach hero ma sięgać
 * do samej góry, więc zerujemy padding-top wrappera <main>. */
body.has-hero-header main.wp-block-group {
	/* !important: nadpisujemy inline style="padding-top:3rem" wygenerowany
	 * przez templates/page(-no-title).html — inline zawsze wygrywa z
	 * zewnętrznym arkuszem bez !important, niezależnie od specyficzności. */
	padding-top: 0 !important;
	/* Globalna reguła WP dla layoutu "constrained" dodaje 1.5rem margin-top
	 * każdemu dziecku poza :first-child — a :first-child w .wp-site-blocks to
	 * <header> (mimo position:absolute nadal liczy się strukturalnie), nie
	 * <main>. Zostaje więc dodatkowa szpara nad hero, którą trzeba zerować
	 * osobno od paddingu. */
	margin-top: 0;
}

/* Po przewinięciu W GÓRĘ (html.is-header-pinned) pasek na stronie z hero
 * wraca w wersji takiej jak na stronach bez hero: białe tło, ciemne logo
 * i ciemne linki (kolory linków — zob. navigation.css). Sam nie leży już
 * wtedy na zdjęciu, więc jasny wariant byłby nieczytelny. */
html.is-header-pinned body.has-hero-header .site-header {
	background-color: var(--wp--preset--color--white);
	box-shadow: 0 8px 24px -14px rgba(24, 22, 20, 0.35);
}

/* Dwa warianty logo renderowane naraz na stronach z hero (zob.
 * fotolady_render_site_logo() w functions.php) — przełączamy je tutaj,
 * bo wybór zależy od pozycji scrolla, a nie od tego, co wie PHP. */
body.has-hero-header .fotolady-logo--dark {
	display: none;
}

html.is-header-pinned body.has-hero-header .fotolady-logo--light {
	display: none;
}

html.is-header-pinned body.has-hero-header .fotolady-logo--dark {
	display: block;
}

/* Na mobile logo (domyślnie ok. 200px szerokości, zob. width w
 * parts/header.html) robi się nieproporcjonalnie duże na wąskim pasku —
 * lekko zmniejszamy, zachowując proporcje (height:auto, oryginalne
 * width/height w HTML tylko podpowiadają aspect-ratio). */
@media (max-width: 782px) {
	.wp-block-site-logo img {
		width: 186px;
		height: auto;
	}
}

/* --- Wyszukiwarka (blok fotolady/search-toggle) -----------------------
 * Lupa jak ikony kontaktowe; pasek z polem rozwija się pod nagłówkiem na
 * całą szerokość (header.wp-block-template-part jest pozycjonowany). */
.fotolady-search {
	display: flex;
	align-items: center;
	--fotolady-icon-size: 34px;
	--fotolady-icon-glyph: 16px;
}

/* Tuż obok ikon kontaktowych (5px jak między nimi), nie w odstępie menu. */
@media (min-width: 1025px) {
	.site-header__nav > .fotolady-contact-icons + .fotolady-search,
	.site-header__nav > .wp-block-fotolady-contact-icons + .wp-block-fotolady-search-toggle {
		margin-left: calc(5px - 1.5rem);
	}
}

.fotolady-search__toggle {
	padding: 0;
	border: 0;
	cursor: pointer;
}

/* Lupa to kontur — bez wypełnienia z contact-icons.css. */
:root .fotolady-icon-btn.fotolady-search__toggle svg {
	fill: none;
	stroke-width: 2.4;
}

.fotolady-search.is-open .fotolady-search__toggle,
.fotolady-search__toggle:is(:hover, :focus-visible) {
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--ink);
}

.fotolady-search__panel {
	position: absolute;
	top: 100%;
	right: 0;
	left: 0;
	z-index: 5;
	padding: 1.1rem max(1.5rem, calc((100% - 1290px) / 2)) 1rem;
	border-top: 1px solid var(--wp--preset--color--sand);
	background-color: var(--wp--preset--color--white);
	box-shadow: 0 18px 30px -18px rgba(24, 22, 20, 0.35);
	animation: fotolady-search-in 0.25s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.fotolady-search__panel[hidden] {
	display: none;
}

@keyframes fotolady-search-in {
	from {
		opacity: 0;
		transform: translateY(-8px);
	}
}

.fotolady-search__form {
	position: relative;
	display: flex;
	gap: 0.6rem;
	align-items: center;
	max-width: 1290px;
	margin: 0 auto;
}

.fotolady-search__icon {
	position: absolute;
	left: 1rem;
	width: 18px;
	height: 18px;
	color: var(--wp--preset--color--muted);
	pointer-events: none;
}

.fotolady-search__form input[type="search"] {
	flex: 1;
	min-width: 0;
	padding: 0.8rem 1rem 0.8rem 2.8rem;
	border: 1.5px solid rgba(26, 26, 30, 0.14);
	border-radius: 3px;
	background-color: var(--wp--preset--color--paper);
	color: var(--wp--preset--color--ink);
	font: inherit;
	font-size: 1rem;
}

.fotolady-search__form input[type="search"]:focus {
	border-color: var(--wp--preset--color--accent);
	background-color: var(--wp--preset--color--white);
	outline: none;
}

.fotolady-search__submit {
	padding: 0.8rem 1.4rem;
	border: 0;
	border-radius: 3px;
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--ink);
	font: inherit;
	font-weight: 700;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.fotolady-search__submit:is(:hover, :focus-visible) {
	background-color: var(--wp--preset--color--terracotta);
}

.fotolady-search__close {
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--wp--preset--color--ink);
	font-size: 1.6rem;
	line-height: 1;
	cursor: pointer;
}

.fotolady-search__close:is(:hover, :focus-visible) {
	color: var(--wp--preset--color--accent);
}

.fotolady-search__hints {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem 0.5rem;
	align-items: center;
	max-width: 1290px;
	margin: 0.75rem auto 0;
	color: var(--wp--preset--color--muted);
	font-size: 0.82rem;
}

.fotolady-search__hints a {
	padding: 0.25em 0.8em;
	border: 1px solid rgba(26, 26, 30, 0.14);
	border-radius: 99px;
	color: var(--wp--preset--color--ink);
	font-weight: 600;
	text-decoration: none;
}

.fotolady-search__hints a:is(:hover, :focus-visible) {
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent);
}

/* Na telefonie lupa obok hamburgera (przed nim); przy otwartym panelu menu
 * znika jak ikony kontaktowe. */
@media (max-width: 1024px) {
	.site-header__nav > .fotolady-search {
		order: -1;
	}
}

html.has-modal-open .site-header__nav > .fotolady-search {
	visibility: hidden;
}

@media (max-width: 600px) {
	.fotolady-search__submit {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.fotolady-search__panel {
		animation: none;
	}
}