/* ==========================================================================
   PoloniaHub — warstwa graficzna treści

   Długi tekst prawny i urzędowy męczy wzrok, a strona usługi dokumentowej nie
   może wyglądać jak wydruk z drukarki igłowej. Ten plik dokłada życie tam,
   gdzie treść już jest: znaczniki przy nagłówkach, wypunktowania z ikonami,
   ramki na kluczowe informacje, delikatne motywy w tle sekcji.

   Wszystko działa na istniejącym kodzie stron — nie wymaga zmiany treści,
   więc nie ma ryzyka, że coś się przy okazji nadpisze.
   ========================================================================== */

/* --- Nagłówki w przewodnikach --------------------------------------------
   Pionowa kreska w kolorze marki zamiast samej linii nad tekstem. Nadaje
   rytm długiej stronie i pokazuje, gdzie zaczyna się nowa myśl. */

.ph-legal h2 {
	position: relative;
	padding-left: 18px;
	border-top: 0;
	padding-top: 0;
	margin-top: 32px;
}

.ph-legal h2::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.18em;
	bottom: 0.18em;
	width: 4px;
	border-radius: 2px;
	background: linear-gradient(180deg, var(--ph-cta), var(--ph-accent-light));
}

.ph-legal h2:first-child { margin-top: 0; }

/* --- Wypunktowania z ikonami ---------------------------------------------
   Domyślna kropka nic nie mówi. Znacznik w kolorze marki wiąże listę
   z resztą systemu i ułatwia skanowanie wzrokiem. */

.ph-legal ul {
	list-style: none;
	padding-left: 0;
}

.ph-legal ul li {
	position: relative;
	padding-left: 26px;
	margin-bottom: 10px;
}

.ph-legal ul li::before {
	content: "";
	position: absolute;
	left: 2px;
	top: 0.52em;
	width: 7px;
	height: 7px;
	border-radius: 2px;
	background: var(--ph-cta);
	transform: rotate(45deg);
}

.ph-legal ol { padding-left: 22px; }
.ph-legal ol li { margin-bottom: 10px; }
.ph-legal ol li::marker { color: var(--ph-cta); font-weight: 600; }

/* --- Wyróżnione zdanie ----------------------------------------------------
   Akapit zawierający pogrubiony początek dostaje delikatne tło. To zwykle
   zdanie z kluczową zasadą — progiem lat, terminem, warunkiem. */

.ph-legal p > strong:first-child {
	color: var(--ph-heading);
}

/* --- Motyw w tle sekcji ---------------------------------------------------
   Bardzo delikatna siatka kropek w narożniku sekcji na jasnym tle.
   Nawiązuje do mapy w hero i stopki, spinając stronę jednym motywem. */

.ph-section--alt {
	position: relative;
	overflow: hidden;
}

.ph-section--alt::before {
	content: "";
	position: absolute;
	top: -30px;
	right: -30px;
	width: 220px;
	height: 220px;
	pointer-events: none;
	background-image: radial-gradient(circle, rgba(36, 72, 184, 0.07) 1px, transparent 1px);
	background-size: 16px 16px;
	-webkit-mask-image: radial-gradient(circle at 70% 30%, #000 0%, transparent 70%);
	mask-image: radial-gradient(circle at 70% 30%, #000 0%, transparent 70%);
}

.ph-section--alt > * { position: relative; }

/* --- Ikona przy nadtytule sekcji ------------------------------------------ */

.ph-sectionhead .ph-eyebrow::after {
	content: "";
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var(--ph-accent-light);
	opacity: 0.7;
}

/* --- Karty: znacznik w narożniku ------------------------------------------ */

.ph-service { position: relative; }

.ph-service::before {
	content: "";
	position: absolute;
	top: 12px;
	right: 12px;
	width: 26px;
	height: 26px;
	border-radius: 8px;
	background-image: radial-gradient(circle, rgba(36, 72, 184, 0.10) 1px, transparent 1px);
	background-size: 7px 7px;
	opacity: 0;
	transition: opacity var(--ph-transition);
}

.ph-service:hover::before { opacity: 1; }

/* --- Pasek liczb ---------------------------------------------------------- */

.ph-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
	gap: 16px;
}

.ph-stat {
	padding: 20px;
	border: 1px solid var(--ph-border);
	border-radius: var(--ph-radius);
	background: var(--ph-surface);
	text-align: center;
}

.ph-stat__value {
	display: block;
	font-family: var(--ph-font-heading);
	font-size: clamp(1.5rem, 1.3rem + 0.9vw, 2rem);
	font-weight: 600;
	line-height: 1.1;
	color: var(--ph-primary);
}

.ph-stat__label {
	display: block;
	margin-top: 6px;
	font-size: 0.8125rem;
	color: var(--ph-muted);
}

/* --- Ramka z kluczową informacją ------------------------------------------ */

.ph-callout {
	display: flex;
	gap: 14px;
	margin: 22px 0;
	padding: 16px 18px;
	border: 1px solid #DCE6FA;
	border-left: 3px solid var(--ph-cta);
	border-radius: 0 var(--ph-radius) var(--ph-radius) 0;
	background: #F4F7FD;
}

.ph-callout .ph-i { color: var(--ph-cta); margin-top: 2px; }
.ph-callout p { margin: 0; font-size: 0.9375rem; }
.ph-callout strong { color: var(--ph-heading); }

/* ==========================================================================
   Artykuły bazy wiedzy — warstwa graficzna

   Te teksty powstały wcześniej i mają swoje przyzwyczajenia: całe akapity
   zapisane pogrubieniem, brak podziałów, jeden obraz na dwadzieścia akapitów.
   Poniższe reguły działają na tym, co już jest w treści, więc poprawiają
   wszystkie dziewięć artykułów naraz i nie wymagają ich edycji.
   ========================================================================== */

/* --- Nagłówki w artykule --------------------------------------------------
   Ten sam pionowy znacznik, co w przewodnikach na stronach usług — żeby
   artykuł i strona usługi wyglądały jak jedna witryna. */

body.single .entry-content h2 {
	position: relative;
	padding-left: 18px;
	padding-top: 0;
	border-top: 0;
	margin-top: 34px;
}

body.single .entry-content h2::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.18em;
	bottom: 0.18em;
	width: 4px;
	border-radius: 2px;
	background: linear-gradient(180deg, var(--ph-cta), var(--ph-accent-light));
}

body.single .entry-content h3 {
	position: relative;
	padding-left: 18px;
	margin-top: 24px;
}

body.single .entry-content h3::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.55em;
	width: 8px;
	height: 2px;
	border-radius: 1px;
	background: var(--ph-accent-light);
}

/* --- Akapit wprowadzający -------------------------------------------------
   Pierwszy akapit bywa w całości pogrubiony. Pogrubienie na dziesięciu
   wierszach nie wyróżnia niczego, tylko męczy — zamieniamy je na większy
   stopień pisma, który prowadzi wzrok z tytułu w tekst. */

body.single .entry-content > p:first-of-type,
body.single .entry-content > p:first-of-type strong {
	font-size: 1.0625rem;
	font-weight: 400;
	line-height: 1.65;
	color: var(--ph-heading-3);
}

/* --- Pogrubienie w treści artykułu ---------------------------------------
   Próbowałem zamieniać akapity złożone wyłącznie z pogrubienia w wyróżnione
   ramki. Wycofane: w tych tekstach pogrubienie bywa fragmentem zdania
   rozbitym na osobne akapity ("documents such as a" / pogrubienie / "before
   they can begin"), a ramka rozrywała wtedy zdanie na trzy części.

   Zostaje samo złagodzenie: pogrubienie ma wyróżniać, a nie krzyczeć. */

body.single .entry-content strong {
	font-weight: 600;
	color: var(--ph-heading);
}

/* --- Listy ---------------------------------------------------------------- */

body.single .entry-content ul {
	list-style: none;
	padding-left: 0;
}

body.single .entry-content ul li {
	position: relative;
	padding-left: 26px;
	margin-bottom: 10px;
}

body.single .entry-content ul li::before {
	content: "";
	position: absolute;
	left: 2px;
	top: 0.52em;
	width: 7px;
	height: 7px;
	border-radius: 2px;
	background: var(--ph-cta);
	transform: rotate(45deg);
}

body.single .entry-content ol li::marker { color: var(--ph-cta); font-weight: 600; }

/* --- Spis treści: poziomy zagnieżdżenia -----------------------------------
   Podpunkty miały własną numerację od jedynki, przez co spis wyglądał, jakby
   zaczynał się od nowa w środku. Wcięcie i cieńszy krój rozdzielają poziomy. */

.kb-table-of-content-wrap ul ul { padding-left: 14px; }

.kb-table-of-content-wrap ul ul a {
	font-size: 0.8125rem;
	color: var(--ph-muted);
}

.kb-table-of-content-wrap ul ul a::before { opacity: 0.6; }

/* --- Obraz w artykule ------------------------------------------------------ */

body.single .entry-content figure { margin: 24px 0; }
body.single .entry-content figcaption {
	margin-top: 8px;
	font-size: 0.8125rem;
	color: var(--ph-muted);
	text-align: center;
}

/* --- Odnośnik do strony filarowej ----------------------------------------
   Audyt pokazał, że filary nie miały ani jednego linku z treści — tylko
   z menu, które Google waży słabiej. Ten pasek wiąże każdą stronę usługi
   z jej kategorią i z apostille w obie strony. */

.ph-parent-link {
	display: flex;
	align-items: center;
	gap: 8px;
	max-width: var(--ph-container);
	margin: 0 auto;
	padding: 10px var(--ph-gutter);
	font-size: 0.8125rem;
	color: var(--ph-muted);
}

.ph-parent-link .ph-i { color: var(--ph-cta); }

.ph-parent-link a {
	color: var(--ph-cta);
	text-decoration: none;
	font-weight: 500;
}

.ph-parent-link a:hover { text-decoration: underline; text-underline-offset: 2px; }

/* Etykieta grupy usług jest teraz odnośnikiem do filaru — ma wyglądać
   tak samo jak wcześniej, tylko reagować na najechanie. */
.ph-group__label a {
	color: inherit;
	text-decoration: none;
}

.ph-group__label a:hover {
	color: var(--ph-cta);
	text-decoration: underline;
	text-underline-offset: 3px;
}