/*
 * Warstwa bazowa: reset, typografia, linki, fokus, kontener, przycisk.
 * Kolejność warstw ustalona raz; style bloków i szablonów trafiają do "components".
 */

@layer reset, base, wp, components, utilities;   /* wp: CSS rdzenia i wtyczek, kolejność w inc/assets.php */

@layer reset {
	*, *::before, *::after { box-sizing: border-box; }
	html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
	body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
	ul[class], ol[class] { margin: 0; padding: 0; list-style: none; }
	img, svg, video { display: block; max-width: 100%; height: auto; }
	button, input, select, textarea { font: inherit; color: inherit; }
	@media (prefers-reduced-motion: reduce) {
		*, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
	}
}

@layer base {
	body {
		background: var(--c-bg);
		color: var(--c-text-2);
		font-family: var(--font-text);
		font-size: var(--txt-body-1);
		line-height: var(--leading-text);
		text-rendering: optimizeLegibility;
	}

	h1, h2, h3, h4, h5, h6 {
		color: var(--c-text);
		font-family: var(--font-heading);
		font-weight: 400;
		line-height: var(--leading-tight);
		text-wrap: balance;
	}
	h1 { font-size: var(--heading-h1); line-height: 1.0625; letter-spacing: var(--track-h1); }
	h2 { font-size: var(--heading-h2); line-height: 1.154; letter-spacing: var(--track-h2); }
	h3 { font-size: var(--heading-h3); line-height: 1.1; letter-spacing: var(--track-h3); }
	h4 { font-size: var(--heading-h4); line-height: var(--leading-h4); letter-spacing: var(--track-h4); }
	h5 { font-size: var(--heading-h5); line-height: 1.25; letter-spacing: var(--track-h5); }
	h6 { font-size: var(--heading-h6); line-height: 1.3; }

	p { text-wrap: pretty; }

	a { color: var(--c-accent-text); text-underline-offset: 0.18em; }
	a:hover { text-decoration-thickness: 2px; }

	:focus-visible {
		outline: 3px solid var(--c-focus);
		outline-offset: 2px;
	}

	::selection { background: var(--primary-200); color: var(--primary-900); }

	/*
	 * Lista wyboru (zasada 69): zawsze ostylowana, także rozwinięta lista. Kształt jak pola tekstowe
	 * formularza (subpages.css), strzałka w kolorze tekstu akcentu. Chrome od 135 dostaje listę w stylu
	 * strony (appearance: base-select, ::picker(select)) co najmniej tak szeroką jak pole; inne przeglądarki
	 * systemową listę z odstępem opcji. W warstwie, bo CSS wtyczek (CF7) list wyboru nie styluje; formularz
	 * z własną oprawą pola nadpisuje to klasą (wzór: Alfa, .c-szybka__pole i .c-form--nad).
	 * Bez list wielokrotnego wyboru i rozwiniętych na stałe ([multiple], [size]).
	 */
	select:not([multiple], [size]) {
		appearance: none;
		width: 100%;
		min-height: var(--touch);
		padding: 0.75rem 2.75rem 0.75rem 1.25rem;
		background-color: var(--c-bg);
		background-image:
			linear-gradient(45deg, transparent 50%, var(--c-accent-text) 50%),
			linear-gradient(-45deg, transparent 50%, var(--c-accent-text) 50%);
		background-position: right 1.25rem center, right calc(1.25rem - 5px) center;
		background-size: 5px 5px;
		background-repeat: no-repeat;
		color: var(--c-text);
		line-height: 1.2;
		border: 1px solid var(--c-field-border, var(--c-text-3));   /* w formularzu CF7 ta sama ramka co pola tekstowe */
		border-radius: 0;
		cursor: pointer;
	}
	select:not([multiple], [size]):hover { border-color: var(--c-text-2); }
	select:not([multiple], [size]):focus { border-color: var(--c-text); box-shadow: inset 0 0 0 1px var(--c-text); }
	select:not([multiple], [size]) option { padding: 0.5rem 1rem; }
	@supports (appearance: base-select) {
		select:not([multiple], [size]),
		select:not([multiple], [size])::picker(select) { appearance: base-select; }
		select:not([multiple], [size])::picker-icon { display: none; }   /* strzałka zostaje z tła pola */
		select:not([multiple], [size])::picker(select) {
			min-width: anchor-size(width);
			margin-block-start: 0.25rem;
			padding: 0.375rem 0;
			background: var(--c-bg);
			color: var(--c-text);
			border: 1px solid var(--c-line);
			border-radius: 0;
			box-shadow: 0 16px 40px rgb(0 0 0 / 0.12);
		}
		select:not([multiple], [size]) option {
			padding: 0.75rem 1.25rem;
			color: var(--c-text);
			font-weight: 400;
			white-space: nowrap;
		}
		/* Ptaszek przy wybranej opcji zostaje: motyw ma kroje tylko w grubości 400, więc sam kolor byłby jedynym wyróżnikiem (WCAG 1.4.1). */
		select:not([multiple], [size]) option:checked { color: var(--c-accent-text); font-weight: var(--font-text-strong, 400); }
		select:not([multiple], [size]) option:is(:hover, :focus-visible) { background: var(--c-bg-soft); outline: none; }
	}
}

@layer components {
	/* Kontenery: od 1.10 oba mają 1138 (--wrap-wide = --wrap-content), żeby nagłówek, panel podstrony i treść miały jedną krawędź. */
	.l-wrap {
		width: min(100% - 2 * var(--gutter), var(--wrap-content));
		margin-inline: auto;
	}
	.l-wrap--wide { width: min(100% - 2 * var(--gutter), var(--wrap-wide)); }

	.l-section { padding-block: var(--section-space); }
	.l-section--soft { background: var(--c-bg-soft); }

	/* Odnośnik "przejdź do treści": pierwszy element strony, widoczny po fokusie. */
	.c-skip {
		position: absolute;
		inset-inline-start: var(--gutter);
		inset-block-start: -10rem;
		z-index: 100;
		padding: 0.75rem 1rem;
		background: var(--c-bg);
		color: var(--c-text);
		font-size: var(--txt-body-2);
		border: 2px solid var(--c-text);
	}
	.c-skip:focus { inset-block-start: 0.5rem; }

	.c-icon { width: 1rem; height: 1rem; flex: none; }

	/*
	 * Przyciski PDM (Figma, spec-strona-glowna F): Figtree Medium 16/20, wypełnienie 14 x 22, promień 8,
	 * wysokość 48. Ciemny: granat 800, biały napis 10,46, najechanie granat 900. Jasny (na ciemnym tle):
	 * biały, napis granat, najechanie primary-200 (7,17). Fokus: obrys 2 px w kolorze tekstu przycisku
	 * od zewnątrz (na jasnym tle granat, na ciemnym biel przez --c-fokus-na-tle).
	 */
	.c-button {
		--c-button-bg: var(--c-action);
		--c-button-bg-hover: var(--c-action-hover);
		--c-button-text: var(--c-on-action);
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 0.75rem;
		min-height: var(--touch);
		padding: 0.875rem 1.375rem;
		background: var(--c-button-bg);
		color: var(--c-button-text);
		font-family: var(--font-text);
		font-size: 1rem;
		font-weight: 500;
		line-height: 1.25;
		text-decoration: none;
		border: 0;
		border-radius: var(--radius-ui);
		cursor: pointer;
		transition: background-color 0.2s ease-out;
	}
	.c-button:hover { background: var(--c-button-bg-hover); }
	.c-button:focus-visible { outline: 2px solid var(--c-fokus-na-tle, var(--c-text)); outline-offset: 2px; }
	.c-button--jasny {
		--c-button-bg: var(--c-action-light);
		--c-button-bg-hover: var(--c-action-light-hover);
		--c-button-text: var(--primary-800);   /* stały granat: na ciemnym tle --c-text jest biały */
	}

	/* Link z kreską (Avenir cta_tertiary): kreska 1 px 4 px pod tekstem (pseudoelement ::before, bo ::after zajmuje
	   rozciągnięty odnośnik kart); przy najechaniu kreska zjeżdża w prawo i wraca z lewej. */
	.c-more,
	:is(.c-content, .c-main) .wp-block-button.is-style-link .wp-block-button__link {
		position: relative;
		display: inline-flex;
		align-items: center;
		min-height: var(--touch);
		padding: 0;
		background: none;
		color: inherit;
		font-size: 1rem;
		font-weight: 500;
		line-height: 1.25;
		text-decoration: none;
		border-radius: 0;
	}
	.c-more::before,
	:is(.c-content, .c-main) .wp-block-button.is-style-link .wp-block-button__link::before {
		content: "";
		position: absolute;
		inset-inline: 0;
		top: calc(50% + 0.875rem);
		height: 1px;
		background: currentColor;
		transform-origin: right;
	}
	.c-more:hover::before,
	:is(.c-content, .c-main) .wp-block-button.is-style-link .wp-block-button__link:hover::before { animation: kreska-przejazd 0.6s cubic-bezier(0.22, 1, 0.36, 1); }
	:is(.c-content, .c-main) .wp-block-button.is-style-link .wp-block-button__link:hover { background: none; color: inherit; }
	@keyframes kreska-przejazd {
		0% { transform: scaleX(1); transform-origin: right; }
		45% { transform: scaleX(0); transform-origin: right; }
		46% { transform: scaleX(0); transform-origin: left; }
		100% { transform: scaleX(1); transform-origin: left; }
	}

	/* Treść z edytora blokowego. */
	.c-content > * + * { margin-block-start: 1.25rem; }
	.c-content > :is(h2, h3, h4) { margin-block-start: 2.5rem; }
	/* <figure> (zdjęcie, galeria) ma ten sam odstęp co akapit: odstępy jednolite zawsze (zasada 82, Marcin 22.10.2026).
	   Tabela ma własne 2rem (pages.css). */
	/* Szerokość akapitów i punktów: uklady.css (pełna szerokość kontenera, decyzja Marcina 30.09); do 22.10.2026 stało
	   tu 58rem, zawsze zdejmowane tamtą regułą. */
	/* Reset zdejmuje punktory z list z klasą, a WordPress nadaje ją każdej liście z edytora. */
	.c-content ul.wp-block-list { padding-inline-start: 1.25rem; list-style: disc; }
	.c-content ol.wp-block-list { padding-inline-start: 1.5rem; list-style: decimal; }
	.c-content .wp-block-list li + li { margin-block-start: 0.375rem; }
	.c-content ul, .c-content ol { padding-inline-start: 1.25rem; }
	.c-content li + li { margin-block-start: 0.5rem; }
	/* img { height: auto } jest w warstwie reset: tu by wygrywał z rdzeniem (okładka, galeria) i z hero. */

	/* Na telefonie przyciski na pełną szerokość (poprawka względem poligonu). */
	@media (max-width: 39.999em) {
		.c-button { width: 100%; }   /* przyciski z edytora: reguła niżej (linki z kreską zostają wąskie) */
	}
}

@layer utilities {
	.u-nowrap { white-space: nowrap; }
	.u-visually-hidden {
		position: absolute !important;
		width: 1px; height: 1px;
		margin: -1px; padding: 0;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
		border: 0;
	}
}

/*
 * Przycisk z edytora (blok Przyciski): jedna reguła dla treści podstron (.c-content) i strony głównej, która drukuje
 * treść bez .c-content (front-page.php: grupy prosto w .c-main). Wygląd jak .c-button wyżej (decyzja Marcina 1.10:
 * #EE7F00, napis #202426 5,72, 16 px bez pogrubienia); kształt bez zaokrągleń (rdzeń daje 9999px, DESIGN.md 7a)
 * i te same odstępy (pinezka Marcina 1.10, Współpraca). Do 22.10.2026 ta sama reguła stała w czterech miejscach
 * (tu poza warstwą, martwa kopia w pages.css, strona-glowna.css, theme.json); teraz tutaj, w warstwie components,
 * bo style globalne rdzenia stoją w warstwie `wp`. Pozostałe miejsca: wariant „Obrys” w rdzen.css (poza warstwą
 * przez kanwę edytora) i kolory elementu button w theme.json (kopia zapasowa z klient.php, kolory.przycisk).
 */
@layer components {
	:is(.c-content, .c-main) .wp-block-button .wp-block-button__link {
		--c-button-bg: var(--c-action);
		--c-button-bg-hover: var(--c-action-hover);
		--c-button-text: var(--c-on-action);
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-height: var(--touch);
		padding: 0.875rem 1.375rem;
		background: var(--c-button-bg);
		color: var(--c-button-text);
		font-family: var(--font-text);
		font-size: 1rem;
		font-weight: 500;
		line-height: 1.25;
		text-decoration: none;
		border: 0;
		border-radius: var(--radius-ui);
		transition: background-color 0.2s ease-out;
	}
	:is(.c-content, .c-main) .wp-block-button .wp-block-button__link:hover { background: var(--c-button-bg-hover); color: var(--c-button-text); }
	:is(.c-content, .c-main) .wp-block-button .wp-block-button__link:focus-visible { outline: 2px solid var(--c-fokus-na-tle, var(--c-text)); outline-offset: 2px; }
	/* Styl „Jasny” (na ciemnym tle) i „Link z kreską” (bloki Przyciski, inc/pdm.php). */
	:is(.c-content, .c-main) .wp-block-button.is-style-jasny .wp-block-button__link {
		--c-button-bg: var(--c-action-light);
		--c-button-bg-hover: var(--c-action-light-hover);
		--c-button-text: var(--primary-800);
	}
	:is(.c-content, .c-main) .wp-block-buttons { gap: 1.75rem; align-items: center; }

	/* Telefon: przyciski (nie linki z kreską) na pełną szerokość. */
	@media (max-width: 39.999em) {
		:is(.c-content, .c-main) .wp-block-button:not(.is-style-link) { width: 100%; }
		:is(.c-content, .c-main) .wp-block-button:not(.is-style-link) .wp-block-button__link { width: 100%; }
		:is(.c-content, .c-main) .wp-block-buttons { flex-direction: column; align-items: stretch; gap: 0.5rem; }
		:is(.c-content, .c-main) .wp-block-button.is-style-link { align-self: center; }
	}
}