/* ==========================================================================
   PoloniaHub — akcenty barwne w elementach powtarzalnych

   Osobny plik, bo color.css dobił do 11 KB, czyli do progu, przy którym
   skaner hostingu przerywa wysyłkę i zostawia plik zerowej długości.

   Tu trafiają rzeczy, które kolorem niosą znaczenie, a przez cały czas były
   szare: gwiazdki ocen, ptaszki przy korzyściach, ikony w pasie zaufania.
   Szara gwiazdka to gwiazdka nieprzyznana — kolor jest tu informacją,
   nie ozdobą.
   ========================================================================== */

/* --- Oceny ----------------------------------------------------------------
   Gwiazdki w opiniach były w kolorze tekstu. Złoto jest w tej roli
   konwencją na tyle silną, że szara gwiazdka czyta się jako pusta. */

/* Ciemniejsze złoto niż podpowiada odruch: #E9A23B daje na bieli 2,17:1,
   czyli poniżej progu 3:1, który WCAG stawia grafice niosącej treść —
   a gwiazdka niesie ocenę. #C27C0C trzyma 3,40:1 i nadal czyta się jako
   złoto, nie jako brąz. */
.ph-quote__stars { color: #C27C0C; letter-spacing: 0.08em; }

/* Cudzysłów otwierający jako znak graficzny — duży, bardzo jasny, pod
   tekstem. Nadaje opinii ciężar, którego nie da sama ramka. */
.ph-quote { position: relative; overflow: hidden; }

.ph-quote::before {
	content: "\201C";
	position: absolute;
	top: -26px;
	right: 10px;
	font-family: var(--ph-font-heading);
	font-size: 118px;
	line-height: 1;
	color: var(--ph-topic);
	opacity: 0.08;
	pointer-events: none;
}

.ph-quote > * { position: relative; }

/* --- Listy potwierdzeń ----------------------------------------------------
   Ptaszek przy korzyści to potwierdzenie, a nie punktor. Zieleń mówi to
   od razu; szarość kazała przeczytać tekst, żeby się domyślić. */

.ph-list--checks .ph-i,
.ph-hero__checks .ph-i,
.ph-hero__checks svg { color: var(--ph-success); }

/* --- Pas zaufania ---------------------------------------------------------
   Cztery ikony w rzędzie pod hero: bezpieczeństwo, czas, język, opiekun.
   Każda mówi o czym innym, więc każda dostaje własną barwę — rząd przestaje
   być szarym paskiem, a zaczyna czytać się jako cztery obietnice. */

.ph-trustbar .ph-i { font-size: 1.05rem; }

.ph-trustbar > *:nth-child(6n + 1) .ph-i { color: #0F766E; }
.ph-trustbar > *:nth-child(6n + 2) .ph-i { color: #B45309; }
.ph-trustbar > *:nth-child(6n + 3) .ph-i { color: #1D4ED8; }
.ph-trustbar > *:nth-child(6n + 4) .ph-i { color: #6D28D9; }
.ph-trustbar > *:nth-child(6n + 5) .ph-i { color: #9D174D; }
.ph-trustbar > *:nth-child(6n + 6) .ph-i { color: #0369A1; }

/* --- Powody wyboru --------------------------------------------------------
   Cztery kafelki opisują cztery różne przewagi, więc rotacja barw jest tu
   zgodna z treścią — inaczej niż w siatce usług, gdzie karty jednego działu
   muszą trzymać jeden kolor. */

.ph-why > *:nth-child(6n + 1) { --ph-topic: #0F766E; --ph-topic-soft: #ECFDF8; }
.ph-why > *:nth-child(6n + 2) { --ph-topic: #1D4ED8; --ph-topic-soft: #EDF3FE; }
.ph-why > *:nth-child(6n + 3) { --ph-topic: #B45309; --ph-topic-soft: #FEF5EA; }
.ph-why > *:nth-child(6n + 4) { --ph-topic: #6D28D9; --ph-topic-soft: #F4F0FE; }
.ph-why > *:nth-child(6n + 5) { --ph-topic: #9D174D; --ph-topic-soft: #FDF0F5; }
.ph-why > *:nth-child(6n + 6) { --ph-topic: #0369A1; --ph-topic-soft: #EDF7FD; }

/* Uwaga: tła nie wolno ustawiać na .ph-i. Ikona jest maską wypełnianą
   własnym background-color, więc podmiana tła kasuje rysunek i zostaje
   pusty kwadrat. Tło należy do kafelka, kolor do ikony. */
.ph-why .ph-service__icon { background: var(--ph-topic-soft); }
.ph-why .ph-i { color: var(--ph-topic); }

/* --- Kroki ----------------------------------------------------------------
   Cztery identyczne granatowe krążki. Gradient i pierścień dają im ciężar
   punktu początkowego, a nie numeru strony. */

.ph-step__num {
	background: linear-gradient(140deg, var(--ph-accent-light), var(--ph-cta) 60%, var(--ph-primary));
	box-shadow: 0 0 0 4px rgba(36, 72, 184, 0.10);
	color: #FFFFFF;
}

/* --- Lista w karcie wyróżnionej ------------------------------------------- */

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

/* --- Plakietki ------------------------------------------------------------ */

.ph-badge--success {
	background: #E8F7EE;
	color: #12703A;
	box-shadow: inset 0 0 0 1px rgba(22, 163, 74, 0.22);
}

.ph-badge--trust {
	background: var(--ph-topic-soft);
	color: var(--ph-topic-deep);
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ph-topic) 22%, transparent);
}

/* --- Stopka ---------------------------------------------------------------
   Cienka wstęga barw działów nad stopką: domyka stronę tym samym kluczem,
   którym rozdziela usługi, i zamyka układ czymś innym niż płaska krawędź. */

.site-footer::after {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 3px;
	background: linear-gradient(90deg,
		#0F766E 0%, #0F766E 16.6%,
		#6D28D9 16.6%, #6D28D9 33.3%,
		#B45309 33.3%, #B45309 50%,
		#1D4ED8 50%, #1D4ED8 66.6%,
		#9D174D 66.6%, #9D174D 83.3%,
		#0369A1 83.3%, #0369A1 100%);
}

/* --- Pytania i odpowiedzi -------------------------------------------------
   Plus przy pytaniu był w kolorze tekstu, więc wyglądał jak znak
   interpunkcyjny, a nie jak przycisk. Kolor i kółko mówią, że to się klika. */

.ph-faq summary::after {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--ph-topic-soft);
	color: var(--ph-topic);
	font-size: 1rem;
	transition: background-color var(--ph-transition), color var(--ph-transition);
}

.ph-faq summary:hover::after {
	background: var(--ph-topic);
	color: var(--ph-surface);
}

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

/* --- Opinie ---------------------------------------------------------------
   Kreska przy cytacie w barwie działu zamiast granatu — na stronie głównej
   zostaje granat, bo tam żaden dział nie jest ustawiony. */

.ph-quote blockquote { border-left-color: var(--ph-topic); }

.ph-avatar {
	background: var(--ph-topic-soft);
	color: var(--ph-topic-deep);
}

/* --- Listy z ikoną w kolumnie opisowej ------------------------------------
   Strona kontaktu i panele boczne mają listy "co dostajesz" z ikoną przy
   każdej pozycji. Ikony były w kolorze tekstu, więc trzy różne obietnice —
   czas odpowiedzi, język, poufność — wyglądały jak trzy szare znaczki. */

.ph-contact__intro .ph-list > li:nth-child(6n + 1) .ph-i { color: #0F766E; }
.ph-contact__intro .ph-list > li:nth-child(6n + 2) .ph-i { color: #1D4ED8; }
.ph-contact__intro .ph-list > li:nth-child(6n + 3) .ph-i { color: #6D28D9; }
.ph-contact__intro .ph-list > li:nth-child(6n + 4) .ph-i { color: #B45309; }
.ph-contact__intro .ph-list > li:nth-child(6n + 5) .ph-i { color: #9D174D; }
.ph-contact__intro .ph-list > li:nth-child(6n + 6) .ph-i { color: #0369A1; }

/* --- Panel boczny ---------------------------------------------------------
   Cienka kreska u góry wiąże panel z barwą działu zamiast zostawiać go
   jako samotny szary prostokąt. */

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

.ph-panel::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 3px;
	background: linear-gradient(90deg, var(--ph-topic), var(--ph-topic-deep));
}

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

/* --- Nota ----------------------------------------------------------------- */

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