/* Rama serwisu: naglowek, stopka i szerokosci sekcji. Odpowiada czesciom szablonu
   parts/header.html i parts/footer.html oraz sekcjom z bloki/.
   Wartosci przepisane z makiety design/claude-design/home (Main.dc.html).

   Arkusz `style.css` obsluguje ekrany zapisu, platnosci i konta i zostaje nietkniety
   (decyzja z 07.09.2026) - dlatego rama ma wlasny plik, a nie dopisek tam. */

.fa-ramka {
	max-width: 1440px;
	margin-inline: auto;
	padding-inline: clamp(20px, 3vw, 40px);
}

/* ---------- Naglowek ---------- */

.fa-naglowek {
	background: var(--fa-ink-900);
}

/* Pasek gorny: linki drugiego poziomu, telefon, konto, koszyk. Ponizej 1024 px
   znika w calosci - jego pozycje sa w menu pod hamburgerem. */
.fa-pasek-drugi {
	display: none;
	background: var(--fa-ink-950);
	border-bottom: 1px solid var(--fa-line);
	font-size: var(--fa-text-13);
}

@media (min-width: 1024px) {
	.fa-pasek-drugi { display: block; }
}

.fa-pasek-drugi > .fa-ramka {
	display: flex;
	align-items: center;
	gap: clamp(16px, 2vw, 28px);
	min-height: 40px;
}

.fa-pasek-drugi a {
	color: var(--fa-text-muted);
	padding-block: 10px;
	text-decoration: none;
}

.fa-pasek-drugi a:hover { color: var(--fa-text-primary); }

.fa-pasek-drugi__prawa {
	display: flex;
	align-items: center;
	gap: 20px;
}

.fa-telefon {
	font-family: var(--fa-font-display);
	font-weight: 700;
	font-size: var(--fa-text-15);
	letter-spacing: 0.06em;
	color: var(--fa-text-bright) !important;
}

.fa-telefon:hover { color: var(--fa-orange-400) !important; }

/* Pasek glowny: sticky, bo z niego wychodzi jedyne CTA na dlugich podstronach. */
.fa-pasek-glowny {
	position: relative;
	background: rgb(20 20 22 / 0.94);
	backdrop-filter: blur(8px);
	border-bottom: 1px solid var(--fa-line);
}

.fa-pasek-glowny > .fa-ramka {
	display: flex;
	align-items: center;
	gap: clamp(24px, 3vw, 48px);
	min-height: 86px;
}

.fa-marka {
	display: flex;
	align-items: center;
	gap: 12px;
	flex: none;
	text-decoration: none;
}

.fa-marka img { height: 32px; width: auto; display: block; }

/* Trzy wejscia biznesowe. Aktywne dostaje pomaranczowa podkladke zamiast zmiany
   koloru tekstu - sam kolor nie wystarcza (design-system.md: daltonizm). */
.fa-menu--glowne a {
	font-family: var(--fa-font-display);
	font-weight: 700;
	font-size: 17px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--fa-text-bright);
	border-bottom: 3px solid transparent;
	padding: 0 2px;
	text-decoration: none;
}

.fa-menu--glowne a:hover { color: var(--fa-text-primary); }

.fa-menu--glowne .jest-aktywna a {
	color: var(--fa-text-primary);
	border-bottom-color: var(--fa-orange-500);
}

.fa-cta {
	flex: none;
	background: var(--fa-orange-500);
	color: var(--fa-text-on-accent) !important;
	font-family: var(--fa-font-display);
	font-weight: 800;
	font-size: var(--fa-text-16);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 15px 26px;
	white-space: nowrap;
	text-decoration: none;
	border-radius: 0;
	transition: background 160ms ease;
}

.fa-cta:hover { background: var(--fa-orange-400); }

/* ---------- Stopka ---------- */

.fa-stopka {
	background: var(--fa-ink-900);
	border-top: 1px solid var(--fa-line-strong);
	padding: clamp(48px, 6vw, 80px) clamp(24px, 4vw, 40px) 0;
	font-size: var(--fa-text-15);
}

.fa-stopka__srodek { max-width: 1360px; margin-inline: auto; }

.fa-stopka__gora {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(36px, 5vw, 88px);
	align-items: start;
}

@media (min-width: 900px) {
	.fa-stopka__gora { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
}

.fa-stopka a { color: var(--fa-text-secondary); text-decoration: none; }
.fa-stopka a:hover { color: var(--fa-orange-500); }

.fa-stopka p { color: var(--fa-text-secondary); line-height: 1.7; margin: 0; }

.fa-stopka__opis { max-width: 46ch; margin-bottom: 30px !important; }

.fa-stopka__etykieta {
	font-family: var(--fa-font-display);
	font-weight: 700;
	font-size: var(--fa-text-13);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--fa-text-secondary) !important;
	margin-bottom: 8px !important;
}

.fa-stopka__telefon {
	font-family: var(--fa-font-display);
	font-weight: 800;
	font-size: clamp(28px, 2.6vw, 38px);
	letter-spacing: 0.03em;
	color: var(--fa-text-primary) !important;
}

.fa-stopka__telefon:hover { color: var(--fa-orange-400) !important; }

.fa-stopka__linki {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: clamp(28px, 3vw, 48px);
}

.fa-stopka__naglowek {
	font-family: var(--fa-font-display);
	font-weight: 700;
	font-size: var(--fa-text-13);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--fa-text-primary);
	margin: 0 0 14px;
}

.fa-stopka__pas {
	margin-top: clamp(32px, 3.6vw, 48px);
	padding-top: clamp(20px, 2.4vw, 28px);
	border-top: 1px solid var(--fa-line);
}

.fa-stopka__dol {
	margin-top: clamp(20px, 2.4vw, 28px);
	padding: clamp(20px, 2.4vw, 26px) 0 clamp(28px, 3vw, 36px);
	border-top: 1px solid var(--fa-line);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px 32px;
	font-size: var(--fa-text-13);
}

.fa-stopka__dol p { color: var(--fa-text-muted); font-size: var(--fa-text-13); }


/* Focus widoczny jest warunkiem odbioru (audyt, etap 4). */
.fa-naglowek a:focus-visible,
.fa-naglowek button:focus-visible,
.fa-stopka a:focus-visible {
	outline: 2px solid var(--fa-focus);
	outline-offset: 3px;
}

/* ---------- Menu (blok fa/menu) ---------- */

.fa-menu ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
}

.fa-menu li { margin: 0; }

.fa-menu--drugi ul { gap: clamp(16px, 2vw, 28px); }

.fa-menu--glowne ul {
	gap: clamp(20px, 2.4vw, 36px);
	align-self: stretch;
	align-items: stretch;
}

.fa-menu--glowne li { display: flex; align-items: center; }

.fa-menu--stopka ul { flex-direction: column; align-items: flex-start; }
.fa-menu--stopka a { display: block; padding-block: 9px; }

.fa-menu--prawne ul { flex-wrap: wrap; gap: 12px 24px; }
.fa-menu--prawne a { padding-block: 8px; }


/* ---------- Rzeczy, ktore dokladaja bloki ---------- */

/* Grupy z uklada `flow` dostaja od WordPressa pionowy margines miedzy dziecmi.
   W paskach i wierszach stopki uklad robi flex/grid, wiec ten margines tylko psuje rytm. */
.fa-ramka > *,
.fa-pasek-drugi__prawa > *,
.fa-stopka__adres > *,
.fa-stopka__dol > *,
.fa-marka > * {
	margin-block: 0;
}


.fa-stopka__wizytowka > * { margin-block: 0 20px; }
.fa-stopka__wizytowka > :last-child { margin-block-end: 0; }

.fa-stopka__adres { gap: 12px 32px; align-items: center; margin-block: 26px !important; }
.fa-stopka__adres a { padding-block: 10px; }

.fa-stopka__miasta { display: flex; flex-wrap: wrap; gap: 4px 20px; font-size: var(--fa-text-15); }

.fa-stopka__ikony.wp-block-social-links { gap: 10px; margin: 0; }

.fa-stopka__ikony .wp-block-social-link {
	border-radius: 0;
	width: 44px;
	height: 44px;
	border: 1px solid var(--fa-line-strong);
	padding: 0;
	background: none;
	display: flex;
	align-items: center;
	justify-content: center;
}

.fa-stopka__ikony .wp-block-social-link:hover {
	background: rgb(255 255 255 / 0.08);
	border-color: var(--fa-line-ghost-hover);
	transform: none;
}

.fa-stopka__ikony .wp-block-social-link-anchor { padding: 0; color: var(--fa-text-secondary); }
.fa-stopka__ikony .wp-block-social-link-anchor:hover { color: var(--fa-text-primary); }
.fa-stopka__ikony svg { width: 18px; height: 18px; }

/* ---------- Tresc widoku ---------- */

.fa-tresc {
	padding-block: clamp(48px, 6vw, 96px);
}

.fa-tresc > .wp-block-post-title {
	font-family: var(--fa-font-display);
	font-weight: 800;
	font-size: clamp(2.5rem, 5vw, 4.5rem);
	line-height: 1.02;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	margin: 0 0 var(--fa-space-8);
}

.fa-naglowek > *,
.fa-pasek-drugi > *,
.fa-pasek-glowny > *,
.fa-stopka > *,
.fa-stopka__gora > *,
.fa-stopka__linki > *,
.fa-stopka__pas > *,
.fa-tresc > .wp-block-post-content > :first-child {
	margin-block-start: 0;
}

.fa-koszyk { display: flex; align-items: center; padding-block: 8px; }

/* Napis „Fabryka Atletow" jest wypalony w samym pliku logo, wiec w pasku nie ma obok
   niego osobnego tekstu. W pasku liczy sie wysokosc, szerokosc idzie za nia. */
.fa-marka .wp-block-site-logo img { height: 62px; width: auto; }
.fa-marka .wp-block-site-logo { line-height: 0; }

/* Tresc dostaje ten sam margines boczny co paski. Nie idzie przez `styles.spacing.padding`
   w theme.json, bo root padding dolozylby sie takze naglowkowi i stopce, ktore maja
   wlasna ramke. */
.fa-tresc { padding-inline: clamp(20px, 3vw, 40px); }

@media (max-width: 640px) {
	/* Napis marki zjada przy 390 px cala szerokosc paska i wypycha CTA do drugiego rzedu. */
	.fa-marka { gap: 8px; }
	.fa-marka .wp-block-site-logo img { height: 26px; }
	.fa-cta { padding: 11px 14px; font-size: var(--fa-text-13); letter-spacing: 0.06em; }
	.fa-pasek-glowny > .fa-ramka { gap: 12px; }
}

/* ---------- Dopchniecie do prawej ---------- */

/* WordPress wystawia dla grup z ukladem flex regule `.wp-container-... > * { margin: 0 }`
   i drukuje ja PO arkuszu motywu. Zwykle `margin-left: auto` na dziecku takiej grupy
   przegrywa remis specyficznosci i przestaje dzialac, przez co prawa strona paska i CTA
   siadaly zaraz obok menu zamiast przy krawedzi. Selektor z rodzicem podnosi
   specyficznosc do 0,2,0 i wygrywa bez !important. */
.fa-ramka > .fa-pasek-drugi__prawa,
.fa-ramka > .fa-cta-slot { margin-left: auto; }

.fa-stopka__dol > .fa-menu--prawne { margin-left: auto; }

/* ---------- Menu pod hamburgerem ---------- */

.fa-mobil { display: none; position: static; }

.fa-mobil__przycisk {
	width: 46px;
	height: 46px;
	border: 1px solid rgb(255 255 255 / 0.18);
	color: var(--fa-text-primary);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	list-style: none;
}

.fa-mobil__przycisk::-webkit-details-marker { display: none; }

/* Trzy kreski z jednego pudelka: srodkowa to tlo, skrajne to pseudoelementy. */
.fa-mobil__kreski,
.fa-mobil__kreski::before,
.fa-mobil__kreski::after {
	display: block;
	width: 20px;
	height: 2px;
	background: currentColor;
}

.fa-mobil__kreski { position: relative; }

.fa-mobil__kreski::before,
.fa-mobil__kreski::after {
	content: "";
	position: absolute;
	left: 0;
}

.fa-mobil__kreski::before { top: -7px; }
.fa-mobil__kreski::after { top: 7px; }

/* Po otwarciu kreski skladaja sie w krzyzyk, zeby ten sam przycisk czytelnie zamykal. */
.fa-mobil[open] .fa-mobil__kreski { background: transparent; }
.fa-mobil[open] .fa-mobil__kreski::before { top: 0; transform: rotate(45deg); }
.fa-mobil[open] .fa-mobil__kreski::after { top: 0; transform: rotate(-45deg); }

.fa-mobil__panel {
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	background: #141416;
	border-top: 1px solid var(--fa-line);
	border-bottom: 1px solid var(--fa-line);
	padding: 12px clamp(20px, 3vw, 40px) 24px;
	max-height: calc(100dvh - 76px);
	overflow-y: auto;
}

.fa-mobil__panel ul { list-style: none; margin: 0; padding: 0; }

.fa-mobil__glowne a {
	display: block;
	font-family: var(--fa-font-display);
	font-weight: 800;
	font-size: var(--fa-text-24);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--fa-text-primary);
	padding: 15px 0;
	border-bottom: 1px solid var(--fa-line);
	text-decoration: none;
}

.fa-mobil__glowne .jest-aktywna a { color: var(--fa-orange-500); }

.fa-mobil__drugi {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 24px;
	padding-top: 16px;
}

.fa-mobil__drugi a,
.fa-mobil__konto a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: var(--fa-text-15);
	color: var(--fa-text-secondary);
	padding: 12px 0;
	text-decoration: none;
}

.fa-mobil__drugi a:hover,
.fa-mobil__konto a:hover { color: var(--fa-orange-500); }

.fa-mobil__konto { display: flex; flex-wrap: wrap; gap: 4px 24px; }

/* Ponizej 1024 px gorny pasek nie wchodzi, a w dolnym zostaje logo, CTA i hamburger.
   Trzy sciezki wracaja razem z reszta pozycji do panelu, bo bez tego strony drugiego
   poziomu (cennik, lokalizacje, kontakt) nie mialy na telefonie zadnego wejscia. */
@media (max-width: 1023px) {
	.fa-mobil { display: block; }
	.fa-menu--glowne { display: none; }
	.fa-pasek-glowny > .fa-ramka { gap: 12px; }
	.fa-ramka > .fa-cta-slot { margin-left: auto; }
}

/* ---------- Ikony spolecznosciowe w stopce ---------- */

/* Kotwica z core ma wlasna wysokosc i nie wypelnia kwadratu, wiec ikona siadala przy
   gornej krawedzi. Rozciagamy ja na cale pudelko i centrujemy w niej sam znak.
   Rozmiar ikony wymaga selektora o wyzszej specyficznosci niz `.wp-block-social-link svg`
   z arkusza bloku. */
.fa-stopka__ikony .wp-block-social-link .wp-block-social-link-anchor {
	width: 100%;
	height: 100%;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--fa-text-secondary);
}

.fa-stopka__ikony .wp-block-social-link .wp-block-social-link-anchor:hover { color: var(--fa-text-primary); }

.fa-stopka__ikony .wp-block-social-link svg { width: 18px; height: 18px; display: block; }

/* Ponizej 560 px pasek nie miesci sygnetu, napisu marki, CTA i hamburgera naraz:
   samo CTA i przycisk menu zjadaja 200 z 335 px dostepnych. Napis wypada, sygnet zostaje.
   Bez tego strona przewijala sie w bok o 36 px. */

.fa-marka { min-width: 0; }

/* ---------- Przyklejony naglowek ---------- */

/* `position: sticky` dziala tylko w obrebie pudelka rodzica, a `.fa-naglowek` ma 121 px
   wysokosci, wiec pasek glowny odklejal sie po 44 px przewijania. Sticky idzie wiec
   na sama czesc szablonu, ktorej rodzicem jest `.wp-site-blocks` obejmujacy cala strone.

   `top` z ujemna wartoscia wysokosci gornego paska sprawia, ze przy przewijaniu gorny
   pasek wyjezdza poza ekran, a dolny przykleja sie do krawedzi. Tak jest w makiecie
   i tak odzyskujemy 44 px na laptopie, nie dokladajac ani linii JavaScriptu. */
:root { --fa-pasek-drugi-h: 44px; }

header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 50;
}

@media (min-width: 1024px) {
	header.wp-block-template-part { top: calc(-1 * var(--fa-pasek-drugi-h)); }
}

/* Wysokosc na sztywno i razem z obrysem (box-sizing: border-box), bo od niej zalezy
   przesuniecie sticky: przy roznicy jednego piksela nad paskiem zostaje kreska. */
.fa-pasek-drugi { height: var(--fa-pasek-drugi-h); }
.fa-pasek-drugi > .fa-ramka { min-height: 100%; }

/* Kotwice w tresci maja zatrzymywac sie pod przyklejonym paskiem, nie za nim. */
html { scroll-padding-top: 90px; }

/* ---------- Wjazd sekcji ---------- */

/* Ruch jest wylacznie wprowadzajacy: 14 px w gore i zanik. Bez przesuwania w bok,
   bez skalowania i bez parallaxu - design-system.md mowi, ze glebie na ciemnym tle
   robi roznica jasnosci, nie efekt.

   Stan poczatkowy ustawia JavaScript (klasa `fa-wjazd--gotowy`), a nie sam arkusz.
   Bez skryptu tresc jest po prostu widoczna, zamiast zostac przezroczysta na zawsze. */
.fa-wjazd--gotowy .fa-wjazd {
	opacity: 0;
	transform: translateY(14px);
}

.fa-wjazd {
	transition:
		opacity 520ms cubic-bezier(0.2, 0.7, 0.3, 1),
		transform 520ms cubic-bezier(0.2, 0.7, 0.3, 1);
	transition-delay: calc(var(--fa-stagger, 0) * 90ms);
}

.fa-wjazd.jest-widoczna {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.fa-wjazd--gotowy .fa-wjazd,
	.fa-wjazd { opacity: 1; transform: none; transition: none; }
}

/* Naglowek chowa sie przy przewijaniu w dol i wraca przy przewijaniu w gore. Klase
   dokłada `assets/js/naglowek.js`, bo kierunku przewijania nie widac z poziomu CSS. */
header.wp-block-template-part {
	transition: transform 260ms cubic-bezier(0.2, 0.7, 0.3, 1);
	will-change: transform;
}

header.wp-block-template-part.jest-schowany { transform: translateY(-100%); }

@media (prefers-reduced-motion: reduce) {
	header.wp-block-template-part { transition: none; }
	header.wp-block-template-part.jest-schowany { transform: none; }
}

/* W stopce logo stoi nad opisem, wiec moze byc wieksze niz w pasku. */
.fa-stopka .fa-marka .wp-block-site-logo img { height: 78px; }

@media (max-width: 560px) {
	.fa-marka .wp-block-site-logo img { height: 48px; }
	.fa-pasek-glowny > .fa-ramka { min-height: 72px; }
}