/*
Theme Name: Korszlak
Theme URI: https://korszlak.pl
Author: Matrix Usługi Informatyczne
Author URI: https://www.matrix.info.pl
Description: Motyw wizytówki Tomasza Korszlaka — świadectwa charakterystyki energetycznej, przeglądy techniczne budynków, kierowanie budowami. Prosty, czytelny, bez wtyczek i bez zapytań do serwisów zewnętrznych.
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: korszlak
Tags: business, one-column, custom-menu, translation-ready

Fonty IBM Plex Sans i IBM Plex Mono — licencja SIL Open Font License 1.1,
pliki .woff2 leżą w assets/fonts i są serwowane z naszego serwera.
Żadnego zapytania do fonts.googleapis.com: strona nie wysyła adresów IP
odwiedzających do usług zewnętrznych, a i tak ładuje się szybciej.
*/

/* =========================================================================
 * 1. Fonty
 * ====================================================================== */

@font-face {
	font-family: 'IBM Plex Sans';
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url('assets/fonts/plex-sans-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: 'IBM Plex Sans';
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url('assets/fonts/plex-sans-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: 'IBM Plex Mono';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('assets/fonts/plex-mono-500-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: 'IBM Plex Mono';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('assets/fonts/plex-mono-500-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;
}

/* =========================================================================
 * 2. Zmienne
 *
 * Paleta celowo inna niż w dwóch poprzednich realizacjach: grafit
 * z zielenią klasy energetycznej. Zieleń nie jest ozdobą — to ten sam
 * kolor, którym oznacza się najlepsze klasy na świadectwie, więc na tej
 * stronie coś znaczy.
 * ====================================================================== */

:root {
	--ks-atrament: #0e1720;
	--ks-grafit: #1d2a38;
	--ks-stal: #4a5a6d;
	--ks-tekst: #24313f;
	--ks-linia: #d6dee6;
	--ks-linia-mocna: #b9c5d1;
	--ks-tlo: #f4f7f9;
	--ks-tlo-cieply: #eef2f5;
	--ks-biel: #ffffff;

	--ks-akcent: #1e9e5a;
	--ks-akcent-ciemny: #177845;
	--ks-akcent-jasny: #e6f4ec;
	--ks-bursztyn: #d99323;

	/* Klasy energetyczne — kolory ze skali na świadectwie. */
	--ks-klasa-a: #00a651;
	--ks-klasa-b: #4cb847;
	--ks-klasa-c: #8cc63e;
	--ks-klasa-d: #f7ec13;
	--ks-klasa-e: #fbb040;
	--ks-klasa-f: #f26522;
	--ks-klasa-g: #ed1c24;

	--ks-szer: 1180px;
	--ks-szer-tekst: 44rem;
	--ks-promien: 3px;
	--ks-cien: 0 1px 2px rgba(14, 23, 32, .06), 0 8px 24px rgba(14, 23, 32, .06);
}

/* =========================================================================
 * 3. Podstawy
 * ====================================================================== */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

body {
	margin: 0;
	background: var(--ks-biel);
	color: var(--ks-tekst);
	font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
	font-size: 1.0625rem;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
	margin: 0 0 .6em;
	color: var(--ks-atrament);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -.015em;
}

h1 { font-size: clamp(2rem, 1.4rem + 2.4vw, 3.1rem); }
h2 { font-size: clamp(1.55rem, 1.25rem + 1.2vw, 2.15rem); }
h3 { font-size: 1.25rem; }
h4 { font-size: 1.05rem; }

p, ul, ol {
	margin: 0 0 1.15em;
}

a {
	color: var(--ks-akcent-ciemny);
	text-decoration-thickness: 1px;
	text-underline-offset: .18em;
}

a:hover,
a:focus {
	color: var(--ks-atrament);
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

hr {
	border: 0;
	border-top: 1px solid var(--ks-linia);
	margin: 2.5rem 0;
}

:focus-visible {
	outline: 3px solid var(--ks-akcent);
	outline-offset: 2px;
}

.ks-kontener {
	width: 100%;
	max-width: var(--ks-szer);
	margin: 0 auto;
	padding: 0 1.25rem;
}

.ks-pomijacz {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--ks-atrament);
	color: #fff;
	padding: .75rem 1.25rem;
	z-index: 999;
}

.ks-pomijacz:focus {
	left: 0;
}

/* Etykieta techniczna — wersaliki w kroju maszynowym. Powtarza się na
   całej stronie i to ona nadaje jej inżynierski charakter. */
.ks-etykieta {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	margin: 0 0 .9rem;
	font-family: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
	font-size: .78rem;
	font-weight: 500;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--ks-akcent-ciemny);
}

.ks-etykieta::before {
	content: '';
	width: 1.6rem;
	height: 2px;
	background: var(--ks-akcent);
}

.ks-etykieta--jasna {
	color: #7fdcaa;
}

.ks-etykieta--jasna::before {
	background: #7fdcaa;
}

.ks-lead {
	font-size: 1.15rem;
	line-height: 1.6;
	color: var(--ks-stal);
	max-width: var(--ks-szer-tekst);
}

/* =========================================================================
 * 4. Przyciski
 * ====================================================================== */

.ks-przycisk {
	display: inline-flex;
	align-items: center;
	gap: .55rem;
	padding: .8rem 1.5rem;
	border: 1px solid var(--ks-akcent);
	border-radius: var(--ks-promien);
	background: var(--ks-akcent);
	color: #fff;
	font-weight: 600;
	font-size: 1rem;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .15s ease, border-color .15s ease;
}

.ks-przycisk:hover,
.ks-przycisk:focus {
	background: var(--ks-akcent-ciemny);
	border-color: var(--ks-akcent-ciemny);
	color: #fff;
}

.ks-przycisk--obrys {
	background: transparent;
	color: var(--ks-atrament);
	border-color: var(--ks-linia-mocna);
}

.ks-przycisk--obrys:hover,
.ks-przycisk--obrys:focus {
	background: var(--ks-atrament);
	border-color: var(--ks-atrament);
	color: #fff;
}

.ks-przycisk--na-ciemnym {
	background: transparent;
	color: #fff;
	border-color: rgba(255, 255, 255, .35);
}

.ks-przycisk--na-ciemnym:hover,
.ks-przycisk--na-ciemnym:focus {
	background: #fff;
	border-color: #fff;
	color: var(--ks-atrament);
}

/* =========================================================================
 * 5. Nagłówek i menu
 * ====================================================================== */

.ks-naglowek {
	position: sticky;
	top: 0;
	z-index: 40;
	background: rgba(255, 255, 255, .96);
	border-bottom: 1px solid var(--ks-linia);
	backdrop-filter: saturate(140%) blur(6px);
}

.ks-naglowek__pasek {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	min-height: 74px;
}

.ks-marka {
	display: flex;
	align-items: center;
	gap: .8rem;
	text-decoration: none;
	color: var(--ks-atrament);
}

.ks-marka__godlo {
	width: 40px;
	height: 40px;
	flex: 0 0 40px;
	color: var(--ks-akcent);
}

.ks-marka__nazwa {
	display: block;
	font-weight: 600;
	font-size: 1.08rem;
	letter-spacing: -.01em;
	line-height: 1.15;
}

.ks-marka__rola {
	display: block;
	font-family: 'IBM Plex Mono', ui-monospace, Consolas, monospace;
	font-size: .68rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ks-stal);
}

.ks-naglowek__prawa {
	display: flex;
	align-items: center;
	gap: 1.25rem;
}

.ks-naglowek__telefon {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	font-weight: 600;
	text-decoration: none;
	color: var(--ks-atrament);
	white-space: nowrap;
}

.ks-naglowek__telefon svg {
	width: 18px;
	height: 18px;
	color: var(--ks-akcent);
}

.ks-menu ul {
	display: flex;
	align-items: center;
	gap: .35rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ks-menu a {
	display: block;
	padding: .55rem .8rem;
	border-radius: var(--ks-promien);
	color: var(--ks-tekst);
	font-weight: 500;
	text-decoration: none;
	white-space: nowrap;
}

.ks-menu a:hover,
.ks-menu a:focus {
	background: var(--ks-tlo);
	color: var(--ks-atrament);
}

.ks-menu .current-menu-item > a,
.ks-menu .current_page_item > a,
.ks-menu .current-menu-parent > a {
	color: var(--ks-akcent-ciemny);
	box-shadow: inset 0 -2px 0 var(--ks-akcent);
	border-radius: 0;
}

.ks-menu__przelacznik {
	display: none;
	align-items: center;
	gap: .5rem;
	padding: .55rem .9rem;
	border: 1px solid var(--ks-linia-mocna);
	border-radius: var(--ks-promien);
	background: #fff;
	color: var(--ks-atrament);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

/* Podmenu — na dużym ekranie rozwijane, na telefonie zawsze widoczne. */
.ks-menu li {
	position: relative;
}

.ks-menu .sub-menu {
	display: none;
	position: absolute;
	min-width: 15rem;
	margin-top: .25rem;
	padding: .35rem;
	background: #fff;
	border: 1px solid var(--ks-linia);
	border-radius: var(--ks-promien);
	box-shadow: var(--ks-cien);
	flex-direction: column;
	align-items: stretch;
}

.ks-menu li:hover > .sub-menu,
.ks-menu li:focus-within > .sub-menu {
	display: flex;
}

@media (max-width: 980px) {
	.ks-menu__przelacznik {
		display: inline-flex;
	}

	.ks-naglowek__telefon span {
		display: none;
	}

	.ks-menu {
		display: none;
		position: absolute;
		left: 0;
		right: 0;
		top: 100%;
		background: #fff;
		border-bottom: 1px solid var(--ks-linia);
		box-shadow: var(--ks-cien);
		padding: .75rem 1.25rem 1.25rem;
	}

	.ks-menu.jest-otwarte {
		display: block;
	}

	.ks-menu ul {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	.ks-menu a {
		padding: .8rem .25rem;
		border-bottom: 1px solid var(--ks-linia);
	}

	.ks-menu .sub-menu {
		display: flex;
		position: static;
		border: 0;
		box-shadow: none;
		padding: 0 0 0 1rem;
		margin: 0;
	}
}

/* =========================================================================
 * 6. Sekcja powitalna
 *
 * Siatka w tle to nawiązanie do papieru milimetrowego i rzutu budynku.
 * Rysowana gradientami, bez pliku graficznego.
 * ====================================================================== */

.ks-hero {
	position: relative;
	overflow: hidden;
	background: var(--ks-grafit);
	color: #e8eef4;
	padding: clamp(3rem, 2rem + 5vw, 5.5rem) 0;
}

.ks-hero::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(126, 220, 170, .09) 1px, transparent 1px),
		linear-gradient(90deg, rgba(126, 220, 170, .09) 1px, transparent 1px),
		linear-gradient(rgba(126, 220, 170, .05) 1px, transparent 1px),
		linear-gradient(90deg, rgba(126, 220, 170, .05) 1px, transparent 1px);
	background-size: 96px 96px, 96px 96px, 24px 24px, 24px 24px;
	mask-image: radial-gradient(circle at 22% 30%, #000 0%, transparent 72%);
	-webkit-mask-image: radial-gradient(circle at 22% 30%, #000 0%, transparent 72%);
	pointer-events: none;
}

.ks-hero__siatka {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
	gap: clamp(2rem, 1rem + 4vw, 4rem);
	align-items: center;
}

.ks-hero h1 {
	color: #fff;
	max-width: 16em;
}

.ks-hero__lead {
	font-size: 1.15rem;
	line-height: 1.6;
	color: #b9c7d4;
	max-width: 36em;
}

.ks-hero__akcje {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
	margin-top: 1.9rem;
}

/* Karta uprawnień — świadomie wygląda jak tabliczka znamionowa. */
.ks-karta-uprawnien {
	background: rgba(255, 255, 255, .05);
	border: 1px solid rgba(255, 255, 255, .14);
	border-radius: var(--ks-promien);
	padding: 1.5rem;
}

.ks-karta-uprawnien__tytul {
	margin: 0 0 1.1rem;
	font-family: 'IBM Plex Mono', ui-monospace, Consolas, monospace;
	font-size: .74rem;
	font-weight: 500;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: #7fdcaa;
}

.ks-karta-uprawnien dl {
	display: grid;
	gap: 0;
	margin: 0;
}

.ks-karta-uprawnien dt {
	font-size: .8rem;
	color: #93a5b6;
	padding-top: .8rem;
	border-top: 1px solid rgba(255, 255, 255, .1);
}

.ks-karta-uprawnien dt:first-child {
	border-top: 0;
	padding-top: 0;
}

.ks-karta-uprawnien dd {
	margin: .1rem 0 .8rem;
	font-family: 'IBM Plex Mono', ui-monospace, Consolas, monospace;
	font-size: .96rem;
	color: #fff;
	word-break: break-word;
}

.ks-karta-uprawnien dd:last-child {
	margin-bottom: 0;
}

.ks-karta-uprawnien a {
	color: #7fdcaa;
}

@media (max-width: 900px) {
	.ks-hero__siatka {
		grid-template-columns: 1fr;
	}
}

/* =========================================================================
 * 7. Baner z przekrojem budynku i pasek faktów
 *
 * Rysunek składa template-parts/ilustracja.php. Wszystkie kolory i grubości
 * kresek siedzą tutaj, nie w SVG — właściwość CSS wygrywa z atrybutem
 * prezentacji SVG, więc poprawki wyglądu nie wymagają ruszania rysunku.
 * ====================================================================== */

.ks-baner svg {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
}

.ks-baner__podpis {
	margin: 1rem 0 0;
	font-size: .88rem;
	line-height: 1.55;
	color: #93a5b6;
}

.ks-baner__siatka line {
	stroke: rgba(126, 220, 170, .13);
	stroke-width: 1;
}

.ks-baner__grunt {
	stroke: rgba(255, 255, 255, .45);
	stroke-width: 2;
}

.ks-baner__kreskowanie line {
	stroke: rgba(255, 255, 255, .22);
	stroke-width: 1.5;
}

.ks-baner__budynek path,
.ks-baner__budynek line {
	fill: rgba(255, 255, 255, .04);
	stroke: #ffffff;
	stroke-width: 2.4;
	stroke-linejoin: round;
}

.ks-baner__budynek line {
	fill: none;
	stroke-width: 1.6;
	stroke-opacity: .5;
}

/* Warstwa ocieplenia — zielona kreska tuż pod obrysem przegrody. */
.ks-baner__ocieplenie path {
	fill: none;
	stroke: var(--ks-akcent);
	stroke-width: 9;
	stroke-opacity: .55;
	stroke-linejoin: round;
}

.ks-baner__okna rect,
.ks-baner__okna path,
.ks-baner__okna circle {
	fill: rgba(126, 220, 170, .16);
	stroke: #7fdcaa;
	stroke-width: 1.8;
}

.ks-baner__okna circle {
	fill: #7fdcaa;
	stroke: none;
}

/* Ucieczka ciepła przez przegrody — bursztyn, bo to strata, nie zysk. */
.ks-baner__cieplo path {
	fill: none;
	stroke: var(--ks-bursztyn);
	stroke-width: 2.2;
	stroke-linecap: round;
	stroke-opacity: .85;
}

.ks-baner__wymiar line {
	stroke: rgba(255, 255, 255, .55);
	stroke-width: 1.4;
}

.ks-baner__wymiar .ks-baner__odnosnik {
	stroke-dasharray: 4 4;
	stroke-opacity: .3;
}

.ks-baner__skala text {
	fill: #0e1720;
	font-family: 'IBM Plex Mono', ui-monospace, Consolas, monospace;
	font-size: 15px;
	font-weight: 500;
}

/* Pasek faktów pod banerem: uprawnienia i obszar działania. To one
   odpowiadają na ciche pytanie „a kto to w ogóle jest". */
.ks-fakty {
	background: var(--ks-atrament);
	border-top: 1px solid rgba(255, 255, 255, .08);
	padding: 1.5rem 0;
}

.ks-fakty__siatka {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1.25rem 2rem;
}

@media (max-width: 900px) {
	.ks-fakty__siatka { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 520px) {
	.ks-fakty__siatka { grid-template-columns: 1fr; }
}

.ks-fakty__etykieta {
	display: block;
	font-size: .78rem;
	line-height: 1.4;
	color: #7e91a2;
	margin-bottom: .3rem;
}

.ks-fakty__wartosc {
	display: block;
	font-family: 'IBM Plex Mono', ui-monospace, Consolas, monospace;
	font-size: .98rem;
	color: #fff;
}

.ks-fakty a {
	color: #7fdcaa;
	font-size: .86rem;
	text-decoration: none;
}

.ks-fakty a:hover,
.ks-fakty a:focus {
	text-decoration: underline;
}

/* =========================================================================
 * 8. Sekcje
 * ====================================================================== */

.ks-sekcja {
	padding: clamp(3rem, 2rem + 3.5vw, 5rem) 0;
}

.ks-sekcja--tlo {
	background: var(--ks-tlo);
	border-top: 1px solid var(--ks-linia);
	border-bottom: 1px solid var(--ks-linia);
}

.ks-sekcja--ciemna {
	background: var(--ks-grafit);
	color: #c8d4de;
}

.ks-sekcja--ciemna h2,
.ks-sekcja--ciemna h3 {
	color: #fff;
}

.ks-sekcja__naglowek {
	max-width: var(--ks-szer-tekst);
	margin-bottom: 2.5rem;
}

.ks-sekcja__naglowek p {
	margin-bottom: 0;
	color: var(--ks-stal);
}

.ks-sekcja--ciemna .ks-sekcja__naglowek p {
	color: #9fb0c0;
}

.ks-siatka {
	display: grid;
	gap: 1.25rem;
}

.ks-siatka--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ks-siatka--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ks-siatka--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 980px) {
	.ks-siatka--3,
	.ks-siatka--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
	.ks-siatka--2,
	.ks-siatka--3,
	.ks-siatka--4 { grid-template-columns: 1fr; }
}

/* =========================================================================
 * 9. Kafle usług
 * ====================================================================== */

.ks-usluga {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--ks-linia);
	border-top: 3px solid var(--ks-akcent);
	border-radius: var(--ks-promien);
	padding: 1.6rem 1.5rem 1.5rem;
	transition: box-shadow .15s ease;
}

.ks-usluga:hover {
	box-shadow: var(--ks-cien);
}

.ks-usluga__numer {
	font-family: 'IBM Plex Mono', ui-monospace, Consolas, monospace;
	font-size: .78rem;
	letter-spacing: .1em;
	color: var(--ks-linia-mocna);
	margin-bottom: .9rem;
}

.ks-usluga__ikona {
	width: 34px;
	height: 34px;
	color: var(--ks-akcent);
	margin-bottom: .9rem;
}

.ks-usluga h3 {
	font-size: 1.15rem;
	margin-bottom: .5rem;
}

.ks-usluga h3 a {
	color: inherit;
	text-decoration: none;
}

.ks-usluga h3 a:hover,
.ks-usluga h3 a:focus {
	color: var(--ks-akcent-ciemny);
}

.ks-usluga p {
	color: var(--ks-stal);
	font-size: .97rem;
	margin-bottom: 1rem;
}

.ks-usluga__wiecej {
	margin-top: auto;
	font-weight: 600;
	font-size: .95rem;
	text-decoration: none;
}

.ks-usluga__wiecej::after {
	content: ' \2192';
}

/* =========================================================================
 * 10. Kroki współpracy
 * ====================================================================== */

.ks-krok {
	position: relative;
	padding: 1.5rem 1.25rem 1.4rem;
	background: #fff;
	border: 1px solid var(--ks-linia);
	border-radius: var(--ks-promien);
}

.ks-krok__numer {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.4rem;
	height: 2.4rem;
	margin-bottom: .9rem;
	border-radius: var(--ks-promien);
	background: var(--ks-akcent-jasny);
	color: var(--ks-akcent-ciemny);
	font-family: 'IBM Plex Mono', ui-monospace, Consolas, monospace;
	font-weight: 500;
}

.ks-krok h3 {
	font-size: 1.05rem;
	margin-bottom: .4rem;
}

.ks-krok p {
	margin: 0;
	color: var(--ks-stal);
	font-size: .96rem;
}

/* =========================================================================
 * 11. Lista atutów, wykaz danych, notka
 * ====================================================================== */

.ks-atuty {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 1.25rem 2rem;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 700px) {
	.ks-atuty { grid-template-columns: 1fr; }
}

.ks-atuty li {
	position: relative;
	padding-left: 2rem;
}

.ks-atuty li::before {
	content: '';
	position: absolute;
	left: 0;
	top: .35em;
	width: 1.15rem;
	height: 1.15rem;
	background: var(--ks-akcent);
	clip-path: polygon(14% 46%, 0 60%, 40% 100%, 100% 22%, 86% 8%, 38% 70%);
}

.ks-sekcja--ciemna .ks-atuty li::before {
	background: #7fdcaa;
}

.ks-atuty strong {
	display: block;
	color: var(--ks-atrament);
}

.ks-sekcja--ciemna .ks-atuty strong {
	color: #fff;
}

/* Arkusz danych, nie ozdobna tabela. */
.ks-wykaz {
	width: 100%;
	border-collapse: collapse;
	font-size: .97rem;
}

.ks-wykaz th,
.ks-wykaz td {
	text-align: left;
	vertical-align: top;
	padding: .85rem 1rem .85rem 0;
	border-bottom: 1px solid var(--ks-linia);
}

.ks-wykaz th {
	width: 34%;
	font-weight: 500;
	color: var(--ks-stal);
}

.ks-wykaz td {
	font-family: 'IBM Plex Mono', ui-monospace, Consolas, monospace;
	color: var(--ks-atrament);
}

.ks-wykaz tr:last-child th,
.ks-wykaz tr:last-child td {
	border-bottom: 0;
}

@media (max-width: 560px) {
	.ks-wykaz,
	.ks-wykaz tbody,
	.ks-wykaz tr,
	.ks-wykaz th,
	.ks-wykaz td {
		display: block;
		width: auto;
	}

	.ks-wykaz th {
		border-bottom: 0;
		padding-bottom: .1rem;
	}
}

.ks-notka {
	border-left: 3px solid var(--ks-bursztyn);
	background: #fdf7ec;
	padding: 1.1rem 1.25rem;
	border-radius: 0 var(--ks-promien) var(--ks-promien) 0;
	margin: 1.75rem 0;
}

.ks-notka p:last-child {
	margin-bottom: 0;
}

.ks-notka__tytul {
	font-family: 'IBM Plex Mono', ui-monospace, Consolas, monospace;
	font-size: .76rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #a06a10;
	margin-bottom: .4rem;
}

/* Pytania i odpowiedzi — te same treści karmią dane strukturalne FAQ. */
.ks-faq {
	border-top: 1px solid var(--ks-linia);
}

.ks-faq details {
	border-bottom: 1px solid var(--ks-linia);
}

.ks-faq summary {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.1rem 0;
	font-weight: 600;
	color: var(--ks-atrament);
	cursor: pointer;
	list-style: none;
}

.ks-faq summary::-webkit-details-marker {
	display: none;
}

.ks-faq summary::after {
	content: '+';
	font-family: 'IBM Plex Mono', ui-monospace, Consolas, monospace;
	color: var(--ks-akcent);
	font-size: 1.25rem;
	line-height: 1.2;
}

.ks-faq details[open] summary::after {
	content: '\2212';
}

.ks-faq__odpowiedz {
	padding-bottom: 1.2rem;
	color: var(--ks-stal);
	max-width: var(--ks-szer-tekst);
}

.ks-faq__odpowiedz p:last-child {
	margin-bottom: 0;
}

/* =========================================================================
 * 12. Karty wpisów (aktualności)
 * ====================================================================== */

.ks-karta {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--ks-linia);
	border-radius: var(--ks-promien);
	overflow: hidden;
}

.ks-karta__foto {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	background: var(--ks-tlo-cieply);
}

.ks-karta__tresc {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 1.35rem 1.4rem 1.4rem;
}

.ks-karta__data {
	font-family: 'IBM Plex Mono', ui-monospace, Consolas, monospace;
	font-size: .78rem;
	letter-spacing: .06em;
	color: var(--ks-stal);
	margin-bottom: .5rem;
}

.ks-karta h3 {
	font-size: 1.12rem;
	margin-bottom: .5rem;
}

.ks-karta h3 a {
	color: inherit;
	text-decoration: none;
}

.ks-karta h3 a:hover,
.ks-karta h3 a:focus {
	color: var(--ks-akcent-ciemny);
}

.ks-karta p {
	color: var(--ks-stal);
	font-size: .96rem;
}

.ks-karta__wiecej {
	margin-top: auto;
	font-weight: 600;
	font-size: .95rem;
	text-decoration: none;
}

.ks-karta__wiecej::after {
	content: ' \2192';
}

/* =========================================================================
 * 13. Wezwanie do kontaktu
 * ====================================================================== */

.ks-cta {
	background: var(--ks-akcent-ciemny);
	color: #fff;
	padding: clamp(2.5rem, 2rem + 2.5vw, 3.75rem) 0;
}

.ks-cta__siatka {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 1.75rem;
}

.ks-cta h2 {
	color: #fff;
	margin-bottom: .35rem;
}

.ks-cta p {
	margin: 0;
	color: #d5f0e1;
	max-width: 38em;
}

.ks-cta__akcje {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
}

.ks-cta .ks-przycisk {
	background: #fff;
	border-color: #fff;
	color: var(--ks-akcent-ciemny);
}

.ks-cta .ks-przycisk:hover,
.ks-cta .ks-przycisk:focus {
	background: var(--ks-atrament);
	border-color: var(--ks-atrament);
	color: #fff;
}

.ks-cta .ks-przycisk--na-ciemnym {
	background: transparent;
	color: #fff;
	border-color: rgba(255, 255, 255, .5);
}

/* =========================================================================
 * 14. Podstrony
 * ====================================================================== */

.ks-naglowek-strony {
	background: var(--ks-tlo);
	border-bottom: 1px solid var(--ks-linia);
	padding: clamp(2.25rem, 1.5rem + 2.5vw, 3.5rem) 0;
}

.ks-naglowek-strony h1 {
	margin-bottom: .35rem;
}

.ks-naglowek-strony p {
	margin: 0;
	color: var(--ks-stal);
	max-width: var(--ks-szer-tekst);
}

.ks-okruszki {
	font-size: .86rem;
	color: var(--ks-stal);
	margin-bottom: .9rem;
}

.ks-okruszki a {
	color: var(--ks-stal);
}

.ks-tresc {
	padding: clamp(2.5rem, 2rem + 2vw, 3.75rem) 0;
}

.ks-tresc__uklad {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 20rem;
	gap: 3rem;
	align-items: start;
}

@media (max-width: 980px) {
	.ks-tresc__uklad {
		grid-template-columns: 1fr;
		gap: 2.25rem;
	}
}

.ks-artykul {
	max-width: 46rem;
}

.ks-artykul h2 {
	margin-top: 2.25rem;
}

.ks-artykul h3 {
	margin-top: 1.75rem;
}

.ks-artykul ul,
.ks-artykul ol {
	padding-left: 1.3rem;
}

.ks-artykul li {
	margin-bottom: .45rem;
}

.ks-artykul img {
	border-radius: var(--ks-promien);
}

.ks-artykul figure {
	margin: 2rem 0;
}

.ks-artykul figcaption {
	font-size: .88rem;
	color: var(--ks-stal);
	margin-top: .5rem;
}

.ks-artykul table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 1.5rem;
	font-size: .96rem;
}

.ks-artykul th,
.ks-artykul td {
	border: 1px solid var(--ks-linia);
	padding: .6rem .75rem;
	text-align: left;
}

.ks-artykul th {
	background: var(--ks-tlo);
}

.ks-artykul blockquote {
	margin: 1.75rem 0;
	padding: .25rem 0 .25rem 1.25rem;
	border-left: 3px solid var(--ks-akcent);
	color: var(--ks-stal);
}

/* Panel boczny */
.ks-panel {
	background: var(--ks-tlo);
	border: 1px solid var(--ks-linia);
	border-radius: var(--ks-promien);
	padding: 1.5rem;
	position: sticky;
	top: 6rem;
}

.ks-panel h2 {
	font-size: 1.05rem;
	margin-bottom: .9rem;
}

.ks-panel ul {
	list-style: none;
	margin: 0 0 1.25rem;
	padding: 0;
	font-size: .96rem;
}

.ks-panel li + li {
	margin-top: .55rem;
}

.ks-panel a {
	text-decoration: none;
}

.ks-panel a:hover,
.ks-panel a:focus {
	text-decoration: underline;
}

/* =========================================================================
 * 15. Kontakt
 * ====================================================================== */

.ks-kontakt__siatka {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
	gap: 3rem;
	align-items: start;
}

@media (max-width: 980px) {
	.ks-kontakt__siatka {
		grid-template-columns: 1fr;
		gap: 2.5rem;
	}
}

.ks-dane {
	list-style: none;
	margin: 0 0 2rem;
	padding: 0;
}

.ks-dane li {
	display: flex;
	gap: .9rem;
	padding: .95rem 0;
	border-bottom: 1px solid var(--ks-linia);
}

.ks-dane li:first-child {
	padding-top: 0;
}

.ks-dane svg {
	width: 20px;
	height: 20px;
	flex: 0 0 20px;
	margin-top: .2rem;
	color: var(--ks-akcent);
}

.ks-dane__etykieta {
	display: block;
	font-size: .8rem;
	color: var(--ks-stal);
}

.ks-dane__wartosc {
	font-weight: 600;
	color: var(--ks-atrament);
	text-decoration: none;
}

.ks-dane a.ks-dane__wartosc:hover {
	color: var(--ks-akcent-ciemny);
}

/* =========================================================================
 * 16. Formularz
 * ====================================================================== */

.ks-formularz {
	background: #fff;
	border: 1px solid var(--ks-linia);
	border-radius: var(--ks-promien);
	padding: clamp(1.5rem, 1rem + 1.5vw, 2.25rem);
	box-shadow: var(--ks-cien);
}

.ks-formularz label {
	display: block;
	margin-bottom: 1.1rem;
	font-size: .92rem;
	font-weight: 500;
	color: var(--ks-atrament);
}

.ks-formularz input[type="text"],
.ks-formularz input[type="email"],
.ks-formularz input[type="tel"],
.ks-formularz select,
.ks-formularz textarea {
	display: block;
	width: 100%;
	margin-top: .4rem;
	padding: .7rem .85rem;
	border: 1px solid var(--ks-linia-mocna);
	border-radius: var(--ks-promien);
	background: #fff;
	color: var(--ks-tekst);
	font: inherit;
	font-size: 1rem;
}

.ks-formularz textarea {
	resize: vertical;
	min-height: 9rem;
}

.ks-formularz input:focus,
.ks-formularz select:focus,
.ks-formularz textarea:focus {
	border-color: var(--ks-akcent);
	outline: 2px solid var(--ks-akcent-jasny);
	outline-offset: 0;
}

.ks-formularz__wiersz {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 1rem;
}

@media (max-width: 560px) {
	.ks-formularz__wiersz {
		grid-template-columns: 1fr;
	}
}

.ks-formularz .wymagane {
	color: #c0392b;
}

.ks-formularz__zgoda {
	display: flex;
	align-items: flex-start;
	gap: .7rem;
	font-weight: 400;
	font-size: .9rem;
	color: var(--ks-stal);
	line-height: 1.5;
}

.ks-formularz__zgoda input {
	margin-top: .25rem;
	width: 1.05rem;
	height: 1.05rem;
	flex: 0 0 1.05rem;
}

/* Pułapka na roboty. Nie display:none — część wypełniaczy pomija pola
   ukryte tą właściwością, a odsunięte poza ekran wypełnia. */
.ks-formularz__pulapka {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.ks-formularz__podpowiedzi {
	background: var(--ks-tlo);
	border: 1px solid var(--ks-linia);
	border-radius: var(--ks-promien);
	padding: 1rem 1.15rem .35rem;
	margin-bottom: 1.15rem;
}

.ks-formularz__podpowiedzi-tytul {
	font-family: 'IBM Plex Mono', ui-monospace, Consolas, monospace;
	font-size: .76rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ks-akcent-ciemny);
	margin-bottom: .5rem;
}

.ks-formularz__podpowiedzi ul {
	margin: 0 0 .75rem;
	padding-left: 1.15rem;
	font-size: .92rem;
	color: var(--ks-stal);
}

.ks-formularz__podpowiedzi li {
	margin-bottom: .3rem;
}

.ks-komunikat {
	padding: 1rem 1.15rem;
	border-radius: var(--ks-promien);
	margin-bottom: 1.25rem;
	font-size: .97rem;
}

.ks-komunikat--ok {
	background: var(--ks-akcent-jasny);
	border-left: 3px solid var(--ks-akcent);
	color: #14603a;
}

.ks-komunikat--blad {
	background: #fdecea;
	border-left: 3px solid #c0392b;
	color: #8c2a1e;
}

/* =========================================================================
 * 17. Stopka
 * ====================================================================== */

.ks-stopka {
	background: var(--ks-atrament);
	color: #a8b8c6;
	padding: 3.25rem 0 1.75rem;
	font-size: .95rem;
}

.ks-stopka__siatka {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr;
	gap: 2.5rem;
	padding-bottom: 2.25rem;
	border-bottom: 1px solid rgba(255, 255, 255, .1);
}

@media (max-width: 860px) {
	.ks-stopka__siatka {
		grid-template-columns: 1fr;
		gap: 1.75rem;
	}
}

.ks-stopka h2 {
	font-size: .8rem;
	font-family: 'IBM Plex Mono', ui-monospace, Consolas, monospace;
	font-weight: 500;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #7fdcaa;
	margin-bottom: .9rem;
}

.ks-stopka p {
	margin-bottom: .6rem;
}

.ks-stopka a {
	color: #d5e0e9;
	text-decoration: none;
}

.ks-stopka a:hover,
.ks-stopka a:focus {
	color: #fff;
	text-decoration: underline;
}

.ks-stopka ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ks-stopka li {
	margin-bottom: .5rem;
}

.ks-stopka__marka {
	display: flex;
	align-items: center;
	gap: .75rem;
	margin-bottom: 1rem;
	color: #fff;
}

.ks-stopka__marka svg {
	width: 34px;
	height: 34px;
	flex: 0 0 34px;
	color: var(--ks-akcent);
}

.ks-stopka__marka strong {
	display: block;
	font-size: 1.05rem;
}

.ks-stopka__dol {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: .75rem;
	padding-top: 1.5rem;
	font-size: .87rem;
	color: #7e91a2;
}

/* =========================================================================
 * 18. Justowanie
 *
 * Tekst ciagly wyrownany do obu marginesow — jak w dokumencie technicznym,
 * ktory ta strona ma przypominac.
 *
 * Dwie rzeczy musza isc razem z justowaniem, inaczej robi ono wiecej szkody
 * niz pozytku:
 *
 * 1. `hyphens: auto` — bez dzielenia wyrazow polszczyzna justuje sie fatalnie.
 *    Slowa sa dlugie („charakterystyki", „konstrukcyjno-budowlanej"), wiec
 *    przegladarka rozpycha odstepy miedzy wyrazami i przez akapit przebiegaja
 *    biale „rzeki". Dzielenie dziala tylko wtedy, gdy dokument ma ustawiony
 *    jezyk — WordPress wypisuje `<html lang="pl-PL">`, wiec warunek jest
 *    spelniony.
 * 2. Twarde spacje po jednoliterowych wyrazach — robi je `ks_typografia()`
 *    w functions.php. Przy justowaniu widac to najmocniej: „w" zostawione
 *    samo na koncu wiersza laduje w rozciagnietym odstepie i rzuca sie
 *    w oczy.
 *
 * Na waskich ekranach justowanie wylaczamy. Przy kilkunastu znakach
 * w wierszu nie da sie go uratowac nawet dzieleniem wyrazow.
 * ====================================================================== */

.ks-artykul p,
.ks-artykul li,
.ks-lead,
.ks-hero__lead,
.ks-baner__podpis,
.ks-sekcja__naglowek p,
.ks-sekcja--ciemna .ks-siatka p,
.ks-krok p,
.ks-atuty li,
.ks-faq__odpowiedz p,
.ks-notka p {
	text-align: justify;
	hyphens: auto;
	-webkit-hyphens: auto;
	text-wrap: pretty;
}

/* Kafle uslug i kart wpisow zostaja wyrownane do lewej. Kolumna ma tam
   okolo 250 px, czyli jakies trzydziesci znakow — justowanie robi z tego
   grzebien odstepow, a zysku zadnego. */
.ks-usluga p,
.ks-karta p {
	text-align: left;
}

@media (max-width: 640px) {
	.ks-artykul p,
	.ks-artykul li,
	.ks-lead,
	.ks-hero__lead,
	.ks-baner__podpis,
	.ks-sekcja__naglowek p,
	.ks-sekcja--ciemna .ks-siatka p,
	.ks-krok p,
	.ks-atuty li,
	.ks-faq__odpowiedz p,
	.ks-notka p {
		text-align: left;
		hyphens: manual;
	}
}

/* =========================================================================
 * 19. Drobiazgi
 * ====================================================================== */

.ks-stronicowanie {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
	margin-top: 2.5rem;
}

.ks-stronicowanie .page-numbers {
	display: inline-block;
	padding: .5rem .85rem;
	border: 1px solid var(--ks-linia);
	border-radius: var(--ks-promien);
	text-decoration: none;
	color: var(--ks-tekst);
}

.ks-stronicowanie .current {
	background: var(--ks-akcent);
	border-color: var(--ks-akcent);
	color: #fff;
}

.ks-szukajka {
	display: flex;
	gap: .5rem;
}

.ks-szukajka input[type="search"] {
	flex: 1;
	padding: .65rem .8rem;
	border: 1px solid var(--ks-linia-mocna);
	border-radius: var(--ks-promien);
	font: inherit;
}

.ks-pusto {
	background: var(--ks-tlo);
	border: 1px dashed var(--ks-linia-mocna);
	border-radius: var(--ks-promien);
	padding: 2rem;
	text-align: center;
	color: var(--ks-stal);
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

.alignleft { float: left; margin: .35rem 1.5rem 1rem 0; }
.alignright { float: right; margin: .35rem 0 1rem 1.5rem; }
.aligncenter { margin-left: auto; margin-right: auto; }

@media print {
	.ks-naglowek,
	.ks-stopka,
	.ks-cta,
	.ks-formularz {
		display: none;
	}
}