/*
 * base.css — dokument, nie komponenty.
 *
 * Trafia tu wyłącznie to, czego theme.json nie wyraża: reset, stany focusu
 * i media queries. Kolory, typografia i odstępy pochodzą ze zmiennych
 * `--wp--preset--*`, które WordPress generuje z theme.json — nie duplikuj ich tutaj.
 *
 * @font-face celowo NIE mieszka w tym pliku — deklaracja Plus Jakarta Sans
 * (variable, latin + latin-ext) siedzi w theme.json
 * (settings.typography.fontFamilies[].fontFace), bo tylko stamtąd widzi ją
 * również edytor i Font Library. Preload: inc/enqueue.php.
 */

*,
*::before,
*::after {
	box-sizing: border-box;
}

img,
svg,
video,
iframe {
	max-inline-size: 100%;
	block-size: auto;
}

/* Długie nagłówki łamane po sensie, nie po sierotach. */
h1,
h2,
h3 {
	text-wrap: balance;
}

p {
	text-wrap: pretty;
}

/*
 * Focus.
 *
 * Rdzeń rysuje własny outline dla niektórych bloków — celowo nadpisujemy go
 * jednym, spójnym stylem. `:where()` zeruje specyficzność, więc komponent
 * potrzebujący innego focusu wygra bez `!important`.
 */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
	border-radius: 2px;
}

/*
 * Na ciemnych sekcjach granatowy outline jest niewidoczny — na tle
 * --wp--preset--color--primary-dark ma kontrast poniżej 1.5:1. Odwracamy go
 * na biel; WCAG 2.2 (2.4.11 Focus Not Obscured / 2.4.13 Focus Appearance)
 * wymaga, żeby wskaźnik był widoczny na KAŻDYM tle, nie tylko na jasnym.
 */
:where(.has-primary-dark-background-color, .has-primary-background-color) :focus-visible {
	outline-color: var(--wp--preset--color--bg);
}

/*
 * Wysokość nagłówka jako token.
 *
 * Trzy miejsca muszą znać tę samą liczbę: sam nagłówek, odsunięcie kotwic i
 * (gdyby doszło) każde pozycjonowanie względem paska. Rozjazd między nimi
 * objawia się sekcją przyciętą o kilka pikseli, więc trzymamy jedno źródło.
 */
:root {
	--pcp-naglowek-wysokosc: 86px;
}

/*
 * Płynne przewijanie do kotwic + odsunięcie o wysokość przyklejonego nagłówka.
 *
 * `scroll-padding-top` na elemencie przewijanym, a nie `scroll-margin-top` na
 * każdej sekcji: działa dla wszystkich kotwic naraz, także tych, które dopiero
 * powstaną, i nie wymaga pamiętania o klasie przy każdej nowej sekcji.
 *
 * Zapas ponad wysokość paska jest celowy — sekcja dosunięta dokładnie pod
 * nagłówek wygląda jak ucięta.
 *
 * `prefers-reduced-motion` niżej wyłącza samą animację przewijania
 * (`scroll-behavior: auto !important`), a odsunięcie zostaje — to nie jest ruch,
 * tylko poprawne miejsce docelowe.
 */
html {
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--pcp-naglowek-wysokosc) + 16px);
}

/* Zalogowanemu dochodzi jeszcze pasek administracyjny nad nagłówkiem. */
.admin-bar {
	scroll-padding-top: calc(
		var(--pcp-naglowek-wysokosc) + var(--wp-admin--admin-bar--height, 32px) + 16px
	);
}

/*
 * Nagłówek przyklejony do góry.
 *
 * Reguła siedzi w CSS, a nie w atrybutach bloku, i nie jest to skrót.
 *
 * Element `position: sticky` nie może wyjechać poza swojego rodzica. <header>
 * generowany przez core/template-part ma dokładnie wysokość grupy, która w nim
 * siedzi — czyli zero drogi do przewinięcia i sticky, które nic nie robi.
 * Przykleić trzeba więc sam <header>, a core/template-part nie wspiera
 * `position` (nie ma go w `supports` w block.json), więc z edytora nie ma czym.
 *
 * Dla porównania: Twenty Twenty-Five stawia sticky na grupie wewnątrz części
 * szablonu — ale tylko w układzie z pionowym nagłówkiem, gdzie <header> jest
 * wysoką kolumną i grupa ma po czym jechać.
 */
.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 100;
}

/*
 * Zalogowanemu pasek administracyjny zasłoniłby przyklejony nagłówek.
 * WordPress podaje własną wysokość zmienną — na mobile pasek jest wyższy.
 */
.admin-bar .wp-site-blocks > header.wp-block-template-part {
	top: var(--wp-admin--admin-bar--height, 32px);
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}