/*
 * Bazowe uzupełnienia stylów, których nie da się w pełni wyrazić w theme.json.
 * Większość wyglądu motywu (kolory, typografia, odstępy) kontroluj przez
 * Wygląd → Edytor stylów w kokpicie WordPress.
 */

.wp-block-post-featured-image img {
	object-fit: cover;
	height: 100%;
	width: 100%;
}

/* wp:post-content sam jest ograniczonym kontenerem (is-layout-constrained,
 * max-width z theme.json), ale WordPress nie generuje dla niego reguły
 * "wyłamania" bloków alignfull poza tę szerokość — tylko max-width na
 * dzieciach, bez ujemnych marginesów. Bez tego np. blok core/cover (align:
 * full) renderuje się jako wąski, wyśrodkowany prostokąt zamiast pełnej
 * szerokości ekranu. Dopisujemy to ręcznie (standardowy brakujący kawałek
 * w customowych motywach blokowych).
 */
.entry-content.is-layout-constrained > .alignfull {
	max-width: none;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

/* 100vw liczy się razem z pionowym paskiem przewijania — sekcje "alignfull"
 * wystają przez to o jego szerokość i pojawia się poziome przewijanie.
 * "clip" (nie "hidden") przycina nadmiar bez robienia z kontenera
 * przewijanego pudełka, więc przypięty nagłówek (sticky) dalej działa. */
.wp-site-blocks {
	overflow-x: clip;
}

/* Stopka zawsze na dole okna: przy krótkiej stronie <main> wypełnia wolne
 * miejsce, zamiast zostawiać pod stopką pusty pas tła. Wysokość bez paska
 * admina (html dostaje wtedy margines u góry). To samo w edytorze —
 * podgląd szablonu (np. "Strona główna" z krótką treścią zastępczą)
 * wygląda wtedy jak strona. */
.wp-site-blocks,
.editor-styles-wrapper .is-root-container:has(> main) {
	display: flex;
	flex-direction: column;
	min-height: calc(100vh - var(--wp-admin--admin-bar--height, 0px));
	min-height: calc(100dvh - var(--wp-admin--admin-bar--height, 0px));
}

.wp-site-blocks > main,
.editor-styles-wrapper .is-root-container:has(> main) > main {
	flex: 1 0 auto;
}

/* Zdjęć nie da się przeciągać myszą (np. na pulpit) — Chrome/Safari przez
 * CSS, Firefox przez assets/js/header.js (zdarzenie dragstart). */
img {
	-webkit-user-drag: none;
	user-drag: none;
}

a:focus-visible,
button:focus-visible {
	outline: 2px solid var(--wp--preset--color--terracotta);
	outline-offset: 2px;
}