/*
 * Chrome serwisu PlanMax — część SKÓRY: pismo nagłówka `mega` i stopki
 * `kolumny`, logo, baner cookies, pasek mobilny, kurtyna przejścia, wiersz
 * „Realizujemy” w stopce. Kolejkowany po skin.css (functions.php, zależność
 * `agency-skin`) i czyta jego tokeny `--pw-*`.
 *
 * Struktura i kolory nagłówka i stopki są w bazie — warianty wybrane w
 * chrome.json: base-theme/css/chrome/header-mega.css i footer-kolumny.css,
 * kolory przez tokeny `--s-chrome-*` z theme.json → custom.chrome (spec
 * docs/superpowers/specs/2026-09-26-chrome-wspolny-design.md §7–§8). Tu
 * zostało:
 *   - pismo (font-*, line-height, letter-spacing, text-transform) reguł
 *     przeniesionych do bazy — pod TYM SAMYM selektorem i w tym samym
 *     @media co w bazie. Pismo to wartość marki (lint noBrandValues,
 *     spec D1), więc arkusz wariantu go nie niesie;
 *   - sekcje, które nie należą do żadnego wariantu: logo (§2), baner cookies
 *     (§6), pasek mobilny `s-mbar` (§7), kurtyna (§8), wiersz „Realizujemy”
 *     `.s-ftr__kind*` (§9, dodatek PlanMax na haku stopki), obrys fokusu
 *     `.s-cookies`/`.s-mbar` (§1) i cele dotyku logo (§11).
 * Numeracja sekcji jak przed przeniesieniem — ta sama w arkuszach wariantów.
 *
 * Źródło każdej wartości: markup `Strona glowna.dc.html` L205–289, L487–548,
 * L670 i blok stylów chrome L120–190, przez analizę
 *   AC = docs/superpowers/specs/2026-09-25-planweb-analiza-chrome-home.md
 * (§2 nagłówek, §3 stopka, §4.1–4.3, §1.5 bloki 2 i 4).
 *
 * Stany przełącza js/site.js klasami `is-*` (lista w nagłówku
 * header-mega.css); tu: .s-cookies.is-shown, .s-mbar.is-shown,
 * .s-curtain.is-leaving / .is-back / .is-reset.
 *
 * Bez important: design pisze stany i media queries z `!` (runtime designu
 * z atrybutów style-hover); tu tę samą kolejność daje kolejność reguł.
 *
 * Odstępstwa od designu (sites/planmax/handoff-map.json → deviations):
 *   - pasek mobilny zamknięty ma `visibility: hidden` z opóźnieniem na czas
 *     wygaszenia (w designie jego linki są osiągalne klawiszem Tab);
 *   - logo ma prostokąt 44 px wysokości; link „Więcej” w banerze cookies ma
 *     cel dotyku 44 px bez zmiany wiersza;
 *   - ≤ 640 px tekst chrome ma co najmniej 14 px (bramka `mobile.textSize`);
 *   - kontrast tekstu stopki ≥ 4,5 : 1 (bramka axe `color-contrast`);
 *   - widoczny `:focus-visible` (design go nie ma).
 */

/* ==========================================================================
 * 1. Wspólne: fokus banera i paska (nagłówek i stopka — w arkuszach wariantów)
 * ========================================================================== */

/* Fokus z klawiatury — kolor linku designu, jak obrys kart i przycisków
   w skin.css §7. */

.s-cookies :focus-visible,
.s-mbar :focus-visible {
	outline: 2px solid var(--pw-link);
	outline-offset: 2px;
}

/* ==========================================================================
 * 2. Logo (SG L207, L491)
 * ========================================================================== */

.s-logo {
	display: flex;
	align-items: center;
	gap: 9px;
	font-weight: 800;
	font-size: 16px;
	letter-spacing: -0.02em;
	color: #fff;
}

.s-logo:hover {
	color: #fff;
}

/* Napis z img/logo.svg (grafiki marki PlanMax) zamiast kwadratu z gradientem
   i nazwy z designu: wysokość dobrana tak, by napis zajmował w wierszu tyle,
   co dawny znak 22 px z tekstem 16 px. */

.s-logo__img {
	display: block;
	flex: none;
	width: auto;
	height: 28px;
}

/* Logo w nagłówku: prostokąt 44 px wysokości (cel dotyku), treść
   wyśrodkowana — w wierszu 64 px wygląda jak w designie (22 px). */

.s-logo.is-header {
	grid-column: 1;
	justify-self: start;
	min-height: 44px;
	transform-origin: left center;
	transition: transform 0.22s var(--pw-ease);
}

.s-logo.is-header:hover {
	transform: scale(1.05) translateY(-1px);
}

.s-logo.is-header:active {
	transform: scale(0.98);
}

/* W stopce wiersz logo ma 22 px jak w designie (dawny znak) — napis jest
   wyższy, a ujemny margines trzyma wysokość wiersza i resztę stopki w miejscu. */

.s-logo.is-footer .s-logo__img {
	height: 26px;
	margin-block: -2px;
}

/* ==========================================================================
 * 3–5. Pismo nagłówka, mega-menu i menu mobilnego (wariant `mega`,
 *      struktura i kolory: base-theme/css/chrome/header-mega.css)
 * ========================================================================== */

.s-hdr {
	font-family: var(--pw-font);
}

.s-hdr__nav {
	font-size: 14px;
	font-weight: 500;
}

.s-hdr__phone {
	font-size: 14px;
	font-weight: 700;
	letter-spacing: -0.01em;
}

.s-hdr__cta-pill {
	font-size: 14px;
	font-weight: 600;
}

.s-mega__label {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

.s-mega__title {
	font-size: 15px;
	font-weight: 700;
}

.s-mega__desc {
	font-size: 13px;
	line-height: 1.45;
}

.s-mega__heading {
	font-size: 17px;
	font-weight: 800;
	letter-spacing: -0.02em;
}

.s-mega__text {
	font-size: 13.5px;
	line-height: 1.55;
}

.s-mega__all {
	font-size: 14.5px;
	font-weight: 700;
}

.s-mega__faq {
	font-size: 14px;
	font-weight: 700;
}

.s-mega__call {
	font-size: 13px;
	line-height: 1.5;
}

.s-mega__tel {
	font-size: 15px;
	font-weight: 700;
}

.s-mnav {
	font-family: var(--pw-font);
}

.s-mnav__sub-btn {
	font-family: inherit;
	font-size: 24px;
	font-weight: 700;
	letter-spacing: -0.03em;
}

.s-mnav__sub-link,
.s-mnav__sub-link:hover {
	font-size: 17px;
	font-weight: 600;
}

.s-mnav__sub-link.is-all,
.s-mnav__sub-link.is-all:hover {
	font-weight: 700;
}

.s-mnav__link,
.s-mnav__link:hover {
	font-size: 24px;
	font-weight: 700;
	letter-spacing: -0.03em;
}

.s-mnav__cta,
.s-mnav__cta:hover {
	font-size: 16.5px;
	font-weight: 700;
}

.s-mnav__contact {
	font-size: 14.5px;
}

.s-mnav__tel,
.s-mnav__tel:hover {
	font-size: 19px;
	font-weight: 700;
}

/* ==========================================================================
 * 6. Baner cookies (AC §4.1)
 * ========================================================================== */

.s-cookies {
	position: fixed;
	left: 16px;
	bottom: 16px;
	z-index: 70;
	display: none;
	width: min(420px, calc(100vw - 32px));
	padding: 22px 22px 20px;
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 24px;
	background: rgba(11, 18, 32, 0.97);
	-webkit-backdrop-filter: saturate(180%) blur(18px);
	backdrop-filter: saturate(180%) blur(18px);
	box-shadow: 0 30px 60px -24px rgba(0, 0, 0, 0.9);
	font-family: var(--pw-font);
}

.s-cookies.is-shown {
	display: block;
}

.s-cookies__title {
	font-size: 15.5px;
	font-weight: 700;
	color: #fff;
}

.s-cookies__text {
	margin: 8px 0 0;
	font-size: 13.5px;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.68);
}

/* „Więcej”: prostokąt 44 px (cel dotyku), ujemny margines pionowy oddaje
   wierszowi jego wysokość — tekst akapitu układa się jak w designie. */

.s-cookies__more,
.s-cookies__more:hover {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	margin: -12px 0;
	font-weight: 600;
	color: var(--pw-link);
}

.s-cookies__actions {
	margin-top: 16px;
	display: flex;
	gap: 8px;
}

.s-cookies__btn {
	flex: 1;
	height: 44px;
	border-radius: 100px;
	border: 1px solid rgba(255, 255, 255, 0.26);
	background: rgba(255, 255, 255, 0.06);
	font-family: inherit;
	font-size: 14px;
	font-weight: 700;
	color: #fff;
	cursor: pointer;
}

.s-cookies__btn:hover {
	background: rgba(255, 255, 255, 0.14);
}

.s-cookies__btn.is-accept {
	border-color: #fff;
	background: #fff;
	color: var(--pw-ink-dark);
}

.s-cookies__btn.is-accept:hover {
	background: #e8f2ff;
}

/* ==========================================================================
 * 7. Pasek mobilny (AC §4.2) — tylko ≤ 900 px, pokazywany przez site.js
 * ========================================================================== */

.s-mbar {
	position: fixed;
	left: 12px;
	right: 12px;
	bottom: 12px;
	z-index: 50;
	display: none;
	gap: 8px;
	padding: 8px;
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 100px;
	background: rgba(11, 18, 32, 0.94);
	-webkit-backdrop-filter: saturate(180%) blur(18px);
	backdrop-filter: saturate(180%) blur(18px);
	box-shadow: 0 20px 40px -18px rgba(0, 0, 0, 0.9);
	font-family: var(--pw-font);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateY(120%);
	transition: transform 0.38s var(--pw-ease), opacity 0.25s ease, visibility 0s linear 0.38s;
}

.s-mbar.is-shown {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: none;
	transition: transform 0.38s var(--pw-ease), opacity 0.25s ease, visibility 0s;
}

.s-mbar__call,
.s-mbar__call:hover {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 48px;
	border-radius: 100px;
	border: 1px solid rgba(255, 255, 255, 0.22);
	font-size: 15px;
	font-weight: 700;
	color: #fff;
}

.s-mbar__cta,
.s-mbar__cta:hover {
	flex: 1.3;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 48px;
	border-radius: 100px;
	background: var(--pw-blue);
	font-size: 15px;
	font-weight: 700;
	color: #fff;
}

/* ==========================================================================
 * 8. Kurtyna przejścia (AC §4.3)
 *
 * Wejście: każda strona wygasza ją z .5 do 0 (ptOpen, skin.css §4). Wyjście:
 * site.js dokłada `is-leaving` po kliknięciu linku wewnętrznego i przechodzi
 * po 90 ms. Kolor = tło strony (#05070c strona główna, #070b13 reszta).
 * ========================================================================== */

.s-curtain {
	position: fixed;
	inset: 0;
	z-index: 300;
	background: var(--pw-bg-page);
	pointer-events: none;
	opacity: 0;
	animation: ptOpen 0.2s ease both;
	transition: opacity 0.09s ease;
}

.s-curtain.is-home {
	background: var(--pw-bg-home);
}

.s-curtain.is-leaving {
	animation: none;
	opacity: 0.5;
}

/* Powrót z bfcache (pageshow.persisted): kurtyna znika bez animacji. */

.s-curtain.is-back {
	animation: none;
}

.s-curtain.is-reset {
	animation: none;
	transition: none;
}

/* ==========================================================================
 * 9. Pismo stopki (wariant `kolumny`, struktura i kolory:
 *    base-theme/css/chrome/footer-kolumny.css) i wiersz „Realizujemy”
 * ========================================================================== */

.s-ftr {
	font-family: var(--pw-font);
}

.s-ftr__about {
	font-size: 14.5px;
	line-height: 1.6;
}

.s-ftr__tel {
	font-size: 19px;
	font-weight: 700;
	letter-spacing: -0.02em;
}

.s-ftr__mail {
	font-size: 15px;
}

.s-ftr__where {
	font-size: 14.5px;
	line-height: 1.55;
}

.s-ftr__summary {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.s-ftr__link {
	font-size: 15px;
}

.s-ftr__disclaimer {
	font-family: var(--pw-font-serif);
	font-style: italic;
	font-size: 12.5px;
	line-height: 1.7;
	letter-spacing: 0.01em;
}

/* Wiersz „Realizujemy:” (Tworzenie L318): design .3 / .34 → .46 / .5 (axe). */

.s-ftr__kinds {
	margin-top: 22px;
	display: flex;
	flex-wrap: wrap;
	gap: 2px 14px;
	font-size: 12px;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.46);
}

.s-ftr__kind {
	color: rgba(255, 255, 255, 0.5);
}

.s-ftr__kind:hover {
	color: rgba(255, 255, 255, 0.6);
}

/* Linia prawna: baza .45 dawała na tle strony głównej (#05070c) 4,47 : 1 —
   tuż pod progiem 4,5 : 1 na każdej stronie; .58 to ok. 6,6 : 1 i wciąż
   wyraźnie ciszej niż linki stopki (.78). */

.s-ftr__legal {
	font-size: 13.5px;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.58);
}

.s-ftr__legal-link {
	font-family: inherit;
	font-size: 13.5px;
}

/* ==========================================================================
 * 10. Punkty załamania chrome (AC §1.5 blok 2 i 3) — pasek mobilny i pismo
 * ========================================================================== */

@media (max-width: 900px) {
	.s-mbar {
		display: flex;
	}
}

@media (max-width: 640px) {
	/* ≥ 14 px na telefonie (bramka mobile.textSize); design 13,5 px. */

	.s-hdr__cta-pill {
		font-size: 14px;
	}

	/* Nagłówek grupy 12 → 14 px (bramka mobile.textSize). */

	.s-ftr__summary {
		font-size: 14px;
	}

	/* Dopisek 12,5 → 14 px, linia prawna i linki 13,5 → 14 px, wiersz
	   „Realizujemy:” 12 → 14 px, tekst banera 13,5 → 14 px (bramka
	   mobile.textSize, próg 14 px na 390 px). */

	.s-ftr__disclaimer,
	.s-ftr__kinds,
	.s-ftr__legal,
	.s-ftr__legal-link,
	.s-cookies__text {
		font-size: 14px;
	}

	/* Interlinia dopisku i linii prawnej ciaśniejsza niż bazowe 1,7 / 1,6 —
	   sam wzrost 12,5→14 / 13,5→14 px dokłada ok. 12 px do wysokości stopki
	   na 390 px (jedna dodatkowa linia dopisku + szersze wiersze copyrightu),
	   choć liczba linii się nie zmienia. Ciaśniejsza interlinia oddaje ten
	   przyrost z powrotem — stopka wraca do wysokości designu, tekst został
	   ≥ 14 px i kontrast bez zmian (color: nie ruszony). */

	.s-ftr__disclaimer {
		line-height: 1.55;
	}

	.s-ftr__legal {
		line-height: 1.45;
	}
}

/* ==========================================================================
 * 11. Cele dotyku (AC §1.5 blok 4, `<style data-mfix>`) — logo i wiersz
 *     „Realizujemy”; linki nagłówka i stopki w arkuszach wariantów.
 * ========================================================================== */

@media (max-width: 1024px), (pointer: coarse) {
	.s-logo {
		position: relative;
	}

	.s-logo::after {
		content: "";
		position: absolute;
		left: 50%;
		top: 50%;
		width: max(100%, 44px);
		height: max(100%, 44px);
		transform: translate(-50%, -50%);
	}
}

@media (max-width: 900px), (pointer: coarse) {
	/* Wiersz „Realizujemy:” (tylko strony z polem planmax_realizujemy):
	   linki w zawijanym rzędzie co 26 px — prostokąt linku 44 px pionowym
	   paddingiem z ujemnym marginesem, rząd się nie przesuwa (Zadanie 10:
	   bramka mobile.tapTargets mierzyła 24 px na Tworzeniu stron). */

	.s-ftr__kind {
		margin: -10.5px 0;
		padding: 10.5px 0;
	}
}