/* Motyw "Pies ma stan" — uzupełnienia poza theme.json */

/* --- Dostępność: widoczny focus na wszystkim, po czym da się nawigować --- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
.wp-block-button__link:focus-visible {
	outline: 3px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
	border-radius: 3px;
}

/* --- Kafelki bloga --- */
.pm-card {
	height: 100%;
}

.pm-card .wp-block-post-featured-image {
	margin-bottom: 0.9rem;
	overflow: hidden;
	border-radius: 0.75rem;
	background-color: var(--wp--preset--color--muted);
}

.pm-card .wp-block-post-featured-image img {
	transition: transform 220ms ease;
}

.pm-card:hover .wp-block-post-featured-image img {
	transform: scale(1.03);
}

@media (prefers-reduced-motion: reduce) {
	.pm-card .wp-block-post-featured-image img,
	.pm-card:hover .wp-block-post-featured-image img {
		transition: none;
		transform: none;
	}
}

.pm-card .wp-block-post-title a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.pm-card .wp-block-post-title a:hover,
.pm-card .wp-block-post-title a:focus-visible {
	color: var(--wp--preset--color--primary);
	text-decoration: underline;
}

.pm-card .wp-block-post-terms a {
	text-decoration: none;
}

/* --- Filtr kategorii --- */
.pm-catfilter {
	margin-bottom: var(--wp--preset--spacing--50);
}

.pm-catfilter__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pm-pill {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	/* 44px to minimum celu dotykowego wg WCAG 2.2 */
	min-height: 44px;
	padding: 0.6rem 1rem;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 999px;
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--soft);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.3;
	text-decoration: none;
}

.pm-pill:hover,
.pm-pill:focus-visible {
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary);
	text-decoration: none;
}

.pm-pill.is-active {
	background-color: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary);
	color: #fff;
}

.pm-pill__count {
	font-size: var(--wp--preset--font-size--x-small);
	/* Bez opacity — przezroczystosc zbijala kontrast ponizej AA.
	   Hierarchie robi sam rozmiar czcionki. */
	color: inherit;
}

.pm-readtime {
	margin: 0;
}

/* --- Nagłówek: telefon zawsze pod ręką --- */
.is-tel-cta .wp-block-button__link {
	white-space: nowrap;
}

/* Elementy flex domyslnie nie kurcza sie ponizej min-content — stad
   przepelnienie naglowka na waskich ekranach. */
header .wp-block-group > * {
	min-width: 0;
}

@media (max-width: 599px) {
	.wp-block-site-title {
		max-width: 10rem;
		line-height: 1.2;
		font-size: var(--wp--preset--font-size--medium);
	}
}

@media (max-width: 430px) {
	.wp-block-site-title {
		max-width: 8.5rem;
		font-size: var(--wp--preset--font-size--small);
	}

	header .wp-block-group {
		gap: 0.5rem;
	}

	.is-tel-cta .wp-block-button__link {
		padding-left: 0.75rem;
		padding-right: 0.75rem;
		font-size: var(--wp--preset--font-size--small);
	}
}

/* --- Treść: obrazy i osadzenia nie rozpychają layoutu --- */
.wp-block-post-content img,
.entry-content img {
	height: auto;
	max-width: 100%;
	border-radius: 0.5rem;
}

.wp-block-post-content iframe {
	max-width: 100%;
	aspect-ratio: 16 / 9;
	height: auto;
}

/* --- Tabele ze starych wpisów bywają szersze niż kolumna --- */
.wp-block-post-content table {
	display: block;
	overflow-x: auto;
	max-width: 100%;
}

/* --- Stopka --- */
footer .footer-links a,
footer a {
	color: var(--wp--preset--color--muted);
}

footer a:hover,
footer a:focus-visible {
	color: #fff;
}

footer .footer-links a {
	display: inline-block;
	/* odstep miedzy odnosnikami w stopce — cel dotykowy 44px */
	padding: 0.7rem 0;
	line-height: 1.2;
}

footer .wp-block-social-link {
	margin: 0.25rem;
}

/* Odnosniki tekstowe w tresci maja miec odstep pionowy na mobile */
@media (pointer: coarse) {
	.wp-block-post-content li > a,
	.pm-catfilter__list {
		line-height: 1.8;
	}
}

/* --- Sekcja CTA --- */
.pm-cta {
	border-radius: 1rem;
}

/* --- Formularze (Fluent Forms) — spójne z motywem --- */
.fluentform .ff-el-input--label label {
	font-weight: 600;
	color: var(--wp--preset--color--contrast);
}

.fluentform .ff-el-form-control {
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 0.5rem;
	padding: 0.7rem 0.85rem;
	font-size: var(--wp--preset--font-size--medium);
	background-color: #fff;
}

.fluentform .ff-el-form-control:focus {
	border-color: var(--wp--preset--color--primary);
	outline: 3px solid rgba(122, 42, 52, 0.25);
	outline-offset: 1px;
}

.fluentform .ff-btn-submit {
	background-color: var(--wp--preset--color--accent);
	border: 0;
	border-radius: 0.5rem;
	color: #fff;
	font-weight: 600;
	padding: 0.9rem 1.6rem;
	cursor: pointer;
}

.fluentform .ff-btn-submit:hover {
	background-color: var(--wp--preset--color--contrast);
}

/* --- Znak firmowy w naglowku --- */
.pm-brand a {
	display: block;
	text-decoration: none;
	color: var(--wp--preset--color--contrast);
}

.pm-brand a:hover .pm-brand__name,
.pm-brand a:focus-visible .pm-brand__name {
	color: var(--wp--preset--color--primary);
}

.pm-brand__name {
	display: block;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -0.01em;
}

.pm-brand__role {
	display: block;
	margin-top: 0.15rem;
	font-size: var(--wp--preset--font-size--x-small);
	line-height: 1.3;
	color: var(--wp--preset--color--soft);
	letter-spacing: 0.02em;
}

@media (max-width: 430px) {
	.pm-brand__name {
		font-size: var(--wp--preset--font-size--medium);
	}

	.pm-brand__role {
		font-size: var(--wp--preset--font-size--x-small);
	}
}


/* ==================================================================
   LOGO W NAGLOWKU
   ================================================================== */

.pm-logo,
.wp-block-site-logo {
	margin: 0;
	flex-shrink: 0;
}

.wp-block-site-logo img {
	display: block;
	height: auto;
}

@media (max-width: 430px) {
	.wp-block-site-logo img {
		width: 46px !important;
	}
}

/* ==================================================================
   WPIS BLOGA
   ================================================================== */

/* --- Pasek postepu czytania. Czysty CSS, bez JS.
       Starsze przegladarki po prostu go nie pokaza. --- */
@supports (animation-timeline: scroll()) {
	.pm-single::before {
		content: "";
		position: fixed;
		inset-block-start: 0;
		inset-inline-start: 0;
		z-index: 100;
		width: 100%;
		height: 3px;
		transform: scaleX(0);
		transform-origin: 0 50%;
		background: linear-gradient(90deg, var(--wp--preset--color--accent), var(--wp--preset--color--gold));
		animation: pm-progress linear both;
		animation-timeline: scroll(root block);
	}

	@keyframes pm-progress {
		to {
			transform: scaleX(1);
		}
	}
}

@media (prefers-reduced-motion: reduce) {
	.pm-single::before {
		display: none;
	}
}

/* --- Powrot na blog --- */
.pm-back a {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.4rem 0;
	color: var(--wp--preset--color--soft);
	text-decoration: none;
	font-weight: 500;
}

.pm-back a::before {
	content: "←";
	font-size: 1.1em;
	line-height: 1;
}

.pm-back a:hover,
.pm-back a:focus-visible {
	color: var(--wp--preset--color--primary);
	text-decoration: underline;
}

/* --- Kategorie jako pigulki --- */
.pm-terms a,
.pm-card__cat a {
	display: inline-block;
	padding: 0.28rem 0.7rem;
	margin-right: 0.3rem;
	border-radius: 999px;
	background-color: var(--wp--preset--color--muted);
	color: var(--wp--preset--color--primary);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none;
	line-height: 1.6;
}

.pm-terms a:hover,
.pm-terms a:focus-visible,
.pm-card__cat a:hover,
.pm-card__cat a:focus-visible {
	background-color: var(--wp--preset--color--primary);
	color: #fff;
	text-decoration: none;
}

.pm-terms,
.pm-card__cat {
	margin: 0;
}

.pm-footmeta {
	padding-top: var(--wp--preset--spacing--30);
	border-top: 1px solid var(--wp--preset--color--line);
}

/* --- Naglowek wpisu --- */
.pm-single__head .wp-block-post-title {
	letter-spacing: -0.015em;
}

/* Zrodla miniatur wpisow maja rozne proporcje — od kwadratu po pionowy
   kadr z telefonu. Bez wymuszonej proporcji pionowe zdjecie zajmowalo caly
   pierwszy ekran i tekst zaczynal sie dopiero pod nim. */
.pm-single__cover img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	object-position: var(--pm-foto-pozycja, center);
}

@media (max-width: 599px) {
	.pm-single__cover img {
		aspect-ratio: 3 / 2;
	}
}

/* ==================================================================
   TYPOGRAFIA TRESCI WPISU
   ================================================================== */

.pm-prose {
	/* 17 px na telefonie, 20 px na duzym ekranie. Przy kolumnie 46 rem daje to
	   73 znaki w wierszu — w normie TYPO-06 (50-75, twardy limit 80
	   wg WCAG 1.4.8). Zmierzone: Inter = 0,491 em na znak polskiej prozy.
	   Szersza kolumna bez wiekszego pisma wypchnelaby wiersz poza limit. */
	font-size: clamp(1.0625rem, 0.8925rem + 0.78vw, 1.2875rem);
	line-height: 1.7;
}

.pm-prose > p,
.pm-prose > ul,
.pm-prose > ol {
	margin-block: 1.4em;
}

/* Pierwszy akapit jako wprowadzenie */
.pm-prose > p:first-child {
	/* 1,2x tekstu glownego — przy body 20 px preset "large" (21 px) przestal
	   sie odrozniac, wiec lead skaluje sie razem z trescia. */
	font-size: clamp(1.1875rem, 1.0rem + 0.85vw, 1.5rem);
	line-height: 1.55;
	color: var(--wp--preset--color--contrast);
}

.pm-prose h2 {
	margin-block-start: 2.2em;
	margin-block-end: 0.6em;
	padding-block-start: 0.9rem;
	border-block-start: 3px solid var(--wp--preset--color--gold);
}

.pm-prose h3 {
	margin-block-start: 1.8em;
	margin-block-end: 0.5em;
}

.pm-prose h4 {
	margin-block-start: 1.5em;
	margin-block-end: 0.4em;
}

.pm-prose a {
	text-decoration: underline;
	text-underline-offset: 0.18em;
	text-decoration-thickness: 1px;
	font-weight: 500;
}

.pm-prose a:hover,
.pm-prose a:focus-visible {
	text-decoration-thickness: 2px;
}

.pm-prose li {
	margin-block: 0.5em;
}

.pm-prose ul {
	list-style: none;
	padding-inline-start: 0;
}

.pm-prose ul > li {
	position: relative;
	padding-inline-start: 1.6rem;
}

.pm-prose ul > li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0.25rem;
	inset-block-start: 0.72em;
	width: 0.45rem;
	height: 0.45rem;
	border-radius: 50%;
	background-color: var(--wp--preset--color--primary);
}

.pm-prose ol {
	padding-inline-start: 1.4rem;
}

.pm-prose ol > li::marker {
	color: var(--wp--preset--color--primary);
	font-weight: 700;
}

.pm-prose blockquote {
	margin-block: 2em;
	padding: 1.1rem 0 1.1rem 1.4rem;
	border-inline-start: 4px solid var(--wp--preset--color--gold);
	font-size: var(--wp--preset--font-size--large);
	font-style: italic;
	color: var(--wp--preset--color--contrast);
}

.pm-prose blockquote p:last-child {
	margin-block-end: 0;
}

.pm-prose figure {
	margin-block: 2em;
}

.pm-prose figcaption {
	margin-block-start: 0.6rem;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5;
	color: var(--wp--preset--color--soft);
	text-align: center;
}

.pm-prose strong {
	font-weight: 700;
	color: var(--wp--preset--color--contrast);
}

.pm-prose hr {
	margin-block: 2.6em;
	border: 0;
	border-block-start: 1px solid var(--wp--preset--color--line);
}

@media (max-width: 599px) {
	.pm-prose {
		line-height: 1.75;
	}
}

/* ==================================================================
   WIZYTOWKA AUTORKI
   ================================================================== */

.pm-author__photo img,
.pm-author__img {
	width: 92px;
	height: 92px;
	border-radius: 50%;
	object-fit: cover;
	object-position: center 35%;
}

.pm-author__text {
	flex: 1 1 16rem;
	min-width: 0;
}

.pm-author__text > * {
	margin-block: 0;
}


/* ==================================================================
   BANER COOKIES — dopasowanie do palety z logo
   ================================================================== */

.cky-consent-container .cky-notice-btn-wrapper .cky-btn,
.cky-modal .cky-btn {
	border-radius: 0.5rem !important;
	font-weight: 600 !important;
}

.cky-btn-accept {
	background-color: var(--wp--preset--color--accent) !important;
	border-color: var(--wp--preset--color--accent) !important;
	color: #fff !important;
}

.cky-btn-accept:hover {
	background-color: var(--wp--preset--color--contrast) !important;
	border-color: var(--wp--preset--color--contrast) !important;
}

.cky-btn-reject {
	background-color: transparent !important;
	border: 1px solid var(--wp--preset--color--primary) !important;
	color: var(--wp--preset--color--primary) !important;
}

.cky-btn-reject:hover {
	background-color: var(--wp--preset--color--primary) !important;
	color: #fff !important;
}

.cky-btn-customize {
	background-color: transparent !important;
	border: 1px solid var(--wp--preset--color--line) !important;
	color: var(--wp--preset--color--soft) !important;
}

.cky-btn-customize:hover {
	border-color: var(--wp--preset--color--primary) !important;
	color: var(--wp--preset--color--primary) !important;
}

.cky-consent-container .cky-consent-bar {
	border-radius: 0.75rem !important;
	border: 1px solid var(--wp--preset--color--line) !important;
}

.cky-title {
	font-family: var(--wp--preset--font-family--heading) !important;
	color: var(--wp--preset--color--contrast) !important;
}

.cky-notice-des p {
	color: var(--wp--preset--color--soft) !important;
}

.cky-btn-revisit-wrapper {
	background-color: var(--wp--preset--color--accent) !important;
}


/* ==================================================================
   PASEK ZAUFANIA
   ================================================================== */

.pm-trust {
	border-block: 1px solid var(--wp--preset--color--line);
}

.pm-trust__item {
	position: relative;
	padding-inline-start: 1.1rem;
}

.pm-trust__item::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: 0.45em;
	width: 3px;
	height: 1.15em;
	border-radius: 2px;
	background-color: var(--wp--preset--color--gold);
}

.pm-trust__item > * {
	margin-block: 0;
}

.pm-trust__label {
	margin-block-end: 0.3rem !important;
}

/* ==================================================================
   FAQ — natywne <details>, bez JavaScriptu
   ================================================================== */

.pm-faq {
	max-width: 44rem;
	margin-inline: auto;
}

.pm-faq__item {
	border-block-end: 1px solid var(--wp--preset--color--line);
}

.pm-faq__item:first-child {
	border-block-start: 1px solid var(--wp--preset--color--line);
}

.pm-faq__q {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1rem;
	/* 44px celu dotykowego */
	min-height: 44px;
	padding-block: 1.05rem;
	cursor: pointer;
	list-style: none;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
	line-height: 1.45;
	color: var(--wp--preset--color--contrast);
}

/* Domyslny trojkat znika — rysujemy wlasny plusik */
.pm-faq__q::-webkit-details-marker {
	display: none;
}

.pm-faq__q::marker {
	content: "";
}

.pm-faq__q::after {
	content: "+";
	flex-shrink: 0;
	width: 1.5rem;
	height: 1.5rem;
	margin-block-start: 0.1rem;
	border-radius: 50%;
	background-color: var(--wp--preset--color--muted);
	color: var(--wp--preset--color--primary);
	font-size: 1.1rem;
	font-weight: 400;
	line-height: 1.45rem;
	text-align: center;
	transition: transform 180ms ease, background-color 180ms ease;
}

.pm-faq__item[open] .pm-faq__q::after {
	content: "−";
	background-color: var(--wp--preset--color--primary);
	color: #fff;
}

.pm-faq__q:hover {
	color: var(--wp--preset--color--primary);
}

.pm-faq__q:focus-visible {
	outline: 3px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
	border-radius: 4px;
}

.pm-faq__a {
	padding-block-end: 1.2rem;
	color: var(--wp--preset--color--soft);
	max-width: 62ch;
}

.pm-faq__a p {
	margin-block: 0;
	line-height: 1.7;
}

@media (prefers-reduced-motion: reduce) {
	.pm-faq__q::after {
		transition: none;
	}
}


/* ==================================================================
   ODNOSNIKI W NAGLOWKACH
   Naglowek-link z ciaglym podkresleniem robi sie ciezki wizualnie.
   Podkreslenie pojawia sie dopiero przy najechaniu / fokusie.
   ================================================================== */

h1 a, h2 a, h3 a, h4 a,
.wp-block-heading a {
	text-decoration: none;
	color: var(--wp--preset--color--contrast);
	text-underline-offset: 0.16em;
}

h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover,
.wp-block-heading a:hover,
h1 a:focus-visible, h2 a:focus-visible, h3 a:focus-visible, h4 a:focus-visible,
.wp-block-heading a:focus-visible {
	color: var(--wp--preset--color--primary);
	text-decoration: underline;
	text-decoration-thickness: 2px;
}

/* W tresci wpisu odnosniki maja zostac podkreslone — to inny kontekst. */
.pm-prose h2 a,
.pm-prose h3 a,
.pm-prose h4 a {
	text-decoration: underline;
}


/* Nota prawna w stopce — celowo dyskretna, ale czytelna (kontrast AA). */
.pm-legal {
	margin-block-start: 0.4rem !important;
	opacity: 0.85;
	line-height: 1.5;
}


/* ==================================================================
   SEKCJA "GDZIE PRACUJE"
   ================================================================== */

.pm-obszar__item {
	padding: var(--wp--preset--spacing--30);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 0.75rem;
	background-color: var(--wp--preset--color--base);
}

.pm-obszar__item > * {
	margin-block: 0;
}

.pm-obszar__item h3 {
	margin-block-end: 0.4rem;
}

.pm-obszar__item--online {
	border-color: var(--wp--preset--color--gold);
	border-width: 2px;
}


/* ==================================================================
   ZDJECIA NA STRONACH LOKALNYCH
   Zrodla maja rozne proporcje (od 0,75 pionowego po 1,60 poziome).
   Jedna proporcja dla wszystkich = spojny uklad i przewidywalna wysokosc;
   aspect-ratio rezerwuje miejsce, wiec CLS zostaje na zerze.
   ================================================================== */

.pm-foto-lokalna {
	margin-block: var(--wp--preset--spacing--50);
}

.pm-foto-lokalna img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	/* kadr ustawiany per strona — patrz piesmastan_foto_pozycja */
	object-position: var(--pm-foto-pozycja, center);
	border-radius: 1rem;
}

/* Na waskich ekranach kadr 16:9 robi sie paskiem — 3:2 czyta sie lepiej. */
@media (max-width: 599px) {
	.pm-foto-lokalna img {
		aspect-ratio: 3 / 2;
		border-radius: 0.75rem;
	}
}

.pm-foto-lokalna figcaption {
	margin-block-start: 0.7rem;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5;
	color: var(--wp--preset--color--soft);
	text-align: center;
	max-width: 44rem;
	margin-inline: auto;
}

/* ==================================================================
   ZDJECIA NA STRONACH OFERTOWYCH
   Ten sam mechanizm co na lokalnych — jedna proporcja, kadr per strona.
   ================================================================== */

.pm-foto {
	margin-block: var(--wp--preset--spacing--50);
}

.pm-foto img {
	display: block;
	width: 100%;
	height: auto;
	/* Ta sama proporcja co na stronach lokalnych — jeden jezyk wizualny
	   w calym serwisie. Przy szerokosci 1152 px daje 648 px wysokosci,
	   wiec zdjecie nie spycha tresci pod pierwszy ekran. */
	aspect-ratio: 16 / 9;
	object-fit: cover;
	object-position: var(--pm-foto-pozycja, center);
	border-radius: 1rem;
}

/* Na waskim ekranie 16:9 robi sie paskiem — 3:2 czyta sie lepiej. */
@media (max-width: 599px) {
	.pm-foto img {
		aspect-ratio: 3 / 2;
		border-radius: 0.75rem;
	}
}

/* Zdjecie o malej rozdzielczosci — nie rozciagamy go ponad wlasna szerokosc,
   bo rozmyty kadr wyglada gorzej niz mniejszy. */
.pm-foto--male {
	max-width: 560px;
	margin-inline: auto;
}

.pm-foto figcaption {
	margin-block-start: 0.7rem;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5;
	color: var(--wp--preset--color--soft);
	text-align: center;
	max-width: 44rem;
	margin-inline: auto;
}

/* ==================================================================
   TABELA "W SKROCIE"
   Chunk-Level Content: fakty, ktore czytelnik i wyszukiwarka wyciagaja
   bez czytania calej strony.
   ================================================================== */

.pm-skrot {
	margin-block: var(--wp--preset--spacing--50);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 1rem;
	background-color: var(--wp--preset--color--muted);
	padding: clamp(1rem, 0.6rem + 1.4vw, 1.6rem);
}

.pm-skrot__tytul {
	margin: 0 0 0.9rem;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.3;
	color: var(--wp--preset--color--contrast);
}

.pm-skrot dl {
	display: grid;
	grid-template-columns: minmax(7rem, auto) 1fr;
	gap: 0.55rem 1.2rem;
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.55;
}

.pm-skrot dt {
	margin: 0;
	font-weight: 600;
	color: var(--wp--preset--color--soft);
}

.pm-skrot dd {
	margin: 0;
	color: var(--wp--preset--color--contrast);
}

/* Na telefonie dwie kolumny robia sie za ciasne — etykieta nad wartoscia. */
@media (max-width: 519px) {
	.pm-skrot dl {
		grid-template-columns: 1fr;
		gap: 0.15rem;
	}

	.pm-skrot dd {
		margin-block-end: 0.7rem;
	}

	.pm-skrot dd:last-child {
		margin-block-end: 0;
	}
}

/* ==================================================================
   SPIS TRESCI
   Budowany z naglowkow H2 przy renderowaniu — nie dotyka tresci wpisu.
   ================================================================== */

.pm-spis {
	margin-block: var(--wp--preset--spacing--50);
	padding: clamp(1rem, 0.6rem + 1.4vw, 1.4rem) clamp(1rem, 0.6rem + 1.4vw, 1.6rem);
	border-inline-start: 4px solid var(--wp--preset--color--gold);
	background-color: var(--wp--preset--color--muted);
	border-radius: 0 1rem 1rem 0;
}

.pm-spis__tytul {
	margin: 0 0 0.7rem;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 700;
	line-height: 1.3;
	color: var(--wp--preset--color--contrast);
}

.pm-spis ol {
	margin: 0;
	padding-inline-start: 1.3rem;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5;
}

.pm-spis li {
	margin-block: 0.4em;
}

.pm-spis li::marker {
	color: var(--wp--preset--color--primary);
	font-weight: 700;
}

.pm-spis a {
	color: var(--wp--preset--color--contrast);
	text-decoration: underline;
	text-underline-offset: 0.18em;
	text-decoration-color: var(--wp--preset--color--line);
}

.pm-spis a:hover,
.pm-spis a:focus-visible {
	color: var(--wp--preset--color--primary);
	text-decoration-color: currentColor;
}

/* Naglowek przewijany z kotwicy nie moze chowac sie pod gorna krawedzia. */
.pm-prose h2[id] {
	scroll-margin-block-start: 1.5rem;
}

/* ==================================================================
   POPRAWKI PO AUDYCIE UX
   Kazda pozycja ma zmierzony prog — szczegoly w ODBUDOWA-raport.md §19.
   ================================================================== */

/* --- Cele dotykowe: WCAG 2.5.8 AA wymaga 24x24 px --- */

/* Odnosniki w spisie tresci mialy 19 px wysokosci. To lista nawigacyjna,
   a nie tekst ciagly, wiec wyjatek "inline" z 2.5.8 ich nie obejmuje. */
.pm-spis a {
	display: inline-block;
	padding-block: 0.28rem;
	line-height: 1.4;
}

.pm-spis li {
	margin-block: 0.15rem;
}

/* Numery stron na blogu mialy 10-18 px szerokosci. */
.wp-block-query-pagination-numbers .page-numbers,
.wp-block-query-pagination-previous,
.wp-block-query-pagination-next {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding-inline: 0.5rem;
	border-radius: 0.5rem;
	text-decoration: none;
}

.wp-block-query-pagination-numbers .page-numbers:hover,
.wp-block-query-pagination-numbers .page-numbers:focus-visible {
	background-color: var(--wp--preset--color--muted);
}

.wp-block-query-pagination-numbers .page-numbers.current {
	background-color: var(--wp--preset--color--primary);
	color: #fff;
	font-weight: 600;
}

/* Strzalka rozwijajaca podmenu miala 11x11 px. */
.wp-block-navigation__submenu-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 24px;
	min-height: 24px;
	padding: 0;
}

/* Odnosnik bedacy calym punktem listy nie jest "w zdaniu", wiec tez
   podlega progowi 24 px. Nie dotyczy linkow w srodku akapitu. */
.pm-prose li > a:only-child {
	display: inline-block;
	padding-block: 0.15rem;
}

/* --- Kontrast obramowania pol formularza: WCAG 1.4.11 wymaga 3:1 --- */

/* Bylo #E7D8D4 na bialym = 1,38:1. Jest #8C7B7D = 4,00:1 na bialym
   i 3,39:1 na tle muted, wiec pole widac na obu powierzchniach. */
.fluentform .ff-el-form-control,
.fluentform select,
.fluentform textarea {
	border-color: #8C7B7D;
}

/* Formularz dziedziczyl krój systemowy — na stronie byly trzy rodziny
   pisma zamiast dwoch. */
.fluentform,
.fluentform input,
.fluentform select,
.fluentform textarea,
.fluentform button {
	font-family: var(--wp--preset--font-family--body);
}

/* Pigulki kategorii w kazdym kafelku — takze tam, gdzie blok nie dostal
   wlasnej klasy (np. sekcja "Z bloga" na stronie glownej). */
.pm-card .wp-block-post-terms a {
	display: inline-block;
	padding: 0.28rem 0.7rem;
	margin-right: 0.3rem;
	border-radius: 999px;
	background-color: var(--wp--preset--color--muted);
	color: var(--wp--preset--color--primary);
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none;
	line-height: 1.6;
}

.pm-card .wp-block-post-terms a:hover,
.pm-card .wp-block-post-terms a:focus-visible {
	background-color: var(--wp--preset--color--primary);
	color: #fff;
}

/* Telefon i e-mail w stopce mialy 19 px wysokosci, a to dwa najwazniejsze
   odnosniki na calej stronie. */
footer p a {
	display: inline-block;
	padding-block: 0.25rem;
}

/* Nazwy miast w kafelkach obszaru dzialania — naglowek bedacy odnosnikiem. */
.pm-obszar__item h3 a {
	display: inline-block;
	padding-block: 0.2rem;
}

/* Telefon i e-mail w tresci — to sa cele, w ktore ludzie faktycznie celuja
   palcem, wiec nie moga byc wysokie na tyle, co wiersz tekstu. */
.wp-block-post-content a[href^="tel:"],
.wp-block-post-content a[href^="mailto:"] {
	display: inline-block;
	padding-block: 0.2rem;
}

/* Tytul kafelka wpisu mial 23 px — o piksel za malo wzgledem 2.5.8. */
.pm-card .wp-block-post-title a {
	display: inline-block;
	padding-block: 0.1rem;
}

/* Hamburger i krzyzyk zamykajacy mialy 24x24 px — to minimum WCAG, ale
   przy najczesciej dotykanym elemencie na telefonie warto dac pelne 44. */
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
}

/* ==================================================================
   BLOG — UKLAD Z KOLUMNA BOCZNA
   ================================================================== */

/* Kolumny WordPressa skladaja sie dopiero przy 781 px. Kolumna boczna
   przy 800 px mialaby ok. 210 px i nie zmiescilaby sie w niej lista
   wpisow, wiec skladamy wczesniej. */
@media (max-width: 1023px) {
	.pm-blog-uklad {
		flex-wrap: wrap;
	}

	.pm-blog-uklad > .wp-block-column {
		flex-basis: 100% !important;
	}
}

.pm-bok {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--40);
}

/* Na duzym ekranie pasek jedzie z trescia — CTA zostaje w zasiegu wzroku
   przez cala dlugosc listy. */
@media (min-width: 1024px) {
	.pm-bok {
		position: sticky;
		top: 1.5rem;
	}
}

.pm-bok__karta {
	padding: clamp(1rem, 0.7rem + 1vw, 1.35rem);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 1rem;
	background-color: var(--wp--preset--color--base);
}

.pm-bok__tytul {
	margin: 0 0 0.75rem;
	font-family: var(--wp--preset--font-family--heading);
	line-height: 1.25;
	color: var(--wp--preset--color--contrast);
}

.pm-bok__karta--autorka .pm-bok__tytul,
.pm-bok__autorka-gora .pm-bok__tytul {
	margin-bottom: 0;
}

.pm-bok__autorka-gora {
	margin-bottom: 0.9rem;
	flex-wrap: nowrap;
}

.pm-bok__foto {
	margin: 0;
	flex-shrink: 0;
}

.pm-bok__foto img,
.pm-bok__foto-img {
	display: block;
	width: 80px;
	height: 80px;
	object-fit: cover;
	border-radius: 50%;
}

.pm-bok__karta p {
	margin-block: 0.5rem 0;
}

.pm-bok__karta p:first-of-type {
	margin-block-start: 0;
}

/* --- Lista ostatnich wpisow --- */
.pm-bok__lista .wp-block-post-template {
	margin: 0;
	padding: 0;
	list-style: none;
	gap: 0;
}

.pm-bok__wpis {
	padding-block: 0.7rem;
	border-block-start: 1px solid var(--wp--preset--color--line);
}

.pm-bok__lista li:first-child .pm-bok__wpis {
	border-block-start: 0;
	padding-block-start: 0;
}

.pm-bok__wpis .wp-block-post-title {
	margin: 0;
}

.pm-bok__wpis .wp-block-post-title a {
	display: inline-block;
	padding-block: 0.1rem;
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	text-decoration: none;
}

.pm-bok__wpis .wp-block-post-title a:hover,
.pm-bok__wpis .wp-block-post-title a:focus-visible {
	color: var(--wp--preset--color--primary);
	text-decoration: underline;
}

.pm-bok__wpis .wp-block-post-date {
	margin: 0;
}

/* --- Wyszukiwarka --- */
.pm-bok__szukaj .wp-block-search__label {
	margin-bottom: 0.45rem;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 700;
	color: var(--wp--preset--color--contrast);
}

.pm-bok__szukaj .wp-block-search__input {
	padding: 0.7rem 0.85rem;
	border: 1px solid #8C7B7D;
	border-radius: 0.5rem;
	background-color: #fff;
	font-size: var(--wp--preset--font-size--small);
}

.pm-bok__szukaj .wp-block-search__input:focus {
	border-color: var(--wp--preset--color--primary);
	outline: 3px solid rgba(122, 42, 52, 0.25);
	outline-offset: 1px;
}

.pm-bok__szukaj .wp-block-search__button {
	min-height: 44px;
	margin-left: 0.5rem;
	padding-inline: 1.1rem;
	border: 0;
	border-radius: 0.5rem;
	background-color: var(--wp--preset--color--accent);
	color: #fff;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	cursor: pointer;
}

.pm-bok__szukaj .wp-block-search__button:hover {
	background-color: var(--wp--preset--color--contrast);
}

/* --- Ramka z wezwaniem do kontaktu --- */
.pm-bok__karta--cta {
	border-color: transparent;
	background-color: var(--wp--preset--color--muted);
}

.pm-bok__karta--cta .wp-block-buttons {
	margin-block: 0.9rem 0.6rem;
}

/* ==================================================================
   MIEJSCE NA ZDJECIE, KTOREGO JESZCZE NIE MA
   Ramka ma wygladac na celowa, a nie na zepsuty obrazek. Rezerwuje
   dokladnie tyle miejsca, ile zajmie docelowe zdjecie (16:9), wiec po
   podmianie uklad nie drgnie.
   ================================================================== */

.pm-placeholder {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	margin-block: var(--wp--preset--spacing--50);
	padding: 1.5rem;
	aspect-ratio: 16 / 9;
	border: 2px dashed var(--wp--preset--color--line);
	border-radius: 1rem;
	background-color: var(--wp--preset--color--muted);
	text-align: center;
}

@media (max-width: 599px) {
	.pm-placeholder {
		aspect-ratio: 3 / 2;
		padding: 1rem;
		border-radius: 0.75rem;
	}
}

.pm-placeholder__ikona {
	width: 2.5rem;
	height: 2.5rem;
	color: var(--wp--preset--color--primary);
	opacity: 0.55;
}

.pm-placeholder__etykieta {
	margin: 0;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 700;
	line-height: 1.3;
	color: var(--wp--preset--color--contrast);
}

.pm-placeholder__opis {
	margin: 0;
	max-width: 34rem;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5;
	color: var(--wp--preset--color--soft);
}

/* Wstep sekcji "Gdzie pracuje" rozciagal sie na cala szerokosc bloku (72 rem)
   i po dopisaniu zdania o Warszawie mial 102 znaki w wierszu — powyzej
   twardego limitu 80 z WCAG 1.4.8. Tekst wysrodkowany tez potrzebuje miary. */
.pm-obszar > p {
	max-width: 46rem;
	margin-inline: auto;
}

/* Odnosniki w akapitach paska bocznego — te same 24 px co wszedzie. */
.pm-bok p a {
	display: inline-block;
	padding-block: 0.2rem;
}

/* ==================================================================
   NAGLOWEK PRZYKLEJONY I ZWARTY NA MALYCH EKRANACH
   ================================================================== */

header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 100;
}

/* Menu rozwijane az do 1023 px. WordPress przelacza je na overlay dopiero
   przy 600 px, a przy 600-1023 px piec pozycji z podmenu zawijalo sie na
   trzy wiersze i naglowek rosl do 226 px — jako przyklejony zjadlby jedna
   trzecia ekranu. */
@media (min-width: 600px) and (max-width: 1023px) {
	.wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	.wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}

	.wp-block-navigation__responsive-container.is-menu-open {
		display: flex;
	}

	.wp-block-navigation__responsive-container-close {
		display: block;
	}
}

/* Do 1023 px: logo, nazwisko i hamburger w jednym wierszu. */
@media (max-width: 1023px) {
	/* Przycisk z telefonem znika z paska — numer zostaje w rozwinietym
	   menu, w stopce i na stronie kontaktu. */
	header .is-tel-cta {
		display: none;
	}

	header .wp-block-group.alignwide {
		flex-wrap: nowrap;
		gap: 0.75rem;
	}

	/* Blok ze znakiem firmowym ma sie kurczyc, a nie spychac hamburgera. */
	header .wp-block-group.alignwide > .wp-block-group:first-child {
		flex: 1 1 auto;
		min-width: 0;
	}

	header .wp-block-group.alignwide > .wp-block-group:last-child {
		flex: 0 0 auto;
	}

	.pm-brand {
		min-width: 0;
	}

	.pm-brand__name,
	.pm-brand__role {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
}

/* Naglowek przyklejony zaslonilby naglowek sekcji, do ktorego prowadzi
   kotwica ze spisu tresci — WCAG 2.4.11 Focus Not Obscured. */
.pm-prose h2[id] {
	scroll-margin-block-start: 6.5rem;
}

@media (max-width: 1023px) {
	.pm-prose h2[id] {
		scroll-margin-block-start: 5.5rem;
	}
}

/* Kafelki obszaru bez opisow — szerokosc dobiera sie do nazwy, a nie do
   kolumny, wiec siedem pozycji uklada sie w zwarty, zawijany rzad. */
.pm-obszar__siatka {
	max-width: 58rem;
	margin-inline: auto;
}

.pm-obszar__siatka .pm-obszar__item {
	margin-block: 0;
	padding: 0;
}

/* Padding siedzi na odnosniku, nie na kafelku — dzieki temu klikalne jest
   cale pole, a cel dotykowy ma 45 px zamiast 21 px (WCAG 2.5.8). */
.pm-obszar__siatka .pm-obszar__item a {
	display: block;
	padding: 0.6rem 1.1rem;
	text-decoration: none;
	color: var(--wp--preset--color--contrast);
}

.pm-obszar__siatka .pm-obszar__item a:hover,
.pm-obszar__siatka .pm-obszar__item a:focus-visible {
	color: var(--wp--preset--color--primary);
	text-decoration: underline;
}

/* ==================================================================
   MENU MOBILNE — PODMENU JAKO ROZWIJANE
   ================================================================== */

/* Problem: WordPress w rozwinietym menu mobilnym chowa strzalke
   (.wp-block-navigation__submenu-icon{display:none}) i na sztywno pokazuje
   wszystkie podmenu. Zamiast czterech pozycji dostajemy plaska liste
   17 odnosnikow, po ktorej trzeba scrollowac.

   Samym CSS-em sie tego nie odwroci, bo w rdzeniu
   `isSubmenuOpen` zwraca prawde zawsze, gdy overlay jest otwarty:
       get isSubmenuOpen(){ ... || l.isMenuOpen }
   czyli aria-expanded na przycisku rdzenia stale wynosi "true" i nie nadaje
   sie na przelacznik.

   Dlatego ponizej 1024 px chowamy przycisk rdzenia, a skrypt w stopce
   wstawia wlasny (.pm-podmenu-przelacznik) z uczciwym aria-expanded.
   Rodzic zostaje odnosnikiem — "Oferta" i "Obszar dzialania" to realne
   strony i maja prowadzic do siebie. Rozwija strzalka, nie etykieta. */

/* Wlasny przelacznik istnieje w DOM zawsze, ale pokazuje sie tylko
   w menu mobilnym — na desktopie dziala natywny mechanizm rdzenia. */
.pm-podmenu-przelacznik {
	display: none;
}

@media (max-width: 1023px) {

	/* Rdzen ustawia w overlayu `align-items:flex-start`, przez co pozycja
	   jest szeroka tylko na tyle, co jej tekst — strzalka przyklejalaby sie
	   do etykiety zamiast stac przy prawej krawedzi. Rozciagamy wiersze:
	   przy okazji rosna cele dotykowe zwyklych odnosnikow. */
	.wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation__responsive-container-content,
	.wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation__responsive-container-content
		.wp-block-navigation__container {
		align-items: stretch;
		width: 100%;
	}

	/* Wiersz pozycji z podmenu: etykieta po lewej, strzalka po prawej,
	   lista pod spodem na calej szerokosci. */
	.wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation__responsive-container-content
		.wp-block-navigation-item.has-child {
		display: grid;
		grid-template-columns: 1fr auto;
		align-items: center;
		width: 100%;
	}

	/* Strzalka rdzenia zostaje schowana — ma zepsuty stan aria-expanded. */
	.wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation__responsive-container-content
		.wp-block-navigation__submenu-icon {
		display: none;
	}

	/* Nasza strzalka: pelne 44 px celu dotykowego (WCAG 2.2), tak samo jak
	   hamburger i krzyzyk zamykajacy. */
	.wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation__responsive-container-content
		.pm-podmenu-przelacznik {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 44px;
		min-height: 44px;
		padding: 0;
		background: transparent;
		border: 0;
		color: inherit;
		cursor: pointer;
	}

	/* Rdzen nadaje obrys tylko swojej klasie
	   (.wp-block-navigation__submenu-icon svg{stroke:currentColor}), a nasz
	   przycisk jej nie ma — bez tego strzalka jest calkiem niewidoczna. */
	.pm-podmenu-przelacznik svg {
		display: block;
		width: 14px;
		height: 14px;
		stroke: currentColor;
		fill: none;
		transition: transform 0.15s ease;
	}

	.pm-podmenu-przelacznik[aria-expanded="true"] svg {
		transform: rotate(180deg);
	}

	@media (prefers-reduced-motion: reduce) {
		.pm-podmenu-przelacznik svg {
			transition: none;
		}
	}

	/* Podmenu zwiniete, dopoki nie dotkniesz strzalki. Nadpisujemy tu
	   position/visibility/opacity z rdzenia — stad tak dlugi lancuch. */
	.wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation__responsive-container-content
		.has-child
		.wp-block-navigation__submenu-container {
		display: none;
		grid-column: 1 / -1;
		padding-top: 0.35rem;
		padding-bottom: 0.35rem;
		padding-left: 1rem;
		padding-right: 0;
	}

	.wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation__responsive-container-content
		.has-child[data-pm-otwarte="true"]
		> .wp-block-navigation__submenu-container {
		display: block;
	}

	/* Pozycje podmenu jedna pod druga, mniejszym drukiem i z wcieciem —
	   zeby bylo widac, ze naleza do rodzica. */
	.wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation__responsive-container-content
		.wp-block-navigation__submenu-container
		.wp-block-navigation-item {
		display: block;
		width: 100%;
	}

	.wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation__responsive-container-content
		.wp-block-navigation__submenu-container
		.wp-block-navigation-item__content {
		display: block;
		padding-block: 0.45rem;
		font-size: 0.92em;
	}
}