/*
 * Style motywu potomnego. Mobile-first, zmienne CSS (constitution §6).
 *
 * Paleta i typografia mieszkają w theme.json (edytor) i inc/design.php
 * (front, przez domyślne ustawienia Kadence) — T1.8. Tutaj zostaje to,
 * czego żadne z nich nie obsłuży.
 */

:root {
	/*
	 * Odstępy — jedno źródło: skala z theme.json. Aliasy istnieją po to,
	 * żeby w regułach czytać „--aw-space-md”, a nie numer presetu, ale
	 * wartość jest ustawiana w jednym miejscu.
	 */
	--aw-space-xs: var(--wp--preset--spacing--20, 0.5rem);
	--aw-space-sm: var(--wp--preset--spacing--30, 1rem);
	--aw-space-md: var(--wp--preset--spacing--40, 2rem);
	--aw-space-lg: var(--wp--preset--spacing--50, 4rem);
	--aw-space-xl: var(--wp--preset--spacing--60, 6rem);

	/* Kroje — aliasy na to, co ustawia inc/design.php po stronie Kadence. */
	--aw-font-heading: var(--global-heading-font-family, 'Brygada 1918', Georgia, serif);
	--aw-font-body: var(--global-body-font-family, sans-serif);

	/*
	 * Szerokość kolumny tekstu — czytelność przy dłuższych opisach.
	 * W `rem`, nie w `ch`: `ch` zależy od rozmiaru kroju, więc nagłówek i akapit
	 * dostawały różne szerokości i nagłówki sekcji wystawały w lewo poza kolumnę.
	 * Ta sama wartość stoi w theme.json (`layout.contentSize`) — edytor pokazuje
	 * Andrzejowi tę samą kolumnę co front. Zmiana tutaj = zmiana tam.
	 */
	--aw-measure: 42rem; /* 38 → 42 (2026-09-18, uwaga Szymona: szpalta za wąska na desktopie) — ~75 znaków w wierszu */
}

/* ==========================================================================
   Dostępność
   ========================================================================== */

/*
 * prefers-reduced-motion — obsługa OBOWIĄZKOWA (constitution §4).
 * Przy zaburzeniach lękowych ruch na stronie nie jest kwestią gustu.
 *
 * Nie zerujemy czasów do 0s: część skryptów czeka na zdarzenie transitionend
 * albo animationend, a przy 0s bywa ono pomijane i element zostaje w stanie
 * pośrednim. 0.01ms kończy animację natychmiast, ale zdarzenie nadal leci.
 */
@media (prefers-reduced-motion: reduce) {

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-delay: 0s !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		transition-delay: 0s !important; /* szuflada menu Kadence: 250 ms „wiszenia” przed zamknięciem (T4.4) */
		scroll-behavior: auto !important;
	}
}

/* Focus widoczny zawsze — audyt WCAG 2.1 AA (T4.3). */
:where(a, button, input, select, textarea, summary):focus-visible {
	outline: 3px solid currentColor;
	outline-offset: 2px;
}

/* Pomijanie do treści — Kadence daje link, my pilnujemy widoczności po focusie. */
.skip-link:focus {
	clip: auto !important;
	clip-path: none;
	height: auto;
	width: auto;
	z-index: 100000;
}

/* ==========================================================================
   Typografia i czytelność
   ========================================================================== */

/*
 * Odbiorcą bywa osoba w kryzysie, na telefonie, w nocy (constitution §4).
 * Dłuższe akapity dostają ograniczoną miarę wiersza.
 */
.entry-content p,
.entry-content li {
	max-width: var(--aw-measure);
}

/* ==========================================================================
   Media
   ========================================================================== */

/* Bez CLS: obrazy zachowują proporcje także zanim doliczy się layout. */
img,
video {
	max-width: 100%;
	height: auto;
}

/* ==========================================================================
   Stopka (T1.10)
   ========================================================================== */

/*
 * Mobile-first: kolumny jedna pod drugą, od tabletu obok siebie.
 * `auto-fit` zamiast sztywnych trzech kolumn — gdy dojdzie czwarty blok
 * albo któryś zniknie, układ nie wymaga poprawki w CSS.
 */
.aw-footer__cols {
	display: grid;
	gap: var(--aw-space-md);
	grid-template-columns: 1fr;
}

@media (min-width: 768px) {

	.aw-footer__cols {
		grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	}
}

.aw-footer__name {
	font-weight: 600;
	margin-bottom: 0;
}

.aw-footer__business {
	color: var(--global-palette6);
	margin-top: 0;
}

.aw-footer address,
.aw-nap address {
	font-style: normal; /* przeglądarki dają kursywę — adres to nie cytat */
}

/* [aw_nap] w treści (/kontakt/) — trzy linijki jednego bloku, nie trzy akapity. */
.aw-nap p {
	margin: 0;
}

.aw-nap address {
	margin-top: var(--aw-space-xs);
}

/* Telefon w stopce to kanał równorzędny formularzowi (T3.8b), nie drobny druk. */
.aw-footer__phone {
	display: inline-block;
	font-weight: 600;
	margin-top: var(--aw-space-xs);
}

.aw-footer__motto figure {
	margin: 0;
}

.aw-footer__motto blockquote {
	border: 0;
	font-family: var(--aw-font-heading);
	font-size: var(--wp--preset--font-size--large);
	font-style: italic;
	line-height: 1.4;
	margin: 0;
	padding: 0;
}

.aw-footer__motto figcaption {
	font-size: var(--wp--preset--font-size--small);
	margin-top: 0.5em;
}

.aw-footer__menu {
	list-style: none;
	margin: 0;
	padding: 0;
}

.aw-footer__menu li {
	margin-bottom: var(--aw-space-xs);
}

.aw-footer__legal {
	border-top: 1px solid var(--global-palette7);
	font-size: var(--wp--preset--font-size--small);
	margin-top: var(--aw-space-md);
	padding-top: var(--aw-space-sm);
}

/* ==========================================================================
   Bloki treści podstron (T3.1–T3.6, bin/seed/02-content.sh)
   ========================================================================== */

.aw-sekcja {
	margin-block: var(--aw-space-lg);
}

/*
 * Jedna kolumna tekstu dla WSZYSTKIEGO w sekcji: nagłówków, akapitów, list,
 * cytatów, bloku kryzysowego. Układ „constrained” WordPressa miał to załatwić,
 * ale Kadence podmienia `--wp--style--global--content-size` na swoją szerokość
 * treści (1152 px) i zeruje marginesy nagłówków — sprawdzone w przeglądarce
 * 2026-09-17: akapit 608 px na środku, `<h2>` 1088 px od lewej krawędzi.
 * Elementy `alignwide` (kafelki, portret z tekstem) zostają szersze.
 */
.entry-content .is-layout-constrained > :not(.alignwide):not(.alignfull) {
	margin-left: auto;
	margin-right: auto;
	max-width: var(--aw-measure);
}

/* Hero `/` — na telefonie zdjęcie jest nad tekstem; bez odstępu `<h1>` przykleja się do niego. */
.aw-hero .wp-block-media-text__content {
	padding-block: var(--aw-space-md);
}

.aw-hero h1 {
	margin-top: 0;
}

/*
 * Zdjęcia „przyłożone” (2026-09-18, wybór Szymona z przymierzalni): zdjęcie w bloku
 * „Media i tekst” wygląda jak odbitka położona na kartce — biała ramka, cień, lekki
 * przechył i wysunięcie poza kartę. Dotyczy zdjęć ilustracyjnych w treści (hero,
 * portret, budynek); galeria zostaje prosta — tam liczy się porządek, nie gest.
 *
 * Kierunek zależy od strony, po której stoi zdjęcie: po prawej — zgodnie z zegarem
 * (hero; Szymon porównał oba kierunki w przymierzalni i wybrał ten), po lewej —
 * przeciwnie (portret, budynek). Dwa zdjęcia na stronie nie powtarzają gestu.
 *
 * Tylko od tabletu: w jednej kolumnie telefonu przesunięte zdjęcie wyglądałoby
 * jak błąd układu, a wysunięcie rozpychałoby stronę w bok.
 */
@media (min-width: 782px) {

	.entry-content .wp-block-media-text > .wp-block-media-text__media {
		background: #fff;
		box-shadow: 0 2px 3px rgb(0 0 0 / 12%), 0 18px 34px -14px rgb(0 0 0 / 35%);
		padding: 8px;
		transform: translate(-10px, -6px) rotate(-1.4deg);
	}

	.entry-content .wp-block-media-text.has-media-on-the-right > .wp-block-media-text__media {
		transform: translate(10px, -6px) rotate(1.4deg);
	}

	/* Hero: zdjęcie wychodzi poza górną i prawą krawędź karty — zamiast białego marginesu nad nim. */
	.entry-content .aw-hero.has-media-on-the-right > .wp-block-media-text__media {
		transform: translate(22px, -28px) rotate(1.6deg);
	}
}

.aw-hero__lead {
	font-size: var(--wp--preset--font-size--large);
}

/*
 * Blok kryzysowy (C2.2a) — wyciszony: ramka i jasne tło, bez czerwieni i bez ikony
 * alarmu. Ma być widoczny dla kogoś, kto go szuka, a nie straszyć resztę czytelników.
 */
.aw-kryzys {
	background: var(--global-palette8);
	border: 1px solid var(--global-palette7);
	border-left: 4px solid var(--global-palette1);
	border-radius: 4px;
	margin-block: var(--aw-space-md);
	padding: var(--aw-space-sm) var(--aw-space-md);
}

/*
 * Styl bloku Grupa „Ramka” (inc/patterns.php) — sekcja w jaśniejszym polu, bez przerywania
 * karty. Na `/` rozbija ścianę tekstu o depresji (uwaga Szymona 2026-09-18: pas na całą
 * szerokość tworzył „zbitkę kolorowych obszarów”). Szerokość = kolumna tekstu + oddech.
 */
.entry-content .wp-block-group.is-style-ramka {
	background: var(--global-palette7);
	border-radius: 4px;
	box-sizing: border-box;
	margin-left: auto;
	margin-right: auto;
	max-width: calc(var(--aw-measure) + 2 * var(--aw-space-md));
	padding: var(--aw-space-sm); /* na telefonie ramka nie może zjadać kolumny */
}

@media (min-width: 782px) {

	.entry-content .wp-block-group.is-style-ramka {
		padding: var(--aw-space-md);
	}
}

.is-style-ramka > :first-child {
	margin-top: 0;
}

/* Blok kryzysowy w ramce — jasne tło, żeby nie zlał się z polem ramki. */
.is-style-ramka .aw-kryzys {
	background: var(--global-palette9);
}

.aw-kryzys ul {
	padding-left: 1.2em;
}

/* Kafelki „W czym pomagam” — siatka `auto-fit` ustawia sam blok grupy (layout grid). */
.aw-karta {
	background: var(--global-palette9);
	border: 1px solid var(--global-palette7);
	border-radius: 4px;
	padding: var(--aw-space-sm) var(--aw-space-md);
}

/*
 * Siatka sama rozkłada odstępy (`gap`). Dolny margines z układu „constrained” dostawały
 * wszystkie karty poza ostatnią — rozciągnięta do wysokości rzędu ostatnia wychodziła
 * o 32 px wyższa od sąsiadki (zgłoszone na stagingu 2026-09-18).
 */
.aw-karty > .aw-karta {
	margin: 0;
}

/* Nagłówek nad szeroką siatką kart — na środku, nie przy lewej krawędzi wąskiej kolumny. */
.aw-sekcja:has(> .aw-karty) > h2 {
	text-align: center;
}

.aw-karta h3 {
	font-size: var(--wp--preset--font-size--large);
	margin-top: 0;
}

.aw-karta p {
	margin-bottom: 0;
}

/* Motto na /o-terapeucie/ (C2.10) — ten sam rejestr co w stopce. */
.aw-motto {
	border-left: 0;
	font-family: var(--aw-font-heading);
	font-size: var(--wp--preset--font-size--larger);
	font-style: italic;
	line-height: 1.4;
	padding-left: 0;
	text-align: center;
}

.aw-motto cite {
	font-family: var(--aw-font-body);
	font-size: var(--wp--preset--font-size--small);
	font-style: normal;
}

/* Domknięcia stron — oddzielone od treści, żeby CTA nie ginęło w ostatnim akapicie. */
.aw-cta {
	border-top: 1px solid var(--global-palette7);
	padding-top: var(--aw-space-md);
}

.aw-cta-link a {
	font-weight: 600;
}

/*
 * Pytania rozwijane (wzorzec „Pytania i odpowiedzi”, T3.10) — `<details>` bez JS.
 * Całe pytanie jest polem kliknięcia, nie tylko strzałka; focus daje reguła z sekcji Dostępność.
 */
.aw-pytania .wp-block-details {
	border-bottom: 1px solid var(--global-palette7);
	padding-block: var(--aw-space-sm);
}

.aw-pytania .wp-block-details summary {
	cursor: pointer;
	font-weight: 600;
}

.aw-pytania .wp-block-details[open] summary {
	margin-bottom: var(--aw-space-xs);
}

/* Spis sekcji na /terapia/ — nawigacja, nie treść. */
.aw-spis {
	font-size: var(--wp--preset--font-size--small);
	line-height: 2;
}

/* Telefon na /kontakt/ — główne CTA tej strony (W24). */
.aw-telefon-duzy .aw-telefon--przycisk {
	display: inline-block;
	font-size: var(--wp--preset--font-size--large);
}

/* ==========================================================================
   Strona 404 (T3.9)
   ========================================================================== */

.aw-404__menu ul {
	list-style: none;
	margin: var(--aw-space-sm) 0 var(--aw-space-md);
	padding: 0;
}

.aw-404__menu li {
	margin-bottom: var(--aw-space-xs);
}

.aw-404__menu a {
	font-size: var(--wp--preset--font-size--large);
}

/* ==========================================================================
   Formularz kontaktowy (T3.8) — Forminator z `form-style` = none
   ========================================================================== */

/*
 * Forminator w „czystym” designie nie ładuje własnego wyglądu ani fontów z zewnątrz
 * (bin/seed/03-forms.sh), więc wygląd jest w całości tutaj. Etykieta NAD polem,
 * pole na pełną szerokość — na telefonie, w nocy, nikt nie ma trafiać w wąskie okienko.
 */
.forminator-custom-form .forminator-row {
	margin-bottom: var(--aw-space-sm);
}

.forminator-custom-form .forminator-label {
	display: block;
	font-weight: 600;
	margin-bottom: 0.25rem;
}

.forminator-custom-form .forminator-input,
.forminator-custom-form .forminator-textarea {
	background: var(--global-palette9);
	border: 1px solid var(--global-palette6);
	border-radius: 4px;
	box-sizing: border-box;
	display: block;
	font: inherit;
	padding: 0.6rem 0.75rem;
	width: 100%;
}

.forminator-custom-form .forminator-textarea {
	min-height: var(--forminator-textarea-min-height, 8rem);
}

.forminator-custom-form .forminator-description {
	color: var(--global-palette6);
	display: block;
	font-size: var(--wp--preset--font-size--small);
	margin-top: 0.25rem;
}

/* Licznik znaków — informacja pomocnicza, osobno i po prawej, nie doklejona do zdania. */
.forminator-custom-form .forminator-description [data-limit] {
	display: block;
	text-align: right;
}

/* Zgoda: pole wyboru i tekst obok siebie; tekst zgody jest długi i musi się zawijać przy tekście. */
.forminator-custom-form .forminator-checkbox {
	align-items: flex-start;
	display: flex;
	gap: 0.6rem;
}

.forminator-custom-form .forminator-checkbox input[type="checkbox"] {
	flex: none;
	height: 1.25rem;
	margin-top: 0.25rem;
	width: 1.25rem;
}

/* Atrapa pola wyboru dla designów Forminatora — przy czystym designie widać natywne pole. */
.forminator-custom-form .forminator-checkbox-box {
	display: none;
}

.forminator-custom-form .forminator-error-message {
	color: var(--global-palette13);
	display: block;
	font-weight: 600;
	margin-top: 0.25rem;
}

.forminator-custom-form .forminator-response-message:not(:empty) {
	border: 1px solid var(--global-palette7);
	border-left: 4px solid var(--global-palette1);
	border-radius: 4px;
	margin-bottom: var(--aw-space-sm);
	padding: var(--aw-space-sm);
}

.aw-formularz-uwaga {
	color: var(--global-palette6);
	font-size: var(--wp--preset--font-size--small);
}