/*!
Theme Name: Kadence Child
Theme URI: https://www.kadencewp.com/kadence-theme/
Template: kadence
Author: Kadence WP
Author URI: https://www.kadencewp.com/
Description: A child theme for the Kadence Theme.
Version: 1.0.0
License: GNU General Public License v3.0 (or later)
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Text Domain: kadence-child
*/

/* ==========================================================================
   Fonty hostowane lokalnie
   Playfair Display i Inter z Google Fonts (licencja SIL OFL), serwowane
   z naszego serwera. Powód nie jest tylko wydajnościowy: osadzanie fontów
   wprost z serwerów Google bywa w Niemczech uznawane za naruszenie RODO,
   a Niemcy są rynkiem docelowym.

   Pliki leżą w bibliotece mediów, nie w katalogu motywu. Powód jest
   praktyczny: skaner hostingu odrzuca wysyłkę plików fontów przez FTP
   (błąd 426, plik zerowej długości), natomiast upload przez WordPressa
   idzie przez PHP i przechodzi bez przeszkód.

   Oba kroje są zmienne — jeden plik obsługuje grubości 400, 500 i 600,
   więc zamiast dwunastu plików mamy cztery (196 KB zamiast 566 KB).
   Zakres latin-ext jest konieczny dla polskich znaków: ą ć ę ł ń ó ś ź ż,
   które pojawiają się w nazwach dokumentów (np. „Świadectwo Pracy").
   ========================================================================== */

@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url('/wp-content/uploads/2026/09/inter-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url('/wp-content/uploads/2026/09/inter-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: 'Playfair Display';
	font-style: normal;
	font-weight: 400 900;
	font-display: swap;
	src: url('/wp-content/uploads/2026/09/playfair-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Playfair Display';
	font-style: normal;
	font-weight: 400 900;
	font-display: swap;
	src: url('/wp-content/uploads/2026/09/playfair-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ==========================================================================
   PoloniaHub — system projektowy
   Źródło: Brand & Website Style Guide v1.0
   Zasada: wszystkie wartości jako zmienne. Kolorów i rozmiarów nie wpisujemy
   wprost w regułach — zmiana ma być możliwa w jednym miejscu.
   ========================================================================== */

:root {
	/* --- Kolory marki --- */
	--ph-primary:        #0D2B6B;  /* granat podstawowy */
	--ph-cta:            #2448B8;  /* przyciski, akcenty */
	--ph-accent-light:   #3B6DF6;  /* focus, linki, podkreślenia */

	/* --- Tekst --- */
	--ph-heading:        #101828;  /* H1 */
	--ph-heading-2:      #16213A;  /* H2 */
	--ph-heading-3:      #1F2937;  /* H3 */
	--ph-body:           #5E6B82;  /* tekst */
	--ph-muted:          #667085;  /* drobny tekst, etykiety */

	/* --- Tła i obramowania --- */
	--ph-bg:             #F7F9FC;  /* tło strony */
	--ph-surface:        #FFFFFF;  /* karty */
	--ph-border:         #DCE3EE;  /* linie */
	--ph-border-input:   #CDD5DF;  /* obramowanie pól */

	/* --- Statusy --- */
	--ph-success:        #16A34A;
	--ph-alert:          #C7352A;
	--ph-warning:        #F59E0B;

	/* --- Kroje --- */
	--ph-font-heading:   "Playfair Display", Georgia, "Times New Roman", serif;
	--ph-font-body:      Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

	/* --- Skala typograficzna ---
	   clamp() przechodzi płynnie między wartością mobilną a desktopową
	   ze style guide, bez skoków na tabletach. */
	--ph-h1:    clamp(1.875rem, 1.45rem + 1.7vw, 2.75rem);     /* 30 → 44 px */
	--ph-h2:    clamp(1.375rem, 1.20rem + 0.7vw, 1.875rem);    /* 22 → 30 px */
	--ph-h3:    clamp(1.0625rem, 1.00rem + 0.25vw, 1.25rem);   /* 17 → 20 px */
	--ph-body-size: clamp(0.9375rem, 0.91rem + 0.12vw, 1rem);  /* 15 → 16 px */
	--ph-small: clamp(0.75rem, 0.73rem + 0.10vw, 0.8125rem);   /* 12 → 13 px */

	--ph-lh-h1:   1.1;
	--ph-lh-h2:   1.2;
	--ph-lh-h3:   1.3;
	--ph-lh-body: 1.6;

	/* Miara tekstu. Powyżej 75 znaków w linii oko gubi początek następnego
	   wiersza, dlatego ograniczamy akapity liczbą znaków, a nie szerokością
	   kolumny — działa niezależnie od rozmiaru okna. */
	--ph-measure:      70ch;
	--ph-measure-lead: 60ch;

	/* --- Odstępy --- */
	/* Siatka 8 px. Ekranem odniesienia jest MacBook 13" (1280 × 800):
	   odstęp sekcji wypada tam 72 px. Wartości ze style guide (96–120 px)
	   na ekranie o wysokości 800 px dawały ścianę pustki. */
	/* Uwaga: to wyściółka JEDNEJ sekcji. Dwie sąsiadujące sekcje sumują swoje
	   wyściółki, więc odstęp widziany przez czytelnika jest dwa razy większy.
	   38 px z każdej strony daje na laptopie 76 px przerwy — tyle, ile
	   zakłada DESIGN-RULES.md. */
	/* Wyściółka JEDNEJ sekcji — dwie sąsiadujące sumują się, więc przerwa
	   widziana przez czytelnika jest dwa razy większa. 28 px z każdej strony
	   daje 56 px przerwy. */
	--ph-section:     clamp(1.25rem, 1.05rem + 0.7vw, 1.75rem);  /* 20 → 28 px */
	--ph-container:   1200px;
	--ph-gutter:      24px;
	--ph-gap-title:   clamp(0.875rem, 0.8rem + 0.3vw, 1.25rem); /* 14 → 20 px */
	--ph-gap-cta:     clamp(1rem, 0.9rem + 0.4vw, 1.5rem);    /* 16 → 24 px */
	--ph-gap-buttons: 12px;

	/* --- Formy --- */
	--ph-radius:        10px;
	--ph-radius-input:  8px;
	--ph-control-h:     clamp(44px, 41px + 0.9vw, 50px);
	--ph-transition:    0.2s ease;
	--ph-focus-ring:    0 0 0 3px rgba(59, 109, 246, 0.25);

	/* --- Mapowanie na paletę Kadence ---
	   Kadence buduje na tych zmiennych nagłówek, stopkę, bloki i przyciski
	   w edytorze. Nadpisanie ich sprawia, że elementy, których sami nie
	   stylujemy, też trzymają się marki.

	   Mapujemy wyłącznie sloty 1–6 (akcenty i tekst). Slotów 7, 8 i 9 NIE
	   ruszamy: w domyślnej palecie Kadence to jasne tła, ale ta witryna ma
	   paletę własną, w której slot 7 jest kolorem ikon. Nadpisanie go
	   kolorem tła sprawiło, że 13 ikon w kartach usług stało się
	   niewidocznych — zlewały się z podłożem. */
	--global-palette1: var(--ph-cta);
	--global-palette2: var(--ph-primary);
	--global-palette3: var(--ph-heading);
	--global-palette4: var(--ph-heading-2);
	--global-palette5: var(--ph-body);
	--global-palette6: var(--ph-muted);

	/* Kroje Kadence. W Customizerze ustawione są Sora, Lora i Montserrat —
	   trzy kroje spoza marki. Podmieniamy je u źródła, żeby nagłówek,
	   nawigacja, stopka i przyciski w edytorze też używały naszych. */
	--global-heading-font-family:     var(--ph-font-heading);
	--global-body-font-family:        var(--ph-font-body);
	--global-primary-nav-font-family: var(--ph-font-body);
}

/* --------------------------------------------------------------------------
   Typografia
   -------------------------------------------------------------------------- */

body {
	font-family: var(--ph-font-body);
	font-size: var(--ph-body-size);
	line-height: var(--ph-lh-body);
	color: var(--ph-body);
	background-color: var(--ph-bg);
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--ph-font-heading);
	font-weight: 600;
}

h1 { font-size: var(--ph-h1); line-height: var(--ph-lh-h1); color: var(--ph-heading); letter-spacing: -0.01em; }
h2 { font-size: var(--ph-h2); line-height: var(--ph-lh-h2); color: var(--ph-heading-2); }
h3 { font-size: var(--ph-h3); line-height: var(--ph-lh-h3); color: var(--ph-heading-3); }

p { max-width: var(--ph-measure); }

small,
.ph-small { font-size: var(--ph-small); color: var(--ph-muted); line-height: 1.5; }

/* Druga linia nagłówka w kolorze akcentu — jak "without leaving home"
   w przykładzie hero ze style guide. */
.ph-accent { color: var(--ph-cta); }

/* --------------------------------------------------------------------------
   Układ
   -------------------------------------------------------------------------- */

.ph-container {
	max-width: var(--ph-container);
	margin-inline: auto;
	padding-inline: var(--ph-gutter);
}

.ph-section { padding-block: var(--ph-section); }

.ph-stack > * + *           { margin-top: var(--ph-gap-title); }
.ph-stack > * + .ph-actions { margin-top: var(--ph-gap-cta); }

.ph-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ph-gap-buttons);
}

/* --------------------------------------------------------------------------
   Przyciski
   -------------------------------------------------------------------------- */

.ph-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--ph-control-h);
	padding: 0 clamp(20px, 15px + 1.4vw, 28px);
	border: 2px solid transparent;
	border-radius: var(--ph-radius);
	font-family: var(--ph-font-body);
	font-size: clamp(0.875rem, 0.85rem + 0.12vw, 0.9375rem);
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--ph-transition),
	            border-color var(--ph-transition),
	            color var(--ph-transition);
}

.ph-btn--primary {
	background-color: var(--ph-cta);
	color: var(--ph-surface);
}
.ph-btn--primary:hover,
.ph-btn--primary:focus-visible {
	background-color: #193A9A;
	color: var(--ph-surface);
}

.ph-btn--secondary {
	background-color: var(--ph-surface);
	border-color: var(--ph-cta);
	color: var(--ph-cta);
}
.ph-btn--secondary:hover,
.ph-btn--secondary:focus-visible {
	background-color: #F4F7FF;
}

.ph-btn:focus-visible {
	outline: none;
	box-shadow: var(--ph-focus-ring);
}

/* --------------------------------------------------------------------------
   Pola formularza
   Obejmuje pola Forminatora, żeby formularz zamówienia nie wyglądał
   jak doklejony z innej strony.
   -------------------------------------------------------------------------- */

.ph-field,
input[type="text"], input[type="email"], input[type="tel"],
input[type="number"], input[type="date"], input[type="url"],
select, textarea,
.forminator-input, .forminator-textarea, .forminator-select {
	width: 100%;
	min-height: var(--ph-control-h);
	padding: 0 16px;
	border: 1px solid var(--ph-border-input);
	border-radius: var(--ph-radius-input);
	background-color: var(--ph-surface);
	font-family: var(--ph-font-body);
	/* 16px to nie estetyka: przy mniejszej wartości Safari na iOS przybliża
	   stronę po kliknięciu w pole i klient gubi kontekst formularza. */
	font-size: 16px;
	color: var(--ph-heading-3);
	transition: border-color var(--ph-transition), box-shadow var(--ph-transition);
}

textarea, .forminator-textarea {
	min-height: 140px;
	padding: 14px 16px;
	line-height: var(--ph-lh-body);
}

input:focus, select:focus, textarea:focus,
.forminator-input:focus, .forminator-textarea:focus {
	outline: none;
	border-color: var(--ph-accent-light);
	box-shadow: var(--ph-focus-ring);
}

input::placeholder, textarea::placeholder { color: var(--ph-muted); }

.ph-label {
	display: block;
	margin-bottom: 6px;
	font-size: var(--ph-small);
	color: var(--ph-muted);
}

.ph-field--error,
input[aria-invalid="true"] { border-color: var(--ph-alert); }

.ph-error {
	margin-top: 6px;
	font-size: var(--ph-small);
	color: var(--ph-alert);
}

/* --------------------------------------------------------------------------
   Karty i oznaczenia
   -------------------------------------------------------------------------- */

.ph-card {
	background-color: var(--ph-surface);
	border: 1px solid var(--ph-border);
	border-radius: var(--ph-radius);
	padding: clamp(20px, 16px + 1.1vw, 28px);
}

.ph-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 14px;
	border-radius: 999px;
	font-size: var(--ph-small);
	font-weight: 500;
}

.ph-badge--trust   { background-color: #E8EEFB; color: var(--ph-primary); }
.ph-badge--success { background-color: #E7F6EC; color: var(--ph-success); }
.ph-badge--alert   { background-color: #FBE9E7; color: var(--ph-alert); }
.ph-badge--warning { background-color: #FEF3E2; color: #9A6200; }

/* --------------------------------------------------------------------------
   Dostępność
   Odbiorcy to w dużej części osoby starsze i czytające w drugim języku —
   widoczny focus i możliwość wyłączenia animacji nie są dodatkiem.
   -------------------------------------------------------------------------- */

a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid var(--ph-accent-light);
	outline-offset: 2px;
}

.ph-skip-link { position: absolute; left: -9999px; }
.ph-skip-link:focus {
	left: var(--ph-gutter);
	top: var(--ph-gutter);
	z-index: 9999;
	padding: 12px 20px;
	background: var(--ph-surface);
	border-radius: var(--ph-radius-input);
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}