/* ==========================================================================
   PoloniaHub — barwa dziedziny

   Serwis prowadzi pięć różnych spraw urzędowych, a wyglądał jak jedna: cała
   witryna w tym samym granacie, trzy identyczne szare ikony w każdej siatce
   kart. Czytelnik przechodzący z ZUS-u do ksiąg wieczystych nie dostawał
   żadnego sygnału, że zmienił dział.

   Każdy dział ma tu własny kolor. Nie jako ozdobę — kolor niesie informację
   o tym, gdzie jesteś, i wraca na stronie działu, na jego podstronach i
   w artykułach z tej samej kategorii. Klasę ph-topic-* nadaje body_class
   w topics.php, na podstawie najwyższego przodka strony.

   Barwy dobrane tak, by każda dawała na bieli co najmniej 4,5:1 — to próg
   czytelności WCAG AA dla tekstu. Wersje --deep służą gradientom, --soft
   tłom (8-procentowy odcień, nie pastel).
   ========================================================================== */

:root {
	/* Wartości domyślne dla stron bez działu: strona główna, zamówienie,
	   baza wiedzy, kontakt. --deep jest tu jaśniejsze od granatu marki,
	   bo gradient paska wezwania biegnie od granatu do tej barwy — przy
	   dwóch tych samych wartościach wychodziła płaska plama. */
	--ph-topic:      #2448B8;
	--ph-topic-deep: #16337F;
	--ph-topic-soft: #EDF2FC;
}

body.ph-topic-vital {
	--ph-topic:      #0F766E;  /* morska zieleń — akty stanu cywilnego */
	--ph-topic-deep: #115E59;
	--ph-topic-soft: #ECFDF8;
}

body.ph-topic-citizenship {
	--ph-topic:      #6D28D9;  /* fiolet — obywatelstwo i paszport */
	--ph-topic-deep: #5B21B6;
	--ph-topic-soft: #F4F0FE;
}

body.ph-topic-employment {
	--ph-topic:      #B45309;  /* bursztyn — praca, ZUS, świadectwa */
	--ph-topic-deep: #92400E;
	--ph-topic-soft: #FEF5EA;
}

body.ph-topic-company {
	--ph-topic:      #1D4ED8;  /* błękit — firmy, KRS, CEIDG, NIP */
	--ph-topic-deep: #1E3A8A;
	--ph-topic-soft: #EDF3FE;
}

body.ph-topic-property {
	--ph-topic:      #9D174D;  /* wino — nieruchomości i spadki */
	--ph-topic-deep: #831843;
	--ph-topic-soft: #FDF0F5;
}

body.ph-topic-apostille {
	--ph-topic:      #0369A1;  /* lazur — apostille i legalizacja */
	--ph-topic-deep: #075985;
	--ph-topic-soft: #EDF7FD;
}

/* --- Nadtytuł jako etykieta ------------------------------------------------
   Drobne wersaliki w kolorze marki gubiły się nad nagłówkiem. Etykieta
   z tłem i kropką czyta się jako osobny element, a nie jako pierwsza,
   dziwnie mała linijka nagłówka. */

.ph-eyebrow {
	/* components.css ustawia tu display:block i jest wczytywany później niż
	   sections.css — bez tej linijki etykieta rozciąga się na całą szerokość
	   kontenera i zamiast plakietki wychodzi pasek. */
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 4px 11px 4px 9px;
	border-radius: 999px;
	/* Biel, a nie odcień działu: plakietka stoi najczęściej w paśmie
	   otwierającym, które ma dokładnie ten odcień w tle — na nim znikała.
	   Obwódka w barwie działu niesie kolor, tło daje kontrast. */
	background: var(--ph-surface);
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ph-topic) 25%, transparent);
	color: var(--ph-topic);
	line-height: 1.4;
}

/* life.css dokłada kropkę po tekście; z naszą kropką przed tekstem
   plakietka dostawała kropki z obu stron i wyglądała jak pomyłka. */
.ph-sectionhead .ph-eyebrow::after { content: none; }

.ph-eyebrow::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--ph-topic);
	opacity: 1;
}

/* Na granatowym pasku wezwania etykieta musi się odwrócić. */
.ph-cta-band .ph-eyebrow {
	background: rgba(255, 255, 255, 0.14);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
	color: #DCE6FF;
}
.ph-cta-band .ph-eyebrow::before { background: #8FB0FF; }

/* --- Pasmo otwierające ----------------------------------------------------
   Nagłówek strony na płaskiej szarości wyglądał jak niedokończony. Delikatny
   gradient w barwie działu i dwie rozmyte plamy dają głębię bez grafiki,
   której i tak nie da się wstawić w treść (multisite wycina SVG). */

.ph-section:has(> .ph-container > .ph-order__intro),
body.single .entry-hero {
	position: relative;
	overflow: hidden;
	background:
		radial-gradient(60% 120% at 88% 10%, var(--ph-topic-soft) 0%, transparent 60%),
		linear-gradient(180deg, var(--ph-topic-soft) 0%, var(--ph-bg) 78%);
}

.ph-section:has(> .ph-container > .ph-order__intro)::after {
	content: "";
	position: absolute;
	right: -70px;
	top: -90px;
	width: 360px;
	height: 360px;
	border-radius: 50%;
	background: var(--ph-topic);
	opacity: 0.10;
	pointer-events: none;
}

/* Druga warstwa: siatka kropek w prawym dolnym rogu pasma. Nawiązuje do
   mapy w hero strony głównej i do stopki — ten sam motyw otwiera, prowadzi
   i zamyka stronę, więc pasmo przestaje być pustym prostokątem. */
.ph-section:has(> .ph-container > .ph-order__intro)::before {
	content: "";
	position: absolute;
	right: 40px;
	bottom: -30px;
	width: 260px;
	height: 180px;
	pointer-events: none;
	background-image: radial-gradient(circle, color-mix(in srgb, var(--ph-topic) 34%, transparent) 1.5px, transparent 1.5px);
	background-size: 18px 18px;
	-webkit-mask-image: linear-gradient(200deg, #000 10%, transparent 75%);
	mask-image: linear-gradient(200deg, #000 10%, transparent 75%);
}

@media (max-width: 900px) {
	.ph-section:has(> .ph-container > .ph-order__intro)::before,
	.ph-section:has(> .ph-container > .ph-order__intro)::after { display: none; }
}

.ph-section:has(> .ph-container > .ph-order__intro) > .ph-container {
	position: relative;
	z-index: 1;
}

/* --- Kafelki ikon ---------------------------------------------------------
   Wszystkie trzy karty w siatce miały tę samą szarą ikonę dokumentu. Kolor
   rozróżnia je wzrokowo, zanim czytelnik przeczyta tytuł. Na stronie działu
   każda karta dostaje odcień działu, na stronie głównej — kolejne barwy
   z palety, bo tam siatka zbiera wszystkie dziedziny naraz. */

.ph-service__icon {
	background: var(--ph-topic-soft);
	color: var(--ph-topic);
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ph-topic) 14%, transparent);
	transition: transform var(--ph-transition), background-color var(--ph-transition);
}

/* Ikona zajmowała 18 px w kafelku o boku 44 px i ginęła w środku. */
.ph-service__icon { font-size: 1.3rem; }

.ph-service:hover .ph-service__icon { transform: translateY(-1px); }

/* Strona główna i strona zamówienia zbierają wszystkie dziedziny naraz,
   więc barwa nie może pochodzić z klasy <body>. Bierze ją grupa kart —
   klasę ph-group--* nadaje etykieta stojąca nad siatką. Wcześniej kolor
   szedł po pozycji karty i trzy akty stanu cywilnego wychodziły w trzech
   różnych barwach, czyli kolor mówił coś nieprawdziwego. */

.ph-group--vital       { --ph-topic: #0F766E; --ph-topic-deep: #115E59; --ph-topic-soft: #ECFDF8; }
.ph-group--citizenship { --ph-topic: #6D28D9; --ph-topic-deep: #5B21B6; --ph-topic-soft: #F4F0FE; }
.ph-group--employment  { --ph-topic: #B45309; --ph-topic-deep: #92400E; --ph-topic-soft: #FEF5EA; }
.ph-group--company     { --ph-topic: #1D4ED8; --ph-topic-deep: #1E3A8A; --ph-topic-soft: #EDF3FE; }
.ph-group--property    { --ph-topic: #9D174D; --ph-topic-deep: #831843; --ph-topic-soft: #FDF0F5; }
.ph-group--apostille   { --ph-topic: #0369A1; --ph-topic-deep: #075985; --ph-topic-soft: #EDF7FD; }

/* Etykieta grupy dostaje kreskę w barwie działu — siatki przestają być
   jednym ciągiem kart, a stają się pięcioma rozpoznawalnymi działami. */
.ph-group__label {
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--ph-topic);
}

.ph-group__label::before {
	content: "";
	width: 18px;
	height: 3px;
	border-radius: 2px;
	flex: 0 0 auto;
	background: var(--ph-topic);
}

/* --- Karta: krawędź w barwie działu ---------------------------------------
   Pasek u góry pojawia się dopiero przy najechaniu, więc siatka w spoczynku
   zostaje spokojna, a reakcja na kursor jest jednoznaczna. */

.ph-service {
	position: relative;
	overflow: hidden;
}

.ph-service::after {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 3px;
	background: linear-gradient(90deg, var(--ph-topic), var(--ph-topic-deep));
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--ph-transition);
}

.ph-service:hover::after { transform: scaleX(1); }
.ph-service:hover { border-color: color-mix(in srgb, var(--ph-topic) 35%, var(--ph-border)); }

.ph-service__link { color: var(--ph-topic); }

/* --- Znaczniki nagłówków --------------------------------------------------
   Pionowa kreska przy H2 była wszędzie granatowa. Teraz niesie barwę działu,
   więc długa strona poradnikowa od razu mówi, w którym dziale jesteś. */

.ph-legal h2::before,
body.single .entry-content h2::before,
body.single .entry-content h3::before {
	background: linear-gradient(180deg, var(--ph-topic), var(--ph-topic-deep));
}

.ph-legal ul li::before,
body.single .entry-content ul li::before {
	background: var(--ph-topic);
}

.ph-legal ol li::marker,
body.single .entry-content ol li::marker { color: var(--ph-topic); }

/* --- Siatka kropek w sekcji przeplatanej ---------------------------------- */

.ph-section--alt::before {
	background-image: radial-gradient(circle, color-mix(in srgb, var(--ph-topic) 16%, transparent) 1px, transparent 1px);
}

/* --- Pasek wezwania -------------------------------------------------------
   Płaski granat zamieniony na gradient z domieszką barwy działu: ten sam
   ciężar, więcej głębi, a tekst zachowuje kontrast powyżej 7:1. */

.ph-cta-band {
	position: relative;
	overflow: hidden;
	background: linear-gradient(135deg, var(--ph-primary) 0%, var(--ph-topic-deep) 62%, var(--ph-topic) 135%);
}

.ph-cta-band::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image: radial-gradient(circle, rgba(255, 255, 255, 0.07) 1px, transparent 1px);
	background-size: 22px 22px;
}

.ph-cta-band > * { position: relative; }

/* Przycisk główny w pasku był granatowy na granatowo-kolorowym gradiencie —
   na fiolecie i winie tekst schodził poniżej progu czytelności. Biała płytka
   z napisem w barwie działu trzyma kontrast na każdym z sześciu tł i przy
   okazji wyraźniej oddziela pierwszą akcję od drugiej. */
.ph-cta-band .ph-btn--primary {
	background: var(--ph-surface);
	border-color: var(--ph-surface);
	color: var(--ph-topic-deep);
}
.ph-cta-band .ph-btn--primary:hover {
	background: #F0F4FF;
	border-color: #F0F4FF;
	color: var(--ph-topic-deep);
}

/* --- Pytania i odpowiedzi ------------------------------------------------- */

.ph-faq summary:hover { color: var(--ph-topic); }
.ph-faq details[open] summary { color: var(--ph-topic); }

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

.ph-callout {
	background: var(--ph-topic-soft);
	border-left-color: var(--ph-topic);
}
.ph-callout .ph-i { color: var(--ph-topic); }

/* --- Liczby --------------------------------------------------------------- */

.ph-stat__value { color: var(--ph-topic); }

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

/* --- Tabele w treści ------------------------------------------------------
   Nagłówek tabeli bez tła zlewał się z pierwszym wierszem danych. */

.ph-legal table th,
body.single .entry-content table th {
	background: var(--ph-topic-soft);
	color: var(--ph-topic-deep);
	border-bottom: 2px solid color-mix(in srgb, var(--ph-topic) 30%, transparent);
}

/* --- Zapas dla przeglądarek bez :has() ------------------------------------
   Bez obsługi :has() pasmo otwierające zostaje na dotychczasowym tle —
   traci gradient, nie traci czytelności. */

@supports not selector(:has(*)) {
	body.single .entry-hero {
		background: linear-gradient(180deg, var(--ph-topic-soft) 0%, var(--ph-bg) 78%);
	}
}