/*
 * Implai: podstawa dokumentu. Tylko to, czego theme.json nie wyraża.
 * Żadnych reguł na gołe znaczniki treści (ul, ol, table, figure): treść wpisu
 * to także bloki z własnym układem (design-files.md).
 */

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

html {
	-webkit-text-size-adjust: 100%;

	/* Miejsce na pasek przewijania zajęte na stałe: okno modalne odbiera
	   stronie przewijanie i bez tego układ skakałby w bok przy otwarciu. */
	scrollbar-gutter: stable;
}

@media (prefers-reduced-motion: no-preference) {

	html {
		scroll-behavior: smooth;
	}
}

body {
	-webkit-font-smoothing: antialiased;
	overflow-x: clip;
}

/* Trafienie wyszukiwania: błękit marki i podkreślenie, bez żółtego tła. */
mark {
	background-color: transparent;
	color: var(--wp--preset--color--blekit);
	text-decoration: underline;
}

:focus-visible {
	outline: 3px solid var(--wp--preset--color--blekit);
	outline-offset: 3px;
	border-radius: var(--wp--preset--border-radius--m);
}

/* Odnośnik „Skip to content”, który rdzeń dodaje motywom blokowym: po
   fokusie granatowa plakietka w lewym górnym rogu, jak w makiecie. `:root`
   podnosi wagę ponad regułę rdzenia (`.skip-link.screen-reader-text:focus`). */
:root .skip-link.screen-reader-text:focus {
	inset-block-start: var(--wp--preset--spacing--2);
	inset-inline-start: var(--wp--preset--spacing--2);
	z-index: 100;
	inline-size: auto;
	block-size: auto;
	padding: var(--wp--preset--spacing--3) var(--wp--preset--spacing--5);
	border-radius: var(--wp--preset--border-radius--m);
	background-color: var(--wp--preset--color--granat);
	font-size: var(--wp--preset--font-size--tekst);
	line-height: var(--wp--custom--interlinia--normalna);
	color: var(--wp--preset--color--biel);
}

/* Klatki animacji, do których odwołują się style bloków. Klucz `css`
   w theme.json i w `style_data` nie przyjmuje reguł `@`, więc klatki
   mieszkają tutaj, a nazwę animacji styl bierze ze zmiennej
   (`--wp--custom--ruch--wypelnienie`), którą ograniczenie ruchu zeruje
   w tokeny.css.

   Wypełnianie tekstu (styl akapitu „Wypełniany przy przewijaniu”): stan
   spoczynkowy to tekst wypełniony, więc bez animacji (ograniczenie ruchu,
   przeglądarka bez `animation-timeline`) deklaracja jest czytelna. */
@keyframes implai-wypelnienie {

	from {
		background-position: 0 100%;
	}

	to {
		background-position: 0 0;
	}
}

/* Nagłówek, treść i stopka stykają się bez odstępu (makieta). Rdzeń daje
   dzieciom `.wp-site-blocks` odstęp bloków od drugiego w górę, a pierwszym
   dzieckiem jest strażnik przyklejania nagłówka. Arkusz motywu idzie po
   stylach globalnych, więc przy równej wadze wygrywa. */
.wp-site-blocks > * {
	margin-block-start: 0;
}

/* Nagłówek „Tylko dla czytnika” jest wyjęty z przepływu, więc nie zajmuje
   miejsca, ale rdzeń i tak daje następnemu blokowi odstęp przepływu (reguła
   na drugie i kolejne dziecko). W makiecie ukryty nagłówek stoi poza
   układem i treść zaczyna się od wcięcia sekcji. Dwie klasy wygrywają z regułą
   układu rdzenia (jedna klasa) niezależnie od kolejności arkuszy. */
.wp-block-heading.is-style-tylko-czytnik + * {
	margin-block-start: 0;
}

/* Indeks górny i dolny nie podnoszą wysokości wiersza (reset jak w
   normalize.css): cyfry w indeksie rozsuwały wiersze akapitu o kilka
   pikseli. */
sub,
sup {
	position: relative;
	line-height: 0;
	vertical-align: baseline;
}

sup {
	inset-block-start: -0.5em;
}

sub {
	inset-block-start: 0.25em;
}

/* Odsyłacz do źródła (format wtyczki, makieta: plakietka `.flexisnap-reference`
   z rozdziału 6.11): mała plakietka w linii bazowej, nie indeks górny. Na
   stronie jest przyciskiem otwierającym okno ze źródłami, w kanwie znacznikiem
   w tekście, więc reguła dotyczy obu i każdej treści, nie jednego bloku. Stoi
   tu, a nie przy oknie, bo arkusz okna dochodzi dopiero w stopce strony. */
.flexisnap-reference {
	display: inline-flex;
	align-items: center;
	margin: 0;
	padding-block: 0;
	padding-inline: var(--wp--preset--spacing--1);
	border: 0;
	border-radius: var(--wp--preset--border-radius--s);
	background-color: var(--wp--preset--color--tlo-wtorne);
	color: var(--wp--preset--color--tekst-przygaszony);
	font: inherit;
	font-size: var(--wp--preset--font-size--maly);
	font-weight: 500;
	line-height: var(--wp--custom--interlinia--normalna);
	white-space: nowrap;
	vertical-align: baseline;
	transition: opacity var(--wp--custom--ruch--srednio) var(--wp--custom--ruch--wyjscie);
}

button.flexisnap-reference {
	cursor: pointer;
	appearance: none;
}

/* W kanwie znacznik jest zwykłym tekstem w linii, więc przykleja się do
   słowa przed nim tak jak przycisk na stronie (tam słowo i przycisk stoją
   razem w elemencie bez łamania, który dokłada render). */
span.flexisnap-reference {
	display: inline;
}

@media (hover: hover) {

	button.flexisnap-reference:hover {
		opacity: 0.7;
	}
}