/* =============================================================================
   BELKA GÓRNA / NAVBAR — wspólna dla CAŁEJ witryny
   =============================================================================
   Wydzielone z sections.css 2026-08-04. Powód: sections.css wpinamy WYŁĄCZNIE
   na szablonie landinga (to ~28 KB reguł, których reszta witryny nie potrzebuje),
   a belka od teraz stoi na każdej podstronie. Trzymanie jej tam oznaczałoby albo
   ładowanie całego arkusza wszędzie, albo duplikat reguł w dwóch plikach.

   Ten plik jest wpinany globalnie i musi być SAMOWYSTARCZALNY: nie może liczyć
   na reguły bazowe ze `style.css`, bo tamte są zawężone do `:where(.dk-v2)`,
   czyli działają tylko na landingu. Stąd jawne `font-family` przy linkach.

   Wartości biorą się z tokens.css, który jest wpinany globalnie.
   ========================================================================== */

/* -----------------------------------------------------------------------------
   Belka górna / navbar (Figma 83:2714, zestaw 83:2684)

   Dwa stany, oba z makiety — bez nawigacji, bo projekt jej nie ma:

   1. na górze strony (wariant „Component 16"): przezroczysta, logo z lewej,
      duże (273.96×57.53), padding 100px góra / 129px lewa;
   2. po przewinięciu (wariant „Sticky Header"): tło #ededed z rozmyciem 12px,
      logo WYŚRODKOWANE i mniejsze (197.843×42.886), padding 20/130,
      dolne rogi zaokrąglone 24px.
   -------------------------------------------------------------------------- */

#dk-nav-sentinel {
	height: 1px;
	left: 0;
	pointer-events: none;
	position: absolute;
	top: 120px; /* mniej więcej wysokość belki w stanie górnym */
	width: 1px;
}

/* `space-between` zamiast `flex-start` — od kiedy w belce stoi menu (2026-08-04),
   logo idzie w lewo, nawigacja w prawo. Przy samym logo (gdy menu nie jest
   przypisane) wygląda to identycznie jak wcześniej. */
.dk-topbar {
	align-items: center;
	display: flex;
	gap: var(--dk-fluid-sp-6);
	justify-content: space-between;
	left: 0;
	padding: var(--dk-fluid-sp-7) var(--dk-fluid-sp-8) 6px;
	position: fixed;
	right: 0;
	top: 0;
	transition: background-color .25s ease, padding .25s ease, border-radius .25s ease;
	z-index: 50;
}

/* W makiecie stan sticky CENTRUJE samo logo. Z menu w belce centrowanie nie ma
   już czego wyśrodkować — zostawiamy rozstrzelenie na boki, żeby nawigacja była
   dostępna po przewinięciu. To jedyna zmiana wobec makiety w tym stanie. */
.dk-topbar.is-stuck {
	backdrop-filter: blur(var(--dk-blur-header));
	background-color: var(--dk-bg);
	border-bottom-left-radius: var(--dk-radius-header);
	border-bottom-right-radius: var(--dk-radius-header);
	/* W makiecie pasek ma 1860 z 1920, czyli odsunięcie równe marginesowi strony. */
	margin-inline: var(--dk-fluid-gutter);
	padding: 20px var(--dk-fluid-sp-8);
	-webkit-backdrop-filter: blur(var(--dk-blur-header));
}

/* Bez menu wracamy do kompozycji z makiety: logo na środku. `:only-child` trafia
   wtedy, gdy w belce nie ma <nav> — czyli gdy menu nie jest przypisane. */
.dk-topbar.is-stuck .dk-topbar__logo:only-child {
	margin-inline: auto;
}

/* -----------------------------------------------------------------------------
   Wariant stały („solid") — podstrony

   Na landingu belka startuje przezroczysta, bo leży na ciemnym zdjęciu hero,
   a logo jest wybielane filtrem. Podstrony żadnego hero nie mają: zaczynają się
   jasną treścią, więc biały tekst na przezroczystym tle byłby NIEWIDOCZNY.
   Dlatego tam belka od razu wygląda jak stan po przewinięciu — jasne tło,
   ciemne logo i menu. To ten sam pasek, tylko bez stanu, który nie ma tu sensu.

   Bez `is-stuck` i bez sentinela: skoro belka nie zmienia stanu, nie ma czego
   przełączać, więc na podstronach nie jedzie też navbar.js.
   -------------------------------------------------------------------------- */

.dk-topbar--solid {
	background-color: var(--dk-bg);
	padding: 20px var(--dk-fluid-sp-8);
}

/* ⚠ Trzy klasy, nie dwie — i to nie jest ozdobnik.
   Reguła bazowa `.dk-topbar__logo .dk-topbar__logo--top` ma (0,2,0) i stoi NIŻEJ
   w pliku, więc przy remisie wygrywała: logo zostawało wybielone i w rozmiarze
   z landinga, czyli białe na jasnym tle — praktycznie niewidoczne.
   Dołożenie `.dk-topbar__logo` daje (0,3,0) i rozstrzyga to niezależnie od
   kolejności reguł, także gdyby ktoś je kiedyś poprzestawiał. */
.dk-topbar--solid .dk-topbar__logo .dk-topbar__logo--top {
	/* Bez wybielania — logo w pliku jest ciemne, a tło jasne. */
	filter: none;
	width: clamp(132px, 100px + 6vw, 198px);
}

/* Belka jest `position: fixed`, więc nie zajmuje miejsca w przepływie i nachodzi
   na treść. Divi z aktywnym Theme Builderem wypisuje INLINE
   `#page-container{padding-top:0!important}`, więc odsunięcie trzeba wymusić
   tą samą bronią. Wartość jest przybliżona z założenia — dokładną wysokość
   belki dopisuje skrypt do zmiennej `--dk-topbar-h`, a `var()` bierze ją,
   gdy tylko jest dostępna. Bez JS zostaje sensowny domyślny odstęp. */
body:not(.dk-v2) #page-container {
	padding-top: var(--dk-topbar-h, 92px) !important;
}

/* -----------------------------------------------------------------------------
   Link do wersji angielskiej

   Przeniesiony ze starego nagłówka Theme Buildera (2026-08-04). Nie jest ozdobą:
   to jedyne przejście do `/dawid-kuklinski-english/`. Zastąpienie tamtej belki
   naszą bez tego linku odcięłoby całą wersję językową od nawigacji.
   -------------------------------------------------------------------------- */

.dk-topbar__lang {
	font-family: var(--dk-font-body);
	font-size: clamp(11px, 9.4px + 0.21vw, 14px);
	letter-spacing: .12em;
	text-decoration: none;
	text-transform: uppercase;
	white-space: nowrap;
}

.dk-topbar .dk-topbar__lang {
	color: var(--dk-on-dark);
	opacity: .75;
	transition: opacity .2s ease;
}

/* Na jasnym tle przygaszenie z wariantu na zdjęciu jest zbędne — tam brało się
   z tego, że biały tekst na kadrze bywa zbyt krzykliwy. Tu robiło z linku
   ledwo widoczny szary napis, więc wracamy do pełnego krycia. */
.dk-topbar.is-stuck .dk-topbar__lang,
.dk-topbar--solid .dk-topbar__lang {
	color: var(--dk-ink-muted);
	opacity: 1;
}

.dk-topbar .dk-topbar__lang:hover,
.dk-topbar .dk-topbar__lang:focus-visible {
	opacity: 1;
}

/* Menu i przełącznik języka stoją razem po prawej. */
.dk-topbar__akcje {
	align-items: center;
	display: flex;
	gap: clamp(14px, 6px + 1.1vw, 32px);
}

/* -----------------------------------------------------------------------------
   Menu w belce (poza makietą — uzasadnienie w szablonie)
   -------------------------------------------------------------------------- */

.dk-nav__list {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(14px, 6px + 1.1vw, 40px);
	list-style: none;
	margin: 0;
	padding: 0;
}

/* ⚠ NIE prefiksować `body.dk-v2` — ta klasa siedzi na <body> WYŁĄCZNIE na
   landingu, a belka stoi od 2026-08-04 na całej witrynie. Z takim prefiksem
   linki na podstronach zostawały bez stylów i wracały do wyglądu Divi.
   Wagę daje `.dk-topbar` (0,2,1) — Divi styluje linki regułami na `a` (0,0,1)
   albo zawężonymi do własnych kontenerów, więc to wystarcza z zapasem. */
.dk-topbar .dk-nav__list a {
	color: var(--dk-on-dark);
	font-family: var(--dk-font-body);
	font-size: clamp(11px, 9.4px + 0.21vw, 14px);
	font-weight: var(--dk-fw-regular);
	/* Rozstrzelenie jak w podpisie „BESPOKE TAILOR" pod logo — menu ma być
	   przedłużeniem tej samej myśli typograficznej, nie osobnym bytem. */
	letter-spacing: .12em;
	text-decoration: none;
	text-transform: uppercase;
	transition: opacity .2s ease;
	white-space: nowrap;
}

.dk-topbar .dk-nav__list a:hover,
.dk-topbar .dk-nav__list a:focus-visible {
	opacity: .6;
}

/* Jasne tło belki — tekst musi zejść na ciemny. Dotyczy stanu po przewinięciu
   ORAZ wariantu stałego na podstronach, gdzie belka jest jasna od początku. */
.dk-topbar.is-stuck .dk-nav__list a,
.dk-topbar--solid .dk-nav__list a {
	color: var(--dk-ink);
}

/* Bieżąca strona — subtelnie, podkreśleniem, nie pogrubieniem: przy rozstrzelonych
   wersalikach zmiana grubości rozpycha wiersz i menu „skacze". */
.dk-topbar .dk-nav__list .current-menu-item > a {
	text-decoration: underline;
	text-underline-offset: .35em;
}

/* UWAGA na specyficzność przy przełączaniu logo.
   `display` ustawiamy wyłącznie na regułach z DWOMA klasami. Wcześniej stało tu
   `.dk-topbar__logo img { display: block }` (0,1,1), co biło
   `.dk-topbar__logo--stuck { display: none }` (0,1,0) — i oba logo pokazywały
   się naraz, jedno pod drugim. */
.dk-topbar__logo img {
	height: auto;
}

.dk-topbar__logo .dk-topbar__logo--top {
	display: block;
	/* Logo w pliku jest ciemne, a na górze leży na ciemnym zdjęciu hero —
	   w makiecie jest białe. W stanie sticky tło jest jasne, więc filtr znika. */
	filter: brightness(0) invert(1);
	width: clamp(160px, 120px + 8vw, 274px);
}

.dk-topbar__logo .dk-topbar__logo--stuck {
	display: none;
	width: clamp(132px, 100px + 6vw, 198px);
}

.dk-topbar.is-stuck .dk-topbar__logo--top {
	display: none;
}

.dk-topbar.is-stuck .dk-topbar__logo--stuck {
	display: block;
}

/* Pasek administratora WordPressa jest sam position: fixed i przykryłby belkę. */
body.admin-bar .dk-topbar {
	top: 32px;
}

@media (max-width: 782px) {
	body.admin-bar .dk-topbar {
		top: 46px;
	}
}

/* =============================================================================
   PRZEŁAMANIA
   ========================================================================== */

@media (max-width: 980px) {
	.dk-topbar {
		padding: var(--dk-sp-4);
	}
}

@media (max-width: 767px) {
	/* Belka układa się w pion: logo, pod nim menu — obok siebie nie mieszczą się,
	   a menu zawijające się w prawej kolumnie rozpychało belkę na trzy wiersze.
	   Belka jest `position: fixed`, więc każdy zbędny wiersz zjada kadr hero,
	   stąd też mocno ścięte odstępy i mniejsze logo. */
	.dk-topbar {
		flex-direction: column;
		gap: 10px;
		padding: 14px var(--dk-fluid-gutter) 10px;
	}

	.dk-topbar .dk-topbar__logo--top {
		width: clamp(132px, 100px + 12vw, 180px);
	}

	/* Zmierzone: przy 390px cztery pozycje potrzebują 344px z dostępnych 358 —
	   mieściły się, ale na styk, i poniżej ~376px zawijały się na drugi wiersz.
	   Ściągnięte rozstrzelenie (.12em → .07em) i mniejszy odstęp dają ~22px
	   zapasu, więc jeden wiersz utrzymuje się też na 360px. Belka jest `fixed`,
	   każdy dodatkowy wiersz zjada kadr hero — stąd walka o te piksele. */
	.dk-nav__list {
		gap: 10px;
		justify-content: center;
	}

	.dk-topbar .dk-nav__list a {
		letter-spacing: .07em;
	}

	/* W stanie sticky logo i tak jest mniejsze — układ pionowy zostaje,
	   bo poziomo nadal się nie mieści. */
	.dk-topbar.is-stuck {
		padding: 10px var(--dk-fluid-gutter);
	}
}