/* ==========================================================================
   PROZA — rama strony treściowej. Dwie powierzchnie, ten sam prymityw:
   • `template-tekstowa.php` — regulamin / polityka prywatności / płatność i
     dostawa / zwroty i wymiana / reklamacje / FAQ / pielęgnacja;
   • `single.php` — wpis bloga („historie i porady humee”, ADR-0040).
   Oba to ten sam problem: rich text z Gutenberga, którego nie ubierzemy klasą
   per element. Specyfika wpisu (zdjęcie, meta, „przeczytaj też”) = blog.css.

   Co tu jest (reszta = tokeny + `.breadcrumb` z components.css):
   - typografia prozy `.prose` (h1/h2/h3/p/lead/listy) — OWNER tego pliku;
     `.prose` renderuje się TYLKO na tych dwóch powierzchniach, więc arkusz
     zostaje warunkowy i nie obciąża globalnego components.css (ADR-0032);
   - layout strony: breadcrumb przy lewym marginesie + asymetryczna, editorialna
     kolumna treści z lewym wcięciem (desktop);
   - drobny styl akordeonu FAQ (natywne <details>, dostępne bez JS).

   Figma 130:1815: tło = color bg-alt, tekst = color dark.
   ========================================================================== */

.tresc {
	background: var(--wp--preset--color--bg-alt);
	color: var(--wp--preset--color--dark);
	/* Rezerwa na sticky header (strona bez hero → header solidny, jak koszyk). */
	padding-block: calc(var(--wp--custom--header-height) + var(--wp--preset--spacing--lg)) var(--wp--preset--spacing--xl);
}

/* ----------------------------------------------------------------------
   Kolumna — editorialny rytm. Nagłówek i treść dzielą TĘ SAMĄ kolumnę
   (miara wiersza + wcięcie), żeby breadcrumb-kicker był nadtytułem H1,
   a nie „sierotą" przy marginesie.
   MOBILE: pełna szerokość z marginesami (.wrapper daje gutter).
   DESKTOP: asymetryczne lewe wcięcie + ograniczona miara wiersza.
   ---------------------------------------------------------------------- */
.tresc__header,
.tresc__content {
	max-inline-size: 50rem; /* ~800px miara wiersza (Figma ~695–814px) */
}

@media (min-width: 1024px) {
	/* Asymetryczne wcięcie kolumny (Figma: content ~x312 przy frame 1440).
	   Liczone od guttera strony. */
	.tresc__header,
	.tresc__content {
		margin-inline-start: clamp(0rem, 16vw, 14rem);
	}
}

/* ----------------------------------------------------------------------
   Nagłówek strony (subtelny subhero) — kicker breadcrumb + H1 + hairline.
   Kandydat na wspólny `.page-header` dla listingu/produktu/koszyka, gdy
   te tory wejdą (na razie scoped, żeby nie wyprzedzać ich decyzji).
   ---------------------------------------------------------------------- */
.tresc__header {
	margin-block-end: var(--wp--preset--spacing--lg);
	padding-block-end: var(--wp--preset--spacing--md);
	border-block-end: 1px solid var(--wp--preset--color--line);
}

/* Breadcrumb jako kicker — mały nadtytuł tuż nad H1 (ciasny odstęp). */
.tresc__kicker {
	margin-block-end: var(--wp--preset--spacing--sm);
}

/* Tytuł strony — proporcje jak `.prose h1`, ale żyje w headerze (poza
   `.prose`), więc styl tutaj. Bez dolnego marginesu — hairline headera
   trzyma odstęp do treści. */
.tresc__title {
	font-size: var(--wp--preset--font-size--h-1);
	font-weight: var(--wp--custom--font-weight--regular);
	line-height: var(--wp--custom--line-height--tight);
	letter-spacing: var(--wp--custom--letter-spacing--wide);
	color: var(--wp--preset--color--dark);
}

/* ----------------------------------------------------------------------
   PROZA — typografia treści (h1/h2/h3/p/lead + listy). Styluje SEMANTYCZNE
   dzieci pod treść z pola WP (rich text), gdzie nie dodamy klasy do każdego
   elementu. Wartości = skala domknięta. Figma 130:1815: H1 46 (--h1) ·
   lead/śródtytuł 26 (--button-1) · akapit 22 (--lead), lh ≈ --line-height--body.
   Layout kolumny (wcięcie, miara wiersza) = wyżej w tym pliku, nie ta typografia.
   Przeniesione z components.css (zasada zasięgu, ADR-0032) — `.prose` żyje
   tylko na tym szablonie, więc nie musi obciążać globalnego arkusza.
   ---------------------------------------------------------------------- */
.prose {
	color: var(--wp--preset--color--dark);
}

.prose h1 {
	font-size: var(--wp--preset--font-size--h-1);
	font-weight: var(--wp--custom--font-weight--regular);
	line-height: var(--wp--custom--line-height--tight);
	letter-spacing: var(--wp--custom--letter-spacing--wide);
	margin-block-end: var(--wp--preset--spacing--md);
}

.prose h2,
.prose h3 {
	font-size: var(--wp--preset--font-size--button-1);
	font-weight: var(--wp--custom--font-weight--regular);
	line-height: var(--wp--custom--line-height--body);
	margin-block-start: var(--wp--preset--spacing--lg);
	margin-block-end: var(--wp--preset--spacing--sm);
}

.prose p {
	font-size: var(--wp--preset--font-size--lead);
	font-weight: var(--wp--custom--font-weight--regular);
	line-height: var(--wp--custom--line-height--body);
}

.prose p + p {
	margin-block-start: var(--wp--preset--spacing--md);
}

/* Lead — wyróżniony akapit wprowadzający pod H1 (26px, jak śródtytuł).
   Selektor z `.prose` przodkiem — inaczej `.prose p` (wyższa specyficzność) wygrałby font-size. */
.prose .prose__lead {
	font-size: var(--wp--preset--font-size--button-1);
	margin-block-end: var(--wp--preset--spacing--md);
}

/* Listy — Gutenberg drukuje gołe <ul>/<ol> (ten sam token co akapit). */
.prose :is(ul, ol) {
	margin-block: var(--wp--preset--spacing--md);
	padding-inline-start: 1.25em;
	font-size: var(--wp--preset--font-size--lead);
	line-height: var(--wp--custom--line-height--body);
}

.prose li + li {
	margin-block-start: var(--wp--preset--spacing--xs);
}

/* Akapit zaraz po nagłówku/leadzie nie potrzebuje górnego odstępu. */
.prose :is(h1, h2, h3) + p,
.prose .prose__lead + p {
	margin-block-start: 0;
}

/* ----------------------------------------------------------------------
   FAQ — natywny akordeon <details>/<summary> (dostępny, działa bez JS).
   Progressive enhancement: bez JS strzałka i rozwijanie działają natywnie.
   ---------------------------------------------------------------------- */
.faq__item {
	border-block-end: 1px solid var(--wp--preset--color--line);
	padding-block: var(--wp--preset--spacing--sm);
}

.faq__item summary {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--sm);
	cursor: pointer;
	list-style: none; /* chowamy natywny marker, dajemy własny znak */
	font-size: var(--wp--preset--font-size--button-1);
	line-height: var(--wp--custom--line-height--body);
}

.faq__item summary::-webkit-details-marker {
	display: none;
}

/* Własny wskaźnik rozwinięcia (obraca się po otwarciu). */
.faq__item summary::after {
	content: "\002B"; /* + */
	flex: none;
	font-weight: var(--wp--custom--font-weight--medium);
	transition: transform 0.2s ease;
}

.faq__item[open] summary::after {
	content: "\2212"; /* − */
}

.faq__item summary:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 4px;
}

.faq__answer {
	padding-block-start: var(--wp--preset--spacing--sm);
}